Introduction to React - Triangle.rb May 2015

The presentation I gave at Triangle.rb introducing React.

Transcript

1. React
2. Nate Hunzaker Front-end Developer, Viget @natehunzaker
3. We build lots of user interfaces
7. Every framework has a big idea
8. They don't just reinvent the wheel
9. “Backbone.js gives structure to web applications [...]”
10. “Ember.js is built for productivity. Designed with developer ergonomics in mind...”
11. Keep it simple
12. “We can only hope to make reliable those things in which we understand.” - Rich Hickey
13. • Composition • One way data flow • Static mental model
14. 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
15. Encourage developers to break a user interface into small components.
16. <Blogs/> <Navigation/> <Posts/> <Post/> <Post/> <Post/> <Post/>
23. • No templates • Strange syntax
24. “Templates separate technology, not concerns.” - Pete Hunt (formerly of Facebook)
26. 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/
30. How does this work?
33. npm install babel npm install react-tools
35. <main/> <Menu/> <Inbox/>
36. Virtual DOM
37. Build a DOM tree Compare to old state Get cheapest mutation path (with Levenshtein) Write new DOM (in batches) New state
38. State changed! So what...
39. Imperative Programming Describe the transition between state
40. Declarative Programming Express the logic, not the flow
41. Define Interface Change State • Each change in state flushes to the DOM • Properties are sent in one direction • No cascading updates
42. Let's talk about state
43. A component is given props A component manages state
44. A component is given props
45. A component manages state
46. That's kind of it
47. Static Rendering Model
48. This is fast
49. Holy Hot Modules! https://github.com/gaearon/react-hot-loader
50. Really fast
51. Static Mental Model
52. When you render to a virtual environment, the DOM becomes an implementation detail
55. What is an isomorphic?
57. React.render() is idempotent Same in, same out
60. React.renderToStaticMarkup
62. How do I build real apps with this?
63. Flux “Flux [...] complements React's composable view components by utilizing a unidirectional data flow.” http://facebook.github.io/flux/
65. I thought you said this was simple
66. 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!
67. Flux Formal Capacitor: A demo isomorphic Flux app https://github.com/vigetlabs/capacitor
68. Flux Fun http://www.natehunzaker.com/yappy-bird/
69. App State Stimuli New state
70. Initial State Sound Jump()
75. NuclearJS https://github.com/optimizely/nuclear-js Yahoo Flux https://github.com/yahoo/flux-examples Om (Clojurescript) https://github.com/swannodette/om
76. On that note...
77. React injects a few constraints that yield powerful benefits
78. By focusing on composability and a single direction flow of data, we can greatly simplify our apps
79. Hopefully you didn't ignore me after the JSX :)
80. Thanks! Nate Hunzaker Front-end Developer, Viget @natehunzaker
81. Iconography: User interface icon by Aziz, the Noun Project http://thenounproject.com/azisher JavaScript Logo: https://github.com/voodootikigod/logo.js 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
82. react-router: the best router https://github.com/rackt/react-router