Minutes of React Europe 2017

We attended to the React Europe 2017 conference, where some of the most influent React community members gave amazing talks to a huge audience.

From React Native to WebAssembly, here are our thoughts on these two days. And if you only have a few minutes, don't miss the highlights of the conference:

• Keynote: React 16 Announcement
• Worse is Better: The Upside of JavaScript Fatigue
• Animating the Virtual DOM
• React as a Platform: A Path towards a Truly Cross-Platform UI
• Lightning Talks

Keynote

We were late for the first keynote, but we climbed on the Andrew Clark's bandwagon. He is engineer at Facebook, author / co-author of some little libraries such as Recompose and Redux. Andrew introduced React 16, including the advantages of React Fiber: Asynchronous lifecycle, step by step animation, rendering priority, error boundaries, and so on.

Fiber is not ready yet but it promises to open up new massive perspectives while keeping zero breaking change to its API.

There could not be a better introduction to the 2017 edition of React Europe!

What Dominic Gannaway Learned Benchmarking React

Dominic Gannaway shared his journey to a stable InfernoJS and how he could make it so fast. The techniques he used are now being implemented in React because Facebook hired him.

For open-source maintainers, Dominic explained how we can reduce bundle size by 10% just by switching from Webpack to Rollup, which allows flat bundles.

Rollup is for libraries, Webpack for applications

The size of the React library itself, together with its startup time, can also be reduced by dropping legacy APIs. Competing frameworks like Preact are taken seriously by Facebook, and they reuse the best ideas in React.

Facebook spent a good amount of time developing benchmarks with reproducible results, and representative of real life use cases. So don't believe the next React clone when they say they're 250% faster on an unknown benchmark. Real life scenarios are what the React team focuses on.

Finally, mentioned that when React introduces a breaking change, they also publish codemods to automate app migrations. We've used such codemods ourselves (e.g. to import PropTypes from another package), and they help reduce the upgrade work by 90%.

Building High-Quality JavaScript Tools

Christoph Pojer, engineer at Facebook, presented the new version of their test framework: Jest.

He started with a general statement: a high-quality JavaScript tool needs Performance, Features and Adaptability. And then transposed it to Jest.

Jest: Painless Delightful JavaScript Testing

A good old advertising stunt, but we must admit that the new interactive and multi-projects test runner seem very convenient and we'll definitively give it a try. And Jest's best selling point is parallel execution, which becomes a must as soon as your test build takes more than a dozen seconds.

Between some marketing catchphrases, Christoph spread some wisdom:

• Performance must be the number one feature
• Snapshots don't replace a good test suite, but it's better to have snapshot tests than zero test

La Nouvelle Vague

Sunil Pai, author of glamor, let us know about clever ideas used in what he describes as the next-generation JavaScript frameworks.

He refered to Gatsby, Next.js, Prepack, and so on.

Inspired by this trend, he authored a new library called Rakt. It allows for easy dynamic import and code splitting, in combination with react-router.

// More examples here
// https://github.com/threepointone/rakt/blob/master/packages/rakt-example/
<Route
    path="/action"
    module="./action.js"
/>
<Route
    path="/user"
    module="./user.js"
    defer
/>

Rakt is at a very early stage (it's poorly documented), but very promising.

Overall, Sunil recommended extracting ideas from those libraries, which promote new and better practices.

Worse is Better: The Upside of JavaScript Fatigue

Kevin Lacker, former Parse co-founder and now at Facebook, gave an excellent talk about why the "JavaScript Fatigue" is a good thing to the community.

"The Right Thing (tm)" is the wrong thing

His observation is simple: Simplicity brings popularity. Popularity attracts more contributors. More contributors means more fatigue.

In other words: Fatigue is the result of the success.

How to deal with? With MORE JavaScript.

Surfing the wave of the numerous NPM packages and making our own little place in the community leads to pride and excitement. At the end, we no longer remember the fatigue.

It was a very motivating talk, funny and refreshing. Kevin is by far one of the best speakers we heard. Definitely worth the watch!

What WebAssembly Could Mean for React

Lin Clark, who codes at Mozilla and authors Code Cartoons, gave a very low-level talk.

To summarize, she presented WebAssembly, which is a technology that allows browsers to run binary modules (.wasm) instead of JavaScript. WebAssembly offers many advantages such as low-level code reuse, faster computation, and faster downloads. WebAssembly can access memory and manage it in a finer-grained way than JavaScript, without sacrificing isolation.

It could be a big win in the long term, but to be very useful WebAssembly needs to access to the DOM - which is not yet the case in the spec. So for React users, the benefits of WebAssembly are purely hypothetic, and not in the near future.

Quite long for a "what if" talk, but interesting if you want a glimpse of the far future. WebAssembly is a difficult topic, but fortunately, Lin is a good speaker and her drawings were very helpful.

Imperfection

Cheng Lou works at Facebook on a project called Reason.

Reason is a new syntax for the OCaml language, and a workflow for compiling to JavaScript and native code. It's super interesting, but unfortunately it was not the subject of Cheng's talk.

Instead, Cheng justified the design of Reason during the whole talk. Why they chose some trade-offs, why the type system is complete, etc. Not really applicable to any other project - unless you're writing your own language right now. The only takeway for us was the reminder of the Pareto principle, which tells that you can achieve 80% of the effects with 20% of the effort - a good motivation for open-source maintainers like us.

Instead of watching Cheng's talk below, we recommend that you take a look at the Reason website.

How Streaming Can Supercharge React

Sasha Aickin, author of react-dom-stream, explained to us how to significantly reduce React applications load time thanks to server-side rendering, streaming and parallel processing.

The actual average React application loads in 4 seconds on a PC and in more than 13 seconds on mobile. It's a serious problem that the entire community is aware of: the initial load time is the main drawback of Single-Page Applications in general. Server-Side Rendering (SSR) helps to mitigate this, but only to a certain extent: the long "time to interactive" leaves users in an "uncanny valley" for several seconds. Besides,

Server-side rendering is a blocking process (at least in React 15), so it doesn't allow to serve more than one request at a time. Think of it as a step back to PHP from Node.js...

But Sasha has a solution, and it's clever: server streaming to the rescue! It's about loading the page block by block, in order to render the useful data as fast as possible, while the server prepares the rest of the page.

This technique implies boilerplate code for now, but in the future, there could be a library to automate it. It's definitely the path forward for SSR!

The results are astounding: with streamed server-side rendering, React can be faster than static HTML, Sacha proved it with a live example.

Not yet ready for prime time, but definitely inspiring.

Next Generation State Management

Michel Weststrate, the MobX creator, gave a talk about the (opinionated) solution he designed to manage state in React applications. He tried to combine the best ideas of both Redux and Mobx.

redux || mobx === true;

mobx-state-tree combines the advantages of the immutable and the mutable world, such as snapshot, time travel, and so on.

The talk felt like a step back. Michel didn't explain when or why MobX could be preferred to Redux, but how to make Mobx behave more like Redux. But it turns out that adding immutability to MobX requires sophisticated procedures and some boilerplate. The benefits of this added complexity aren't that great if you're not an FRP fan. So, for us, Redux is still the state management library of choice.

Here are his slides: https://github.com/mweststrate/next-gen-state-management-slides

The making of Twitter Lite

That's one of the numerous metrics Nicolas Gallagher, technical lead of Twitter Lite, presented us while explaining how the new Twitter mobile application is so fast and brings to the world, allowing the people with low-end devices and low connectivity to log into the social network.

The talk was quite long and contained no takeaways for developers. It's nice to learn that, thanks to the React ecosystem, Twitter improved the user experience for developing countries. But we would have preferred actionable advice to do the same.

The Runtimes of React VR and Use at Oculus

Disappointing talk - we saw a globe moving on the screen with React code behind. Maybe React VR isn't ready for prime time?

Functional && Reactive

Preethi Kasireddy gave a pretty (!) complete introduction to Functional Reactive Programming (FRP).

We already knew about this technique, and unfortunately Preethi's talk didn't remove the impression that this is way too complex for everyday use. And it was a great use case from what we learned during the Worse is Better talk: FRP might be a better technique from a scientific point of view, it's not simple enough to be practical.

Composition: A Superpower Explained

This talk, which was an impromptu replacement for another talk that didn't happen, covered functional programming 101: Higher-order functions, currying, parameter orders.

The application to React is Higher-order components, which are already documented by Facebook and broadly used in the React ecosystem.

This talk was too beginner level for us - we create HOCs every day for breakfast. Besides, the speaker didn't give enough perspective on the good and bad use cases for HOCs. Most of the time, an actual component does the trick.

Animating the Virtual DOM

This talk was jaw-dropping: from simple page transitions to motion picture-like animations, it seems that nothing is impossible to animate in React - when you're called Sarah Drasner.

There were great takeaways, too: a comparison of the (many) animation frameworks, a focus on Greensock, and some examples of React and Greensock integration. You'll definitely need the slides to get the most out of this talk, and it was one of the highlights of the conference.

React as a Platform: A Path towards a Truly Cross-Platform UI

React doesn't yet allow to use the same JSX code to build an app for Native and the Web. react-native-web is a great step forward to support tags like <View> and <Text> in browsers (instead of <div> and <span>), but the initial import still determines the target platform.

Leland Richardson demonstrates how a simple dependency injection system can overcome that problem. Building up on the React Native multiplatform support (where an import Foo from './Foo' will use Foo.ios.js on iOS, and Foo.android.js on Android), he developed a new library called react-primitives. It feels incredibly familiar:

import React from "react";
import { View, Text, Image, StyleSheet } from "react-primitives";

class Foo extends React.Component {
  render() {
    return <View style={styles.foo}>{this.props.children}</View>;
  }
}

const styles = StyleSheet.create({
  foo: {
    width: 100,
    height: 100,
    backgroundColor: "#ff00ff",
  },
});

Richardson's talk was brilliant, and probably a game changer for future cross-platform developments. react-primitives is definitly worth checking.

However, React developers on the browser platform already use UI Kits that are very much linked to the DOM tags. So the change won't happen overnight - unless it's backed up by Facebook, which would be great.

The talk isn't online yet, please revisit this article in a few days for the link!

Lightning Talks

The lightning talks were one of the greatest moments of the conference. We love this format, really well adapted to "appetizer" talks. We discovered new libraries that we'll test on future projects, including:

• detox for e2e testing of React Native apps
• react-router-navigation as a great way to mix React Router and navigation transitions on Mobile
• Shoutem, manage React Native applications like your WordPress sites

Conclusion

We didn't cover all the talks, for example "Maximally Modular Apps with React Navigation" by Eric Vicenti was the story of React Navigation with a "getting started" tutorial, and "Using Types to Help Your Computer Help You" by Adam Perry was an apology of Flow.

There also was a very good introduction to elm lang from Tereza Sokol and Lee Byron published Relay Modern 1.0 live on stage!

You can see the whole conference on the ReactEurope YouTube channel.

What we learned at this conference is that React will be faster, it will enable smoother and animated transition from a state to another, and it will be embedded in all sort of devices - whether it be a smartphone, a browser or a VR headset.

Moreover, React will have an impact on the way we think, optimize and deliver a User Interface regardless of its support. Actually, it is already the case. It is more than ever an exciting time to learn it!

As for the organization: it was top notch. Great food, plenty of time to socialize, fluid registration. We were surprised to meet so many North Americans - it seems that US-based React conferences are small and rare. One regret: slides with code were barely readable for 50% of the audience.

Considering all that we learned, we'll come back next year for sure. And we recommend that you do, too!