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

AngularJS and Angular 2 vs React

AngularJS and Angular 2 vs React

Where to use AngularJS and where to use React. What are differences and sweet spots of those frameworks? What the future will bring with Angular 2?

Michał Michalczuk

September 16, 2016
Tweet

More Decks by Michał Michalczuk

Other Decks in Programming

Transcript

  1. Angular vs React
    What is the difference? When to use them?
    Michał Michalczuk

    View Slide

  2. Angular, React whaat?
    2
    vs
    framework library

    View Slide

  3. Framework vs library – according to Martin Fowler
    Framework
    A framework embodies some abstract
    design, with more behavior built in. In order to
    use it you need to insert your behavior into
    various places in the framework either by
    subclassing or by plugging in your own
    classes. The framework's code then calls your
    code at these points.
    Library
    A library is essentially a set of functions that
    you can call, these days usually organized
    into classes. Each call does some work and
    returns control to the client.
    3

    View Slide

  4. Angular vs React (actually Angular 2 vs React)
    4

    View Slide

  5. Angular 1.x
    5
    Angular 1.x followed by the docs:
    • structural framework for dynamic web apps,
    • data binding and dependency injection eliminate
    much of the code you would otherwise have to write,
    • browsers compatibility abstract layer
    • a complete client-side solution (handles DOM,
    handes AJAX calls)
    • Everything you need to build a CRUD app in a
    cohesive set: Data-binding, basic templating
    directives, form validation, routing, deep-linking,
    reusable components and dependency injection.
    • Testability story: Unit-testing, end-to-end testing,
    mocks and test harnesses.
    • Seed application with directory layout and test scripts
    as a starting point.

    View Slide

  6. Angular 1.x
    6
    Angular 1.x sweet spot (by the docs):
    • Angular simplifies application development by
    presenting a higher level of abstraction to the
    developer.
    • Like any abstraction, it comes at a cost of flexibility.
    In other words, not every app is a good fit for
    Angular.
    • Angular was built with the CRUD application in mind.
    • Games and GUI editors are examples of applications
    with intensive and tricky DOM manipulation ... are
    probably not a good fit for Angular.

    View Slide

  7. Angular 2
    7
    Angular 2 by the docs:
    • Cross platform
    • Progressive web apps
    • Native
    • Desktop
    • Speed and performande
    • Code generation optimalized for JS vms
    • Server side rendering
    • SEO
    • Split loading modules/components because of new Component
    Router
    • Angular CLI
    • New standards
    • Web components friendly
    • Standarized from day 1 – style guides, TypeScript on all examples
    • Explicit components lifecycle
    • Runtime
    • HTML centric templates

    View Slide

  8. React
    8
    React by the docs:
    • Simple
    • Only for creating interfaces
    • Cross platform (React Native)
    • Component-Based
    • Declarative
    • Fast
    • Light
    • Server side rendering
    • SEO
    • Explicit components lifecycle
    • Compilated
    • JavaScript centric templates

    View Slide

  9. React
    9
    React sweet spot by the docs:
    We built React to solve one problem:
    building large applications with data that
    changes over time.

    View Slide

  10. Comparison: Basics
    10
    Attribute AngularJS Angular 2 React
    Version 1.5.0 2.0.0 -rc5 15.3.1
    Author Google Google Facebook
    Language JavaScript/HTML TypeScript JSX
    Size 143k 764k 151k

    View Slide

  11. Comparison: Basics
    11
    Attribute AngularJS Angular 2 React
    Version 1.5.0 2.0.0 rc5 15.3.1
    Author Google Google Facebook
    Language JavaScript/HTML TypeScript JSX
    Size 143k 764k 151k
    Core(566k) + RxJS React + Redux
    * Sizes after minification, no gzip

    View Slide

  12. Size difference
    Angular
    • Framework
    • Lot of features out of the box
    So
    • Large size, but less external components to
    develop min app
    React
    • Library
    • Lot of features provided by external
    packages
    So
    • Choose components and code blocks by
    your own and handle/deal with it by your
    own
    12

    View Slide

  13. Comparison: Meta data
    13
    Attribute AngularJS Angular 2 React
    Churn Reduced Reduced High
    Tooling Low High High
    Code Design JS into HTML JS into HTML JavaScript Centric
    JavaScript “Fatigue” Less Less More
    Attribute AngularJS Angular 2 React
    Churn Reduced Reduced High
    Tooling Low High High
    Code Design JS into HTML JS into HTML JavaScript Centric
    JavaScript “Fatigue” Less Less More
    *by Reddit and HackerNews

    View Slide

  14. Chorn and code design
    Angular
    • Reduced chorn
    • Developed by evolution
    • HTML centric for templating
    • (view) Fails at runtime
    React
    • High chorn
    • Developed by revolutions
    • JavaScript centric for templating
    • (view) Fails at compilation time
    14

    View Slide

  15. Comparison: Building, DOM manipulation, other
    15
    *by Reddit and HackerNews
    Attribute AngularJS Angular 2 React
    DOM Regular DOM Regular DOM Virtual DOM
    Learning Curve High Medium Low
    Packaging Weak Medium Strong
    Abstraction Weak Strong Strong
    Debugging General Good HTML / Bad JS Good JS/Good
    HTML
    Good JS / Bad HTML
    Fails When? Runtime Runtime Compile-Time
    Binding 2 Way 2 Way Uni-Directional
    Templating In HTML In TypeScript Files In JSX Files
    Component Model Weak Strong Medium
    Building Mobile? Ionic Framework Ionic Framework React Native
    MVC Yes Yes View Layer Only
    Rendering Client Side Server Side Server Side

    View Slide

  16. Coding Session
    Code show session
    Show me the code

    View Slide

  17. Angular 1.x summary
    17
    Use
    • Creating CRUD applications, unless your using components
    • When handling forms and not a lot of rich-communicative UI
    • When not handling large amount of data (digest loop is
    sensitive for large, nested objects)
    Not recommended
    • Games
    • All apps with complex DOM manipulations needed

    View Slide

  18. Angular 2 summary
    18
    Use
    • Creating CRUD applications, unless your using components
    • When handling forms and not a lot of rich-communicative UI
    • When not handling large amount of data (digest loop is
    sensitive for large, nested objects)
    Not recommended
    • Games
    • All apps with complex DOM manipulations needed

    View Slide

  19. React summary
    19
    Use
    • When performance and DOM rendering control matters
    • When handling complex models or creating a lot of DOM
    • Lot of client-side communication
    • "building large applications with data that changes over
    time."
    Not recommended /Not need for
    • CRUD data-bound REST apps
    • Static pages, pages that need templating
    • Form-driven apps

    View Slide

  20. Languages / Frameworks philosophies and sweet spots
    20
    "There are only two kinds of languages: the ones people complain
    about and the ones nobody uses."
    Bjarne Stroustrup

    View Slide

  21. Bonus: jQuery
    21
    Use
    • When need lot of DOM manipulations
    • Isolated forms validation
    • Isolated AJAX calls
    Not recommended
    • Building SPA
    • Logic based on DOM elements
    • Building dynamic forms
    *You might not need jQuery

    View Slide

  22. Resources / Links
    Articles
    • http://tutorials.pluralsight.com/front-end-javascript/angular-vs-
    react-a-side-by-side-comparison
    • https://medium.freecodecamp.com/angular-2-versus-react-there-
    will-be-blood-66595faafd51#.8sw176xi2
    • https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-
    breaker
    • https://www.codementor.io/reactjs/tutorial/react-vs-angularjs
    • https://medium.com/@zackargyle/stop-using-react-for-
    everything-c8297ac1a644#.4xaw7dyk1
    • http://ricostacruz.com/cheatsheets/react.html
    • https://camjackson.net/post/9-things-every-reactjs-beginner-
    should-know
    • https://auth0.com/blog/bootstrapping-a-react-
    project/?utm_content=buffer64070&utm_medium=social&utm_so
    urce=twitter.com&utm_campaign=buffer
    • Angular 1, Angular 2 official documentations
    • React 15.x official documentation
    Code
    • https://github.com/coryhouse/react-tour-of-
    heroes
    • https://angular.io/docs/ts/latest/tutorial/
    • http://youmightnotneedjquery.com/
    22

    View Slide

  23. Thank you!

    View Slide