Piszemy pierwszą aplikację w języku JavaScript

Piszemy pierwszą aplikację w języku JavaScript

JavaScript to obecnie najpopularniejszy na świecie język programowania. Przygodę z nim zaczniemy… po prostu od JavaScriptu – bez narzędzia X, biblioteki Y czy innych wynalazków. Stworzymy prostą aplikację ToDo (lista zadań) i na jej podstawie poznamy solidne podstawy czystego JS’a – na magię i ułatwianie sobie pracy przyjdzie pora w przyszłości.

[Śledź mój kanał na YouTube – klik]

Pierwsza aplikacja w języku JavaScript (vanilla!)

Od czego zacząć naukę języka JavaScript? O czym by tu napisać pierwszy techniczny post o JSie na blogu…

Knockout? A może Angular? Jedynka… hmmm, może lepiej dwójka? No albo React… a jQuery? Czy ktoś jeszcze pamięta jQuery?!

STOP!

Pierwszą aplikację w języku JavaScript napiszemy w uwaga… czystym JavaScripcie (tzw. vanilla)! A dlaczego tak?

Oczywiście, że chciałbym Wam jak najszybciej przedstawić niesamowitą otoczkę tego języka, ale zanim wyruszymy to warto załapać solidne podstawy. Przed sobą mamy mieć cel – realizacja aplikacji ToDo w czystym JSie zgodnie z rzeczywistym procesem tworzenia tego typu rozwiązań.

Nie będzie o frameworkach, cudach, ani o magii która dzieje się w tle. Narzędzi będzie minimum. Nie będzie o trudnych słowach na które możesz się natkąć w internecie – two-way bindingu, virtual-domie, ani o innych tego typu kwestiach na które masz jeszcze czas.

W tym poście przeczytasz o tym:

  • jak w szybki sposób stworzyć layout aplikacji za pomocą frameworka Bootstrap służącego do tworzenia responsywnych, przyjaznych użytkowniowi interfejsów
  • jak za pomocą kodu JS manipulować strukturą strony www (tzw. DOM)
  • jak podzielić naszą aplikację na tzw. warstwy i dlaczego warto je oddzielać

Keep focus on JS.

Cały kod aplikacji którą stworzymy znajduje się tutaj:

https://github.com/psmyrdek/vanilla-todo

Zbieramy wymagania

Kojarzycie aplikacje ToDo? Jeśli nie, to w skrócie chodzi w nich o zbieranie listy zadań / tasków / tematów i o zarządzanie nimi. Zamiast trzymania wszystkiego w głowie wpisujemy nowe “coś” i w jednym miejscu mamy zadania na zbliżające się dni. Możemy je oznaczać jako wykonane, usuwać a także filtrować po tych których nie zrealizowaliśmy do tej pory.

Ogólny pogląd tego co będziemy robić już mamy. Co dalej? Zbierzmy wymagania takiej aplikacji w sposób bardziej formalny.

Przed naszą aplikacją stawiamy następujące wymagania:

  • możliwość wprowadzenia nowego zadania
  • podgląd wszystkich dodanych zadań
  • możliwość oznaczenia zadania jako wykonane
  • możliwość usunięcia zadania
  • możliwość ograniczania widoczności do zadań wykonanych / niewykonanych

Jedziemy!

Start, czyli index.html

Współczesny internet to obecnie trzy podstawowe klocki – HTML (struktura strony), CSS (wygląd) oraz JS (nadawanie życia 😉 ).

Naszą aplikację zaczniemy od utworzenia pliku index.html (będzie to jedyny potrzebny nam plik html) gdzie będziemy tworzyć strukturę naszej aplikacji.

Jedyną modyfikacją jaką wprowadziłem jest dołączenie pliku css z frameworka Bootstrap która zapewni nam odpowiedni wygląd naszej aplikacji, bez spędzania dodatkowych minut na stylowanie tego co stworzymy.

Plik który stworzyliśmy można już otworzyć w waszej ulubionej przeglądarce internetowej – powinniście zobaczyć przed sobą coś takiego:

1

Przeglądarka jest w stanie przetrawić naszego htmla – jest dobrze!

Tworzymy szkielet layoutu

Przed dodaniem jakichkolwiek elementów dynamicznych na naszej stronie musimy mieć ogólny pogląd tego jak nasza aplikacja będzie wyglądać. Stwórzmy więc szkielet naszej aplikacji ToDo wykorzystując do tego standardowego htmla oraz css (z Bootstrapem).

Zaczynamy od utworzenia miejsca na nasze “ToDo” – do tego celu wykorzystamy tzw. grida dostępnego w Bootstrapie o którym więcej możecie przeczytać tutaj. W miejsce utworzonego tagu h3 piszemy następujący fragment kodu:

Wróćmy do przeglądarki. Zmiany? Pozornie nic się nie stało – przesunęliśmy nasz tekst nieco bliżej środka ekranu. Zobaczmy jednak czym jest nasz grid z kontenerem oznaczonym klasą .container.

Utwórzmy w tym celu obok pliku index.html plik styles.css, a w nim dodajmy następujący fragment:

a następnie dodajmy go do sekcji head w index.html:

Odświeżamy przeglądarkę, a tam…:

2

Już rozumiesz? Otrzymaliśmy wyśrodkowany kontener (zaznaczony czerwoną ramką) na całą zawartość aplikacji ToDo, który dodatkowo w miarę potrzeby będzie się przystosowywał do szerokości ekranu. Klasy .container, .row czy klasy kolumn (czyli ogólnie grid) to jedna z podstawowych funkcjonalności frameworka Bootstrap która oszczędzi nam czasu który normalnie musielibyśmy przeznaczyć na pozycjonowanie elementów.

Czerwoną ramkę można usunąć poprzez wyczyszczenie pliku styles.css. Na razie oprzemy się jedynie na tym co dostarcza nam Bootstrap.

Odnośnie proponowanego sposobu nazewnictwa klas poszczególnych elementów więcej możecie przeczytać tutaj.

Layout właściwej aplikacji

Mamy już szkielet – przejdźmy więc do stworzenia layoutu naszego ToDo. W tym celu dopiszmy kilka linijek w naszym index.html. Usuwamy więc linijkę z tekstem Hello World i na początek dodajemy w tym miejscu panel do wprowadzania nowych zadań:

Poniżej dodajemy listę zadań:

A kończymy dodając panel filtrów:

Całość prezentuje się następująco:

3

Statyczny layout jest już w pełni gotowy jednak oczywiście realizacja całej funkcjonalności ToDo wciąż przed nami.

Ożywiamy nasz layout

W porównaniu do kodu HTML poziom trudności w tym momencie wzrośnie, dlatego ważne jest aby zapoznawać się chociaż pobieżne z każdym wklejonym przeze mnie linkiem – skróty myślowe których używam, objaśnienia i definicje szczegółowo opisywane są właśnie pod linkami. Przy pierwszym czytaniu tego posta staraj się jednak uczyć “od ogółu do szczegółu” – najpierw zrozum ogólny kontekst tego co chcemy wykonać, a następnie zgłębiaj się w detale języka.

Jeśli otworzysz teraz plik index.html to zauważysz, że mamy już całkiem sporo. Do pola tekstowego można wpisywać tekst nowego zadania, przyciski na stronie są już klikalne, a checkboxy oznaczające status danego zadania można zaznaczać i odznaczać. Niestety to wszystko co aktualnie można robić z tą aplikacją 😉

Rozpoczynając pracę z częścią związaną z językiem JavaScript zaczniemy od takiego zadania: chcemy, aby po naciśnięciu zielonego przycisku [Dodaj] tekst wpisany w pole tekstowe pojawił się przed nami w okienku dialogowym.

Utwórzmy na początek nowy folder, w którym umieszczać będziemy nasz kod JS. Nazwijmy go app. W folderze app utwórzmy teraz nasz pierwszy plik z kodem JavaScript – TodoView.js.

 Napiszmy w nim taki oto fragment kodu:

Zacznijmy od zmiennej document – w dużym skrócie jest to zmienna globalna, reprezentująca w pewien abstrakcyjny sposób naszą stronę internetową. Więcej na temat tego czym jest document dowiesz się tutaj.

Na zmiennej document wywołujemy metodę której definicja wygląda w ten sposób:

Pierwszym argumentem będzie nazwa zdarzenia które chcemy obsłużyć, natomiast drugim będzie tzw. event listener czyli funkcja która wykona się jako następstwo tego zdarzenia. Mówiąc bardziej ogólnie – im bliżej jesteśmy interfejsu użytkownika, tym więcej “entry-pointów” danej funkcjonalności zaczyna się od jakiegoś zdarzenia. Kliknięcie, ruch myszką, najechanie na element, itd. – to wszystko zdarzenia (eventy) na które możemy nasłuchiwać i od nich rozpoczynać pracę w danym obszarze.

My zarejestrujemy nasz pierwszy listener pod zdarzeniem “DOMContentLoaded” – event ten wywoła się kiedy struktura strony html będzie załadowana i przetrawiona przez przeglądarkę. A po co nam taki event? A no po to, że zaraz będziemy rejestrować listenery pod konkretne przyciski czy inputy i musimy być pewni, że w momencie rejestracji dany element został już dodany do tzw. DOM, czyli kolejnej bardzo ważnej abstrakcji która tym razem reprezentuje strukturę naszego dokumentu – DOM to reprezentacja “płaskiego” pliku HTML w postaci obiektów zwanych node’ami do których możemy się odwoływać m.in z kodu JavaScript.

Aby całość została wykonana musimy teraz dodać nasz plik TodoView.js do index.html na samym końcu (przed zamknięciem body):

Jeśli przeładujesz przeglądarkę to w tym momencie powinniśmy już zobaczyć że nasz kod działa – pojawia się powiadomienie w momencie załadowania całej struktury DOM.

Wracając do naszego założenia z początku tego podrozdziału – w jaki sposób pobrać tekst z pola tekstowego i wyświetlić go po naciśnięciu przycisku [Dodaj]? Macie jakieś pomysły? A gdyby wykorzystać dostępne eventy?

Zrobimy tak:

  1. Pobierzemy dwie referencje do elementów z DOM – jedną do pola tekstowego, a drugą do przycisku [Dodaj]
  2. Na przycisku [Dodaj] zarejestrujemy listener (pewną funkcję), który wykona się po kliknięciu w przycisk
  3. W środku listenera pobierzemy wartość pola tekstowego i wyświetlimy ją:

Wygląda to w ten sposób:

Do zmiennych addTodoInput oraz addTodoBtn poprzez metodę querySelector odwołujemy się do poszczególnych elementów strony, następnie rejestrujemy nasz listener na zdarzenie click, a w środku używając metody alert wyświetlamy zawartość naszego pola tekstowego.

Ważne jest, żeby w tym momencie zrozumieć kolejność wykonywanych zdarzeń – najpierw pobieramy elementy z DOM, a następnie rejestrujemy na nich pewne funkcje które wykonają się w następstwie zdarzeń.

Możesz teraz wrócić do przeglądarki, wpisać w polu tekstowym wybrany tekst i po naciśnięciu przycisku [Dodaj] przeczytać go w okienku dialogowym. Mamy to!

Model danych – Todo

Czas na kolejny fragment naszej układanki. Musimy teraz znaleźć sposób na to, aby na podstawie pewnej nieokreślonej jeszcze kolekcji naszych todo móc je wyświetlić jedno pod drugim.

Zacznijmy od reprezentacji naszego Todo w kodzie. Czy po zapoznaniu się z layoutem aplikacji byłbyś w stanie zaproponować jakie właściwości (pola) takie todo musi posiadać?

9

Ja widzę dwie podstawowe – mamy opis naszego todo (nazwijmy go description) oraz stan określany poprzez checkbox (nazwijmy go isCompleted). Ważne też, aby taki todo posiadał swój identyfikator, żeby w przypadku naciśnięcia przycisku [Usuń] usunąć ten właściwy.

Tak powinno być dobrze. Powyższy kod znalazł się w pliku app/Todo.js.

Mamy więc zdefiniowany funkcję konstruującą nowy obiekt Todo, której musimy w momencie tworzenia przekazywać opis zadania. Identyfikator zrealizujemy poprzez prostą zmienną statyczną (wspólną dla każdego Todo) UID – każdy nowo powstały Todo będzie posiadał taki identyfikator powiększony o jeden od poprzedniego. Flagę isCompleted ustawiam wewnątrz na false – odwzorowuje to posługiwanie się “zadaniem” czy “zamiarem” czegoś w rzeczywistym świecie – w momencie kiedy dany pomysł urodzi nam się głowie to jego flaga isCompleted ustawiona jest na false, a po jego wykonaniu jest równa true.

Dodajmy nasz nowy plik app/Todo.js na koniec index.html tak jak poprzednio i przejdźmy teraz do przeglądarki (u mnie Chrome). Naciśnijmy przycisk F12 aby uruchomić Chrome Dev Tools, czyli narzędzie z którym każdy programista front-endowy powinien się zapoznać. Kliknijmy w zakładkę Console i sprawdźmy czy mamy dostęp do naszego obiektu Todo:

10

Wygląda na to, że tak- jako odpowiedź dostajemy definicję naszego Todo. Sprawdźmy teraz jak zachowują się identyfikatory poprzez utworzenie kilku kolejnych Todo:

11

Po utworzeniu kolejnych nowych obiektów Todo widzimy, że faktycznie identyfikator zwiększany jest o 1 czyli nasza zmienna statyczna spełnia swoje zadanie, description ustawiany jest poprawnie a flaga isCompleted ma na starcie wartość false.

To tylko jeden z przykładów wykorzystania konsoli języka JavaScript do sprawdzenia poprawności działania naszego kodu. Warto abyś równolegle z postępami w nauce języka JavaScript poznawał kolejne zakładki DevToolsów – konsola to tylko jedno z wielu narzędzi które będzie ci niesamowicie pomocne w procesie tworzenia kodu JS.

Wracając do naszej aplikacji – aby przygotować komponent do wyświetlania listy zmieńmy teraz zawartość naszego TodoView.js w ten sposób:

Usunąłem poprzedni kod do którego wrócimy nieco później i dodałem następujące fragmenty:

  1. Wprowadźmy nowy, tymczasowy zestaw danych (tablica todos) który pomoże nam przygotować mechanizm wyświetlania naszych todo – nie skupiamy się teraz na zawartości listy, zależy nam jedynie na stworzeniu sposobu na jej wyświetlanie
  2. Użyjmy metody renderList nieistniejącego jeszcze komponentu TodoRenderer aby wyświetlić naszą listę

Wyświetlanie listy Todo

Stworzymy teraz nowy komponent o nazwie TodoRenderer służący do wyrenderowania (wyświetlenia) naszej listy na podstawie kolekcji todo. Dlaczego takiego mechanizmu nie będziemy trzymać w tym samym pliku? A no dlatego, że dobrą praktyką jest aby dany moduł (pewna określona część aplikacji) miał tylko jedną i tylko jedną odpowiedzialność w systemie. Mówi nam o tym zasada SRP.

Nasz TodoView będzie odpowiedzialny za wykonywanie pojedynczych akcji pod konkretnymi, statycznymi elementami strony, a resztę odpowiedzialności będziemy przekazywać dalej. TodoRenderer będzie pierwszym z takich komponentów o ściśle określonej funkcjonalności. Prezentuje się on następująco:

Zrealizowałem go wykorzystując tzw. Module Pattern czyli wzorzec który pomoże nam uporządkować funkcjonalność naszego modułu i oddzielić funkcjonalności publiczne (dostępne na zewnątrz) od prywatnych. Dodałem też od razu metodę której potrzebujemy czyli renderList. W jaki sposób będzie ona działać? Ja proponuję coś takiego:

  1. Na początku musimy pobrać pewien nadrzędny element (drzewa DOM) w którym będziemy tworzyć naszą listę – będzie to jeden określony fragment naszego pliku index.html
  2. Jeśli zmienna która będzie przechowywać referencję do naszego obiektu będzie pusta, to najpierw przypiszemy do niej nasz element. Jeśli natomiast będzie mieć wartość, to dzięki niej wyczyścimy wszystkie elementy podrzędne danego elementu.
  3. Zdefiniujemy szablon (template) pojedynczego Todo, którego będziemy dodać do strony w miejscu naszego elementu nadrzędnego
  4. Dla każdego elementu z kolekcji todos użyjemy zdefiniowanego szablonu do utworzenia konkretnego todo i dodania go do roota.

Zmodyfikujmy teraz nasz index.html usuwając istniejące elementy todo zostawiając jedynie element nadrzędny (root):

Nasz prawie gotowy TodoRenderer wygląda natomiast w ten sposób:

Jedyną dostępną na zewnątrz metodą jest wciąż metoda renderList. Po jej wywołaniu wykonuje się metoda _initializeRoot która sprawdza, czy zmienna _listRoot posiada już przypisany element DOM. Taki zapis w języku JavaScript:

oznacza, że kod w środku naszego ifa wykona się, jeżeli zmienna _listRoot posiada wartość niepustą (ale niekoniecznie false – może to być też undefined czy null). Zamiast pisania wszystkich warunków kiedy zmienna jest pusta wystarczy napisać tylko if(!_listRoot) { … }.

Jeśli zmienna ta nie posiada przypisanej wartości, to przypisujemy do niej naszego roota:

Jeśli natomiast posiada, to czyścimy wszystkie elementy w ten sposób, że dopóki właściwość firstChild naszego _listRoota jest niepusta (czyli nasz root ma jakiś element) to usuwamy jej element potomny (child):

Następnie dla każdego elementu z tablicy todos musimy stworzyć element i dodać go do roota:

Funkcje _createTodoItem oraz _createTodoFromTemplate mają za zadanie stworzyć nowy fragment kodu html na wypełniając go wartościami z danego todo, a następnie dodać go jako kolejny element naszego roota.

Możemy teraz przeładować przeglądarkę i zobaczyć w jaki sposób prezentuje się nasza aplikacja:

12

Prawie dobrze! Oczywiście nie mamy jeszcze zdefiniowanego właściwego szablonu naszego Todo jednak po modyfikacji metody _createTodoFromTemplate wszystko wróci na swoje miejsce:

Uwaga – aby umożliwić tworzenie takiego stringa przez kilka linijek, znaki w które objęto cały szablon są dostępne na tyldzie (`) – to nie apostrofy (‘)!

Powyższy szablon utworzyłem używając nowej funkcjonalności języka JavaScript czyli tzw. interpolacji stringów – pozwala nam ona na wstrzykiwanie zmiennych języka JS bezpośrednio do środka stringa. Inaczej musielibyśmy sklejać całość ręcznie. My natomiast robimy to tak:

Warto dodać, że na przycisk [Usuń] oraz na checkbox dodajemy akcje usunięcia todo i zmiany jego stanu (atrybuty onclick).

Odśwież teraz przeglądarkę aby sprawdzić, czy wszystko wygląda tak jak powinno. Jeśli tak jest to możemy przejść dalej.

Refaktoryzacja – porządkujemy nasz kod

To co zrobiliśmy do tej pory można określić mianem “proof of concept” – nauczyliśmy się jak rejestrować poszczególne zdarzenia, mamy komponent odpowiadający za wyrenderowanie listy – ogólnie wygląda na to, że nasza aplikacja jest możliwa do zrealizowania. Czas na uporządkowanie tego co zrobiliśmy do tej pory, czyli na tak zwaną refaktoryzację.

Pierwszy problem jaki widzimy to pomieszany sposób wywoływania naszych akcji z przycisków – zaczęliśmy od rejestrowania listenerów na przycisku [Dodaj], a usuwanie i zmianę stanu naszego Todo zrealizowaliśmy poprzez tzw. inline’owe wywoływanie metod JSa (onclick). Wróćmy więc do pliku index.html i dodajmy na przycisk wywołanie metody addTodo z TodoView aby całość działała tak samo jak usuwanie i zmiana stanu todo:

Musimy więc dostosować nasz TodoView w ten sposób, aby można było z niego wywołać potrzebne nam akcje – addTodo, deleteTodo oraz changeState. Użyjemy do tego Module Pattern:

na dole pliku dodajmy jeszcze fragment renderujący naszą listę po raz pierwszy (po załadowaniu się struktury DOM):

Wróćmy do aplikacji i sprawdźmy jak teraz działa całość – pod przyciskiem [Dodaj], [Usuń] oraz pod checkboxem powinny się już wyświetlać odpowiednie okna dialogowe które wywołujemy metodą alert.

13

Oddzielenie prezentacji danych od logiki aplikacji

Zauważ, że pomimo napisania tych wszystkich linijek kodu wciąż nie mamy miejsca gdzie będziemy przechowywać nasze dane i je modyfikować.

Interfejs nad którym pracowaliśmy do tej pory to część tzw. warstwy prezentacji czyli czegoś, z czym użytkownik będzie wchodził bezpośrednio w interakcję. Przyciski, kolory, animacje, układ strony – to wszystko NIE POWINNO WPŁYWAĆ na rzeczywiste działanie naszej aplikacji – jej logika powinna być zaszyta w innym miejscu.

Dlaczego?

Weźmy na tapetę samochód i jego układ napędowy. Czy mechanik przy każdej naprawie np. skrzyni biegów namawia cię na zmianę lakieru? Na wymianę lusterek bocznych? Nowe światła? Nie – warstwa prezentacji nie ulega zmianie a naprawy są możliwe. Serce samochodu czyli jego silnik i skrzynia biegów powinny być możliwe do naprawy niezależnie od koloru nadwozia.

Skoro przygotowaliśmy już wstępną wersję naszej warstwy prezentacji i zapoznaliśmy się z tym dlaczego warstwy aplikacji powinny być od siebie oddzielone, to czas teraz na serce systemu – zaimplementujemy faktyczny moduł do zarządzania naszymi Todo.

Logika aplikacji ToDo

Stworzymy teraz obiekt który będzie przechowywał stan naszej aplikacji i pozwalał go modyfikować – nazwijmy go TodoService (app/TodoService.js). Prezentuje się on następująco:

Na początku zdefiniowałem jedynie prywatną zmienną _todos która będzie jednocześnie stanem naszej aplikacji. Czas teraz na zaimplementowanie operacji na naszych todosach:

A oto krótki opis działania dodanych funkcji:

Funkcja addTodo nie wymaga długiego komentarza- przyjmuje ona jako parametr opis nowego zadania, tworzy go a następnie dodaje (push) do tablicy _todos. 

Dwie kolejne funkcje są nieco ciekawsze, korzystają bowiem z natywnej funkcji języka JavaScript czyli filter. Filter działa w ten sposób, że dosłownie filtruje daną kolekcję używając do tego funkcji z danym warunkiem.

W funkcji deleteTodo w kolekcji _todopozostawiam w ten sposób tylko te elementy, które mają id inne od usuwanego (usuwany zostaje więc zignorowany – znika).

W funkcji changeState wyszukuję natomiast elementy o danym id (oczywiście znajduję tylko jeden dlatego pobieram go poprzez zerowy indeks tablicy) a następnie zmieniam jego stan – dzięki temu, że pobiorę w ten sposób referencję do obiektu Todo, jednocześnie zaktualizuję też referencję do tego obiektu w tablicy _todo.

Łączymy wszystko w całość

Nasz serwis jest teraz gotowy do wykorzystania w lekko zmodyfikowanym TodoView:

Odpowiedzialność widoku jest teraz bardzo ograniczona – cała logika aplikacji została bowiem wydelegowana do serwisu który z łatwością możemy przetestować w środowisku bez przeglądarki www (o tym kiedy indziej). Na górze dodaliśmy jeszcze referencję do naszego pola tekstowego, ponieważ podczas dodawania nowego Todo musimy pobierać jego aktualną wartość i czyścić go.

Odświeżamy teraz naszą przeglądarkę, dodajemy nowe todo i…

14

…nic się nie dzieje 🙁 . Dlaczego?

Ponieważ nie istnieje żaden mechanizm, który w sposób automatyczny aktualizowałby nasz widok po zmodyfikowaniu stanu aplikacji.

Zadbajmy więc ręcznie o ponowne renderowanie całej listy:

umieść tę funkcję na końcu TodoView, w miejscu nad słowem kluczowym return. Posłuży nam ona do wymuszania odświeżenia naszej listy. Wszystko co pozostaje nam zrobić to wywołać ją na końcu naszych metod w widoku:

I gotowe!

15

Przed zakończeniem zobaczmy jeszcze na czym polega różnica między naszym widokiem a serwisem, który zarządza stanem aplikacji:

16

Na zakończenie

Dotrwałeś do końca? Działa? Kim jesteś? Powtarzaj – “JESTEM ZWYCIĘZCĄ”

giphy (1)

Dokładnie tak – podróż była długa, ale dotarliśmy do końca. Stworzyliśmy aplikację w języku JavaScript bez użycia jakiegokolwiek frameworka.

Wady? Z pewnością kilka się znajdzie – ręczne aktualizowanie widoku to jedna z największych bolączek naszej aplikacji. Zauważmy też, że za każdym razem tworzymy na nową całą listę, zamiast aktualizowania tylko zmienionych fragmentów. Z pewnością należałoby się tym zająć – ale o tym w kolejnych postach.

Co dalej? Jak pewnie zauważyłeś, nie przedstawiłem tutaj implementacji filtrowania. Mam dla ciebie zadanie specjalne. Cały kod tej aplikacji znajduje się w moim repozytorium na GitHubie:

https://github.com/psmyrdek/vanilla-todo

Jeśli nie wiesz do czego służy system kontroli wersji i portal GitHub, to koniecznie zapoznaj się z naszym tutorialem.

Jeśli jesteś gotowy na dalszą pracę, to zapraszam cię do sforkowania mojego repozytorium, dodania funkcjonalności filtrowania samemu a następnie zaprezentowania w komentarzach swoich wyników pracy! Możesz do tego użyć również naszego CodeReview – z pewnością postaramy ci się pomóc w ewentualnych problemach.

Zachęcamy też do dzielenia się swoimi przemyśleniami i pytaniami w komentarzach oraz na naszym fanpage’u – tymczasem dzisiaj to już wszystko!

Do kolejnego razu!

Powiązane

Artykuły programistyczne – DDZ #6 Paczka wartościowych materiałów, które możecie znaleźć w sieci. Jeżeli chcesz zapoznać się z pozostałymi ciekawymi linkami możesz zrobić to tutaj....
Commit, branch i diff, czyli obsługa Gita za pomoc... Korzystanie z systemu kontroli wersji Git z poziomu konsoli obrosło wieloma mitami. W dzisiejszym poście chciałbym pokazać wam, że nie taki diabeł...
Ten niedobry JavaScript – odc. 2543 Opinii na temat wad JavaScriptu i rzekomej trudności utrzymania kodu opartego o ten język naczytałem się już tyle, że każdy kolejny post komentują...
Getting started on ASP.NET Core & React ̵... Contents Episode 1 - Introduction (you are here) Episode 2 - Backend / Infrastructure Episode 3 - Frontend Setup Episode 4 - Data flow...