One of the biggest challenges when working on a large project can be organising the codebase as it grows, here, I will discuss the benefits of a few techniques and tools that help us keep our front end code organised.

Uh-oh spagehetti-oohs

As a project progresses over time it grows in size and complexity. Without proper planning and structure these projects will often become very difficult to maintain.

Until more recently, large front end web projects would often consist of various pages templates, a large stylesheet and the jQuery library (alongside numerous plugins).

Whilst this type of project structure allowed for the quick development of simple web pages, user interface elements, and CMS themes, it runs into difficulties when newer functionality or large changes to structure are required.

Every developer will be guilty of coming onto an older project and adding more to an existing pile of spaghetti code while internally battling the overwhelming need to fix or refactor it.

Older front end projects commonly had a large script file with global variables defined amongst functions, that are then loaded in a specific order to avoid errors.

A main stylesheet could just grow and grow with more styles for each new feature being added, sometimes causing conflicts, introducing bugs and generally being a nightmare to maintain. Often, element styles were also tied to script functionality, resulting in bugs if an element's name was updated.

Break it down!

Thankfully, modern front end workflow techniques benefit from being able to be broken down into organised parts that can then be bundled together and used as required throughout the project.

Modules

Modules allow us to create a collection of small, reusable, single purpose functions that we can import and extend to create functionality within our applications.

These separate blocks of functionality allow us to untangle the mess of larger files and help us to clearly define what the purpose of our small chunk of code does. They can then be independently tested and reused.

As our application grows, we can confidently introduce or remove modules as we identify where a particular function is and how it works independent of the others within the application.

This helps us to code projects quicker and gives us the flexibility to change aspects of the project if needed.

Components

Our designers make use of style guides and pattern libraries to define a set of design rules for a project. This helps to break down a project into individual components and focus on the look and functionality of each of these. These can then be used as building blocks to easily compose larger layouts.

A login form component

These self-contained parts of a layout can have their own structure, functions, styles and state, defined within them allowing them to be imported and used throughout an application with the reduced risk of conflicts that is often seen with larger spaghettified files.

A breakdown of Vue.js components from an internal project

Future Developments

We are currently working on a number of exciting internal and client projects using this component based workflow and look forward to showcasing them on the site.