The JavaScript Checklist Manifesto: You Need a Starter Kit
You need to minify your code. And bundle it. Which means you also want to generate sourcemaps for debugging. And of course you want to run automated tests. And view code coverage metrics. And lint your JavaScript. Don’t forget to compile your Sass and toss in some Post CSS. Hot reloading would be nice as well. Oh, and don’t expect your team to do all this manually. We need all this goodness to happen with a single command, and to re-run every time we hit save. <insert deep breath here…>
By the way, there’s likely a dozen libraries, frameworks, and patterns for getting each one of these things done. Choose wisely.
Overwhelmed yet?
We’ve entered the era of JavaScript decision fatigue.
Every time we start a new project, we’re overwhelmed at the selection of build tools, testing frameworks, component libraries and more.
My solution? A starter kit.
Here’s how mine runs, in 30 seconds:
Everything you see above is included in React Slingshot.
Why a Starter Kit / Boilerplate / Generator?
A starter kit serves a variety of purposes:
- It codifies a long list of decisions, best practices, and lessons learned.
- It protects from forgetting important details.
- It encourages consistency.
- It avoids repeating work.
- It increases quality because doing the right thing becomes automatic.
Today’s list of “best practices” is too long for any individual to track. So utilize a starter kit that does it for you.
Now that we have a starter kit, every time I read a blog post with an important insight, I update our starter kit to put it to use. No more trying to remember all the pitfalls!
A great starter kit shows you a working, real-world example of a workflow. It conveys strong opinions on file naming, component libraries, testing conventions, and build processes. And it should include a running example app to help convey how all the parts come together.
When creating React Slingshot, I reviewed countless example projects on Github and a long list of existing starter kits. I took the libraries, patterns, and ideas I liked best and made them part of my kit.
I believe each team should do the same.
JavaScript starter kits aren’t just about consumption. They’re about inspiration.
My suggestion: Examine existing starter kits for inspiration. Fork your favorite and create a kit that suits your team best.
The Checklist Manifesto
I realized the power of starter kits while reading “The Checklist Manifesto”. The big idea is simple: As professionals, we think we can remember all the steps involved. We can’t.
Doctors placing lines in patients must follow a long list of tasks to help avoid infections. Each year, 1000's die from line infections. So one hospital instituted mandatory checklists with amazing results:
The results were so dramatic that they weren’t sure whether to believe them: the ten-day line-infection rate went from eleven per cent to zero. So they followed patients for fifteen more months. Only two line infections occurred during the entire period. They calculated that, in this one hospital, the checklist had prevented forty-three infections and eight deaths, and saved two million dollars in costs.
Sure, doctors know what to do, but there are so many steps involved in doing things right that it’s easy to overlook a step.
Here, then, is the puzzle of I.C.U. care: you have a desperately sick patient, and in order to have a chance of saving him you have to make sure that a hundred and seventy-eight daily tasks are done right — despite some monitor’s alarm going off for God knows what reason, despite the patient in the next bed crashing, despite a nurse poking his head around the curtain to ask whether someone could help “get this lady’s chest open.” So how do you actually manage all this complexity?
Sound anything like a hectic day on your development team? The solution is to lean on checklists. Checklists establish a higher standard for baseline performance.
A JavaScript starter kit is a living, automated, and interactive checklist. It removes the mental burden of trying to remember all the best practices by making them automatic. It makes sure the right things get done, even when you’re in the heat of the moment. Thus, a well designed starter kit becomes a pit of success. Doing it right becomes easier than doing it wrong. That’s a big win.
What about Ember, Angular, and Knockout?
Thus far, the links I’ve shared have revolved around React. What about Ember, Angular, and Knockout? In short, the less opinionated your tooling is, the more you need a starter kit.
Ember is comprehensive and notoriously opinionated. It already has opinions on file structure, testing, CLI, and much more. Ember is a religion. Accept it all, or you won’t fit in. Ember effectively is a comprehensive starter kit.
In comparison, React, Knockout, and Backbone are largely unopinionated. They’re libraries that solve very specific problems, so you compose them with other libraries and patterns to build a real app. They leave testing, builds, file structures, deployments, validation, HTTP calls, and more up to you. This can be intimidating at first, but there’s an obvious advantage: You’re free to select the best of breed technologies and patterns that suit you best. And your final solution isn’t weighed down by things you don’t need.
There’s no right answer on this continuum, but it is interesting that Angular has become quite popular while sitting in the middle. It offers enough opinion that it’s clear how to get started, yet not so much that you feel totally constrained. For Angular 2, Angular-cli is making a play to become the de-facto starter kit. For more on the merits of Angular 2 vs React, check out “Angular 2 vs React: There Will Be Blood”.
Next Steps
Looking for inspiration? Check out Andrew Farmer’s list of 70+ React starter kits.
Want to build a React starter kit from scratch? Check out “Building Applications with React and Redux in ES6” on Pluralsight.
Cory House is the author of “React and Redux in ES6”, “Building Applications with React and Flux”, “Clean Code: Writing Code for Humans” and multiple other courses on Pluralsight. He is a Software Architect at VinSolutions and trains software developers internationally on software practices like front-end development and clean coding. Cory is a Microsoft MVP, and founder of reactjsconsulting.com and outlierdeveloper.com.
