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?

Transcript

1. Angular vs React What is the difference? When to use them? Michał Michalczuk
2. Angular, React whaat? 2 vs framework library
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
4. Angular vs React (actually Angular 2 vs React) 4
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.
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.
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
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
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.
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
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
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
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
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
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
16. Coding Session Code show session Show me the code
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
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
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
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
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
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
23. Thank you!