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

Transcript

1. React
2. Nate Hunzaker Front-end Developer, Viget @natehunzaker
3. We build lots of user interfaces
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/>
17. “Templates separate technology, not concerns.” - Pete Hunt (formerly of Facebook)
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/
23. But what's really going on?
24. JSX
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?
47. React.render() is idempotent Same in, same out
49. Page Load Boot App Server
50. React.renderToStaticMarkup(component)
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/
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()
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