Notes on our current React stack

Last week I met with another developer that was asking for advice about my experience with React. I owe him an email but I decided to write this instead. Hope it’s fine to you Marcus :). So here it’s just a few notes on all the different tech stack I’ve decided to include in my daily workflow.

I’ve been working full time with React for a year. Over this time I started three projects where I learnt something new and tried different combinations. As of today, I never felt as confident as I am with the current stack for building complex web applications. It’s a great time to be a JS Front end developer.

Setup and environment

The most painful part of the project, setting it up from zero.

Babel and Webpack as a starting point

I chose Webpack after I heard a tech talk from one of the devs from Instagram. I spent like two days to set up Webpack properly, it’s painful, it’s a lot of trial and error and the documentation is not clear, but once it’s working it’s much more powerful that browserify or similar.

Switching to Babel and using ES6 was great. specially for `let`, `const`, `arrow functions`, `classes` and `promises`. I like also to check Airbnb javascript style guide and we’re using it to have a standard convention on writing javascript.

PostCSS + CSS Modules

I’ve been using SCSS for the last few years, but I always struggled with naming conventions and avoiding collisions. BEM sounds like a good idea but in the end it makes everything harder to maintain. But with JSX and Webpack setup there’s no excuse for not giving CSSModules a try.

Local by default, so you don’t have to worry on name conventions and possible style definition collisions between components. PostCSS provides a plugin system that allows to have similar features to SCSS. Check this talk for a great overview of the system.

The cons

Setting everything up is probably the part where I struggled the most. As there have been quite a few articles the tools are great, but they’re not mature enough and they move really fast, so once in a while there’s a day that I spend implementing a new version. Babel6 is still on hold for me for example because I haven’t had the time to make sure it works with everything else.

Data and state management

First question that popped to my head when I started working on React: How I get the data loaded from the server?

React in the end is a “glorified”, but awesome, template system. And unlike the frameworks I used previously, like Angular or Backbone, it doesn’t provide any system to move data around.

To solve that there are multiple options. The first answer comes from the same source as React

Flux

TL;DR: Learn the pattern, avoid the implementation.

The two major projects that are built close to React are implementations of the Flux approach. I was really happy that I wasn’t alone in hatting MVC approach for projects that move fast and needs iterations.

In my experience I found, Flux really copes with a rapid evolving system, and keeps things simple enough despite complexity.

The bad thing is that is very verbose and still can get quite messy with complex problems, but never to the levels I was dealing with Angular’s approach to MVC.

There are better approaches to the pattern, which make the developer life easier

Redux

I tried Redux. It takes a while to fully comprehend the approach, since it’s similar to Flux but it adds another layer of abstraction at some point. But once you get it, it’s amazing. I would recommend Redux for big projects that don’t require much modularity.

Relay + GraphQL

First of all, `GraphQL > Restful API` between the client and the server. It’s type safe, it’s easy to create query and modify, and it’s efficient since you can group all the content into one call rather than having to build the state from multiple ones.

GraphQL works as a standalone, so I decided to start using it alone and I don’t want to look back. Having a system that takes care of the types and the data is amazing.

Relay extends React and GraphQL. You define which information a React component needs and Relay will make sure to provide it as a prop.

We choose Relay for modularisation. Our current project is prepared to be broken into little pieces and distributed to other people on a SDK, and in my case Relay has proven to be able to cope with it.

The best way to approach this systems is not by going to the official page, but check the amazing Lin Clark’s Code Cartoon. She does an amazing job at introducing Flux, Redux and Relay keeping the language simple and making very useful metaphors that really help understand the principles. She also did a tech talk at React Conf 2016 about them.

React Native

When Facebook announced React Native is when I decided to give a try to React. The promise of being able to reuse code seemed quite interesting.

One year later React Native is rapidly evolving, and seems to be quite good. In the ecosystem Redux works now and Relay works, but not out of the box.

But for all the options that allow developers to work fast, iterate and adapt to their environment I think React is nailing it.

Other tools

Flow Use a type checker in your code, add it as soon as possible. I did it a try to TypeScript, but in the end Flow seems like a better option for my case, since it just extends in top of Javascript and Babel will stripe the annotations.

ImmutableJS Make sure that your data behaves and doesn’t do anything unexpected.

Eslint Less opinionated than JSLint and more extensible than JSHint, Eslint was there to make sure everything was fine when the whole crazy “HTML in JS” started by React and the JSX.

Superagent Avoid the temptation to use jQuery and it’s $.ajax. I use superagent as a replacement.

To wrap things up, JavaScript is still moving really fast. But I think it’s starting to focus on great tools to help build great solutions. I’m a former CoffeeScript developer and when I switched back to Javascript, I missed some of the nice sugar things it had. ES6 provides them back. React solves all the painful DOM Handling. Flux-Redux-Relay solves all the problems from data handling client side in clever way, Webpack makes build tools smarter.

What a great time to be a Front End Developer.