Last week, I spent the day at ReactNL, my first React conference, and I was pleasantly surprised at the quality of the talks. Here are three talks which were particularly interesting to me. (I forgot to charge my laptop, so I don’t have any notes. Please let me know if I’m wrong).

Max Stoiber — Styling React Applications

The first keynote was delivered by Max Stoiber. Max is well-known for react-boilerplate and thinking out loud about styling React applications. He discussed a couple of well-known React styling approaches (such as CSS Modules, Radium, etc), and compared them by means of a feature matrix. Features like no boilerplate, co-location, full CSS support et cetera. Then Max pulled a rabbit out of a hat (a rabbit he had been hinting at on Twitter): styled-components .

styled-components (naturally 😉) fared very well in Max’s matrix, and adds a killer feature: React Native support (something which all other solutions lack). styled-components uses tagged template literals (an ES6 feature) to generate styled components. It also allows you to use (interpolated) functions which return a value based on props . There’s also theming support (which as far as I can tell comes down to adding a set of variables to a component’s props ). I’m a little worried about inheritance and re-use outside of the React world, but if you’re gonna do the whole CSS-in-JS (not as JS) thing anyway, this seems like a nice solution (by the way, it seems to generate style rules which are added to the head, so no inline styles, fortunately).

David Aurelio — Packaging for React Native

Next up is David Aurelio’s talk, which was super interesting. David explained the challenges Facebook faces when compiling React Native applications. One of those challenges is fast incremental builds: one of the most demotivating things for a developer is builds that take minutes instead of seconds. Quick builds are difficult because of the vast amounts of (shared) code that have to be recompiled every time. To alleviate these issues, Facebook uses Buck, “a high-performance built tool”. Buck compiles dependencies of your build in parallel and keeps them in cache to ensure fast build times.

The other performance goal was improving app loading time: all the JavaScript runs on a JavaScript virtual machine, JavaScriptCore (JSC). This puts React Native apps at a disadvantage compared to native apps, because both JSC has to be initialized and the actual JavaScript has to be executed, whilst native apps can use precompiled code. One of those strategies is lazy-loading of modules (i.e., don’t load the module up until you actually have to use it).

Andrew Clark — React Fiber

Another version of Andrew Clarke’s talk about Fiber, at ReactNext earlier this year.

Last one up is Andrew Clark’s keynote, the one I was looking forward to the most. Andrew explained Fiber, a re-implementation of React’s reconciler. Fiber allows for incremental rendering, which means it can pause and later resumes the work that needs to be done. This, for example, allows React to prioritize things like animations and gestures to the application smooth and responsive, whilst spreading other (less important) work out across the frames. One of the reasons this is needed because React might want to do integrated layout, for example. Fiber depends on requestIdleCallback() (currently only supported in Blink).

I get the sense that (and Andrew alluded to this at the end of his talk at ReactNext) Facebook is getting impatient with browser vendors about performance and access to low-level APIs (such as text measurement). There’s also the added benefit a bigger common ground between a React web app and a React Native app. And while it feels kind of … wrong to implement a browser engine on top of a browser engine, I do trust the React team to come up with something truly innovative, and maybe it’ll lead to those performance improvements we would all love to have in browser engines themselves.