ReactEurope 2017

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.

The venue

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.

ReactEurope 2017 in Espace Charenton

The Talks

The talks mainly focused on improving the performance of React; reducing bundle size, initial load time, speeding up rendering etc.

Keynote

Andrew Clark opened the conference with updates about React. These updates are named as React Fiber.

He explained how synchronous scheduling blocks other work with a newsfeed video streaming example. We need to split huge blocks of work into chunks. It’s not easy to do in major JavaScript frameworks but React’s component based API already provides abstraction for splitting work into chunks. React Fiber schedules work using cooperative multitasking with the same component API.

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:

React rendering times from Aickin’s presentation

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.

import {
View,
Text,
Image,
StyleSheet,
Touchable,
Animated,
Platform
} from ‘react-primitives’;

Other components can be created with composition of these primitive components. With this approach, we can write platform-independent React components.