Download to read offline
![Magic of 2 way data binding angular.module('HelloWorldApp', []) .controller('HelloWorldController', function($scope) { $scope.greeting = "Hello World"; });](https://image.slidesharecdn.com/anangulardevelopermovingtoreact-180124142718/75/An-Angular-developer-moving-to-React-7-2048.jpg)
An Angular developer moving to React
- 1. An Angular developer movingto 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 asa UI Dev pre 2012
- 5. 2010 2012 20142016 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 meto AngularJS 1.x
- 7. Magic of 2way data binding angular.module('HelloWorldApp', []) .controller('HelloWorldController', function($scope) { $scope.greeting = "Hello World"; });
- 8. HTML templates <div ng-app="HelloWorldApp"> <divng-controller="HelloWorldController"> <h1>{{greeting}}</h1> </div> </div>
- 9.
- 10. Faster deliverables dueto 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 Maintainedby Google!! • Huge effort in UI framework development for first time
- 12. The move fromAngular 1.x to 2
- 13.
- 14.
- 15. Super fast developmentwith Angular cli
- 16. React made usrethink Best Practices
- 17. Busted myth ofSeparation of Concern of HTML, JS, CSS
- 18. DOM render performancetook center stage Virtual DOM
- 19.
- 20.
- 21. What drove meto switch to React
- 22. Virtual DOM Performance ofDiffing algo
- 23.
- 24. Server Side rendering SEO FirstMeaningful Paint Supported by React from very early on Angular kind of followed up in later versions
- 25. Flux/Redux One way dataflow State Immutability Time travel debugging
- 26. JSX Abstraction to codeon any platform
- 27. Unopiniated Power to pickand choose modules React being just View library
- 28. Thriving Community Backing byFacebook and huge community support 3rd Party libraries MIT license in React 16
- 29. Challenges faced whilemoving to React
- 30. • Everything that’sgood in React was a Challenge first to understand!!
- 31. • Unopinianated • Lookingfor industry standards
- 32. • Understanding abstractionof JSX • Lack of HTML templates
- 33. • Leaving behindconcept of Angular modules • How do we modularize our app?
- 34. • Understanding CSSin JS
- 35. • State Managementusing Store
- 36. • Support for3rd party UI lib • Material Design • Responsiveness
- 37. • Lack ofSSR in cli
- 38. • Need toload many libs like styled components, redux
- 39.
- 40. • TypeScript vsFlow vs PropTypes • RxJs vs Promise • Angular cli vs Create React App cli • Framework vs Library
- 41. React Native changesthe game • Learn Once, Write Anywhere • RN Web: Write once, Deploy Anywhere • Android • iOS • Windows Surface • Web • Mac • Auto upgrade mobile apps
- 42.