Why I Left Angular for React -...
Transcript of Why I Left Angular for React -...
![Page 1: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/1.jpg)
@housecor
Why I Left Angular for ReactCory House
![Page 2: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/2.jpg)
![Page 3: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/3.jpg)
![Page 4: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/4.jpg)
![Page 5: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/5.jpg)
![Page 6: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/6.jpg)
![Page 7: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/7.jpg)
Strong opinions. Weakly held.
![Page 8: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/8.jpg)
They call it React for a reason.
![Page 9: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/9.jpg)
![Page 10: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/10.jpg)
![Page 11: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/11.jpg)
![Page 12: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/12.jpg)
![Page 13: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/13.jpg)
![Page 14: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/14.jpg)
A World of Components
![Page 15: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/15.jpg)
Innovation creates polarizing views…
![Page 16: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/16.jpg)
HTML should be a projection of app state, not a source of truth.
![Page 17: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/17.jpg)
JavaScript and HTML belong in the same file.
![Page 18: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/18.jpg)
Unidirectional flow > two-way binding.
![Page 19: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/19.jpg)
Inline styles are good. WTF?
![Page 20: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/20.jpg)
All Variables Should be Global.
![Page 21: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/21.jpg)
I don’t want to be a long-winded preacher.
![Page 22: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/22.jpg)
JSX
Virtual DOM
Hot Reloading
Isomorphic JavaScript
Unidirectional Data flows / Flux / Redux
React versus the competition
Pick Your Sermon.
![Page 23: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/23.jpg)
Let’s Talk Tech
![Page 24: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/24.jpg)
Core Technologies
![Page 25: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/25.jpg)
Innovation #1: JSX
![Page 26: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/26.jpg)
![Page 27: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/27.jpg)
![Page 28: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/28.jpg)
![Page 29: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/29.jpg)
“HTML” in JavaScript
Compiles to JavaScript
Differences: className, htmlFor
Optional
JSX
![Page 30: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/30.jpg)
React.createElement("h1", {color: "red"}, "Heading here")
<h1 color="red">Heading here</h1>
JSX Compiles to JS
![Page 31: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/31.jpg)
![Page 32: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/32.jpg)
“JS” in HTML
<div ng-repeat="user in users">
{{#each user in users}}
data-bind="foreach: users">
“HTML” in JS
{users.map(createUserRow)}
![Page 33: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/33.jpg)
![Page 34: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/34.jpg)
Must stay in sync.
No explicit interface!
![Page 35: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/35.jpg)
Separating intertwined concerns hinders debugging
![Page 36: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/36.jpg)
ngIf
ngFor
{{myVar}}
ngModel="myVar"
<li (click)="onSelect(user)">
<avatar [email]=”email"></avatar>
if
map
{myVar}
{myVar}
<li onClick={this.onSelect}></li>
<avatar email={email}></avatar>
![Page 37: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/37.jpg)
Syntax is kind of a big deal.
Loud mouth dude talking to you right now
![Page 38: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/38.jpg)
To read Angular:
To read React:
Learn a long list of Angular-specific syntax.
Learn JavaScript.
![Page 39: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/39.jpg)
In Angular, you write Angular.
In React, you write JavaScript.
![Page 40: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/40.jpg)
import {Component} from 'angular2/core';
import {HeroDetailComponent} from './hero-
detail.component';
@Component({
selector: 'my-app',
directives: [HeroDetailComponent],
template: `
<div>
<h1>Calling Child Component Example</h1>
<my-hero-detail [hero]="selectedHero"></my-
hero-detail>
</div>
`
Use child component:
1. Import
2. Directives array
3. Template
Huh?! Why the mismatch?
![Page 41: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/41.jpg)
import {React} from ’react';
import {HeroDetail} from './HeroDetail';
export class HeroApp extends React.Component {
render({
<div>
<h1>Calling Child Component Example</h1>
<HeroDetail hero="selectedHero” />
</div>
});
};
Use child component:
1. Import
2. Add Tag
![Page 42: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/42.jpg)
Let’s compare the debugging experience…
![Page 43: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/43.jpg)
Forgot to close a tag in my Angular template...
![Page 44: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/44.jpg)
![Page 45: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/45.jpg)
Hunt for this to find your typo: [ERROR
->]
![Page 46: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/46.jpg)
Compile-time error checking FTW!
![Page 47: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/47.jpg)
Fails at runtime.
No line number provided.
No unclosed tag mentioned.
Fails at compile-time.
Line number provided.
Unclosed tag mentioned.
![Page 48: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/48.jpg)
![Page 49: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/49.jpg)
JSX Demo
![Page 50: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/50.jpg)
Innovation #2: Virtual DOM
![Page 51: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/51.jpg)
![Page 52: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/52.jpg)
Updating the DOM is expensive
Why Virtual DOM?
![Page 53: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/53.jpg)
Compare DOM’s current state to
desired new state.
Update the DOM in the most
efficient way.
With Virtual DOM
Blindly update DOM using new
state.
Without Virtual DOM
The Virtual DOM
![Page 54: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/54.jpg)
Removing a Row…
Redraws entire table Removes the row
![Page 55: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/55.jpg)
Hard to argue with the results…
![Page 56: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/56.jpg)
Performance
![Page 57: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/57.jpg)
Performance
![Page 58: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/58.jpg)
![Page 59: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/59.jpg)
shouldComponentUpdate
PureRenderMixin + immutability
Performance: Go Even Faster
![Page 60: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/60.jpg)
Meh, my app is fast enough.
![Page 61: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/61.jpg)
Half second delay -> 20% drop in traffic.
Delayed in increments of 100
milliseconds
Even very small delays resulted in
substantial drops in revenue.
![Page 62: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/62.jpg)
![Page 63: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/63.jpg)
Synthetic Events
Isomorphic Support
React Native
Virtual DOM: More Than Performance
![Page 64: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/64.jpg)
Innovation #3: Hot Reload
![Page 65: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/65.jpg)
No more lost state!
Hot Reload
![Page 66: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/66.jpg)
Hot Reload
React-hot-loader
Live React Load
![Page 67: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/67.jpg)
Hot Reload Demo
![Page 68: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/68.jpg)
Innovation #4: Isomorphic
![Page 69: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/69.jpg)
Today
Isomorphic
2010
Fat Client
1998
Fat Server
History of Web Dev
![Page 70: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/70.jpg)
What’s In a Name?
I’m doing
server-
rendered
SPAs
Uh, you’re
both doing
the same
thing.
I’m doing
Isomorphic
JavaScript
![Page 71: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/71.jpg)
Isomorphic
![Page 72: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/72.jpg)
FastBoot (EmberJS)
Portable JavaScript
Universal JavaScript
Progressive JavaScript
Client-Server JavaScript
Multiplatform JavaScript
End-to-end JavaScript
Server-rendered SPA
Samesies.js
Fronty-backy JS
JS on server & client
What’s In a Name?
Okay, we’re both doing
Isomorphic JavaScript.
But you may hear
these other terms.
![Page 73: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/73.jpg)
HAML
Razor
Django
Jade
Handlebars
Knockout
Angular
KendoUI
Server Client
![Page 74: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/74.jpg)
Server Client
☺
![Page 75: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/75.jpg)
renderToString
![Page 76: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/76.jpg)
Templates
Security
Routing
Models and validation
Configuration
API calls
Date & Currency Formatting
What Is Duplicated?
![Page 77: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/77.jpg)
Fast interactions
Rich transitions
Uses less bandwidth
Avoids full page loads
Client
Less load on the client
Faster initial render
SEO optimized
Server
Client vs Server
Isomorphic = Benefits of both
![Page 78: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/78.jpg)
MaintainabilityAccessibilityPerformance
Why Go Isomorphic?
![Page 79: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/79.jpg)
![Page 80: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/80.jpg)
Innovation #5: Small, Stable Component API
![Page 81: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/81.jpg)
Small, stable API leads to…
No “Angular 2” problem
Over 20k React components at Facebook
Massive component ecosystem
Find a component? It’ll work!
![Page 82: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/82.jpg)
material-ui.com
![Page 83: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/83.jpg)
react-toolbox.com
![Page 84: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/84.jpg)
react-bootstrap.github.io
![Page 85: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/85.jpg)
react.foundation
![Page 86: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/86.jpg)
blueprintjs.com
![Page 87: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/87.jpg)
ant.design
![Page 88: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/88.jpg)
react.semantic-ui.com
![Page 89: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/89.jpg)
grommet.github.io
![Page 90: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/90.jpg)
elemental-ui.com
![Page 91: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/91.jpg)
ux.mulesoft.com
![Page 92: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/92.jpg)
nikgraf.github.io/belle
![Page 93: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/93.jpg)
touchstonejs.io
![Page 94: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/94.jpg)
github.com/enaqx/awesome-react
![Page 95: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/95.jpg)
Innovation #6: Lightweight clones
![Page 96: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/96.jpg)
![Page 97: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/97.jpg)
![Page 98: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/98.jpg)
Innovation #7: Unidirectional Flow
![Page 99: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/99.jpg)
Good Luck Debugging This
![Page 100: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/100.jpg)
Two-way binding
Two-way Binding vs Unidirectional
React
View
Action
Dispatcher
Store
Unidrectional
View
Viewmodel
![Page 101: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/101.jpg)
What is Flux?
A pattern, not a framework
Centralized dispatcher
Unidirectional data flows
![Page 102: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/102.jpg)
They call it Flux for a reason too.
![Page 103: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/103.jpg)
Flux Implementations
Facebook’s Flux
Alt
Flummox
Marty
Fluxxor
Delorean
Reflux
Yahoo’s Fluxible
![Page 104: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/104.jpg)
Flux: 3 Parts
Action Dispatcher Stores
Button click Notify everyone who cares Hold data
![Page 105: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/105.jpg)
![Page 106: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/106.jpg)
Flux Demo
![Page 107: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/107.jpg)
React Hey CourseAction, someone clicked this “Save Course” button.
Action Thanks React! I registered an action creator with the dispatcher, so the dispatcher should take care of notifying all the stores that care.
Dispatcher Let me see who cares about a course being saved. Ah! Looks like the CourseStore has registered a callback with me, so I’ll let her know.
Store Hi dispatcher! Thanks for the update! I’ll update my data with the payload you sent. Then I’ll emit an event for the React components that care.
React Ooo! Shiny new data from the store! I’ll update the UI to reflect this!
A Chat With Flux
![Page 108: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/108.jpg)
Flux is a pattern for unidirectional data flows
Many implementations
Wrap Up
![Page 109: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/109.jpg)
Some Final Thoughts…
![Page 110: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/110.jpg)
Battle Proven
![Page 111: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/111.jpg)
The Competition Responded
![Page 112: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/112.jpg)
Ember 2Angular 2 React 15
Isomorphic & Unidirectional
![Page 113: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/113.jpg)
Angular 1 Angular 2 React
Isomorphic x x
Unidirectional x x
1 file per
component
x x
Virtual DOM x x
Hot Reloading x
Pluggable x
JavaScript-centric x
Component Syntax 4 6 10
![Page 114: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/114.jpg)
Why React?
Fast
Pluggable
Simple
Testable
Rich Error Messaging
Composable
Broad Browser Support
Isomorphic Friendly
Battle Proven
![Page 115: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/115.jpg)
React Downside
![Page 116: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/116.jpg)
My solution…
![Page 118: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/118.jpg)
@housecor
There’s much more to be said...
![Page 119: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/119.jpg)
bitnative.com/handouts
![Page 120: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/120.jpg)
Invitation: 5 Minute Retrospective
![Page 121: Why I Left Angular for React - sddconf.comsddconf.com/brands/sdd/library/Why_React_-_SDD_2017.pdf · React Hey CourseAction, someone clicked this “Save Course” button. Action](https://reader034.fdocuments.us/reader034/viewer/2022042220/5ec679d4db0d1917dc626aa7/html5/thumbnails/121.jpg)
@housecor