Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web development at Live: Frontend Software Intro + Trade-offs, React, Angular

711 views

Published on

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)?

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web development at Live: Frontend Software Intro + Trade-offs, React, Angular

  1. 1. Web Development @ Live Jan 22 2016 Amy Hua
  2. 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. 3. Responsible for a website’s user-facing code (what you see) and user experience architecture. Front end development
  4. 4. User-facing end components Content Appearance Behavior Front end development
  5. 5. Languages HTML Markup Content <p>Hi</p> CSS Styles Appearance p { color: red; } Javascript Behavior document.getElementsByTagName('p') Front end development
  6. 6. Front end development da dom dom DOM (Document Object Model)
  7. 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. 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. 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. 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. 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. 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)?
  13. 13. Development Speed Stability
  14. 14. Rich Feature Set Performance
  15. 15. Unique Stock
  16. 16. Bleeding Edge Features Browser Support caniuse.com
  17. 17. Performance Ease of Development
  18. 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. 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. 20. React
  21. 21. Learn CodeSchool.com CodeAcademy.com edX | Harvard CS50

×