O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

React, London JS Meetup, 11 Aug 2015

235 visualizações

Publicada em

Slides for the talk on React, by Stuart Harris, at the London JS Meetup, 11th August 2015

Publicada em: Software
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

React, London JS Meetup, 11 Aug 2015

  1. 1. React a revolution in Web UI technology @redbadgerteam
  2. 2. “strong opinions,
 which are weakly held” Paul Saffo, Director of Palo Alto’s Institute for the Future
  3. 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. 4. Stuart Harris CIO, Founder Red Badger @stuartharris
  5. 5. London React Meetup
  6. 6. Give it 5 minutes
  7. 7. Client Server Isomorphic (or Universal) rendering
  8. 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
  9. 9. f(d) = v f(d’) = v’ diff(v, v’) => changes diff(v’, v) => undo
  10. 10. WOW • This completely changes the way I think about my application • Very much like immediate mode games rendering • Declarative • Delegated event model
  11. 11. DEMO
  12. 12. What about MVC? • Incorrect separation of concerns • Is React the “V” in MVC? • “Components” is a better SoC • What about Web Components? (polymer etc)
  13. 13. 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.”
  14. 14. 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
  15. 15. –The Facebook React team “Learn once, write anywhere”
  16. 16. But it’s only the “View” • Flux • Relay and GraphQL • Om and Om.next • Redux • Arch
  17. 17. Flux Single direction flow
  18. 18. Relay and GraphQL
  19. 19. Functional? • Pure render function • shouldComponentUpdate • Immutable data (immutable.js, mori) • Stateless components • Centralised application state
  20. 20. Tooling • Nuclide • Jest • Atom, Babel (JSX) • Flow • React Dev Tools for Chrome and Firefox
  21. 21. DEMO
  22. 22. 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
  23. 23. Stuart Harris CIO, Founder Red Badger @stuartharris