react, london js meetup, 11 aug 2015
TRANSCRIPT
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
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 [email protected]
• npm install [email protected]
–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
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