Web development at Live: Frontend Software Intro + Trade-offs, React, Angular
-
Upload
amy-hua -
Category
Technology
-
view
474 -
download
0
Transcript of Web development at Live: Frontend Software Intro + Trade-offs, React, Angular
![Page 1: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/1.jpg)
Web Development @ LiveJan 22 2016Amy Hua
![Page 2: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/2.jpg)
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)?
![Page 3: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/3.jpg)
Responsible for a website’s user-facing code (what you see) and user experience architecture.
Front end development
![Page 4: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/4.jpg)
User-facing end components
Content
Appearance
Behavior
Front end development
![Page 5: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/5.jpg)
Languages
HTML Markup Content <p>Hi</p>
CSS Styles Appearance p { color: red; }
Javascript Behavior
document.getElementsByTagName('p')
Front end development
![Page 6: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/6.jpg)
Front end developmentda dom dom DOM (Document Object Model)
![Page 7: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/7.jpg)
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
![Page 8: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/8.jpg)
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
![Page 9: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/9.jpg)
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
![Page 10: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/10.jpg)
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
![Page 11: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/11.jpg)
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
![Page 12: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/12.jpg)
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)?
![Page 13: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/13.jpg)
Development SpeedStability
![Page 14: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/14.jpg)
Rich Feature SetPerformance
![Page 15: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/15.jpg)
UniqueStock
![Page 16: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/16.jpg)
Bleeding Edge FeaturesBrowser Support
caniuse.com
![Page 17: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/17.jpg)
PerformanceEase of Development
![Page 18: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/18.jpg)
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)?
![Page 19: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/19.jpg)
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
![Page 20: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/20.jpg)
React
![Page 21: Web development at Live: Frontend Software Intro + Trade-offs, React, Angular](https://reader036.fdocuments.in/reader036/viewer/2022062900/58d127971a28abe3298b47b1/html5/thumbnails/21.jpg)
Learn
CodeSchool.com
CodeAcademy.com
edX | Harvard CS50