ReactNL 2016: A conference with style
For the past several years, Netherlands-based software consultancy Xebia has organized an Angular conference in Amsterdam, and this year, they’ve added a React conference — ReactNL—to their portfolio of annual events. Thanks to encouragement from my colleague Nara Kasbergen, I submitted an abstract in response to their call for proposals and was thrilled when I found out that I’d be joining some of the smartest folks in the React world to speak.
ReactNL was a single-day, multi-track conference on October 13 at Het Sieraad, in the Amsterdam-West borough. Het Sieraad is a beautiful venue featuring an enormous central atrium that served as both keynote auditorium and vendor/social mingling area, and several smaller rooms throughout the building provided ample space for the multi-track presentations and workshops that were held throughout the day. The conference’s overall theme was “8-bit”, which is an aesthetic near and dear to my heart, and it was convincingly (and thoroughly!) executed: Pac-Man, Donkey Kong, Space Invaders, and Mario were well-represented in all their pixelated glory.
Xebia managed to squeeze 15 talks into the 9-hour conference — 3 keynotes and 6 two-track sessions—but despite the packed schedule, the pace felt more leisurely than rushed. An abundance of coffee and sweet snacks at the start of the day seamlessly transmuted into hors d’oeuvres, beer, and wine as the afternoon wore on, and the overall flow, logistics, and session transitions were handled with impressive polish (which is especially remarkable given the first-year nature of the conference, though I’m sure that Xebia’s prior experience with NG-NL helped).
Though I can’t comment on all the talks (at least, not until all the multi-track sessions are online), every presentation that I attended was thoughtful, well-delivered, and informative. Some quick notes:
- Max Stoiber kicked off the festivities with an opening keynote about styling React applications. After assessing the current CSS authoring tools available to React developers against a wish-list of features (e.g. isolation, feature support, and ease of theming), he announced a new project — styled-components.com—that promises to outdo the existing options and, for the first time, allows pure CSS to be used in React Native apps.
- Doug Wade gave a nice overview of react-server, a batteries-included framework that takes care of much of the nitty-gritty detail required to optimally configure your React app for both server- and client-side rendering (AKA the “isomorphic” or “universal” approach). Among other features, it offers an easy ways to share application data between the server and the client, prioritizes page-load speed, and comes with a CLI for quickly getting up and running.
- David Aurelio went on a technical deep-dive into the React Native packager optimizations that have resulted in dramatically faster builds of Facebook’s mobile applications. Though the talk was focused on React Native, the general concerns of minification, transpilation, and code elimination apply equally to other build systems (e.g. Babel / Uglify / Webpack), and I’m curious about the extent to which the React Native packager team’s findings will find use in other contexts.
- I spoke about techniques for modernizing legacy codebases using React and Redux, drawing from the team’s work on the NPR.org audio player to provide concrete examples.
- Andrew Clark, in the midday keynote, gave the audience a sneak peak at React Fiber, which he feels is “the most exciting thing happening in React right now.” React Fiber is a ground-up rewrite of React that supports scheduling and prioritization of rendering, which means that time-sensitive work (e.g. animation) can be prioritized above lower-priority tasks (e.g. rendering a component that’s not onscreen). The project owes its name to OCaml’s fibers, and the implementation involves the creation of concurrency primitives that can run inside the single-threaded JavaScript engine.
- Jasper Moelker reminded us all of the importance of writing semantic and accessible HTML, which is all too easy to overlook in an increasingly JavaScript-centric world. He lamented the overuse of semantically meaningless <span> and <div> tags in React components, as well as the single HTML mount point for the <App> component that’s all-too-frequently the sole contents of an SPA’s index.html file. The good news? NPR.org already implements many of Jasper’s suggestions, including treating JS as an enhancement, rather than a requirement, and serving semantically-meaningful HTML that works well with screen readers and other assistive tools.
- Jana Beck used the water-making scene from The Martian as inspiration for a simple app that demonstrates the value of writing good tests in a high-stakes environment. Starting with cluttered code that did too much, was untestable, and was buggy as a result (and deadly for folks stranded on Mars), Jana walked us through several phases of refactoring—finally settling on redux-saga for side effect management—and showed how each phase allowed us to write simpler functions and accordingly clearer and more self-documenting tests. (Spoiler alert: she found and fixed the bug while testing and managed to make water on Mars without killing the human!)
- Nik Graf provided an overview of Draft.js, a React-based framework for building rich text editing experiences on the web, and talked about his experience building a plugin layer that works with it to quickly provide advanced functionality like emojis and Facebook-style @ mentions. Draft.js can be easily extended to support custom entity types, and I’m interested in prototyping with it to see whether it might be a provide a good starting point for some upcoming work we plan to do on our CMS.
- James Kyle, in the closing keynote, brought compilers to the masses by talking the audience through the source code of The Super Tiny Compiler, a program written in JS that compiles arithmetic in a Lisp-like language to a C-like one. After finishing that talk, he exited stage left and reentered stage right to give a surprise second presentation about Facebook’s new JavaScript package manager, Yarn. Yarn works with the existing npm registry but provides a significantly faster client experience, and to drive that point home, James ran a side-by-side React native dependency installation in both Yarn and npm. Despite the unreliable nature of conference wifi, the Yarn install finished in a matter of seconds; npm was still resolving metadata at the close of his talk. Cheeky, but convincing.
After a few closing remarks from the emcee, the conference wrapped up with a happy hour that provided attendees further opportunity to mingle with one another and with the speakers. (The organizers eschewed formal Q&A after each talk in favor of longer breaks between them for informal discussion in the atrium, which worked very well.)
I generally attended (and described above) the multi-track presentations that were explicitly concerned with React itself; however, there were several talks about functional languages like Elm and Reason. While JavaScript is multiparadigmatic, the ascent of React and Redux and their notions of declarative specification and immutability, combined with more widespread usage of ES2015 and its function-friendly syntax, has yielded a new generation of functionally-thinking JS developers and a broader curiosity about functional topics more generally. It was great to see that undercurrent acknowledged by the conference organizers—they specifically mentioned Elm and functional topics in their call for proposals—and I’m very much looking forward to watching the videos of the talks I missed in person once they’re available online.
All in all, the inaugural convention of ReactNL was a resounding success, and I hope that Xebia makes it an annual tradition. As a first-time presenter, I was grateful both for the opportunity to speak and the thoughtful feedback I received, and I’m looking forward to giving more talks in 2017!
