React is a revolution in web UI technology that uses a virtual DOM for fast rendering. It allows developers to build user interfaces as components in a declarative way using JavaScript or JSX. Components are fast, stateless, and their UI is a projection of data. The virtual DOM diffing algorithm efficiently detects changes and updates the real DOM. React promotes building user interfaces with unidirectional data flow and separating concerns into components rather than MVC.

1. React
a revolution in Web UI technology
@redbadgerteam

2. “strong opinions,
which are weakly held”
Paul Saffo, Director of Palo Alto’s Institute for the Future

3. 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

4. Stuart Harris
CIO, Founder Red Badger
@stuartharris

5. London React Meetup

6. Give it 5 minutes

7. Client
Server
Isomorphic (or Universal) rendering

8. 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

10. f(d) = v
f(d’) = v’
diff(v, v’) => changes
diff(v’, v) => undo

11. WOW
• This completely changes the way I think about my
application
• Very much like immediate mode games rendering
• Declarative
• Delegated event model

12. DEMO

13. What about MVC?
• Incorrect separation of concerns
• Is React the “V” in MVC?
• “Components” is a better SoC
• What about Web Components? (polymer etc)

14. 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.”

15. 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

16. –The Facebook React team
“Learn once, write anywhere”

17. But it’s only the “View”
• Flux
• Relay and GraphQL
• Om and Om.next
• Redux
• Arch

18. Flux
Single direction flow

19. Relay and GraphQL

20. Functional?
• Pure render function
• shouldComponentUpdate
• Immutable data (immutable.js, mori)
• Stateless components
• Centralised application state

21. Tooling
• Nuclide
• Jest
• Atom, Babel (JSX)
• Flow
• React Dev Tools for Chrome and Firefox

22. DEMO

23. 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

24. Stuart Harris
CIO, Founder Red Badger
@stuartharris