Label A goes… React Amsterdam 2018
At Label A we aim to build the future of online tech. With that in mind, we are always on the lookout for the next big thing. We wouldn’t want to miss a great new (technical) opportunity for our clients. A good place to gather information about the industry is at meetups, hackathons and conferences. These are the places where we meet our peers, hear about new libraries and stay up to date with the latest of the latest in our line of work. That is why the whole front-end team of Label A went to React Amsterdam this year! Here are our highlights of the day.
1. State Management
Managing the state of your application is hard, no exceptions. The bigger your application, the more you have to think about managing the data in your application. The fact that the first three talks of the day were all about state management shows that it is a hot topic in the React community. The talk of Michele Bertoli really stood out; he taught us about finite state machines and state charts. These concepts can be used to visualize all the complex interactions in the user interface of your application.
In short, statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.
He talked about the xstate library and showed us react-automata, a library he built to use state machines (and xstate) with React! The examples Bertoli showed really gave a good impression on how we should use this library to manage our UI state, something that could get quite complex or messy with only React and Redux. We aren’t the only ones that got really excited after learning about state machines. Max Stoiber, the creator of styled-components, tweeted the following:
2. Data Visualisation
Visualizing and manipulating data has always been a favourite topic for some of our front-enders. That is why the great talk by Shirley Wu is also in our list of highlights this year! She talked about using D3, a library used for visualizing data with HTML, SVG, and CSS, in combination with React. D3 itself is already widely used for data visualisations, you don’t even need React in most cases. Wu showed us some great examples in which she didn’t use React at all. React came into play when she wanted to add user interaction to her projects, for example when the user could change the way the visualisations behaved. A live coding session showed us how to use React and D3 together to create a visualisation about the temperature in different cities around the world.
3. Custom Renderers
Last year Ken Wheeler already showed us that you can render to more than just the DOM. This year he stepped up his game and showed us how to mix custom renderers. The problem he talked about described a situation where he tried to combine custom renderers. The need to use data from one renderer into the other resulted in ugly things like importing multiple renderers into a non-cohesive solution.
He showed us code in which he combined an audio renderer with a three.js renderer to create an awesome visual that reacted to the music he was playing!
In Conclusion:
Last year we learned a lot and got hands on with new libraries like styled-components. This year the main focus of the talks was all about best practices, learning how to improve on what we already got.
Going to conferences like React Amsterdam enables the front-end team to learn from others, connect with new people and get a glimpse of the (possible) next big thing. That is why Label A encourages the teams, not just the front-end team, to go out there and look for the future of online tech! Will you be joining us to the next conference? Apply here as a front-ender or check out our other vacancies!
