Last weekend myself and my fellow Front-end Developer Jamie Robertson (yes, two Jamies!) flew out to Amsterdam for the world’s largest React conference - React Amsterdam.
React Amsterdam is a day-long conference split across two tracks: React General and React Native, with presentations from over 25 speakers.
After a solid breakfast, some strong coffee and a short ferry trip, we took our seats amongst 1200 developers. We were immediately impressed by the venue and professional set up. We knew the line-up was world-class. Now we just had to choose which track to follow.
Why two tracks?
To understand the need for the two tracks at the event we need to discuss what React is.
There are multiple branches of React. The two most popular are React for the web and React Native which is used to build iOS and Android applications. It made sense then for the event to be split up into two tracks to reflect this.
However, you can use React in almost anyway you want. It can be used to build highly performant web applications, create your own virtual reality world, and even write code that will run on hardware.
If you use Facebook, AirBnB or Instagram then you’ve experienced an application that’s been built using React.
We use React both internally for tooling, and on our client projects. Our latest React Native application was built for The Royal Edinburgh Military Tattoo, and is available for download on the App Store and Google Play.
Highlights from the General track
We decided to focus our full attention on the General track, and we've included a selection of the talks that most impressed us below. We’ve also provided a direct link to the recording of each talk if you want to find out more.
Michele Bertoli, a Front-end engineer at Facebook blew our minds with his talk on declarative state management and automatic test generation.
Michele’s talk was brilliant, however, I don’t think I’ve ever related to a tweet as much as this:
Without getting into too much computer science theory, Michele’s talk was about using finite state machines inside of React to determine UI state and automatically generate tests. Why? Using a state machine allows you to determine the state and all actions at different points in your application’s lifecycle based on events.
“THE BEST TESTING STRATEGY IS NOT WRITING TESTS.”
MICHELE BERTOLI, Front-End Engineer, Facebook
You can imagine it like a UX or design flow. The designer will create all available states of the application and map them in a flow diagram, which is achieved with code through finite state machines. When you click a button, we know what the next state will be.
Michele is also the author of React Automata which abstracts the state machine, providing state management and test generation.
You can watch Michele’s full talk on YouTube.
D3 and React
Shirley Wu impressed us all with a beautiful presentation on how D3.js (data visualisation) can work well with React.
Mixing D3 and React is an incredibly exciting idea (so much so that we almost forgot to take the above photo). It brings together the flexibility and speed of React with the power of D3, one of Shirley’s examples in particular caught our eyes.
Shirley even braved the world the of live coding (in front of 1200 developers!) giving us a very clear and concise view of how to implement her ideas in a real-world example.
Watch the full talk here.
We’ve been working with GraphQL internally for the past few months ahead of implementing it in client work with a particular focus on WordPress implementations such as WP-GraphQL, as well as Drupal 8 and Symfony implementations.
The two talks answered a few burning questions from our team - and have confirmed our suspicions that GraphQL is going to become one of the primary ways that we deal with data in our applications.
We’ll also be flying out to Berlin later in the year to join up with other developers at GraphQL Day Berlin. I’m sure we’ll pick up some more interesting ideas and approaches that will help us going forward.
Mixed mode React - WebGL + Canvas
To round up the conference we heard from Ken Wheeler. Ken is the creator and maintainer of a ton of open source projects, some of which we use day-to-day. He showed us what happens when you think outside of the box - way out of the box - with React.
Ken's talk focused on not rendering React elements to the DOM (like you would for a website) but instead using it for Canvas and the Web Audio API. This showed the reach that React can have - and reiterated its core principle of learn once, write anywhere.
Watch Ken’s talk here.
So that's it for our highlights from the General Track. If that's not quite enough for you, you can watch the entire 8 hours on YouTube!
We’re also looking forward to catching up on the talks from the Native Track. You can see the whole Track and the timestamps for each talk here.
Open Source Awards
A big benefit of attending the conference is the sense of being part of a global community. It was great to see the faces behind some of the tools we use on a daily basis.
Congratulations to Apollo who were named the breakthrough of the year and Storybookfor their impactful contribution to the community. It was great to see both projects get some well deserved recognition.
Pushing Development Forward
React Amsterdam was a brilliant conference offering a wealth of knowledge from people working in the ecosystem every day.
It was great to see that our engineering team is right alongside them in working with the best practices and helping push development forward, whether that be through our internal tooling and experimentation or our client projects.
Over the next 12 months we’ll be continuing to push forward with React and GraphQL to see how far we can take it and how we can best help solve our client’s needs.
If you’re interested in reading more about React, freeCodeCamp have some helpful articles.
Thanks to Jamie Robertson, Signal's Principal Web Developer, for co-authoring this article.