Choosing a great foundation for your app: Why web applications need a starter kit
Part 1: How a starter kit keeps your app healthy
A strong building depends on a strong foundation. Before you build a single wall, you need posts and joists and concrete slabs. A robust web application has similar needs. Before you serve a single webpage, you need server technologies and software libraries and a framework to tie it all together. In both of these fields, a good foundation should be simple and rock solid. It should just work™. You don’t usually want to spend time designing the foundation, you just want to get straight to the meat of your project.
Fortunately for software developers, building such a foundation is a mostly solved problem. There are many free open source projects to choose from. These app foundations come in all shapes and sizes: some are minimal, some are feature rich; some are just a recipe of tools with documentation; some are what we call “boilerplate” templates, which are like prefabricated copies of a generic foundation. But for a robust application, I think the best choice is a starter kit.
Many developers have advocated the use of starter kits in recent years. A starter kit gives you more than just boilerplate code to copy — it gives you a fully maintained project which compiles and configures boilerplate code for you. In other words, if a boilerplate is like a prefabricated foundation, then a starter kit is like a mini factory which builds your foundation. This might seem like a small difference at first. But it can be a big difference over time. Because years later, this starter kit “factory” can also rebuild your foundation, keeping it healthy and up to date.
A web app foundation is made up of many open source components. After time, these components will get old and will need updates. For example, some components might need security patches. Updating a single component is easy. But, updating one component might cause compatibility issues with other components. And this might require further updates as well as configuration changes. This can be a big headache. The New York Times developer team illustrates this well in a blog post about their starter kit.
“Typically, you’ll need the following configurations: transpiler, server build, client build, test, style and script linting and several scripts to tie those tools together. To make matters worse, configuration can lead to a complicated matrix of dependencies, where one minor change can cause bugs with cryptic errors and waste hours of time spent on debugging and searching the internet.”
Yikes! Now, if you used a boilerplate to start your project, you will have to make all these updates manually, carefully testing each piece. Whereas, if you used a starter kit, most of that legwork is handled for you by the open source community. This is a huge win. Why should everyone struggle independently to fix their own copies of the same foundation? A starter kit project lets us all work together to maintain one shared “foundation factory”.
Okay, I’ll admit I might be over simplifying just a little; updating your starter kit might take more than one-click. But, I have found it to be drastically easier than updating by hand. I recently merged in a starter kit update with hundreds of lines of code updates and it ran without a hitch. With just a few tweaks, my application ran exactly the same on top, and my new foundation ran smoothly underneath.
Part 2: Finding a starter kit that checks all the boxes
Now that I’ve (hopefully) convinced you to use a starter kit, let me help you choose one. Here are some reviews of the various options I recently evaluated. I’ll focus specifically on kits for web apps using node, express, and react.
My search for the ideal starter kit had some pretty stringent goals. I needed it to be all of these things:
note: non-developers can gloss over this list
- Well maintained.
- Well documented and simple to understand.
- Feature complete but not a framework: The separation between starter kit and application should be fairly clear. The starter kit should build, test, and serve the app. The app should do the rest.
- Extensible. The configuration should be customizable.
- Performant, with support for static builds and/or universal rendering: It should either compile a static build of everything, or it should support universal rendering — i.e. application code should run on the server or the client browser. Ideally, it should do both when it can. It should be accessible, performant, and SEO friendly. (It should work without javascript, load quickly, and use canonical urls tied to proper html.)
That’s a lot of demands! For non-tech folks, here’s a more human readable list of starter kit requirements:
- It should keep supporting my application for years.
- It should come with a simple manual.
- It should just work™. It should focus only on the foundation, and it should stay out of my application’s way.
- It should let me customize little things if I need to.
- It should make my app load fast for everyone, and then dynamically update as needed.
Is that so much to ask? Well, turns out, it is a high bar. I only found a couple options that checked all these boxes. Here are the options I tried, starting with the ones that didn’t make the final cut.
Starter Kits that fell short
Create React App
Create React App seems to be the most popular option out there. I’ve used it before and it’s great. However, it has two weaknesses. 1) You can’t easily customize it. 2) It doesn’t easily support “universal rendering”. Because of this lack of support, if you load your web app without javascript enabled, the page just gives you an error: “You need to enable JavaScript to run this app.” I think this is unfortunate since this is such a requested feature, and one that improves accessibility for anyone who isn’t running javascript.
Gatsby
Gatsby is one of Create React App’s recommended alternatives. Although I liked some things about Gatsby, I don’t like how it’s prescriptive about your application code. For example, it wants you to use a gatsby-link component for your <a> components. This feels like it’s trying too hard to be an application framework like React.
Neutrino.js
I was excited to try Neutrino.js because it’s managed by the mozilla team — an organization I respect and appreciate. Unfortunately, Neutrino didn’t have what I was looking for, at least not from my initial exploration. The basic version is very minimal. Similar to Create React App, it didn’t support universal rendering out of the box. There are multiple ‘packages’ you can choose from, so it’s possible I didn’t look hard enough, but I didn’t see any clear wins.
Starter Kits that made the cut
New York Times’ kyt
I was very impressed with the New York Times KYT starter kit. It’s well documented and clear. It’s full-featured, and its default setup is fairly opinionated, which I like because I like its choice of tools — for example, it comes with support for CSS Modules and SASS. Importantly, if anyone prefers different tools, it’s easy to customize any of the configuration.
I did run into one minor issue with KYT, which is that it uses a significantly older version of an important component called react-router. This raised a concern about whether the starter kit will stay up to date in the future. But! since this project is open-source, I just contributed a pull request to resolve this. I’ve been chatting with their team and hope to see my PR or something similar merged in.
Razzle
Razzle is a beautifully minimal option similar to KYT. In fact, it cites KYT as one of its inspirations. Razzle checks every box on my list with no frills. It’s lighter and less opinionated than KYT, which is great if you want to choose your own options for things like css compilers and lint runners. It has very clear documentation, complete with examples of how to extend any configuration you might need. It even demonstrates how to use razzle with react-alternatives like preact — or even quite different alternatives like angular and vue. The codebase is fairly active which is a good sign that it will stay up to date in the future. I’m test-driving this kit on a recent personal project, and I’m excited to spend more time with it.
React-Static
I stumbled upon React Static just the other day. I used it on a quick project and was instantly impressed. As the name suggests, it compiles your react app to static html pages. What I found so impressive was how it also progressively enhances your static app to become dynamic once it loads in the client browser. Win!
Choosing between a statically rendered app, a dynamically rendered app, or something in between will largely depend on your project needs. This is a topic for another time, but you can read more about it in other blog posts like these.
TLDR: Your web app probably wants a starter kit.
I hope this post illustrated the benefits of using a great starter kit: It will save you time and keep your app healthy. And it gives you out-of-the-box benefits like static rendering and/or universal rendering, which are critical for web accessibility, SEO, and performance.
I’m looking forward to make use of these starter kits on many future projects. I plan to use React-Static on projects like presentational websites which are well suited to static pages. I plan to use Razzle or KYT on more dynamic websites — for example, search-based websites with unique urls for each search filter combination. It’s important to me that these projects stay active and well maintained over the years. So I hope to contribute pull requests and I will gravitate towards projects with active communities.
My time spent exploring these starter kits has been well spent, and I hope others can also benefit from discovering these great foundations for your web applications.
Want to stay up to date with our posts? Sign up for our mailing list below.
