Single Source of Truth. 3 warstwy aplikacji

Zwróć uwagę na to, jak rozrasta się logika naszej aplikacji, a dokładniej jej warstwy i ich wzajemne powiązania:

1. localStorage jako swego rodzaju baza/ magazyn danych - ta warstwa potrafi przetrwać nawet wtedy, kiedy zamkniemy przeglądarkę,
2. aplikacja JavaScript, która na starcie/ podczas uruchomienia pobiera dane, a potem je modyfikuje i aktualizuje w localStorage,
3. oraz warstwa UI/ interface użytkownika/ kod HTML tworzący reprezentację naszej aplikacji w przeglądarce, która to warstwa jest odzwierciedleniem stanu aplikacji JavaScript, która z kolei jest odzwierciedleniem tego, co jest zapisane w localStorage.

Ponadto, po dodaniu obsługi przycisków, ta trzecia warstwa (UI/ HTML) będzie uruchamiała w odpowiedzi kod JavaScript z drugiej warstwy, który z kolei będzie aktualizował localStorage i ponownie renderował zauktualizowane zadania jako elementy listy HTML. Koło się zamyka.

W tym przypadku mamy do czynienia z podejściem/ koncepcją w programowaniu, którą określa się mianem single source of truth (pojedyncze źródło prawdy).

W naszej aplikacji wszystko zależy od tego, co jest w localStorage - to jest nasze źródło prawdy. Z niego pobieramy zadania, a dopiero potem je wyświetlamy na ekranie; aktualizujemy zadania w localStorage po każdej modyfikacji, w związku z czym zmienna tasks jest ściśle zsynchronizowana z localStorage, a kod HTML jest z kolei zsynchronizowany z JavaScriptem - zmienną tasks.

W związku z tym nasze podejście było następujące:

• pobieramy dane z localStorage,
• renderujemy je na ekranie,
• kiedy jakieś zadanie zostaje dodane/ usunięte, aktualizujemy localStorage i na nowo renderujemy zaktualizowaną listę zadań (co znaczy, że najpierw usuwamy starą listę i tworzymy jej nową wersję - to zajmuje milisekundę).

Dzięki takiemu zabiegowi, mogliśmy stworzyć jedną funkcję - renderTasks(), która właśnie renderuje wszystkie taski za każdym razem, kiedy dochodzi do zmian oraz kiedy po raz pierwszy pobieramy je z localStorage.

Podobnie updatujemy nasz localStorage za pomocą jednej funkcji updateTasksInLocalStorage(), którą wywołujemy w każdej funkcji modyfikującej listę zadań.