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.)

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?

6. Haters
gonna
hate

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?