🇫🇷 React Europe 2018
I visited React Europe with my colleague Peter. The conference hold in France just like the previous years. It allowed us to learn a lot of new things about React, GraphQL, React Native, and Reason. Also, a lot of excellent product releases 💕
Here’s a break down with the things I loved the most
React
Keynote
It all started with an all-American 🇺🇸 keynote from Ken Wheeler he told us about The state of React, probably a reference to the American State of the Union, I would vote for Ken as President of the React Community (spreading some love here 💙).
Context API
Context provides a way to pass data through the component tree without having to pass props down manually at every level. So basically teleporting data between components.
There are two main steps to set up the Context API into your application
1. add a context provider & define the data you want to store
2. use a context consumer where ever you need the data from the store
Want a code example? Head over to https://reactjs.org/docs/context.html
New lifecycle methods
We all know the current component lifecycles (componentWillMount, componentWillReceiveProps, and componentWillUpdate). These also happen to be the lifecycles that cause the most confusion within the React community. For these reasons, Facebook is going to deprecate those methods in favor of better alternatives. Those alternatives would be the following.
1. getDerivedStateFromProps is being added as a safer alternative to the legacy componentWillReceiveProps.
2. getSnapshotBeforeUpdate is being added to support safely reading properties from e.g. the DOM before updates are made.
All the legacy lifecycle methods will be available until react 17 comes around the corner, for then the lifecycle methods will be prefixed by “UNSAFE_” to indicate that they might cause issues.
Suspense
And there was React Suspense, it was everywhere, everyone was talking about it Suspense jokes everywhere, even the React Europe cup we got some Suspense stuff on it.
In short: the new feature allows you to defer rendering part of your application tree until some condition is met e.g. loading data from an endpoint or when a resource is loaded.
The mechanism basically works like this as explained by @acdlite
- in the render method, read a value from the cache.
- if the value is already cached, the render continues like normal
- if the value is not already cached, the cache *throws a promise*
- when the promise resolves, React retries where it left off
A good example of suspense would be async placeholders, here’s a code example
import React, { Fragment } from “react”;function Placeholder({ delayMs, fallbackUI, children }) {
return (
<React.Timeout ms={delayMs}>
{didTimeout => {
return (
<Fragment>
<span hidden={didTimeout}>{children}</span>
{didTimeout ? fallbackUI : null}
</Fragment>
);
}}
</React.Timeout>
);
}export default Placeholder;
thanks to Peggy Rayzis!
The Case for Whimsy
Joshua Comeau give an awesome talk about The Case for Whimsy, we usually tend to just craft new features and fix bugs but besides that, we could also build fun things e.g. at Khan Academy, they fill the user’s screen with confetti rain when they get 100% correct on an exercise. That’s pure joy, go make something fun!
On Apollo
Peggy Rayzis is an Open Source Engineer @apollographql the talk was created around the future of Apollo, what’s available right now and what’s the next big thing in the near future.
The new 2.1 version of Appolo now supports Render Props 🎉 a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
And of course, coming in 2018, Suspense support!
Replicated Redux
Jim Purbrick is doing awesome things in ReactVR on the Oculus team at Facebook. He showed us the potential of Redux for building networked ReactVR applications.
Redux’s reified events, serializable actions and state, middleware, side effect free functional reducers and time travel superpowers make it well suited for building simple, networked, testable decoupled simulations.
A year of CodeSandbox
Ives van Hoorne is the owner of one of the most awesome products currently around, it’s called CodeSandBox, CodeSandbox is an online editor that helps you create web applications, from prototype to deployment.
CodeSandbox recently turned one year old and gave him some valuable insights he’s shared that in his talk ⬇️
Beyond React
Devin Abbott is a software engineer working at AirbnbEng he’s currently working on Lona, a perfect fit for a gap that a lot of companies have, a bridge between design and development. Lona is a design tool that allows you to design flexible, compassable component systems and transpile these components into any language on any platform, such as Swift components on iOS, or Kotlin components on Android.
Check out the Github repo https://github.com/airbnb/lona this tool is 🔥
And last but not least Bridging React Native Back to its Roots
An epic talk by @vincentrimer he’s a software engineer at Symantec he released React Native DOM an experimental, comprehensive port of React Native to the web. It’s multithreaded by default, build with the same bundler and it has the same layout behaviour as React Native on mobile.
Check out the Github repo https://github.com/vincentriemer/react-native-dom
Thank you for taking the time to read this story! If you enjoyed reading this story, clap for me by clicking the below so other people can see this here on Medium.You can follow me on Twitter @0x1ad2 and feel free to tweet me anything!
I work at Sytac.io; We are a consulting company in the Netherlands, we employ around ~100 developers across the country at A-grade companies like KLM, ING, ABN-AMRO, TMG, Ahold Delhaize, and KPMG. Together with the community, we run DevJam check it out and subscribe if you want to read more stories like this one. Alternatively, look at our job offers if you are seeking a great job!
