« Back to all articles

A recap of React Alicante

Written by Tom Offringa on 6th October 2017

• React.js

At Spindle, we have a yearly study budget we can spend on study material, courses, and conferences. As I was looking at some options to spend that budget on, I came across React Alicante.

An international React.js conference

Because we’re currently in the phase of rewriting (prototyping) our entire VoIPGRID platform to a single-page-application, the talks scheduled for the conference looked very relevant. We have yet to decide whether we’re going to go with Vue or React for our platform but some of the talks seemed interesting regardless of that choice.

The conference itself had a lot of visitors from abroad. I checked into the Conference Slack a few days before and saw loads of people saying hi from all kinds of countries. In this blog post, I’ll summarize the talks I found educational and inspiring.

Modular CSS

One of the talks I found interesting was about Modular CSS by Andrey Okonetchinikov. I’m sure by now we’re all familiar with making our apps more component-based for better flexibility and easier encapsulation. The talk gave a retrospective on how we write, organize, and bundle CSS and how we can use a better folder structure, naming conventions and scope with post-processors like PostCSS and bundlers like webpack, but also principles like BEM and CSS in JS (JSS). It gave a good insight on how to write modular CSS with better scoping and modularity. I didn’t learn a lot of new things but it’s always nice to get a better understanding of how to make CSS more modular when working with React (or any similar library/framework).

Redux development workflow

After the talk by Andrey and a short coffee break, we continued with a talk about a React and Redux development workflow. This talked looked interesting because I think it’s always nice to see how other people integrate Redux into their workflow. Unfortunately, the talk was a bit vague and basically only showed how to incorporate recompose into your project to split lifecycle methods and render functionality. Not a very useful talk for me personally.

React-Storybook

The next two talks were very interesting. Marie-Laure Thuret took us on a journey through React-Storybook. A very good way to design, develop, document, and debug UI Components in React. React-Storybook creates a nice and solid library of your components and lets you show and debug your components in their various states by writing stories for your components. Great talk!

Redux Form

The talk after that showed a practical guide to Redux Form by the creator himself (Erik Rasmussen). We use Redux Form in our feedback tool Flindt and I also use it in our VoIPGRID prototype at the moment. I’m a bit of a fan of Redux Forms so it was nice to hear how the creator would use Redux Form to create forms, with validation, async functionality, etc.

End to End testing

After a post-conference day visit to the beach, tapas, and a good night’s rest, the second day kicked off with Forbes Lindesay talking about End to End testing React applications. It was a very well prepared talk, which showed us an implementation of testing applications with Webdriver and Taxi rank. I found the talk very useful and it made me enthusiastic about working on our own tests.

Styleguidist

Another talk I liked was by Sara Vieira, who told us about her dream of Styleguide Driven Development by showing Styleguidist and comparing it with other similar tools like the aforementioned React-Storybook. It was a very energetic and fun talk about how we can improve the collaboration between designers and developers and how we can implement a style guide driven development flow throughout our projects. Styleguidist is similar to React-Storybook in a way that it also lists your components and in how to use them. One of the differences with React-Storybook is that, instead of writing stories, you can add a markdown file (either in the folder where the component is located or by giving it the same name as your component). In this markdown file, you basically write the JS you would when using the component alongside comments and other relevant information. I did some testing with it in our hotel in the afternoon and it looks promising and easy to work with.

GraphQL subscriptions

After Sara, Nikolas Burk took the stage, to talk about GraphQL subscriptions. I haven’t really worked with GraphQL but got very excited to try it out after the talk. Nikolas build a realtime chat application on stage to show us how the less-known feature of GraphQL called ‘Subscriptions’ works. The implementation looked very straightforward and nice to work with. I can’t wait to mess around with GraphQL.

Code-splitting in React apps

Another talk I was excited about when booking tickets for the conference was ‘Code-splitting in React apps’. I worked on code-splitting in my VoIPGRID prototype the weeks before, so I was excited to see what Glenn Reyes’s workflow concerning code-splitting looked like. It seems I’m on the right path with my prototype, so it was a nice confirmation seeing others use the same CRA/Webpack + React Loadable approach.

Redux Saga

In the afternoon Nacho Martin explained to us how Redux Saga works. I already read about this package and the implementation but didn’t see the need to implement it in our VoIPGRID prototype at this point, as the Redux side-effects in our prototype are still at a minimum right now. It was nice to see him talk about the package and explain in-depth how and when to use Redux-saga. Nicely, well-explained talk.

The end of the conference

I decided to spend some time on looking into Styleguidist and how it would work in our prototypes, before going back to the venue to listen to the last talk of the conference about how to Deploy Atomic Design at scale.

I hoped the last talk explained to us a bit how to use Brad Frost’s Atomic Design in applications at scale, but it showed us more so a bit of an implementation of OpenComponents, which was cool as is, but not so much about what I had hoped for.

Final thoughts

The conference itself was very well organized, registration went smooth, the location was great, as were the lunches and coffee breaks. The communication overall was excellent and the conference felt very well prepared. The Slack channel and pre-conference communication about traveling and Alicante hotspots were also a great addition. In short, a great conference I definitely hope to attend next year!