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
   

   View Slide

2. 2
   Who Am I?
   www.jenniferbland.com
   @ratracegrad
   www.youtube.com/c/JenniferBland
   jennifer@jenniferbland.com
   github.com/ratracegrad
   

   View Slide

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
   

   View Slide

4. Get the Code 4
   github.com/ratracegrad/choosing-a-javascript-framework
   

   View Slide

5. Todo Applications 5
   demo applications
   

   View Slide

6. WHAT I WILL NOT COVER
   and what I will
   

   View Slide

7. TERMINOLOGY 7
   • MVC PaNern
   

   View Slide

8. TERMINOLOGY 8
   • Framework vs Library
   

   View Slide

9. ANGULAR
   

   View Slide

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
    

    View Slide

11. ANGULAR 11
    • Use Typescript
    • Built in support for mobile applicaVon development
    

    View Slide

12. ANGULAR Functionality 12
    • Component based architecture
    • Two way data binding
    • Dependency InjecVon
    • Services and DirecVves
    • Angular CLI
    

    View Slide

13. ANGULAR PROS 13
    • Component based architecture
    • Unit-test friendly
    • Maintainability
    • Typescript
    • Plaaorm agnosVc philosophy
    • Google LTS
    • Provides complete MVC
    • Angular CLI
    

    View Slide

14. ANGULAR CONS 14
    • Animosity in community from AngularJS to Angular
    • Complex
    • Steep learning curve
    • Slower DOM interacVon
    

    View Slide

15. ANGULAR USED BY 15
    • Google
    • Forbes
    • weather.com
    • healthcare.gov
    • PayPal
    • Nike
    • HBO
    • General Motors
    • Sony
    

    View Slide

16. ANGULAR 16
    DEMOSTRATION
    

    View Slide

17. REACT
    

    View Slide

18. REACT 18
    • IniVally released in March 2013
    • New versions are updated annually
    • It is a library
    • Supported and maintained by Facebook
    

    View Slide

19. REACT 19
    • Provides just the V in MVC
    • AgnosVc to your data layer
    • Implements a Virtual DOM
    • Uses JSX
    

    View Slide

20. REACT Functionality 20
    • Component based architecture
    • Props
    • State
    

    View Slide

21. REACT PROS 21
    • Zero ConfiguraVon
    • Virtual DOM
    • Components
    • One way data binding
    

    View Slide

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
    

    View Slide

23. REACT USED BY 23
    • Facebook
    • AirBnb
    • Uber
    • NetFlix
    • TwiNer
    • Pinterest
    • Stripe
    • Walmart
    

    View Slide

24. REACT 24
    DEMOSTRATION
    

    View Slide

25. VUE
    

    View Slide

26. VUE 26
    • IniVally released in February 2014
    • New versions are updated whenever
    • It is a framework
    • Not backed by a major company
    

    View Slide

27. VUE 27
    • Provides just the V in MVC
    • AgnosVc to your data layer
    • Implements a Virtual DOM
    • Uses JSX
    

    View Slide

28. VUE Functionality 28
    • Templates
    • Data-binding expressions
    • DirecVves
    

    View Slide

29. VUE PROS 29
    • Ease of understanding and development
    • Small size - fast
    • Simple integraVon
    • Great documentaVon
    • Templates
    

    View Slide

30. VUE CONS 30
    • Scaling an applicaVon
    • Small ecosystem
    • No cross-plaaorm mobile
    

    View Slide

31. VUE USED BY 31
    • Alibaba
    • Baidu
    • Expedia
    • Nintendo
    • Gitlab
    

    View Slide

32. VUE 32
    DEMOSTRATION
    

    View Slide

33. Conclusion
    

    View Slide

34. GUIDELINES 34
    • Learning Curve
    • Framework vs Library
    • Scaling
    • Mobile needed?
    • Stability
    • Community support
    

    View Slide

35. 35
    Additional Resources
    www.codeprep.io
    www.in5days.tech
    www.youtube.com/c/jenniferbland
    

    View Slide

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
    

    View Slide

37. 37
    Who Am I?
    www.jenniferbland.com
    @ratracegrad
    www.youtube.com/c/JenniferBland
    jennifer@jenniferbland.com
    github.com/ratracegrad
    

    View Slide