Comparing Javascript Frameworks

Over the last couple of years, JavaScript has become on the of the most popular programming languages. As a result, there has been a large number of JavaScript frameworks and libraries that have been created. I will walk you through a simple todo application using Angular, React and Vue.

Transcript

1. Choosing a JavaScript Framework Jennifer Bland
2. 2 Who Am I? www.jenniferbland.com @ratracegrad www.youtube.com/c/JenniferBland jennifer@jenniferbland.com github.com/ratracegrad
3. 3 answer at end of presentation Three Truths One Lie I asked Prince Charles for his autograph at a UGA football game I attended Prince Phillips birthday party at Edinburgh Castle I attended Easter mass at Windsor Castle with Queen Elizabeth I attended St Johns College Oxford University with Prince Andrew
4. Get the Code 4 github.com/ratracegrad/choosing-a-javascript-framework
5. Todo Applications 5 demo applications
6. WHAT I WILL NOT COVER and what I will
7. TERMINOLOGY 7 • MVC PaNern
8. TERMINOLOGY 8 • Framework vs Library
9. ANGULAR
10. ANGULAR 10 • IniVally released in October 2010 as AngularJS • Angular 2 was released in May 2016 • New versions are updated every 6 months (May & October) • It is a framework • Supported and maintained by Google
11. ANGULAR 11 • Use Typescript • Built in support for mobile applicaVon development
12. ANGULAR Functionality 12 • Component based architecture • Two way data binding • Dependency InjecVon • Services and DirecVves • Angular CLI
13. ANGULAR PROS 13 • Component based architecture • Unit-test friendly • Maintainability • Typescript • Plaaorm agnosVc philosophy • Google LTS • Provides complete MVC • Angular CLI
14. ANGULAR CONS 14 • Animosity in community from AngularJS to Angular • Complex • Steep learning curve • Slower DOM interacVon
15. ANGULAR USED BY 15 • Google • Forbes • weather.com • healthcare.gov • PayPal • Nike • HBO • General Motors • Sony
16. ANGULAR 16 DEMOSTRATION
17. REACT
18. REACT 18 • IniVally released in March 2013 • New versions are updated annually • It is a library • Supported and maintained by Facebook
19. REACT 19 • Provides just the V in MVC • AgnosVc to your data layer • Implements a Virtual DOM • Uses JSX
20. REACT Functionality 20 • Component based architecture • Props • State
21. REACT PROS 21 • Zero ConfiguraVon • Virtual DOM • Components • One way data binding
22. REACT CONS 22 • Lack of tests • Have to use other products to create full applicaVon • MulVple ways of creaVng React applicaVon • Have to use React NaVve for hybrid mobile applicaVons • Poor documentaVon • No templates
23. REACT USED BY 23 • Facebook • AirBnb • Uber • NetFlix • TwiNer • Pinterest • Stripe • Walmart
24. REACT 24 DEMOSTRATION
25. VUE
26. VUE 26 • IniVally released in February 2014 • New versions are updated whenever • It is a framework • Not backed by a major company
27. VUE 27 • Provides just the V in MVC • AgnosVc to your data layer • Implements a Virtual DOM • Uses JSX
28. VUE Functionality 28 • Templates • Data-binding expressions • DirecVves
29. VUE PROS 29 • Ease of understanding and development • Small size - fast • Simple integraVon • Great documentaVon • Templates
30. VUE CONS 30 • Scaling an applicaVon • Small ecosystem • No cross-plaaorm mobile
31. VUE USED BY 31 • Alibaba • Baidu • Expedia • Nintendo • Gitlab
32. VUE 32 DEMOSTRATION
33. Conclusion
34. GUIDELINES 34 • Learning Curve • Framework vs Library • Scaling • Mobile needed? • Stability • Community support
35. 35 Additional Resources www.codeprep.io www.in5days.tech www.youtube.com/c/jenniferbland
36. 36 answer at end of presentation Three Truths One Lie I asked Prince Charles for his autograph at a UGA football game I attended Prince Phillips birthday party at Edinburgh Castle I attended Easter mass at Windsor Castle with Queen Elizabeth I attended St Johns College Oxford University with Prince Andrew
37. 37 Who Am I? www.jenniferbland.com @ratracegrad www.youtube.com/c/JenniferBland jennifer@jenniferbland.com github.com/ratracegrad