why i left angular for react - sdd conference · react hey courseaction, someone clicked this...
TRANSCRIPT
![Page 1: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/1.jpg)
@housecor
Why I Left Angular for ReactCory House
![Page 2: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/2.jpg)
![Page 3: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/3.jpg)
![Page 4: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/4.jpg)
![Page 5: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/5.jpg)
![Page 6: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/6.jpg)
![Page 7: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/7.jpg)
Strong opinions. Weakly held.
![Page 8: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/8.jpg)
They call it React for a reason.
![Page 9: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/9.jpg)
![Page 10: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/10.jpg)
![Page 11: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/11.jpg)
![Page 12: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/12.jpg)
![Page 13: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/13.jpg)
![Page 14: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/14.jpg)
A World of Components
![Page 15: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/15.jpg)
Innovation creates polarizing views…
![Page 16: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/17.jpg)
JavaScript and HTML belong in the same file.
![Page 18: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/18.jpg)
Unidirectional flow > two-way binding.
![Page 19: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/19.jpg)
Inline styles are good. WTF?
![Page 20: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/20.jpg)
All Variables Should be Global.
![Page 21: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/21.jpg)
I don’t want to be a long-winded preacher.
![Page 22: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/23.jpg)
Let’s Talk Tech
![Page 24: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/24.jpg)
Core Technologies
![Page 25: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/25.jpg)
Innovation #1: JSX
![Page 26: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/26.jpg)
![Page 27: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/27.jpg)
![Page 28: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/28.jpg)
![Page 29: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/29.jpg)
“HTML” in JavaScript
Compiles to JavaScript
Differences: className, htmlFor
Optional
JSX
![Page 30: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/31.jpg)
![Page 32: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/33.jpg)
![Page 34: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/34.jpg)
Must stay in sync.
No explicit interface!
![Page 35: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/35.jpg)
Separating intertwined concerns hinders debugging
![Page 36: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/39.jpg)
In Angular, you write Angular.
In React, you write JavaScript.
![Page 40: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/42.jpg)
Let’s compare the debugging experience…
![Page 43: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/43.jpg)
Forgot to close a tag in my Angular template...
![Page 44: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/44.jpg)
![Page 45: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/45.jpg)
Hunt for this to find your typo: [ERROR
->]
![Page 46: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/46.jpg)
Compile-time error checking FTW!
![Page 47: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/48.jpg)
![Page 49: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/49.jpg)
JSX Demo
![Page 50: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/50.jpg)
Innovation #2: Virtual DOM
![Page 51: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/51.jpg)
![Page 52: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/52.jpg)
Updating the DOM is expensive
Why Virtual DOM?
![Page 53: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/54.jpg)
Removing a Row…
Redraws entire table Removes the row
![Page 55: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/55.jpg)
Hard to argue with the results…
![Page 56: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/56.jpg)
Performance
![Page 57: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/57.jpg)
Performance
![Page 58: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/58.jpg)
![Page 59: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/59.jpg)
shouldComponentUpdate
PureRenderMixin + immutability
Performance: Go Even Faster
![Page 60: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/60.jpg)
Meh, my app is fast enough.
![Page 61: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/62.jpg)
![Page 63: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/63.jpg)
Synthetic Events
Isomorphic Support
React Native
Virtual DOM: More Than Performance
![Page 64: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/64.jpg)
Innovation #3: Hot Reload
![Page 65: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/65.jpg)
No more lost state!
Hot Reload
![Page 66: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/66.jpg)
Hot Reload
React-hot-loader
Live React Load
![Page 67: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/67.jpg)
Hot Reload Demo
![Page 68: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/68.jpg)
Innovation #4: Isomorphic
![Page 69: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/69.jpg)
Today
Isomorphic
2010
Fat Client
1998
Fat Server
History of Web Dev
![Page 70: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/71.jpg)
Isomorphic
![Page 72: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/73.jpg)
HAML
Razor
Django
Jade
Handlebars
Knockout
Angular
KendoUI
Server Client
![Page 74: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/74.jpg)
Server Client
☺
![Page 75: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/75.jpg)
renderToString
![Page 76: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/78.jpg)
MaintainabilityAccessibilityPerformance
Why Go Isomorphic?
![Page 79: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/79.jpg)
![Page 80: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/80.jpg)
Innovation #5: Small, Stable Component API
![Page 81: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/82.jpg)
material-ui.com
![Page 83: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/83.jpg)
react-toolbox.com
![Page 84: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/84.jpg)
react-bootstrap.github.io
![Page 85: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/85.jpg)
react.foundation
![Page 86: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/86.jpg)
blueprintjs.com
![Page 87: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/87.jpg)
ant.design
![Page 88: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/88.jpg)
react.semantic-ui.com
![Page 89: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/89.jpg)
grommet.github.io
![Page 90: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/90.jpg)
elemental-ui.com
![Page 91: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/91.jpg)
ux.mulesoft.com
![Page 92: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/92.jpg)
nikgraf.github.io/belle
![Page 93: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/93.jpg)
touchstonejs.io
![Page 94: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/94.jpg)
github.com/enaqx/awesome-react
![Page 95: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/95.jpg)
Innovation #6: Lightweight clones
![Page 96: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/96.jpg)
![Page 97: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/97.jpg)
![Page 98: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/98.jpg)
Innovation #7: Unidirectional Flow
![Page 99: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/99.jpg)
Good Luck Debugging This
![Page 100: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/102.jpg)
They call it Flux for a reason too.
![Page 103: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/105.jpg)
![Page 106: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/106.jpg)
Flux Demo
![Page 107: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/108.jpg)
Flux is a pattern for unidirectional data flows
Many implementations
Wrap Up
![Page 109: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/109.jpg)
Some Final Thoughts…
![Page 110: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/110.jpg)
Battle Proven
![Page 111: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/111.jpg)
The Competition Responded
![Page 112: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/112.jpg)
Ember 2Angular 2 React 15
Isomorphic & Unidirectional
![Page 113: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/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 - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/115.jpg)
React Downside
![Page 116: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/116.jpg)
My solution…
![Page 118: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/118.jpg)
@housecor
There’s much more to be said...
![Page 119: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/119.jpg)
bitnative.com/handouts
![Page 120: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/120.jpg)
Invitation: 5 Minute Retrospective
![Page 121: Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this “Save Course” button. Action Thanks React! I registered an action creator with the](https://reader036.vdocuments.mx/reader036/viewer/2022070715/5ed7b68ced7518079a083621/html5/thumbnails/121.jpg)
@housecor