1. Home
  2. Articles
  3. javascript

Five Front-end File Architectures For Better Code Organisation

JavaScript||

7 min read

Introduction

Choosing the most appropriate file architecture can set you up for massive success when building scalable front-ends. There are a variety of approaches to file architectures, each with its pros and cons. In this article, I will discuss the benefits and trade-offs of 5 common front-end file architectures to help you decide how to scale your next project.

Flat Architecture

1|- index.html
2|- style.css
3|- analytics.js
4|- about.html
5|- modernizer.js

Opting for the flat-file architecture is by far the most straightforward approach. This architecture dictates that all your files are stored in a single directory. This architecture works well on micro to small projects, but as the project scales, the number of files and file types tend to grow out of control.

As no hierarchy is explicitly set, the cognitive load on collaborators can cause frustration and lead to uncontrolled and wild additions to the project which do not follow rhyme or reason.

Benefits of the Flat Architecture

Downfalls of the Flat Architecture

Hierarchical Architecture

1|- css/
2|- javascript/
3|- assets/
4|- images/
5|- fonts/
6|- index.html

In a hierarchical file architecture, a project is organised into multiple directories. This allows engineers to manage code better and makes it easier to determine where specific functionality is stored within the project. Generally, directories include:

Each folder can then be further broken down into more semantic folder structures. For instance, within your CSS folder, you may have a folder structure that looks something like this:

1|- css/
2 |- base/
3 |- components/
4 |- typography/

Benefits of the Hierarchical Architecture

Downfalls of the Hierarchical Architecture

Modular Architecture

1|- index.html
2|- modules
3 |- ExampleModule
4 |- components
5 |- tests
6 |- helpers
7 |- mocks
8 |- services
9 |- types

Using a Modular architecture allows engineers to self-contain functionality. Each module folder contains everything about or relating to that module - from components to type declarations. Engineers can then easily update multi-dimensional aspects of a particular module, improving the developer experience and allowing for faster iterations as all functionality remains closely placed and organised.

Another benefit of the modular architecture is that it provides a high-level overview of a site's functionality; this allows developers to understand the project's scope and reduces cognitive load.

Benefits of the Modular Architecture

Downfalls of the Modular Architecture

Component-based Architecture

1|- src
2 |- components
3 |- Header
4 |- index.jsx
5 |- Header.module.css

One of the more common and well-known architectures, the Component-based architecture, will be familiar if you've spent time building React-based applications. This architecture intends to ensure complete usability.

The architecture allows for scalable, individual components and provides an excellent platform for more complex features that consume smaller pieces within the architecture. This architecture works best with frameworks like React or Vue that leverage a component-based methodology.

Benefits of the Component-based Architecture

Downfalls of the Component-based Architecture

Feature-based Architecture

1|- src
2 |- features
3 |- blog
4 |- shop
5 |- cart
6 |- components
7 |- pages
8 |- services

The featured-based architecture organises a code base by features rather than file types or components. This can make it easier for engineers to understand how project functionality fits together.

Generally, features are split into directories containing all the functionality required to implement and execute that feature. As you can see in the example above, large pieces of functionality, i.e. blog, shop, cart, are contained within their directories, and all related functionality is contained within further sub-directories.

This architecture works well if the project management of the site is centred around delivering significant and specific features.

This architecture is still used today by more monolith-like frameworks such as Laravel and WordPress. It allows for easy organisation and an orientating developer experience.

Benefits of the Feature-based Architecture

Downfalls of the Feature-based Architecture

Conclusion

Choosing a file architecture for your project is by no means a simple process. Always put scalability first when it comes to making such a decision. It is also essential to consider developer experience, how often features will be developed and extended, and how easy it is to add and remove elements. Also, different tech stacks may have a preferred architecture - for instance, a best practice file architecture for a React-based project may differ from WordPress-based project.

Profile of Daine

Written by Daine Mawer. Thanks for reading! Im always posting new content. If you liked what you read, please subscribe to my RSS feed or follow me on Github, Twitter or LinkedIn. Im also always on the look out for new oppurtunities, engagements, contract work or just coffee! So please dont hesitate to reach out.