The document discusses the author's transition from Angular to React as a UI developer. Key reasons for initially adopting Angular included its two-way data binding, templates, and support for single page applications. The author then moved to React due to its virtual DOM for better performance, emphasis on immutability and components for handling complexity, and support for server-side rendering. Challenges in switching included learning new concepts like JSX and flux architectures. Overall the author found React to be more flexible with its unopinionated approach and thriving community.

1. An Angular developer
moving to React
Souvik Basu

2. First do it, then do it right, then do it better
- Addy Osmani

3. First do it -> Plain JS
then do it right -> Angular
then do it better -> React

4. My life as a UI Dev pre 2012

5. 2010 2012 2014 2016 2018
Plain JavaScript
DOM methods
jQuery
$('#myElement');
Silverlight
Animation, Gradients, MVVM
Knockout
Data binding
Backbone
MVC
Angular
MVW
React
Components
Angular 2
TS
React 16
Fiber

6. What drove me to AngularJS 1.x

7. Magic of 2 way data binding
angular.module('HelloWorldApp', [])
.controller('HelloWorldController', function($scope) {
$scope.greeting = "Hello World";
});

8. HTML templates
<div ng-app="HelloWorldApp">
<div ng-controller="HelloWorldController">
<h1>{{greeting}}</h1>
</div>
</div>

9. Single Page Applications

10. Faster deliverables due to Angular ecosystem
• Router
• i18n
• a11y
• UI Component libraries – Angular Material
• Animation
• Bootstrap
• I/O
• Lazy loading
• Browser tools – Batarang
• Karma and Protractor
• Generator
• MEAN stack
• Hybrid apps using Ionic

11. Created and Maintained by Google!!
• Huge effort in UI framework development for first time

12. The move from Angular 1.x to 2

13. Breaking changes from 1.x

14. TypeScript learning curve

15. Super fast development with Angular cli

16. React made us rethink Best Practices

17. Busted myth of Separation of Concern of HTML, JS, CSS

18. DOM render performance took center stage
Virtual DOM

19. Concept of Components

20. JSX

21. What drove me to switch to React

22. Virtual DOM
Performance of Diffing algo

23. Immutability
Handling app complexity
Improving Performance

24. Server Side rendering
SEO
First Meaningful Paint
Supported by React from very early on
Angular kind of followed up in later versions

25. Flux/Redux
One way data flow
State Immutability
Time travel debugging

26. JSX
Abstraction to code on any platform

27. Unopiniated
Power to pick and choose modules
React being just View library

28. Thriving Community
Backing by Facebook and huge community support
3rd Party libraries
MIT license in React 16

29. Challenges faced while moving to React

30. • Everything that’s good in React was a Challenge first to understand!!

31. • Unopinianated
• Looking for industry standards

32. • Understanding abstraction of JSX
• Lack of HTML templates

33. • Leaving behind concept of Angular modules
• How do we modularize our app?

34. • Understanding CSS in JS

35. • State Management using Store

36. • Support for 3rd party UI lib
• Material Design
• Responsiveness

37. • Lack of SSR in cli

38. • Need to load many libs like styled components, redux

39. Angular vs React

40. • TypeScript vs Flow vs PropTypes
• RxJs vs Promise
• Angular cli vs Create React App cli
• Framework vs Library

41. React Native changes the game
• Learn Once, Write Anywhere
• RN Web: Write once, Deploy Anywhere
• Android
• iOS
• Windows Surface
• Web
• Mac
• Auto upgrade mobile apps

42. Embrace changes!!
Thank you
@souvikbasu