After attending React Europe 2016 in June, we had the pleasure to be a sponsoring partner for the first ReactNL Conference in Amsterdam this year. It was a great experience to meet developers in the React community from all around the globe, as well as showing them a taste of our Berlin offices by having “Club Mate” available for one and all!

Flying the Zalando Tech flag, Kolja Wilcke and Andrey Kuzmin had an interesting talk about one of their Hack Week projects called “Elm Street 404”, an interactive game coded in Elm. The audience was incredibly passionate, coming from different continents to meet up and talk about React. It was such an inspiration and an experience that broadened everybody’s knowledge.

I’d like to walk you through some insights about the three keynotes of the conference.

Styling React.js Applications by Max Stoiber

As the title suggests, Max Stoiber began his talk by discussing the different methods of styling a React Application, whether it’s “CSS-in-JS” or “Inline Styles”, which is mainly about whether to use the style={property: value} attribute vs. class={styles.fancyClassName}.

Stoiber continued comparing different “CSS-in-JS” tools like Aphrodite, JSS, and Radium, and it was quite interesting how his comparison showed that there’s always a compromise to be made when using these tools. For example: Theming, Global Scope, or Psuedo Classes may be lacking in the above mentioned tools, so in that vein, he officially announced the launch of his new tool “styled-components” which I highly recommend to check out.

Dan Abramov tweeted that it could be recommended by React once it’s more mature. One great aspect of the tool is that it makes you write pure “vanilla” CSS, which is the way to go in my opinion, especially if you enjoy writing in scss/css files. This will be the case for most people unless they really need dynamic styling or theming.

React Fiber by Andrew Clark

Andrew Clark had an inspirational talk about the future of React, and can be quoted as saying “React Fiber is the new React, it’s like rewriting React”. As per the README file, it’s still an ongoing re-implementation of React’s core algorithm.

Clark explained all the problems they are trying to fix in the process, and noted that their work is totally experimental. The main purpose of such a project is being able to produce 60 fps web apps, which is something we’re still lacking on the web but has already been tackled in other environments.

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: The ability to split rendering work into chunks and spread it out over multiple frames.

Clark mentioned how embarrassing it is that a smartphone can handle such graphic-heavy games with ease, but lags while rendering a web page with 1,000 items in a list.

There are two main concepts that React Fiber is focusing on: Scheduling and Concurrency. Given that React is following the pull-based approach it can’t support any scheduling, as the framework (React) controls both how and when to update your UI, unlike other push-based approaches (eg. Elm). That’s where React Fiber comes in handy.

One example could be if you have a lot of updates in an operation that requires computation, where there’s some animations at the same time for the sake of providing a seamless user experience. Animations are more important than other typical updates.

React Fiber works in the following steps:

1. Pause work and come back to it later
2. Assign priority to different types of work
3. Reuse previously completed work
4. Abort work if it’s no longer needed

On top of all the advantages mentioned, there are also some new features that Clark promised, such as integrated layout and returning multiple elements from the render function, which is one of the most in-demand features from React Community. Due to the current architecture of the core algorithm, it’s incredibly painful to provide such a feature.

Hopefully next year we’ll hear some more great news about React Fiber.

How to Build a Compiler by James Kyle and announcing Yarn

James Kyle is one of my favorite speakers, especially as he’s one of the authors of Yarn and calls himself “The Real Beyonce Of JavaScript”. He gave an oversimplified yet interesting, reasonably accurate overview of what most compilers look like, and showed us a simple compiler that he built himself.

Kyle used a Lisp-inspired syntax for his complier and went through explaining the difference between assemblers vs. compilers. He gave the same talk at EmberConf 2016 as well.

The exciting part of his talk came later: He re-introduced himself and announced that Yarn was finally released, explaining how fast it is, giving a live demo of running Yarn install vs. npm install and, as you may have guessed, it was much faster than the latter. Many people have already started using it.

A big thanks from our side goes to the great team organizing ReactNL. The venue was well prepared and very impressive, with a great crowd in attendance whom we met and socialized with.

We are looking forward to subsequent conferences and are very excited about what’s to come for next year as our use of React blossoms at Zalando Tech. Feel free to reach out via Twitter at @tonysa3d if you have any questions.

We're hiring! Do you like working in an ever evolving organization such as Zalando? Consider joining our teams as a Frontend Engineer!