Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What is React?

What is React?

This is a talk I gave about React at Triangle Javascript in January 2015

Links to examples can be found at the end of the presentation

D9a6de56720540b203522bfddc835b66?s=128

Nathan Hunzaker

January 27, 2015
Tweet

Transcript

  1. React

  2. Nate Hunzaker Front-end Developer, Viget @natehunzaker

  3. We build lots of user interfaces

  4. None
  5. Every framework has a big idea

  6. They don't just reinvent the wheel

  7. “Backbone.js gives structure to web applications [...]”

  8. “Ember.js is built for productivity. Designed with developer ergonomics in

    mind...”
  9. Keep it simple

  10. “We can only hope to make reliable those things in

    which we understand.” - Rich Hickey
  11. • Composition • Unidirectional Flow • Static mental model

  12. Compo(sition,nents) "React is all about building reusable components. In fact,

    with React the only thing you do is build components." - facebook.github.io/react
  13. <main/> <Menu/> <Inbox/>

  14. None
  15. None
  16. None
  17. “Templates separate technology, not concerns.” - Pete Hunt (formerly of

    Facebook)
  18. None
  19. JSX “The purpose of this specification is to define a

    concise and familiar syntax for defining tree structures with attributes.” http://facebook.github.io/jsx/
  20. None
  21. None
  22. None
  23. But what's really going on?

  24. JSX

  25. None
  26. <main/> <Menu/> <Inbox/>

  27. Virtual DOM

  28. Build a DOM tree Compare to old state Get cheapest

    mutation path (with Levenshtein) Write new DOM (in batches) New state
  29. State changed! So what...

  30. Imperative Programming Describe the transition between state

  31. Declarative Programming Express the logic, not the flow

  32. Define Interface Change State • Each change in state flushes

    to the DOM • Properties are sent in one direction • No cascading updates
  33. Let's talk about state

  34. A component is given props A component manages state

  35. A component is given props

  36. A component manages state

  37. That's basically it

  38. Static Rendering Model

  39. This is fast

  40. Holy Hot Modules! https://github.com/gaearon/react-hot-loader

  41. Really fast

  42. Static Mental Model

  43. When you render to a virtual environment, the DOM becomes

    an implementation detail
  44. The DOM isn't the only rendering target

  45. What is an isomorphic?

  46. None
  47. React.render() is idempotent Same in, same out

  48. None
  49. Page Load Boot App Server

  50. React.renderToStaticMarkup(component)

  51. None
  52. How do I build real apps with this?

  53. Flux “Flux [...] complements React's composable view components by utilizing

    a unidirectional data flow.” http://facebook.github.io/flux/
  54. None
  55. I thought this was supposed to be simple

  56. Job Queue State State State I want to create a

    widget Ready a widget! I can totally do that! Ch-ch-ch-ch-changes I love David Bowie!
  57. Flux Formal Capacitor: A demo isomorphic Flux app https://github.com/vigetlabs/capacitor

  58. Flux Fun http://www.natehunzaker.com/yappy-bird/

  59. App State Stimuli New state

  60. Initial State Sound Jump()

  61. None
  62. None
  63. None
  64. None
  65. NuclearJS https://github.com/optimizely/nuclear-js Yahoo Flux https://github.com/yahoo/flux-examples Om (Clojurescript) https://github.com/swannodette/om

  66. On that note...

  67. React injects a few constraints that yield powerful benefits

  68. By focusing on composability and a unidirectional flow of data,

    we can greatly simplify our apps
  69. Hopefully I didn't scare you off with JSX :)

  70. Thanks! Nate Hunzaker Front-End Developer, Viget @natehunzaker

  71. Iconography: User interface icon by Aziz, the Noun Project http://thenounproject.com/azisher

    General React Concepts: React Homepage http://facebook.github.io/react/ JSX Specification http://facebook.github.io/jsx/ Rethinking Best Practices, Pete Hunt: https://www.youtube.com/watch?v=x7cQ3mrcKaY Decomplexifying Code with React, Steven Luscher: https://www.youtube.com/watch?v=rI0GQc__0SM An Introduction to ReactJS, James Pierce https://www.youtube.com/watch?v=m2fuO2wl_3c Flux Flux Homepage http://facebook.github.io/flux/ Examples React Fun https://github.com/nhunzaker/react-fun React Animatable https://github.com/nhunzaker/react-animatable An Isomorphic Chart https://github.com/nhunzaker/an-isomorphic-chart Capacitor https://github.com/vigetlabs/capacitor Yappy Bird https://github.com/nhunzaker/yappy-bird
  72. react-router: the best router https://github.com/rackt/react-router