/warsawjs-workshop-2-blog

⛩️ WarsawJS Workshop #2 — JavaScript (Intermediate Level)

Primary LanguageJavaScript

warsawjs-workshop-2-blog

⛩️ WarsawJS Workshop #2 — JavaScript (Intermediate Level)

Features

v1 [ demo ]

  • ✅ Posty: Dodawanie pojedynczego posta (C)
  • ✅ Posty: Prezentacja wielu postów (R)
  • ✅ Posty: Prezentacja pojedynczego posta (R)
  • ✅ Posty: Usuwanie pojedynczego posta (D)
  • ⛔ Posty: Edycja pojedynczego posta (U)
  • ✅ Komentarze: Dodawanie pojedynczego komentarza (C)
  • ✅ Komentarze: Prezentacja wielu komentarzy (R)
  • ✅ Komentarze: Usuwanie pojedynczego komentarza (D)
  • ✅ Komentarze: Prezentacja fikcyjnych awatarów
  • ✅ Komentarze: Licznik komentarzy
  • ⛔ Komentarze: Edycja pojedynczego komentarza (U)
  • ✅ Misc: Potwierdzenie usuwania posta i komentarza
  • ✅ Misc: Zabezpieczenie przed wpisaniem jednego długiego string-a

v2 [ demo ]

  • ✅ Posty: Dodawanie pojedynczego posta (C)
  • ✅ Posty: Prezentacja wielu postów (R)
  • ✅ Posty: Prezentacja pojedynczego posta (R)
  • ✅ Posty: Usuwanie pojedynczego posta (D)
  • ✅ Posty: Edycja pojedynczego posta (U)
  • ⛔ Komentarze: Dodawanie pojedynczego komentarza (C)
  • ⛔ Komentarze: Prezentacja wielu komentarzy (R)
  • ⛔ Komentarze: Licznik komentarzy
  • ⛔ Komentarze: Prezentacja fikcyjnych awatarów
  • ⛔ Komentarze: Usuwanie pojedynczego komentarza (D)
  • ⛔ Komentarze: Edycja pojedynczego komentarza (U)
  • ⛔ Komentarze: Wykorzystanie captcha przy dodawaniu komentarzy
  • ⛔ Misc: Potwierdzenie usuwania posta i komentarza
  • ✅ Misc: Zabezpieczenie przed wpisaniem jednego długiego string-a
  • ⛔ Misc: Wpisywanie wyrazów komendami głosowymi (speech recognition)
  • ⛔ Misc: Filtry na brzydkie wyrazy

v3 [ demo ]

  • ⛔ Posty: Prezentacja wielu postów (R)
  • ⛔ Posty: Dodawanie pojedynczego posta (C)
  • ⛔ Posty: Usuwanie pojedynczego posta (D)
  • ⛔ Posty: Edycja pojedynczego posta (U)
  • ⛔ Komentarze: Prezentacja wielu komentarzy (R)
  • ⛔ Komentarze: Dodawanie pojedynczego komentarza (C)
  • ⛔ Komentarze: Usuwanie pojedynczego komentarza (D)
  • ⛔ Misc: Zabezpieczenie przed wpisaniem jednego długiego string-a
  • ⛔ Komentarze: Licznik komentarzy
  • ⛔ Komentarze: Edycja pojedynczego komentarza (U)
  • ⛔ Misc: Potwierdzenie usuwania posta i komentarza
  • ⛔ Komentarze: Prezentacja fikcyjnych awatarów
  • ⛔ Posty: Prezentacja czasu stworzenia posta
  • ⛔ Posty: Prezentacja pojedynczego posta (R)
  • ⛔ Misc: Stworzenie routing.js
  • ⛔ Misc: Przekierowanie na stronę główną po usunięciu posta na jego widoku
  • ⛔ Error handling: Obsługa 404 (not found page)
  • ⛔ Error handling: Obsługa 404 (brak danych posta do wyświetlenia)
  • ⛔ Error handling: Zablokowane requesty

Bonus

  • ⚡ Misc: Upload obrazka
  • ⚡ Misc: Lajki np. nieskończone serduszka
  • ⚡ Misc: Użytkownik (logowanie, rejestracja, uprawnienia)
  • ⚡ TypeScript (tsconfig.json + ts-loader)
  • ⚡ Webpack (moduły, klasy)
  • ⚡ Redux
  • ⚡ RxJS
  • ⚡ React
  • ⚡ Angular / inny framework
  • ⚡ Testy (jednostkowe & integracyjne & end-to-end)
  • ⚡ Storybook
  • ⚡ Panel administracyjny

Krok po kroku 👣

  • Stworzenie pliku index.html

HTML

JavaScript

  • Stworzyć funkcję setup oraz uruchomić ją po załadowaniu DOMa.
  • Przechwytywać wysłanie formularza (zdarzenie submit).
  • Wyłączyć domyślne zachowanie tego zdarzenia za pomocą preventDefault.
  • Pobrać dane z formularza za pomocą obiektu FormData. Jeśli pomimo wypełnienia formularza nie ma danych to zweryfikuj 2 rzeczy:
    • czy na pewno przekazuje referencję do formularza jako argument?
    • czy każdy z inputów posiada atrybut name?
  • Wyświetlić za pomocą pętli for..of dane wpisane do formularza dodawania posta.
  • Wykorzystać kolekcją Map które FormData na zwykły obiekt.
  • Zbudować funkcję, która na podstawie danych przekazanych w parametrze skompiluje te dane i wygeneruje prosty markup HTML.
  • Przenieść markup pojedynczego posta do nowo stworzonego kontenera z szablonami.
  • Ukryć kontener zawierający listę szablonów. Warto wykorzystać klasę hide
  • Wyczyścić zawartość kontenera zawierającego listę postów.
  • Stworzyć funkcję render, która będzie dodawała do kontenera z listą postów wynik funkcji kompilującej dane z szablonem.
  • Po wykorzystaniu danych z formularza wyczyścić zawartość pól. Wykorzystać do tego funkcję reset.

JavaScript: Stworzenie architektury modeli

  • Stworzyć tablicę postów, która będzie uzupełniana formularzem do dodawania postów.
  • Po dodaniu posta zebrane dane dodać do tablicy.
  • Stworzyć model listy postów.
  • Przenieść jego definicję do osobnego pliku (dołączyć w pliku HTML).
  • Stworzyć model obiekt postu, który będzie posiadał unikalny identyfikator tworzony podczas konstrukcji obiektu.
  • Przenieść jego definicję do osobnego pliku (dołączyć w pliku HTML).
  • Przenieść renderowanie proces renderowania listy postów do modelu listy postów.
  • Stworzyć funkcję toJSON w modelu posta, która będzie zwracała obiekt z właściwościami.

JavaScript: LocalStorage

  • Zrobić funkcję save w modelu listy postów.
  • Funkcja save powinna zserializować obiekt postów i zapisywać go do LocalStorage.
  • Napisać funkcję restore w modelu posta. Funkcja powinna zawracać instancję posta, wraz z ustawionym unikalnym identyfikatorem.
  • Napisać funkcję load, która pobierała z localStorage zserializowaną listę postów oraz przywracała modele postów.
  • Uruchomić restore zaraz po stworzeniu modelu listy postów.
  • Uruchomić render list postów zaraz po załadowaniu list postów.
  • Przenieść do stałej klucz, pod którym zapisywana jest lista postów w localStorage.

JavaScript: Routing

  • Stworzyć router wykorzystując narzędzie Grepnel.
  • Dodać ścieżki:
    • dla listy postów
    • dla pojedynczego posta
  • Dołączyć router do pliku HTML.
  • Zamienić tytuł posta w link definiując odpowiedni URL.
  • Zamienić tytuł strony w link, kierujący do głównej strony.
  • Konfigurujemy Grepnel-a, aby korzystał z hashbang.
  • Stworzyć katalog na modele i przenieść do niego aktualne 2 modele:
    • model listy postów
    • model pojedynczego posta

JavaScript: Komponenty

  • Stworzenie komponentu pojedynczego posta i przeniesienie procesu renderowanie.
  • Stworzyć mechanizm wyszukiwania modelu posta po jego identyfikatorze.
  • Napisać funkcję, która konwertuje string do dokumentu HTML.
  • Rozszerzyć formularze do dodawania posta o zdarzenia.
  • Nasłuchiwać na w routerze na *, aby czyścić za każdym razem zawartość kontenera, w których zmieniają się komponenty.
  • Dodać domyślne przekierowanie na stronę z listą postów. Dodać tutaj sprawdzenie, czy już nie jest jakiś ustawiony hash.
  • Przerobić na komponent formularz do dodawania posta.
  • Dodać plik z formularzem do pliku HTML.
  • Przenieść przechwytywanie wysłania formularza do komponentu.
  • Emitować zdarzenie, gdy użytkownik doda nowy post.
  • Nasłuchiwać na zdarzenie dodania nowego posta i stworzyć nowy komponent.
  • Dodać wyświetlanie czasu stworzenia posta. Warto wykorzystać klasę: grey-text

JavaScript: Feature: Usuwanie posta

  • Dodać link do usuwania posta (obok tytułu). Warto wykorzystać klasę: red-text
  • Stworzyć funkcję, która usuwa model postu z listy.
  • Zapisywać zserializowaną listę postów.
  • Przekierowywać użytkownika na listę postów.

CSS

  • Dodać zabezpieczenie przed długimi ciągami znaków, które przekraczają szerokość kontenera.

JavaScript: Feature: Edycja posta

  • Dodać link do edycji posta obok jego tytułu (w HTML)
  • Stworzyć markup formularza do edycji posta na podstawie formularza do dodawania posta.
  • Umieścić pola do interpolacji w polach formularza.
  • Stworzyć nowy komponent na bazie formularza do edycji.
  • Dołączyć nowy plik do HTMLa.
  • Dodać nową ścieżkę w routingu dla edycji posta.
  • W handlerze tej ścieżki stworzyć komponent edycji posta.
  • Nasłuchiwać na pomyślną edycję posta i przekierować użytkownika na listę postów.

Czego można się nauczyć podczas realizacji tego zadania?

JavaScript
  • Asynchroniczność
    • Callback
    • Promise
  • Wzorce projektowe:
    • MVC
    • Obserwator
    • Metoda szablonowa
    • Dependency Injection
  • Mechanizm systemu szablonów
  • Rejestr paczek npm albo serwery CDN
  • Routing
  • Rendering
  • Walidacja formularza (zabezpieczenie przed XSS)
  • Przestrzeń nazw (en. Namespace)

Linki