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

• Wykorzystać skrót Emmet-a do zbudowania podstawowej struktury HTML.

• Ustawić tytuł aplikacji

• Dołączyć framework Materialize (tylko plik CSS) wraz ikonami korzystając ze strony: https://materializecss.com/getting-started.html

• Stworzyć kontener do całej aplikacji.

• Dodać nagłówek pierwszego poziomu.

• Stworzyć markup do formularza do dodawania posta. Formularz powinien zawierać pola:

  • tytuł (pole wymagane)
  • opis (pole wymagane)
  • wyślij (przycisk)

  Warto wykorzystać klasy z Materialize:

  • container
  • section
  • btn

• Stworzyć markup do listy postów. Zrobić przykładowe 2 posty. Tekst zabity na sztywno w markupie.

• Dołączyć następujące biblioteki jak:

  • https://github.com/janl/mustache.js
  • https://github.com/kelektiv/node-uuid
  • https://github.com/visionmedia/page.js
  • https://github.com/piecioshka/super-event-emitter

• Stworzyć główny pliku projektu: main.js i dołączenie go do strony.

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

• https://materializecss.com/
• https://cdnjs.com/
• https://unpkg.com/
• https://wzrd.in/
• http://placeskull.com/200/200