Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Igor Kosulin, 2015
AngularJS + React
Speedup research and comparison
What AngularJS is
● MVC client-side framework
● A bridge to future (Web Components, etc)
● Very opinionated framework
● A ...
What React is
● Virtual DOM framework
● Use reactive concepts for DOM rendering
● Pretty straightforward
● JSX
● Everythin...
Why do we need this
● Tired of Angular, want to move forward
● Want to try React
● Replace V in Angular MVC
● Performance ...
Javascript evolution
● Simple effects on HTML-page
● Simple libraries
● DOM manipulation frameworks
● MVC frameworks, Virt...
Haters
gonna
hate
What Angular haters say
● Slow two-way data binding
● Dependency Injection minification issue
● Too much: Provider, Servic...
Angular 1.3 features
● Performance optimization (3-4x faster)
● Easier forms
● ARIA support
● Material design
Angular 2.0
● Total rewrite, but core concepts preserved
● Unified component model
● Modular, mobile-first
● Revised conce...
Google vs Facebook
Angular + React = ?
Angular + React
= ngReact
● Angular module
● Can use React Components as directives
Test case #1
Javascript code
● Direct DOM manipulation
● Fastest possible version
jQuery code
● jQuery.append()
● Overhead of very small
● React code (React Component)
● Angular code
Test case #2
● React code (PersonRow)
● React code (PersonTable)
● React code (ModifiablePersonTable)
● React code (ModifiablePersonTable)
That’s finally it… :)
● Angular code
● Angular code (reusable FocusOn directive)
Comparison
Pros
● Angular code is shorter (23 js + 6 html vs 105 js)
● Angular is more responsive
Cons
● Angular is slower...
When use ngReact
● For existing Angular apps only
● For very big lists (but prefer paging)
● For complex logic (but prefer...
When use Angular
● For web apps small and middle size
● For fast prototyping
● For not very fat apps
● For newbies: a way ...
When use React
● Actually no limits, especially if you want to
write many lines of code
Thanks for your attention!
Any questions?
AngularJS + React
AngularJS + React
AngularJS + React
AngularJS + React
Prochain SlideShare
Chargement dans…5
×

AngularJS + React

1 172 vues

Publié le

Your Angular app grew up and became too slow, so that you want to make it faster by implementing React framework.
How to do it? Is it worth it? What's the easiest way? What are pros and cons? You can derive all of that from this presentation.
(It may also be useful if you're just making a choice between these two frameworks.)

Publié dans : Logiciels
  • Soyez le premier à commenter

AngularJS + React

  1. 1. Igor Kosulin, 2015 AngularJS + React Speedup research and comparison
  2. 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. 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. 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. 5. Javascript evolution ● Simple effects on HTML-page ● Simple libraries ● DOM manipulation frameworks ● MVC frameworks, Virtual DOM frameworks ● Full-stack frameworks?
  6. 6. Haters gonna hate
  7. 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. 8. Angular 1.3 features ● Performance optimization (3-4x faster) ● Easier forms ● ARIA support ● Material design
  9. 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. 10. Google vs Facebook Angular + React = ?
  11. 11. Angular + React = ngReact ● Angular module ● Can use React Components as directives
  12. 12. Test case #1
  13. 13. Javascript code ● Direct DOM manipulation ● Fastest possible version
  14. 14. jQuery code ● jQuery.append() ● Overhead of very small
  15. 15. ● React code (React Component)
  16. 16. ● Angular code
  17. 17. Test case #2
  18. 18. ● React code (PersonRow)
  19. 19. ● React code (PersonTable)
  20. 20. ● React code (ModifiablePersonTable)
  21. 21. ● React code (ModifiablePersonTable) That’s finally it… :)
  22. 22. ● Angular code
  23. 23. ● Angular code (reusable FocusOn directive)
  24. 24. 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)
  25. 25. 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
  26. 26. 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
  27. 27. When use React ● Actually no limits, especially if you want to write many lines of code
  28. 28. Thanks for your attention! Any questions?

×