Why I Left Angular for React - SDD Conference · React Hey CourseAction, someone clicked this...

@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