A maintainable front-end project structure

Evan Jacobs
Jul 20, 2016 · 1 min read

Update (9/13/2016): Test files are now flattened/co-located next to what they’re testing to reduce confusion.

There’s a herd wisdom that emerged in the past few years to group your code by semantic type, e.g. reducers, views, actions, etc.

Don’t do that.

Here’s the thing, the further away your bits of code get from each other, the harder it is to untangle functionality, make substitutions, and outright rip out old components. It makes much more sense to group your code thematically.

Often, this takes the form of your application routes: e.g. home, search, settings. The benefit to this system of organization is 90–100% of all the code you need for a view is all in one place — no more hunting and pecking for a particular reducer or an errant style. Here’s an example:

The generator-enigma yeoman scaffolder will get you most of the way there for new projects. Thanks for reading!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store