- Published on
Takeaways from React.js Conf 2015
- Authors
- Name
- Kevin Old
- @kevinold
tl;dr
-
React.js is rapidly being adopted and used by major players in the industry. NetFlix, Codecademy, Thinkmill, Bolster, Instructure, Inc and many more are using React, React + Flux or React and a twist on the idea of Flux in their projects and products to improve overall quality of code.
-
React Native - This is game changing! Introduced in the React.js Conf 2015 Keynote - Introducing React Native and React.js Conf 2015 Keynote 2 - A Deep Dive into React Native, React Native enables JavaScript developers to write native iOS and Android applications.
-
Flux, the project/pattern/concept/idea, is not going away and it is being implemented in various ways, neither of them are "wrong".
-
Immutability is here to stay in JavaScript and can drastically improve the reliability, efficiency and simplicity of your JavaScript data collections. Immutable aims to have you "Developing with immutable data encourages you to think differently about how data flows through your application."
-
Relay is an interation in the world of React + Flux based apps. Incorporating lessons learned with building large scale apps (Facebook Ads) they have determined that allowing components to retrieve their own data (via the forthcoming GraphQL).
-
Surprisingly there was no mention of Jest at the conference.
-
Videos from the conference are being posted in this Youtube playlist
-
Christopher Chedeau (vjeux) and team did an AMAZING JOB of organizing the entire conference!
React.js
The conference was all things React.js! Many spoke of best practices and optimizations with regards to structure and the use of immutable data structures.
React.js is rapidly being adopted and used by major players in the industry. NetFlix, Codecademy, Thinkmill, Bolster, Instructure, Inc and many more are using React, React + Flux or React and a twist on the idea of Flux in their projects and products to improve overall quality of code.
React v0.13.0-beta.1 was released with ES6 Class support using jsx --harmony
. The release also adds support for CoffeeScript, TypeScript and other languages that compile to JavaScript as in ES6 they "are just plain old JavaScript classes".
shouldComponentUpdate()
with immutable data structures was mentioned throughout the conference as the primary optimiaztion technique to speed up your already fast React.js apps.
It was clear from discussions after the React.js Conf 2015 - react-router increases your productivity talk with @mjackson and @ryanflorence that react-router has a lot of new fans. The talk clarified how using react-router is part of the application design process.
Flux
Flux, the project/pattern/concept/idea, is not going away and it is being implemented in various ways, neither of them are "wrong".
Confusion around Flux being replaced by the forthcoming Relay was squashed in side conversations and a Q&A with the Facebook team on the last day.
Pete Hunt shared a great talk on using Flux full stack (React.js Conf 2015 - Full Stack Flux) that he is using with his new company.
Immutable data
Immutability is here to stay in JavaScript and can drastically improve the reliability, efficiency and simplicity of your JavaScript data collections. Immutable aims to have you "Developing with immutable data encourages you to think differently about how data flows through your application."
Lee Byron gave a remarkable talk on "Immutable Data and React" and showed how to incorporate Immutable into a Flux Store by adding OrderedMap
and Map
. An ES5 gist of the ES6 example he gave in the presentation is here
React Native
A completely game changing move by Facebook to enable JavaScript developers to write native iOS and Android applications with React.js.
Introduced in two keynotes, one the first day of the conference which left us waiting for more (React.js Conf 2015 Keynote - Introducing React Native) and the other the second day with a demo of the functionality and a look at a little bit of code (React.js Conf 2015 Keynote 2 - A Deep Dive into React Native). Attendees were given access to a Beta version of React Native with a few sample apps to being playing with and submitting patches. A day after the conference we already have minor demos coming online.
The statement was made by Christopher Chedeau (vjeux) that roughly 3 weeks before React.js Conf that they were unsure if they'd have a working version of React Native to release. I'm glad they were able to and that we were given access.
It may be best summed up in these tweets from @ryanflorence and @jlongster:
React Native gives you a web development workflow, no builds! Check out my 30 second video https://t.co/DfkVri1pF0
— Ryan Florence (@ryanflorence) January 31, 2015
I'm an iOS dev now, thanks React Native https://t.co/OmgZURVK4j pic.twitter.com/TvOHsngNgy
— Ryan Florence (@ryanflorence) January 31, 2015
Lots of questions about react native assume it's like other "JS for mobile apps" tools. Its literally native. Maybe think of it like swift?
— Ryan Florence (@ryanflorence) January 31, 2015
Oh man. Game UIs just got incredibly easy with React Native. Cmd+R refreshes the UI too. pic.twitter.com/b80b3xlK4F
— James “Jimmy” Long (@jlongster) January 31, 2015
The Future - Relay and GraphQL
My impression of Relay is that it is not meant to replace Flux, but to provide a window into how Facebook is iterating on using React with large applications. Enabling a React Component to retrieve it's own data is not only more efficient, as they've found, but it is much better encapsulation. I have the impression that Flux is still used as is to help maintain application flow client side. Relay and GraphQL due to be open sourced sometime in the near future.
Facebook's Relay is for data exactly what our router is for views. Match a path, then map/reduce a hierarchy.
— Ryan Florence (@ryanflorence) January 31, 2015
There is also an Unofficial Relay FAQ with more details.
Jest
Surprisingly there was no mention of Jest at the conference and none of the talks mentioned their testing infrastruture in relation to React and Flux.
Videos
Videos from the conference are being posted in this Youtube playlist
In Closing
Christopher Chedeau (vjeux) and team did an AMAZING JOB of organizing the entire conference! All visitors were given access to many of the Facebook team and they were very receptive to feedback from users of React and Flux. It was clear that the excitement was still there for the entire Facebook team and they were eager to share everything they'd been working on.