Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An Angular developer moving to React

Presentation from ReactFoo, Pune 2018

  • Login to see the comments

An Angular developer moving to React

  1. 1. An Angular developer moving to React Souvik Basu
  2. 2. First do it, then do it right, then do it better - Addy Osmani
  3. 3. First do it -> Plain JS then do it right -> Angular then do it better -> React
  4. 4. My life as a UI Dev pre 2012
  5. 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. 6. What drove me to AngularJS 1.x
  7. 7. Magic of 2 way data binding angular.module('HelloWorldApp', []) .controller('HelloWorldController', function($scope) { $scope.greeting = "Hello World"; });
  8. 8. HTML templates <div ng-app="HelloWorldApp"> <div ng-controller="HelloWorldController"> <h1>{{greeting}}</h1> </div> </div>
  9. 9. Single Page Applications
  10. 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. 11. Created and Maintained by Google!! • Huge effort in UI framework development for first time
  12. 12. The move from Angular 1.x to 2
  13. 13. Breaking changes from 1.x
  14. 14. TypeScript learning curve
  15. 15. Super fast development with Angular cli
  16. 16. React made us rethink Best Practices
  17. 17. Busted myth of Separation of Concern of HTML, JS, CSS
  18. 18. DOM render performance took center stage Virtual DOM
  19. 19. Concept of Components
  20. 20. JSX
  21. 21. What drove me to switch to React
  22. 22. Virtual DOM Performance of Diffing algo
  23. 23. Immutability Handling app complexity Improving Performance
  24. 24. Server Side rendering SEO First Meaningful Paint Supported by React from very early on Angular kind of followed up in later versions
  25. 25. Flux/Redux One way data flow State Immutability Time travel debugging
  26. 26. JSX Abstraction to code on any platform
  27. 27. Unopiniated Power to pick and choose modules React being just View library
  28. 28. Thriving Community Backing by Facebook and huge community support 3rd Party libraries MIT license in React 16
  29. 29. Challenges faced while moving to React
  30. 30. • Everything that’s good in React was a Challenge first to understand!!
  31. 31. • Unopinianated • Looking for industry standards
  32. 32. • Understanding abstraction of JSX • Lack of HTML templates
  33. 33. • Leaving behind concept of Angular modules • How do we modularize our app?
  34. 34. • Understanding CSS in JS
  35. 35. • State Management using Store
  36. 36. • Support for 3rd party UI lib • Material Design • Responsiveness
  37. 37. • Lack of SSR in cli
  38. 38. • Need to load many libs like styled components, redux
  39. 39. Angular vs React
  40. 40. • TypeScript vs Flow vs PropTypes • RxJs vs Promise • Angular cli vs Create React App cli • Framework vs Library
  41. 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. 42. Embrace changes!! Thank you @souvikbasu

×