85a6462062 · samitouri/QOS-React-2

@@ -0,0 +1,258 @@

1 +---

2 +title: React.js Conf Round-up 2015

3 +layout: post

4 +author: Steven Luscher

5 +---

6 +

7 +It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.

8 +

9 +## The talks

10 +

11 +<div class="skinny-row">

12 + <div class="skinny-col">

13 + <h3 style="margin-top:0"><a class="anchor" name="talk-keynote"></a>Keynote <a class="hash-link" href="#talk-keynote">#</a></h3>

14 + <p>

15 + <strong>Tom Occhino</strong> opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM?

16 + </p>

17 + </div>

18 + <div class="skinny-col">

19 + <iframe width="305" height="171" src="https://www.youtube.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>

20 + </div>

21 +</div>

22 +

23 +<div class="skinny-row">

24 + <div class="skinny-col">

25 + <h3 style="margin-top:0"><a class="anchor" name="talk-tweak"></a>Tweaking in real time <a class="hash-link" href="#talk-tweak">#</a></h3>

26 + <p>

27 + <strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using Webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.

28 + </p>

29 + </div>

30 + <div class="skinny-col">

31 + <iframe width="305" height="171" src="https://www.youtube.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>

32 + </div>

33 +</div>

34 +

35 +<div class="skinny-row">

36 + <div class="skinny-col">

37 + <h3 style="margin-top:0"><a class="anchor" name="talk-ast"></a>Abstract Syntax Trees <a class="hash-link" href="#talk-ast">#</a></h3>

38 + <p>

39 + <strong>Gurdas Nijor</strong> showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.

40 + </p>

41 + </div>

42 + <div class="skinny-col">

43 + <iframe width="305" height="171" src="https://www.youtube.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>

44 + </div>

45 +</div>

46 +

47 +<div class="skinny-row">

48 + <div class="skinny-col">

49 + <h3 style="margin-top:0"><a class="anchor" name="talk-relay-graphql"></a>Relay and GraphQL <a class="hash-link" href="#talk-relay-graphql">#</a></h3>

50 + <p>

51 + <strong>Daniel Schafer</strong> and <strong>Jing Chen</strong> showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.

52 + </p>

53 + </div>

54 + <div class="skinny-col">

55 + <iframe width="305" height="171" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>

56 + </div>

57 +</div>

58 +

59 +<div class="skinny-row">

60 + <div class="skinny-col">

61 + <h3 style="margin-top:0"><a class="anchor" name="talk-channels"></a>Channels <a class="hash-link" href="#talk-channels">#</a></h3>

62 + <p>

63 + <strong>James Long</strong> explores what might happen if we introduce channels, a new style of coordinating actions, to React.

64 + </p>

65 + </div>

66 + <div class="skinny-col">

67 + <iframe width="305" height="171" src="https://www.youtube.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>

68 + </div>

69 +</div>

70 +

71 +<div class="skinny-row">

72 + <div class="skinny-col">

73 + <h3 style="margin-top:0"><a class="anchor" name="talk-router"></a>React Router <a class="hash-link" href="#talk-router">#</a></h3>

74 + <p>

75 + <strong>Michael Jackson</strong> reminded us that URLs should be part of our design process, and showed us how <a href="https://github.com/rackt/react-router">react-router</a> can help to manage the transitions between them.

76 + </p>

77 + </div>

78 + <div class="skinny-col">

79 + <iframe width="305" height="171" src="https://www.youtube.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>

80 + </div>

81 +</div>

82 +

83 +<div class="skinny-row">

84 + <div class="skinny-col">

85 + <h3 style="margin-top:0"><a class="anchor" name="talk-full-stack-flux"></a>Full-stack Flux <a class="hash-link" href="#talk-full-stack-flux">#</a></h3>

86 + <p>

87 + <strong>Pete Hunt</strong> showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.

88 + </p>

89 + </div>

90 + <div class="skinny-col">

91 + <iframe width="305" height="171" src="https://www.youtube.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>

92 + </div>

93 +</div>

94 +

95 +<div class="skinny-row">

96 + <div class="skinny-col">

97 + <h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>

98 + <p>

99 + <strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="http://facebook.github.io/fixed-data-table/">FixedDataTable</a>.

100 + </p>

101 + </div>

102 + <div class="skinny-col">

103 + <iframe width="305" height="171" src="https://www.youtube.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>

104 + </div>

105 +</div>

106 +

107 +<div class="skinny-row">

108 + <div class="skinny-col">

109 + <h3 style="margin-top:0"><a class="anchor" name="talk-intl"></a>FormatJS and react-intl <a class="hash-link" href="#talk-intl">#</a></h3>

110 + <p>

111 + <strong>Eric Ferraiuolo</strong> showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.

112 + </p>

113 + </div>

114 + <div class="skinny-col">

115 + <iframe width="305" height="171" src="https://www.youtube.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>

116 + </div>

117 +</div>

118 +

119 +<div class="skinny-row">

120 + <div class="skinny-col">

121 + <h3 style="margin-top:0"><a class="anchor" name="talk-hype"></a>Hype! <a class="hash-link" href="#talk-hype">#</a></h3>

122 + <p>

123 + <strong>Ryan Florence</strong> showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.”

124 + </p>

125 + </div>

126 + <div class="skinny-col">

127 + <iframe width="305" height="171" src="https://www.youtube.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>

128 + </div>

129 +</div>

130 +

131 +<div class="skinny-row">

132 + <div class="skinny-col">

133 + <h3 style="margin-top:0"><a class="anchor" name="talk-native"></a>React Native <a class="hash-link" href="#talk-native">#</a></h3>

134 + <p>

135 + <strong>Christopher Chedeau</strong> showed us how to bring the developer experience of working with React on the web to native app development, using React Native.

136 + </p>

137 + </div>

138 + <div class="skinny-col">

139 + <iframe width="305" height="171" src="https://www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>

140 + </div>

141 +</div>

142 +

143 +

144 +<div class="skinny-row">

145 + <div class="skinny-col">

146 + <h3 style="margin-top:0"><a class="anchor" name="talk-components"></a>Components <a class="hash-link" href="#talk-components">#</a></h3>

147 + <p>

148 + <strong>Andrew Rota</strong> explained how React and Web Components can work together, and how to avoid some common pitfalls.

149 + </p>

150 + </div>

151 + <div class="skinny-col">

152 + <iframe width="305" height="171" src="https://www.youtube.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>

153 + </div>

154 +</div>

155 +

156 +<div class="skinny-row">

157 + <div class="skinny-col">

158 + <h3 style="margin-top:0"><a class="anchor" name="talk-gibbon"></a>Beyond the DOM <a class="hash-link" href="#talk-gibbon">#</a></h3>

159 + <p>

160 + <strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.

161 + </div>

162 + <div class="skinny-col">

163 + <iframe width="305" height="171" src="https://www.youtube.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>

164 + </div>

165 +</div>

166 +

167 +<div class="skinny-row">

168 + <div class="skinny-col">

169 + <h3 style="margin-top:0"><a class="anchor" name="talk-visualization"></a>Data Visualization <a class="hash-link" href="#talk-visualization">#</a></h3>

170 + <p>

171 + <strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.

172 + </div>

173 + <div class="skinny-col">

174 + <iframe width="305" height="171" src="https://www.youtube.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>

175 + </div>

176 +</div>

177 +

178 +<div class="skinny-row">

179 + <div class="skinny-col">

180 + <h3 style="margin-top:0"><a class="anchor" name="talk-refracted"></a>React Refracted <a class="hash-link" href="#talk-refracted">#</a></h3>

181 + <p>

182 + <strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.

183 + </div>

184 + <div class="skinny-col">

185 + <iframe width="305" height="171" src="https://www.youtube.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>

186 + </div>

187 +</div>

188 +

189 +<div class="skinny-row">

190 + <div class="skinny-col">

191 + <h3 style="margin-top:0"><a class="anchor" name="talk-flux-panel"></a>Flux Panel <a class="hash-link" href="#talk-flux-panel">#</a></h3>

192 + <p>

193 + <strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.

194 + </div>

195 + <div class="skinny-col">

196 + <iframe width="305" height="171" src="https://www.youtube.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>

197 + </div>

198 +</div>

199 +

200 +<div class="skinny-row">

201 + <div class="skinny-col">

202 + <h3 style="margin-top:0"><a class="anchor" name="talk-communication"></a>Component communication <a class="hash-link" href="#talk-communication">#</a></h3>

203 + <p>

204 + <strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.

205 + </div>

206 + <div class="skinny-col">

207 + <iframe width="305" height="171" src="https://www.youtube.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>

208 + </div>

209 +</div>

210 +

211 +<div class="skinny-row">

212 + <div class="skinny-col">

213 + <h3 style="margin-top:0"><a class="anchor" name="talk-typescript"></a>Flow and TypeScript <a class="hash-link" href="#talk-typescript">#</a></h3>

214 + <p>

215 + <strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.

216 + </div>

217 + <div class="skinny-col">

218 + <iframe width="305" height="171" src="https://www.youtube.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>

219 + </div>

220 +</div>

221 +

222 +<div class="skinny-row">

223 + <div class="skinny-col">

224 + <h3 style="margin-top:0"><a class="anchor" name="talk-qa"></a>Core Team Q&A <a class="hash-link" href="#talk-qa">#</a></h3>

225 + <p>

226 + <strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&A session.

227 + </div>

228 + <div class="skinny-col">

229 + <iframe width="305" height="171" src="https://www.youtube.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>

230 + </div>

231 +</div>

232 +

233 +## Reactions

234 +

235 +The conference is over, but the conversation has just begun.

236 +

237 +**Mihai Parparita** detailed his efforts to [hack his way to a React.js Conf ticket](http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html); **James Long** blogged about [his first encounter with React Native](http://jlongster.com/First-Impressions-using-React-Native); **Eric Florenzano** talked about how he perceives the [impact of Relay, GraphQL, and React Native](https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2) on software development; **Margaret Staples** blogged about her experience of [being on-campus at Facebook HQ](http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html); **Jeff Barczewski** tied his experience of attending the conference up with a bow in this [blog post filled with photos, videos, and links](http://codewinds.com/blog/2015-02-04-reactjs-conf.html); **Kevin Old** left us with [his takeaways](http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html); **Paul Wittmann** found React Native [freshly on his radar](http://www.railslove.com/stories/fresh-on-our-radar-react-native); and finally, undeterred by not being able to attend the conference in person, **Justin Ball** [summarized it from afar](http://www.justinball.com/2015/02/03/i-didn't-attend-react.js-conf/).

238 +

239 +And, in case you missed a session, you can borrow **Michael Chan’s** [drawings](http://chantastic.io/2015-reactjs-conf/), **Mihai Parparita’s** [summary](https://quip.com/uJQeABv7nkFN), or **Shaohua Zhou’s** [day 1](http://getshao.com/2015/01/29/react-js-conf-notes-day1/) / [day 2](http://getshao.com/2015/01/29/react-js-conf-notes-day-2/) notes.

240 +

241 +<div class="skinny-row">

242 + <div class="skinny-col">

243 + <blockquote class="twitter-tweet" lang="en"><p>Notes from <a href="https://twitter.com/dlschafer">@dlschafer</a> and <a href="https://twitter.com/jingc">@jingc</a>'s <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> talk "Data fetching for React applications at Facebook" <a href="http://t.co/IUZUbDCDMQ">pic.twitter.com/IUZUbDCDMQ</a></p>— Michael Chan (@chantastic) <a href="https://twitter.com/chantastic/status/560538533161472000">January 28, 2015</a></blockquote>

244 + <blockquote class="twitter-tweet" lang="en"><p>This is just magical (in the good way)… GraphQL + Relay is amazing. <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>— Chris Williams (@voodootikigod) <a href="https://twitter.com/voodootikigod/status/560533225395589120">January 28, 2015</a></blockquote>

245 + <blockquote class="twitter-tweet" lang="en"><p>These… these are my people. :) <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>— Thomas Beirne (@Beirnet) <a href="https://twitter.com/Beirnet/status/560317879501848576">January 28, 2015</a></blockquote>

246 + </div>

247 + <div class="skinny-col">

248 + <blockquote class="twitter-tweet" lang="en"><p>Humbled by the React team and community. Found <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> very mindful, practical and just real.</p>— xnoɹǝʃ uɐıɹq (@brianleroux) <a href="https://twitter.com/brianleroux/status/560972130112655360">January 30, 2015</a></blockquote>

249 + <blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.</p>— Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>

250 + <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.</p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/561232290273980416">January 30, 2015</a></blockquote>

251 + <blockquote class="twitter-tweet" lang="en"><p>I really love the community shout outs by <a href="https://twitter.com/Vjeux">@vjeux</a> between talks at <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a>!</p>— Andrew Rota (@AndrewRota) <a href="https://twitter.com/AndrewRota/status/560927339522297856">January 29, 2015</a></blockquote>

252 + </div>

253 +</div>

254 +<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

255 +

256 +**All proceeds from React.js Conf 2015 were donated to the wonderful programs at [code.org](http://code.org)**. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.

257 +

258 +<iframe width="305" height="171" src="https://www.youtube.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>

Added special edition round-up for React.js Conf 2015