why i left angular for react -...
TRANSCRIPT
@housecor
Why I Left Angular for ReactCory House
Strong opinions. Weakly held.
They call it React for a reason.
A World of Components
Innovation creates polarizing views…
HTML should be a projection of app state, not a source of truth.
JavaScript and HTML belong in the same file.
Unidirectional flow > two-way binding.
Inline styles are good. WTF?
All Variables Should be Global.
I don’t want to be a long-winded preacher.
JSX
Virtual DOM
Hot Reloading
Isomorphic JavaScript
Unidirectional Data flows / Flux / Redux
React versus the competition
Pick Your Sermon.
Let’s Talk Tech
Core Technologies
Innovation #1: JSX
“HTML” in JavaScript
Compiles to JavaScript
Differences: className, htmlFor
Optional
JSX
React.createElement("h1", {color: "red"}, "Heading here")
<h1 color="red">Heading here</h1>
JSX Compiles to JS
“JS” in HTML
<div ng-repeat="user in users">
{{#each user in users}}
data-bind="foreach: users">
“HTML” in JS
{users.map(createUserRow)}
Must stay in sync.
No explicit interface!
Separating intertwined concerns hinders debugging
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>
Syntax is kind of a big deal.
Loud mouth dude talking to you right now
To read Angular:
To read React:
Learn a long list of Angular-specific syntax.
Learn JavaScript.
In Angular, you write Angular.
In React, you write JavaScript.
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?
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
Let’s compare the debugging experience…
Forgot to close a tag in my Angular template...
Hunt for this to find your typo: [ERROR
->]
Compile-time error checking FTW!
Fails at runtime.
No line number provided.
No unclosed tag mentioned.
Fails at compile-time.
Line number provided.
Unclosed tag mentioned.
JSX Demo
Innovation #2: Virtual DOM
Updating the DOM is expensive
Why Virtual DOM?
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
Removing a Row…
Redraws entire table Removes the row
Hard to argue with the results…
Performance
Performance
shouldComponentUpdate
PureRenderMixin + immutability
Performance: Go Even Faster
Meh, my app is fast enough.
Half second delay -> 20% drop in traffic.
Delayed in increments of 100
milliseconds
Even very small delays resulted in
substantial drops in revenue.
Synthetic Events
Isomorphic Support
React Native
Virtual DOM: More Than Performance
Innovation #3: Hot Reload
No more lost state!
Hot Reload
Hot Reload
React-hot-loader
Live React Load
Hot Reload Demo
Innovation #4: Isomorphic
Today
Isomorphic
2010
Fat Client
1998
Fat Server
History of Web Dev
What’s In a Name?
I’m doing
server-
rendered
SPAs
Uh, you’re
both doing
the same
thing.
I’m doing
Isomorphic
JavaScript
Isomorphic
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.
HAML
Razor
Django
Jade
Handlebars
Knockout
Angular
KendoUI
Server Client
Server Client
☺
renderToString
Templates
Security
Routing
Models and validation
Configuration
API calls
Date & Currency Formatting
What Is Duplicated?
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
MaintainabilityAccessibilityPerformance
Why Go Isomorphic?
Innovation #5: Small, Stable Component API
Small, stable API leads to…
No “Angular 2” problem
Over 20k React components at Facebook
Massive component ecosystem
Find a component? It’ll work!
material-ui.com
react-toolbox.com
react-bootstrap.github.io
react.foundation
blueprintjs.com
ant.design
react.semantic-ui.com
grommet.github.io
elemental-ui.com
ux.mulesoft.com
nikgraf.github.io/belle
touchstonejs.io
github.com/enaqx/awesome-react
Innovation #6: Lightweight clones
Innovation #7: Unidirectional Flow
Good Luck Debugging This
Two-way binding
Two-way Binding vs Unidirectional
React
View
Action
Dispatcher
Store
Unidrectional
View
Viewmodel
What is Flux?
A pattern, not a framework
Centralized dispatcher
Unidirectional data flows
They call it Flux for a reason too.
Flux Implementations
Facebook’s Flux
Alt
Flummox
Marty
Fluxxor
Delorean
Reflux
Yahoo’s Fluxible
Flux: 3 Parts
Action Dispatcher Stores
Button click Notify everyone who cares Hold data
Flux Demo
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
Flux is a pattern for unidirectional data flows
Many implementations
Wrap Up
Some Final Thoughts…
Battle Proven
The Competition Responded
Ember 2Angular 2 React 15
Isomorphic & Unidirectional
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
Why React?
Fast
Pluggable
Simple
Testable
Rich Error Messaging
Composable
Broad Browser Support
Isomorphic Friendly
Battle Proven
React Downside
My solution…
github.com/coryhouse/react-slingshot
@housecor
There’s much more to be said...
bitnative.com/handouts
Invitation: 5 Minute Retrospective
@housecor