A quick summary of React London

We’ll quickly go over the main talks of the day:

The day started out with Christopher Chedeau speaking about prettier, the recently-released Javascript formatting tool. He touched on several interesting topics, especially, how the prettier team used the Facebook codebase to evaluate which styling patterns are used most often, and how using prettier liberates a team to think about and discuss things that matter more than formatting.

Next up was Andrey Sitnik presenting Logux, a library that abstracts away AJAX requests and handles client-server communication via synchronisation of Redux actions.

The next talk was one of the most interesting ones, Cheng Lou delivering the 2nd part of his series on the meta language (first part was a few weeks ago at React Conf, video here). In this part he talked about what can be achieved using module in Reason, an OCaml variant being developed by Facebook. He showed how module is like having support for files at the language level, which enables things that otherwise are only possible through tooling.

After lunch, Max Stoiber introduced Styled Components, a CSS-in-JS library that, in his words, “removes the mapping from class-names to components”, by co-locating the CSS for a component next to its definition. It looks very promising as a solution to the styling problem in the age of React, by 1. making it very easy to style each individual component atomically, and 2. using actual CSS to define styles instead of style objects. At YLD we are already using it, and it is very simple and pleasant to work with.

Right after Dustan Kasten introduced the internal API for the new React Fiber renderer, which is the mechanism that translates a React element into changes to the environment you’re building for — for most of us the DOM. He walked the audience trough how to write a custom renderer, which allows React to be used for anything from rendering to <canvas> to making hardware controlled with React components.

After a refreshing break for snacks and drinks (thanks Red Badger), we were presented with four lightning talks packed with useful information.

First, Anna Doubková introduced us to snapshot testing with Jest or Ava, giving some insights on her team’s experience of it. This way of testing is the opposite of TDD, meaning that we build the component first and then create a string snapshot to verify that it always renders the same elements. She recommended its usage on React components, because their development usually involves visual confirmation, but warned that TDD is still a better methodology to test the logic parts of our applications.

After than, Jani Eväkallio presented redux-offline, a tool that leverages the Service Worker API to create web apps that work offline without little extra effort. His motivation and experience for building it came from the issues and bad reviews that he faced after releasing web applications that needed a network connection in order to work.

Still on the topic of enhanced web applications, Jasdeep Lalli walked us through his team’s work to use next.js in production. It’s a framework that creates server-rendered React apps with minimum effort, as it allows maximum code reusability between both mediums. Of course, this does not come without its tradeoffs, which include a way of declaring routes that is not common in other React libraries.

To wrap up the lightning talks, Oliver Woodings introduced the architecture his team at Qubit is using to run real-time webpack builds. Through a flexible structure that scales according to need, they managed to build a pipeline that runs thousands of builds a day. Although it is not a problem faced by most products, there were some valuable take-aways from their experience, particularly regarding best practices and separation of concerns within Webpack configuration files.

After another break, we came back to the auditorium for a panel discussion with questions posed by the audience. The panel members were Facebook developer advocates Lee Byron, Ben Alpert, Dan Abramov and Christopher Chedeau. Between funny questions like “who would win in a fight, the four of you or Zuck”, there were questions about Redux, offline web apps and the utility of all the tooling used by the React community.

To end it all in a humorous note, Ken Wheeler jumped into the stage to show us his personal robotics project: “Crossbro”. Using React and an Arduino, he built a crossbow that can be controlled via a React Native app. We even had a live demonstration which, thankfully, was done with a Nerf gun instead of the real thing.

This post was written in cooperation with Claudia Matosa also from YLD, check her out on Twitter and Github! Last week we got to go to React London which was the first large conference organised in London focusing exclusively in React. As we’ve been working extensively with React @ YLD, we took some time to attend and explore.