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

An Angular developer moving to React