Successfully Implementing Clean & Functional Javascript

An introduction to how we used clean and functional concepts to help build our new full-stack Javascript codebase at 15gifts

James Fowler
Jun 25, 2018 · 4 min read
  • Using variables and functions with meaningful names
  • Immutability, and reducing side-effects
  • Statelessness and pure functions
  • Composition over inheritance

Well defined, clearly named files

Small file sizes
Small file sizes, optimally less than 100 lines, allow developers to quickly see the intention of a file and what it was designed to do at a glance. It also helps with solving diffs in merge conflicts.

Using variables and functions with meaningful names

Variables
Giving variables meaningful names helps developers to understand why they exist.

Immutability, and reducing side-effects

Use const instead of var or let
Using const guarantees that a variable’s binding cannot change after it has been set. Using const in a codebase also implies to developers that a variable’s value cannot change. If all developers working on a codebase are aware of this, then it makes it easier to modify code with confidence. We do sometimes use let in our codebase, when we know that a variable may change. This is very rare though.

Statelessness and pure functions

No global state
By avoiding the use of global variables and ensuring that our local variables have the correct scope, we can be confident that they are only created and initialised when they are needed. This makes it clear to developers what the intention of a variable is, suggesting that it’s value cannot change.

Composition over inheritance

No classes
Not using classes means that functions can just be imported from files and called directly, rather than needing classes to be imported and instantiated. Instead of inheritance, common code can be separated into it’s own file and imported where it is needed.

Summary

This article showed an overview of some of the conventions we have chosen to use to successfully produce readable code in our full-stack javascript codebase. This has helped us to develop our code more quickly, maintain it more easily, and share a lot of our code between the back-end and the front-end.

15gifts Engineering

15gifts Engineering

James Fowler

Written by

Development Team Lead@15gifts

15gifts Engineering

15gifts Engineering