Thomas Bembridge

New front-end setup based on Create-React-App

February 08, 2017

This week me and a colleague of mine are working on making some big changes to our React front-end setup. Its been a long time coming, but finally we got the go ahead from our teams Product Manager to spend time on it!

Why

The current setup that we have does work. We use it everyday for our existing services. But there is definitively room for improvement!

Testing

Front-end testing has been one of our weak-points. Our current test setup consists of 9 different dependencies. Karma, Mocha, Chai, Enzyme, Sinon etc.

  • Karma
  • Mocha
  • Chai
  • Enzyme
  • Sinon

The list goes on…

And even with all of these different pieces of test technology we have been struggling to write tests that we feel are anywhere near the level of quality that we have for our back-end tests.

Configuration

Why all these configuration / setup files?

  • .eslintignore
  • .eslintrc
  • karma.conf
  • webpack.config
  • webpack.tests.config
  • tests.webpack.js

Most of this is just taken from other templates and stitched together to make something that works for us. Without really understanding the ins and outs of how everything works.

This causes frustration when we need to make changes to add new things that are not already in place. Since things have just been added to our template over time, from other sources. The natural starting point just becomes Google.

Keeping the templates updated

Currently a couple of us have been keeping our templates (front-end and back-end) up-to-date and evolving as we go along. But as more new projects keep coming our way, and we are trying to grow the organisation by adding new people to the different teams. There is very little time left for doing this kind of “housekeeping” activities.

It ends up becoming something we have to spend the first week of a new project doing. Not to mention by the time we come around to it, sometimes ideas and potential improvements we saw in the previous project have not been written down and we lose out on fixes and improvements.

Generally outdated

The field of front-end development moves so fast, and there are so many amazing new projects and technologies out there that I think we could benefit from.

Specifically I really want us to start using some of these:

Ava: Futuristic test runner made by Sindre Sorhus, Vadim Demedes, James Talmage, Mark Wubben, Juan Soto and Jeroen Engels.

Jest: Zero configuration testing platform made by developers @ Facebook.

Flow: A static type checker for JavaScript made by developers @ Facebook.

How to improve our setup

createreactapp

Create-React-App is an Facebook supported way to create single-page React applications. It offers a modern build setup with no configuration.

Features

Here are some of the main reasons for why we choose Create-React-App:

  • No configuration
  • Jest is integrated and ready to go
  • Easy to add Flow and Flow-Typed
  • The magic behind create-react-apps is that it pulls in all of its magic through an npm module called “react-scripts”, and as any other npm module this can be updated!
  • An opinionated way to develop React applications developed and supported by some of the best
  • One place to start looking for information regarding how to do things within the setup
  • Quickly becoming widely used, so easy to find tutorials, blogs and other sources of information

Negatives

So far we have only seen one thing that we consider negative for us with Create-React-App, it`s lack of support for sass. We use sass in all of our projects today, and it would be quiet a bummer going back to pure css… But we have already seen a few alternative work-arounds for this that we can probably use. So this should not be a show-stopper.

Resources

If your interested in learning more about some of the things mentioned in this blog here are some good resources to take a look at!

Written by Thomas Bembridge Software Developer working at SpareBank 1 in Norway. Opinions and ideas shared through this blog are my own. Follow me on Twitter!