web development at live: frontend software intro + trade-offs, react, angular

Web Development @ LiveJan 22 2016Amy Hua

What does frontend software development involve?

What engineering trade-offs do we face?

What is React? What is Angular?

What are the strengths and weaknesses of using React (over Angular)?

Responsible for a website’s user-facing code (what you see) and user experience architecture.

Front end development

User-facing end components

Content

Appearance

Behavior

Front end development

Languages

HTML Markup Content <p>Hi</p>

CSS Styles Appearance p { color: red; }

Javascript Behavior

document.getElementsByTagName('p')

Front end development

Front end developmentda dom dom DOM (Document Object Model)

Charged with normalizing the user experience across user differences.

Development has to account for differences across:

browsersdevicesscreen sizes and orientationsresolutionszoom levels

Front end development

July 2014

SitePoint

The powers and demands of the user experience are always increasing (quickly).

Users expect the experience to be Instantaneous < 150 milliseconds

Robust “this should just work”

Rich

Front end development

chromeexperiments.com

archive.org

Open source community has exploded with plug-n-play components and frameworks to ease the demands of rapid and sophisticated web development

Front end development

No right way

Rapidly changing

Trends come and go

The powers and demands of the user experience are always increasing (quickly).

Users expect the experience to be simple, fast, and easy

To developers

Front end development

The powers and demands of the user experience are always increasing (quickly).

Users expect the experience to be simple, fast, and easy

To users

Front end development

What does frontend software development involve?

What engineering trade-offs do we face?

What is React? What is Angular?

What are the strengths and weaknesses of using React (over Angular)?

Development SpeedStability

Rich Feature SetPerformance

UniqueStock

Bleeding Edge FeaturesBrowser Support

caniuse.com

PerformanceEase of Development

What does frontend software development involve?

What engineering trade-offs do we face?

What is React? What is Angular?

What are the strengths and weaknesses of using React (over Angular)?

ReactLibrary for producing HTML. Provides the “view” layer.

Early (~1 year)

1-way data binding (with flux)

Custom modules for reusable components

Unopinionated about how you manage your data

View is updated ONCE through a diff of the Document model (“reconciliation”)

Backed by Facebook

Angular (1.x)Library for managing frontend data models and controllers and the view layer.

Fairly mature (~3 years) and well-adopted

Two-way data bindings

Custom modules for reusable components

View is updated via data digest cycles, listening on data bindings

Angular 2.x is a complete rewrite

Backed by Google

Frontend Frameworks

React

Learn

CodeSchool.com

CodeAcademy.com

edX | Harvard CS50