Web development at Live: Frontend Software Intro + Trade-offs, React, Angular
•Download as PPTX, PDF•
0 likes•919 views
A beginner-friendly engineering talk I gave at my startup Live (Calendre) to help non-frontend developers get familiar with frontend software 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)?
Report
Share
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
- Ever changing field
- Ever changing field
- Ever changing field
- Ever changing field
- Test
- Open Source: maintained by more than just your team, community-backed debugging, but maybe your websie looks like everyone else’s (Bootstrap)
- Bleeding edge features
- Bleeding edge features