Metoda mockup'u - mój sposób na pisanie czystszego kodu.

Jest wiele zasad, które pomagają nam pisać czystszy i bardziej skalowalny kod (SOLID, KISS, DRY, YAGNI i tak dalej) ale niedawno wymyśliłem własną metodę, która umożliwia mi mieć kod bardziej pod kontrolą. Możliwe, że ta metoda działa tylko w moich przypadkach ale chciałbym podzielić się nią, ponieważ może zainspiruję Cię nieco do eksperymentowania na własnym przykładzie. Sposób ten polega na pisaniu na początku wysoko poziomowego kodu (poprzez zrozbienie mockup'u), a następnie zamykanie poszczególnych zadań i niższych poziomów abstracji w kolejnych plikach, metodach, w zależności od Twojej architektury.

Aby wytłumaczyć dokładniej co mam na myśli, nadajmy sobie jakiś kontekst: chciałbym dodać nową funcjonalność do mojej super oryginalnej aplikacji to-do 🤭. Na przykład, chciałbym pobrać informacje o notatkach z bazy danych i wykonać na nich parę operacji takich jak sortowanie, filtrowanie i modyfikowanie. Aby było prościej, to są dane, na których będziemy pracować:

[{ 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 }] 

Jeżeli nie jesteś zaznajomiony z podstawowymi zasadami pisania czystego kodu takich jak zasada jednej odpowiedzialności (single responsibility principle) Twoje rozwiązanie może wygląda mniej więcej tak:

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 } ] 

Jak widzisz, ten kod ma parę problemów. Nie jest reużywalny, trudny w utrzymaniu i debugowaniu, ponieważ nie zaplanowaliśmy wcześniej naszego planu działania. Zamiast pisać kolejne bazgroły, zatrzymajmy się na chwilę i zastanówmy się, jakie kroki musimy wykonać, aby ukończyć nasze zadanie pomyślnie.

• Pobierz zadania
• Posortuj
• Filtruj
• Oznacz jakoś ukończone zadania
• Modifikuj
• Wzróć rezultat

Trzymajmy się naszego planu i twórzmy mockup naszej funkcji bez wchodzenia w szczegóły.

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

  return modifiedTodos;
} 

Na tym etapie nie skupiam się na tym jak te funkcje dokładnie wyglądają. Zamiast tego robię mockup jak chciałbym aby wyglądał mój kod. Teraz widzimy, że nasz kod jest podzielony na poszczególne odpowiedzialności, jest łatwiejszy i utrzymaniu i debugowaniu i nawet wygląda jak byśmy chceli. Również zmieniłem nazwy funkcji by określić, co dokładnie robią. Teraz możemy zaimplementować te funkcje.

Ale spójrzmy on tę funkcje raz jeszcze. Widzimy niepotrzebną redundancję w nazwach: fetchTodos, sortTodos, filteredTodos. Wszędzie są todos! To sugeruje, aby rozwiązać ten problem w jakiś sposób. Możemy na przykład zamknąć nasze funkcje w klasie i tak zarządzać naszymi zadaniami. To brzmi jak dobry plan. Zrobimy klasę todos, i pozbędziemy się 'Todos' w nazwie każdej metody. Zobaczmy, jak możemy to osiągnąć z klasami ES6.

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 } ]  

Teraz możesz zauważyć jak wiele benefitów zyskaliśmy tylko poprzez zrobienie prostej listy kroków i mockup'u z odpowiednimi nazwami zmiennych. Mogliśmy dzięki temu znależć problem i zaproponować rozwiązanie. W dodatku, korzytając z chainingu możemy dowolnie łączyć nasze metody and wywoływać je w różnej kolejności co daje nam większą elastyczność. Oczywiście, przy bardziej skomplikowanych zadaniach możemy ponownie zasosować tę metodę, rozbić zadania na mniejsze i zamockować kod. Ten sposób pisania kodu pomaga mi właśnie w rozdzielaniu dużych problemów na mniejsze i budowania ich krok po kroku.