Last week, developers from all over Europe gathered in Paris for the annual React Europe conference. As the React landscape is changing ever so rapidly, we sent our own In The Pocket delegation to find out all about the new and upcoming innovations in the React Community.
With the release of React 16, and more recently 16.3, the React core got a complete overhaul. By enabling developers to prioritize rerenders of their components, React has become an even more powerful tool to build performant interfaces across platforms. However, these features were announced last year, so we were very curious to see what this year’s talks would teach us about the future.
Typing and the premise of ReasonML
Using typed programming languages offers the benefit of discovering errors earlier on in the development process. It ensures you don’t make wrong assumptions while developing certain features in your app—causing you to make fewer errors. Michel Weststrate—creator of MobX—made the following analogy:
“When Napoleon invaded Russia, he went to Moscow and eventually lost most of his army. What was his mistake? Making the assumption there would be enough food in Russia to feed his army.”
React Native on the web: revisited
In the last year, we’ve noticed more and more developers in the community experimenting with cross-platform implementations for React, like React Native Web, which we demoed during our React Academy earlier this year. One of the talks that caused a lot of hype at the conference was “Bridging React Native back to its roots”, by Vincent Riemer.
As an experiment, he made a browser implementation for Yoga—the same layout framework that powers React Native. But he stumbled upon rendering the entire application in the browser with Yoga, which was not performant at all. He then tried running React in a webworker, but ran into technical limitations and dropped the project.
Fast forward a couple of months. Meanwhile, Vincent worked with React Native and started experimenting with React Native Web. He stumbled upon the fact that React Native Web was not really native, and had too much of a web-first approach. He wanted to create a development experience that allowed him to write React Native code and run it everywhere.
Enter React Native Dom. React Native Dom is a web-browser implementation for React Native. Following the native architecture, all your app and component logic runs on a webworker, while the main thread can focus entirely on rendering. Using Yoga to render the layout, we can access all the animation goodness in the browser as if we would use it on native devices. Last but not least, React Native Dom uses the same bundler as existing React Native projects, allowing for a familiar development and debugging process.
After the demo, the excitement in the room was tangible.
Beyond React: a glimpse into the future
Usually, when Airbnb sends a speaker to a conference, cool things are bound to happen. Devin Abbott—creator of tools for development and design at Airbnb—walks onto the stage.
“Should we use React? The answer is always yes.”
The future of React is a future where we can write our application once, and compile it so we can run it everywhere, without making changes to our stack, which is the main cost of using cross-platform React at the moment.
After a demo showing a React component being transpiled to Swift in real-time—yeah, that happened—Abbott stated: “React is a data format for describing components at compile-time.” To describe a component, you only need a JSON. However, at Airbnb they propose using React Native components as single source of truth, as they are easier to visualize then JSON data.
Drum roll. Introducing Lona.
Lona is a design tool for developers and a development tool for designers. Building components is boring, so Lona allows you to visually compose and maintain your components. Basically Storybook meets Sketch. It is still in early early Beta but the demo is looking amazing!
React is here to stay
It is really exciting to see how the React community is continuing its efforts to make React a truly cross-platform framework. This week we have seen new interesting proposals to improve the React developer experience using typed languages, promising new collaboration tools for designers and developers that will make processes easier and increase productivity. And most of all, proof of a big and active community.
Looking forward, the React ecosystem is evolving into a powerful cross-platform framework for building mobile, web and AR/VR apps. We’re stoked to experiment with the new features and libraries that were announced in Paris. Keep an eye out for our next React Native Academy on our socials!