Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. 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
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. React 9 React sweet spot by the docs: We built

    React to solve one problem: building large applications with data that changes over time.
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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