Downloaded 31 times
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 weneed 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 ● Simpleeffects on HTML-page ● Simple libraries ● DOM manipulation frameworks ● MVC frameworks, Virtual DOM frameworks ● Full-stack frameworks?
- 6.
- 7. What Angular haterssay ● 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 ● Totalrewrite, 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.
- 13. Javascript code ● DirectDOM manipulation ● Fastest possible version
- 14. jQuery code ● jQuery.append() ●Overhead of very small
- 15. ● React code(React Component)
- 16.
- 19.
- 20. ● React code(PersonRow)
- 21. ● React code(PersonTable)
- 22. ● React code(ModifiablePersonTable)
- 23. ● React code(ModifiablePersonTable) That’s finally it… :)
- 24.
- 25. ● Angular code(reusable FocusOn directive)
- 28. Comparison Pros ● Angular codeis 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 yourattention! Any questions?