# Spis treści

Architektura projektu
UI
1. Repozytorium interfejsu
2. Architektura części wspólnej CSS
3. Architektura komponentów
4. Walidacja propsów
5. Przyjęte praktyki
  1. Ikonki
  2. Formularze
  3. Tłumaczenia
  4. ...
6. Dokumentacja
7. Deployment
Front
1. Konfiguracja aplikacji frontendowej
2. Zmienne środowiskowe
3. Założenia modułu nuxt-typo3
4. Podłączenie paczki UI
5. Integracja dodatkowych pluginów UI
6. Architektura content elementów
  1. Praca z właściwościami appearance
7. Obsługa błędów
  1. Obsługa error page
  2. Obsługa błędów w kontekście komponentów
8. Praca z ServiceWorker
9. Techniki optymalizacyjne
10. Tłumaczenia
11. ServerMiddlewares
12. Dokumentacja
13. Deployment
14. Znane problemy
  1. Reloading chunków podczas deploymentu

# 1. Architektura projektu

# 1. Podział na część aplikacyjną oraz część interfejsu

Opis dlaczego, jakie korzyści się z tym wiążą oraz limitację. Jak wygląda wymiana informacji pomiędzy dwoma paczkami.

# 2. Organizacja monorepo z użyciem yarn workspaces

Dlaczego monorepo, a nie osobne paczki npm, dlaczego yarn workspaces nie lerna, co daje nam monorepo w kontekście zarządzania paczkami npm, jakie problemy omijami dzięki takiej organizacji

# 3. Standardy językowe, IDE

Wszystkie standardy dotyczącę eslinta, stylelinta, standard js, dodatkowe presety do babela, ustawienia nvm dla projektu, ustawienia vsc,

# 4. README

Szablon pliku README leżącego na głównym poziomie. Co powinien zawierać (instrukcję krok po kroku od postawienia proejektu do deploymentu)

# 2. UI

# 1. Podstawowa konfiguracja repozytorium interfejsu

Podstawowy kickstart projektu vue + konfiguracja storybooka, ustalmy jaki format chcemy wspierać MDX vs JS

# 2. Architektura części wspólnej CSS

Opis aktualnego boilerplate, który można znależć w aktualnych projektach + działamy nad nowym (uproszczonymm). Nie wiem czy w tym momencie powinniśmy zastanawiać się nad tym czy to postcss czy scss, ważne aby zbudować architekturę styli działającą w każdej technologii tak samo.

W opisie powinniśmy zawrzeć podejscie do typografi, nazewnictwa zmiennych, domyślnego resetu itd.

# 3. Architektura komponentów

# 1. Podział komponentów (ContentElements, UI)

Czym są i czym się charakteryzują, np. ContentElement to zbiór kilku komponentów UI budujący pewien moduł do wypuszczenia pod aplikacje frontowegoą, a UI to atomiczne komponenty typu button, ikonka, modal, nawigacje itp.

# 2. Budowa komponentów

Każdy komponent ma swój folder, w którym leży index.js eksportujący dany komponent ( tak aby nie trzeba było dublować nazwy pliku przy imporcie ), obok komponentu leży plik story oraz inne dotyczące tego jednego komponentu np. mockup data

# 3. Dokumentacja komponentów

Krótki opis storybooka, przykładowe story z knobsami itp.

# 4. Przykłady

Przykład dobrze napisanych komponentów (wraz ze stories) oraz komponentów źle napisanych w konktekście UI - niereużywalne, albo ich logika jest powiązana z logiką biznesową (czyli nie jest komponentem UI).

# 4. Eksport komponentów z paczki UI

Przykład pliku index.js jako plik główny paczki z eksportem komponentów, przykład definicji w package.json

# 5. Przyjęte praktyki

Opis praktyk, które nam się sprawdziły i chcemy je kontynuować w dalszych projektach np.

# 1. Ikonki

Czyli opis jak działamy, 1. Ikonki svg, 2. mamy skrypt, który eksportuje je do JS, 3. Jak używamy je w UI oraz jak instalujemy je na froncie.

# 2. Formularze

# 3. Tłumaczenia

Komponenty UI nie wiedzą o dostępnych tłumaczeniach, jeżeli mają być one tłumaczone to przyjmują odpowiedni props "labels".

# 6. Dokumentacja

Szablon pliku README, instrukcja jak działać z paczką,

# 7. Deployment

Możemy zawrzeć przykładową instrukcję deploymenty na gitlab pages jako deployment projektu UI.

# 2. Front

# 1. Konfiguracja aplikacji frontendowej

Kilka głwonych założen konfigugracji aplikacji nuxt + modułu nuxt-typo3.

# 2. Zmienne środowiskowe

Ustawienie zmiennych środowiskowych przez pliki .env + opis odpalenia budowania z podmienionymi ustawieniami

# 3. Założenia modułu nuxt-typo3

Główne założenia modułu, po co i jak działa, reszta w formie odnośników do dokumentacji

# 4. Podłączenie paczki UI

Jak podłączyć paczkę UI w kontekście monorepo, jakie problemy mogą wyniknąć (problem z wersją core-js), jak doładować globalne zmienne np. scss z paczki UI, dodatkowa transpilacja

# 5. Integracja dodatkowych pluginów (UI)

W jaki sposób dodajemy pluginy w nuxt, integracje np. i18n z nuxt-typo3, dodatkowa integracja z paczką UI - np. ikonki, czy generalna integr

# 6. Architektura content elementów

Czym jest content element- wrapper po stronie frontu na komponent ui, przyjmuje odpowiednie propsy i przekazuje(mapuje) je do UI. Minimum logiki UI po stronie frontu, dodatkowa logika biznesowa (np. odbieranie danych) po stronie frontu

# 1. Praca z właściwościami appearance

Jak pracujemy z appearance, możliwości wykorzystania layoutów w komponentach, spacingów, czy dodatkowych pól.

# 7. Obsługa błędów w kontekście komponentów

Przykład customowej strony error page.

# 8. Techniki optymalizacyjne

Np. ładowanie asynchroniczne komponentów, lazy hydration

# 9. Tłumaczenia

Jak działają tłumaczenia w aplikacji nuxt-typo3, jak zintegrować customową paczkę i18n z nuxt-typo3

# 10. ServerMiddlewares

Jak można wykorzystać np. Nagłówki HTTP z poziomu aplikacji JS

# 11. Dokumentacja

Szablon pliku README, instrukcja jak działać z paczką, konfiguracja.

# 12. Deployment

Opis budowania, jakie kroki muszą zostać spełnione aby zbudować aplikację

# 13. Znane problemy

Opis probłemów z które znamy i w jakiś sposób już sobie z nimi radziliśmy

# 1. Reloading chunków podczas deploymentu

← SVG 1. Podział aplikacji →