Last week, developers from all over Europe gathered in Paris for the yearly 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 goodness 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 what this year’s talks would learn us about the future.
Typing and the premise of ReasonML
Typing was a hot topic at this year’s React Europe conference, several talks covered the benefits and need for a typed language when programming React applications. Caleb Meredith - working on Oculus, and previously on Flow at Facebook - did an extensive talk on subtyping in Javascript, and the technical drawbacks of using that pattern.
Using typed programming languages has the benefit of discovering errors more early on in the development process, it makes sure you don’t make wrong assumptions while developing certain features in your app - and thus, 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.”
A solution for writing typed code for React - and one that is already being adopted by some big influential companies - is ReasonML. ReasonML is a subset of Ocaml, created by Facebook. Jared Foresyth talked about how React development today is about leveraging code safety & power. “React was not made for Javascript”, he stated. Today we use patterns (types, immutability,...) that aren’t native to Javascript. We have adopted devtools like Flow, but the process of setting up a custom type-system with Flow is usually cumbersome and time-consuming.
Adopting ReasonML today for creating React apps still has some drawbacks on Javascript development, as the community is much smaller, fewer packages are available, and some frequently used API’s - for Firebase i.e. - don’t have a ReasonML implementation. However, I think we’re about to hit a turning point. Today, ReasonML still compiles to Javascript, but the team working on ReasonML have announced they’re working on a cross-compilation tool, to export to Native code! Which would mean we could run React Native apps completely on the main thread of mobile devices.
React Native on the web: revisited
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 on 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, excitement filled the room.
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 developer- and design-tools 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, 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 - by 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!
Originally posted on In The Pocket.
Top comments (0)