AngularJS + React
- 1. Igor Kosulin, 2015 AngularJS + React Speedup research and comparison
- 2. What AngularJS is ● MVC client-side framework ● A bridge to future (Web Components, etc) ● Very opinionated framework ● A pretty good working concept how it can be ● Nice for web apps of small and middle size ● Declarative style ● Force to create separate modules
- 3. What React is ● Virtual DOM framework ● Use reactive concepts for DOM rendering ● Pretty straightforward ● JSX ● Everything is in jsx ● Force to create separate modules ● Thinking in React
- 4. Why do we need this ● Tired of Angular, want to move forward ● Want to try React ● Replace V in Angular MVC ● Performance issues ● Cause it’s fun to combine uncombinable ● As a proof of concept
- 5. Javascript evolution ● Simple effects on HTML-page ● Simple libraries ● DOM manipulation frameworks ● MVC frameworks, Virtual DOM frameworks ● Full-stack frameworks?
- 7. What Angular haters say ● Slow two-way data binding ● Dependency Injection minification issue ● Too much: Provider, Service, Factory…. ● Directives are too complex ● Hard to find developers who can use it ● Angular 2.0 is almost coming ● Poor docs, logic in views, debugging...
- 8. Angular 1.3 features ● Performance optimization (3-4x faster) ● Easier forms ● ARIA support ● Material design
- 9. Angular 2.0 ● Total rewrite, but core concepts preserved ● Unified component model ● Modular, mobile-first ● Revised concept of “scope” ● Web Components, ES6, TypeScript 1.5 ● Team will support 1.3 branch for 1.5-2 years after 2.0 final release ● Team will write a converter for old code
- 10. Google vs Facebook Angular + React = ?
- 11. Angular + React = ngReact ● Angular module ● Can use React Components as directives
- 12. Test case #1
- 13. Javascript code ● Direct DOM manipulation ● Fastest possible version
- 14. jQuery code ● jQuery.append() ● Overhead of very small
- 15. ● React code (React Component)
- 16. ● Angular code
- 19. Test case #2
- 20. ● React code (PersonRow)
- 21. ● React code (PersonTable)
- 22. ● React code (ModifiablePersonTable)
- 23. ● React code (ModifiablePersonTable) That’s finally it… :)
- 24. ● Angular code
- 25. ● Angular code (reusable FocusOn directive)
- 28. Comparison Pros ● Angular code is shorter (23 js + 6 html vs 105 js) ● Angular is more responsive Cons ● Angular is slower to render ● Angular is fatter (memory consumption)
- 29. When use ngReact ● For existing Angular apps only ● For very big lists (but prefer paging) ● For complex logic (but prefer optimizations) ● For easy slow migration
- 30. When use Angular ● For web apps small and middle size ● For fast prototyping ● For not very fat apps ● For newbies: a way to learn JS, they will definitely meet all the issues ● For professionals: to write tiny solid code ● “Write less, do more” ⓒ jQuery
- 31. When use React ● Actually no limits, especially if you want to write many lines of code
- 32. Thanks for your attention! Any questions?