react, london js meetup, 11 aug 2015

Reacta revolution in Web UI technology

@redbadgerteam

“strong opinions,which are weakly held”

Paul Saffo, Director of Palo Alto’s Institute for the Future

Give it 5 minutes• He said “Man, give it five minutes.” I asked him

what he meant by that? He said, it’s fine to disagree, it’s fine to push back, it’s great to have strong opinions and beliefs, but give my ideas some time to set in before you’re sure you want to argue against them.

• https://signalvnoise.com/posts/3124-give-it-five-minutes

Stuart HarrisCIO, Founder Red Badger

@stuartharris

London React Meetup

Give it 5 minutes

Client

Server

Isomorphic (or Universal) rendering

Virtual DOM• The DOM is slow, has an imperative API and State

• A COMPONENT should be fast, declarative, stateless

• “Shared mutable state changing over time is the root of all evil”

• A virtual DOM allows you to declare your UI

• The UI becomes a projection of your model

• Conceptually re-rendered on EVERY change

f(d) = v f(d’) = v’

diff(v, v’) => changes diff(v’, v) => undo

WOW

• This completely changes the way I think about my application

• Very much like immediate mode games rendering

• Declarative

• Delegated event model

DEMO

What about MVC?

• Incorrect separation of concerns

• Is React the “V” in MVC?

• “Components” is a better SoC

• What about Web Components? (polymer etc)

Peter Hunt (Code Winds Podcast)

“There is a lot of stuff you get for free when you build like the browser doesn’t exist and this is one thing that distinguishes React from Web

Components and Polymer and that kind of thing …they’re getting closer and closer in with the browser, and we’re getting farther and farther

from the browser. And I think that our technique is more sustainable in the long term.”

Render to any surface• react-native

• react-art

• react-canvas

• react-three

• Netflix TV

• React 0.14

• npm install react@0.14.0-beta1

• npm install react-dom@0.14.0-beta1

–The Facebook React team

“Learn once, write anywhere”

But it’s only the “View”• Flux

• Relay and GraphQL

• Om and Om.next

• Redux

• Arch

Flux

Single direction flow

Relay and GraphQL

Functional?

• Pure render function

• shouldComponentUpdate

• Immutable data (immutable.js, mori)

• Stateless components

• Centralised application state

Tooling• Nuclide

• Jest

• Atom, Babel (JSX)

• Flow

• React Dev Tools for Chrome and Firefox

DEMO

So where is all this going?

• Towards more semantic UI declarations

• Separation of UI definition from rendering (0.14)

• Multiplatform - learn once write everywhere

• More functional

Stuart HarrisCIO, Founder Red Badger

@stuartharris