web development at live: frontend software intro + trade-offs, react, angular
TRANSCRIPT
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