Build a Progressive Web App

Set up the base code

This blog post is part of a series. A table of contents is available here.

Version Control

Whether you use Bitbucket, GitLab, Github or run your own version control system doesn’t matter. Even if you believe rewritable CDs are what makes you most productive, that’s cool; as long as you somehow back up your code somewhere. I use Github and the source code for the Library PWA is available at https://github.com/mikenikles/library-pwa.

No boilerplate or starter kit

In React-land, we have as many boilerplate projects as there are grains of sand at the beach. It’s so bad in fact, there’s a website where you can apply filters to narrow down what you’re looking for.

Andrew Farmer, the same guy who created the boilerplate filter website above, later launched BYOS: Build Your Own Starter. I highly recommend anyone to start their React project with that. I did the same in the following commits:

  1. 796740f: Add babel
  2. e1d9c2b: Add webpack
  3. dfdafb7: Add express
  4. d01ae91: Add React

I believe the best way to learn something is by doing it, even if it means it takes more time to get started. That initial effort will pay off down the road when you have to refactor your app because of breaking changes in Webpack 2.0, for example.

Routing

Like many React engineers out there, I decided to use React Router in my project. It’s built by Ryan Florence and Michael Jackson, two people I recommend you follow on Twitter.

Adding react-router to a project is simple. Besides adding the dependency to your package.json, you configure your routes and make one tiny change to your main application to tell react-router where it should render the pages when a URL changes.

Redux

One name: Dan Abramov. He presented Redux at React-Europe 2015 and followed up with a presentation a year later, at the same conference.

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

The docs at http://redux.js.org are some of the cleanest out there and I highly encourage you to read and understand them. To top it off, Dan created an excellent series of videos on Egghead.io.

You can see what’s involved to add Redux to an application in my commit 45368e9.

Testing

Slowly but surely, writing tests becomes more of a standard practice, based on what I’ve experienced at least. Too often have I seen companies “reduce cost” by cutting down on QA engineers. Quite frankly, that’s a sign of setting priorities wrong. If your business struggles in the market, the last thing you want to do is release buggy software — think about it.

So, I’m not saying hire QA engineers and have them manually regression test every release, I would argue that’s equally dumb as laying off QA engineers. What I am saying is:

Automate your QA processes!

Meet AVA

For the Library app, I decided to use AVA. AVA, as per their website, is a “🚀 Futuristic JavaScript test runner”. The Why AVA? section on their website provides great information on why I chose this over any other JS testing framework.

Meet Enzyme

Enzyme is Airbnb’s JavaScript Testing utility for React. I found it easy to use, readable and fairly straight forward to configure. You can find more on how to use Enzyme with AVA in the documentation I submitted to Enzyme.

Details on how I set this up for the Library app can be found in commit 6ea9af3.

Watch your source files and run tests automatically

One last note on testing is to enable something like npm run test:watch, a command that keeps an eye on changes to your source files. When you make a change and save the file, AVA determines which subset of tests to run based on the change you made. Instant feedback, without any extra work from your end. Have a look at a33cc68 to see how it can be configured.

Next Steps

With the above in place, you’re at a pretty good point to start developing. In a future post, I will share my thoughts on the project’s folder structure and a few third party services I set up, such as Travis and Greenkeeper.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.