ReactEurope is one of the biggest React conferences in Europe. The third of the conference took place on 18–19 May 2017 in Paris. There were very interesting talks and great speakers. I would like to give you overview of my favourite talks.
We were all kindly welcomed. After registration, there were small gifts and shirts for all attendees. The French breakfast with croissants, coffee was delicious. We had chance to meet new people before talks.
The talks mainly focused on improving the performance of React; reducing bundle size, initial load time, speeding up rendering etc.
Andrew Clark opened the conference with updates about React. These updates are named as React Fiber.
React 16 is the first release of Fiber. Here are the other features:
- Fragments: Return multiple elements from render (first applause of the talk 😃)
- Improved error handling: If there’s an unhandled exception in component, React is going to unmount entire application. This new behaviour forces the user to refresh the browser instead of using broken application.
- Error boundaries: try…catch statement for components
- Portals: It allows you to render child component into any DOM node.
Beyond React 16:
- Offscreen/Hidden Prioritization: Offscreen or hidden components have lower rendering priority compared to visible components.
- Better code splitting: Code splitting could cause cascading effect. To provide a smooth user experience, React 16 introduces a special phase called as the commit phase.
What I Learned Benchmarking React
Dominic Gannaway stated that React can be smaller and faster and he explained how they reduced size and startup time of React. Here is the explanation of how they achieved this:
- New build system: By using Rollup, size reduced by 10% and load time reduced by 9%.
- Removing unnecessary code: createClass, PropTypes and React.DOM.div()
- Benchmarking: Dominic illustrated an interesting benchmarking tool called as snapshot benchmarking. It helped them to compare bundle sizes, load times, initial render and time to interactive of two version of React.
La nouvelle vague
Sunil Pai pointed out that we send too much code to browsers. We can solve this problem by compilers and bundlers. This is a new wave, movement from runtimes to compilers. With this movement, compilers should have following characteristics:
- Seize the means of production
- Compile away what would’ve required runtime
- Gradual annotations
- Route aware!
Some examples of new wave of frameworks: gatsby.js, next.js, relay, Prepack
Sunil also shared his ideas about his experiment rakt. I liked the idea of rakt, it’s very exciting. You can find examples on GitHub page. https://github.com/threepointone/rakt
How Streaming Can Supercharge React
Sasha Aickin’s talk was focused on initial render time and time to interactive. He made a demo to compare CSR with SSR. Important metrics from his demo:
Server side rendering is a lot faster to get content up on screen but it causes a delay between first paint and time to interactive. It’s a bad user experience; you have buttons on screen that don’t work.
The solution is Server Chunk Rendering (SCR). Broke page into fragments then separate out the JS, CSS, pre-rendered HTML and JSON for that fragment. The server processes and returns these chunks in order. Once the browser gets a chunk it can both paint and make that fragment interactive.
React as a Platform
Leland Richardson shared interesting idea about sharing code between React and React Native. Every feature they add the Airbnb needs to get created for at least three different platforms (Web, Android, iOS). After adopting React Native for development of some features in native apps, they effectively move from writing the Airbnb three times to writing the Airbnb two times. It could be better if they write the Airbnb only once. To achieve this, Leland came with a proposal: react-primitives.
The purpose is sharing widely used UI components between React and React Native.
} from ‘react-primitives’;
Other components can be created with composition of these primitive components. With this approach, we can write platform-independent React components.