Prosta architektura aplikacji typu Single Page App

Kod: Arch-simple
Kategoria: Architektura systemów i aplikacji
Forma: 20% wykład / 80% warsztat
Czas trwania: 2 dni
Grupa docelowa: architekci
developerzy
Zapisy: Indywidualne zamówienie i dopasowanie dla grupy.
Logistyka: W siedzibie klienta lub w innym dowolnym miejscu.

Aplikacje JS na frontendzie stają się coraz bardziej skomplikowane.

Frameworki

Mainstream: wielkie frameworki przepisujące połowę przeglądarki, o złożoności nie pozwalającej zrozumieć je na głębokim poziomie oraz ogromne paczki wymagające kolejnych sztuczek optymalizacji ładowania

Alternatywa: komponowalne mikro-biblioteki bez tranzytywnych zależności, które możemy zrozumieć w całości nie będąc ich autorem

Testowalność

Mainstream: wątpliwe techniki testowania (monkey patching, nadpisywanie importów)

Alternatywa: cały kod aplikacji biznesowej jako testowalne pure functions

Części języka

Mainstream: nadużywanie składni JS oraz narzędzi

JS "the best parts" na szkoleniu: funkcje i literały obiektów

Części języka których będziemy unikać w kodzie biznesowym: this, new, klasy, prototypy, promises, async/await, callbacki, generatory, observables, mutowalność, ponowne przypisanie, pętle, hooki, niestandardowe rozszerzenia języka wymagające transpilacji

Wzorce architektoniczne

Mainstream: wzorce inspirowane światem OO, wymagające dyscypliny, wysiłku, kodu boilerplate i szczegółowych wyjaśnień (SOLID, Dependency Injection, porty i adaptery poprzez konwencje)

Alternatywa: architektura funkcyjna, Dependency Rejection, porty i adaptery domyślnie

Metoda szkoleniowa

Głównym motywem przewodnim tego szkolenia jest "fits in my head"- kod i architektura które można łatwo zrozumieć.

Zamiast generatorów kodu i magicznych zaklęć z CLI uczymy się od podstaw, rozumiejąc każdą linijkę w kodzie, rozwiązując jeden problem naraz.

Wyróżniki szkolenia

  • Szkolenie przeznaczone dla zaawansowanych odbiorców, którzy szukają świeżego podejścia wolnego od inwazyjnych frameworków
  • Budujemy system w oparciu o architekturę funkcyjną
  • Nauka programowania bez magii

Program Szkolenia

Program jest ramą w jakiej możemy się poruszać merytorycznie - program dla konkretnego szkolenia dedykowanego ustalamy z grupą na podstawie analizy przed-szkoleniowej.

  1. Ewolucja architektury frontendowej
    1. DOM spaghetti
    2. Model-View-Presenter (MVP)
    3. Model-View-ViewModel (MVVM)
    4. Elm Architecture
  2. Development bez narzędzi do budowania
    1. View-source driven development
    2. Natywne moduły ES6 w nowoczesnych przeglądarkach
    3. Tagged templates (htm) jako alternatywa dla JSX
    4. Zależności npm w przeglądarce bez Webpacka (pika-web)
    5. Proces budowania (skrypty npm i parcel) jako optymalizacja czasu ładowania i wsparcie dla starszych przeglądarek
  3. Architektura funkcyjna
    1. Widok jako funkcja stanu
    2. Scentralizowany niezmienny stan
    3. Jednokierunkowy przepływ danych
    4. Logika biznesowa jako przejścia stanu
    5. Efekty jako dane (effects as data)
    6. Przerzucanie kodu z efektami ubocznymi poza kod aplikacji biznesowej
  4. Czyste IO bez promisów/async/await/observables
    1. Efekty i subskrypcje (długo żyjące efekty)
    2. Efekt HTTP
    3. Efekt localStorage
    4. Efekt Random
    5. Subskrypcja WebSocket
    6. Subskrypcja Server-Sent Events
    7. Dependency Rejection zamiast Dependency Injection
  5. Używanie natywnych funkcjonalności przeglądarki
    1. Routing po stronie serwera a routing po stronie klienta
    2. Architektura Self-Contained Systems
    3. Jedno SPA a kilka SPA połączonych przez hipermedia
    4. Natywne linki, poprawne zachowanie przycisku wstecz itd.
  6. Czysty kod
    1. Usuwanie duplikacji i rozkładanie odpowiedzialności w aplikacji
    2. Refaktoryzacja funkcji widoku
    3. Refaktoryzacja logiki biznesowej
    4. Oddzielanie kodu bibliotecznego od kodu aplikacji
  7. Optymalizacje wydajności po załadowaniu
    1. Obsługiwanie dużych drzew DOM
    2. Analiza wydajności z użyciem flame charts w DevTools
    3. Memoization
    4. Listy z kluczami
  8. Testowanie jednostkowe
    1. Testowanie logiki biznesowej
    2. Testowanie efektów (I/O) bez mocków i stubów
    3. tape - framework do testów zgodny z filozofią Unixową
  9. Testowanie w przeglądarce
    1. Testy E2E z użyciem cypress
    2. Testowanie kodu asynchronicznego z automatycznym czekaniem
    3. Podróżowanie w czasie w testach
    4. Debugowanie niedziałających testów z użyciem snapshotów i DevTools
    5. Przyspieszanie powtarzalnych operacji pomiędzy testami (np. logowanie)
    6. Stubowanie zapytań do API w celu bardziej przewidywalnych testów
  10. Deployment
    1. Dodawanie polyfili dla brakujących API przeglądarkowych
    2. Transpilacja i budowanie paczki produkcyjnej (parcel)
    3. Statyczny hosting i ciągłe wdrażanie na Netlify
  11. Narzędzia
    1. hyperapp - minimalistyczny, prosty, funkcyjny framework webowy (< 2kB)
    2. htm - szablony widoku z opcjonalną transpilacją (< 1kB)
    3. tape - framework testowy bez magii, inspirowany filozofią Unixową
    4. prettier - spójne formatowanie kodu
    5. pika-web - moduły npm w przeglądarce
    6. http-server - statyczny serwer plików
    7. parcel - bundler bez potrzeby konfiguracji
    8. cypress - łatwiejsze i bardziej niezawodne testowanie w przeglądarce
    9. netlify - platforma do hostowania statycznych plików
    10. polyfill.io - serwis automatycznych polyfili


Pobierz program w formacie PDF

Trenerzy

Poznaj ekspertów, którzy mogą poprowadzić Twoje szkolenie.

Mateusz Kwaśniewski

trener

Nie chcę wypuszczać lepszych szkoleń. Chcę wypuszczać lepszych programistów.

Materiały związane ze szkoleniem

Idea renesansowej pracowni - Bottegi zakłada nieustanną pracę jej członków i dzielenie się jej wynikami.

Zamów szkolenie

Imię i nazwisko:
Firma:
E-mail:
Nr tel:
Temat:
Wiadomość:

Jeżeli preferujesz osobisty kontakt to zawsze możesz zadzwonić.

Iwona Sobótka

Koordynatorka szkoleń


Wyrażam zgodę na przetwarzania danych osobowych zgodnie z ustawą o ochronie danych osobowych w związku z wysłaniem zapytania przez formularz kontaktowy.

Podanie danych jest dobrowolne ale niezbędne do przetworzenia zapytania. Zastałem/am poinformowany/na, że przysługuje mi prawo dostępu do swoich danych, możliwości ich poprawienia, żądania zaprzestania ich przetwarzania.

Administratorem danych osobowych jest Bottega IT Minds, ul. Jana Sawy 2, 20-632 Lublin.

Klauzula informacyjna