Web development at Live: Frontend Software Intro + Trade-offs, React, Angular
Download as PPTX, PDF0 likes930 views
The document discusses frontend software development, detailing the responsibilities, engineering trade-offs, and the evolution of frameworks like React and Angular. It emphasizes the increasing demands of user experience, including speed and simplicity, while also exploring the key features and differences between React and Angular. The text highlights the rapid changes in web development and the role of open-source components in addressing these challenges.
Web development at Live: Frontend Software Intro + Trade-offs, React, Angular
- 1. Web Development @ Live Jan 22 2016 Amy Hua
- 2. 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)?
- 3. Responsible for a website’s user-facing code (what you see) and user experience architecture. Front end development
- 4. User-facing end components Content Appearance Behavior Front end development
- 5. Languages HTML Markup Content <p>Hi</p> CSS Styles Appearance p { color: red; } Javascript Behavior document.getElementsByTagName('p') Front end development
- 6. Front end development da dom dom DOM (Document Object Model)
- 7. Charged with normalizing the user experience across user differences. Development has to account for differences across: browsers devices screen sizes and orientations resolutions zoom levels Front end development July 2014 SitePoint
- 8. 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.comarchive.org
- 9. 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
- 10. 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
- 11. 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
- 12. 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)?
- 15. Unique Stock
- 16. Bleeding Edge Features Browser Support caniuse.com
- 18. 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)?
- 19. React Library 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”) 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 Frontend Frameworks
- 20. React
Editor's Notes
- #9: Ever changing field
- #10: Ever changing field
- #11: Ever changing field
- #12: Ever changing field
- #14: Test
- #16: Open Source: maintained by more than just your team, community-backed debugging, but maybe your websie looks like everyone else’s (Bootstrap)
- #17: Bleeding edge features
- #18: Bleeding edge features