Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Comparing Javascript Frameworks

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.

Jennifer Bland

February 23, 2018
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

Transcript

  1. Choosing a
    JavaScript Framework
    Jennifer Bland

    View full-size slide

  2. 2
    Who Am I?
    www.jenniferbland.com
    @ratracegrad
    www.youtube.com/c/JenniferBland
    [email protected]
    github.com/ratracegrad

    View full-size 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 full-size slide

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

    View full-size slide

  5. Todo Applications 5
    demo applications

    View full-size slide

  6. WHAT I WILL NOT COVER
    and what I will

    View full-size slide

  7. TERMINOLOGY 7
    • MVC PaNern

    View full-size slide

  8. TERMINOLOGY 8
    • Framework vs Library

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. ANGULAR 16
    DEMOSTRATION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

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

    View full-size slide

  22. REACT 24
    DEMOSTRATION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. VUE 32
    DEMOSTRATION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. 37
    Who Am I?
    www.jenniferbland.com
    @ratracegrad
    www.youtube.com/c/JenniferBland
    [email protected]
    github.com/ratracegrad

    View full-size slide