The mockup method – my way to write cleaner code.

There are many principles that help us to write cleaner and more scalable code (SOLID, KISS, DRY, YAGNI and so on), but recently, I’ve work up my method that enables to have a code more under control. Maybe that method works only in my use cases but I would like to share it with you because it may inspire you to experiment with it a bit. This method consists in writing high-level code (by creating a start mockup) and closing the next levels of abstraction in the next files, methods, whatsoever depends on your architecture.

In order to thoroughly explain you my way of thinking, let’s have some context: I would like to add a new feature to my super original to-do app 🤭. For example, I want to get all the notes from the database and do couple of operations like sorting, filtering and modifying the result. To keep it simple, these are the data we’ll be working with:

[{ title: "buy a milk", completed: false }, 
  { title: "feed the dog", completed: true }, 
  { title: "go for a walk", completed: false }, 
  { title: "design a layout", completed: true }, 
  { title: "do an English lesson", completed: true }] 

So, if you are not familiar with basic clean code principles like SRP (single responsibility principle) your solution can look something like that:

function getAndProcesssTodos() { 
    const data = fetchFromSomewhere(); 
    const sortedData = data.sort((a, b) => a.title > b.title ? 1 : -1) 
    const filteredData = sortedData.filter(data => data.completed === true); 

    for (let i = 0; i < filteredData.length; i++) { 
        filteredData[i].title = filteredData[i].title.toUpperCase(); 
        filteredData[i].title = `completed: ${filteredData[i].title}`;  
    } 

    const modifiedData = filteredData.map(item => ({...item, title: item.title.toUpperCase()}))  
    return modifiedData; 

} 
 

console.log(getAndProcesssTodos()) 

 [{ title: 'COMPLETED: DESIGN A LAYOUT', completed: true },  
  { title: 'COMPLETED: DO AN ENGLISH LESSON', completed: true },  
  { title: 'COMPLETED: FEED THE DOG', completed: true } ] 

As you can see, this code has a few problems. It is not reusable, hard to maintain and debug, because we didn’t plan our way to solve the problem. Instead of writing code like that, let’s stop for a moment and wonder what steps do we need to complete this task successfully. Let’s create a list of activities step-by-step:

• Fetch the todos
• Sort
• Filter
• Mark completed tasks in some way
• Modify
• Return the result

Let’s stick to our plan and create a mockup of our function without going into great detail.

function getTodos() { 
  const todos = fetchTodos();
  const sortedTodos = sortTodos(todos);
  const filteredTodos = filterTodos(sortedTodos);
  const modyfiedTodos = modifyTodos(filteredTodos);

  return modifiedTodos;

} 

In this step, I’m not focusing on how these function looks like exactly. Instead, I’m doing a mockup regarding how I want to my code looks like. Now, we can see that our code is separated into single functionalities, is easy to maintain, debug and it even looks like we want to. I also rename the function to determine that it exactly does. We can now implement the functions.

But, let's take a look on this function once again. I can see variable naming redundancy. fetchTodos, sortTodos, filteredTodos. Todos are everywhere! It suggests to solve this issue in some way. We can for example create a class that will be managing our todos. That sounds like a good plan. Let’s see how it can be achieved using ES6 classes.

class Todos { 
    constructor(todos) { 
        this.todos = todos; 
    } 
    get() { 
        return this.todos; 
    } 
    sort() { 
        this.todos = this.todos.sort((a, b) => a.title > b.title ? 1 : -1) 
        return this; 
    } 
    filter() { 
        this.todos = this.todos.filter(todo => todo.completed); 
        return this; 
    } 
    markCompleted() { 
        this.todos = this.todos.map(todo => ({ ...todo, title: `completed: ${todo.title}` })); 
        return this; 
    } 
    upperCaseTodos() { 
        this.todos = this.todos.map(todo => ({...todo, title: todo.title.toUpperCase()})); 
        return this; 
    }
} 
 

const todos = new Todos([ 
  { title: "buy a milk", completed: false }, 
  { title: "feed the dog", completed: true }, 
  { title: "go for a walk", completed: false }, 
  { title: "design a layout", completed: true }, 
  { title: "do an English lesson", completed: true }, 
]); 
 

console.log(todos 
    .filter() 
    .markCompleted() 
    .upperCaseTodos() 
    .sort() 
    .get()); 

[ { title: 'COMPLETED: DESIGN A LAYOUT', completed: true },  
  { title: 'COMPLETED: DO AN ENGLISH LESSON', completed: true },  
  { title: 'COMPLETED: FEED THE DOG', completed: true } ]  

You can now spot how many benefits we gained only by making a simple step list and mockup with appropriate variables naming. We could spot the problem with our code and were able to put forwards the solution to this problem. In addition, we can combine our methods and call them in different order what gives us more flexibility. Of course, in the case of more complex operations, you can use this method again to make a list of steps and do a mockup for your code. This method of writing code also helps me to separate the big problem into smaller pieces and build them step-by-step.