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
Odbiorcy: developerzy, architekci
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 ciężkich narzędzi do budowania
    1. Natywne moduły ES6 w nowoczesnych przeglądarkach
    2. Tagged templates jako alternatywa dla JSX
    3. Zależności npm w przeglądarce bez Webpacka (snowpack)
    4. Bundling jako optymalizacja czasu ładowania i wsparcie dla starszych przeglądarek
    5. Testowanie bez transpilacji
  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. 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
    5. Modelowanie tylko dozwolonych stanów
  6. 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
  7. Testowanie jednostkowe i integracyjne
    1. Testowanie logiki biznesowej
    2. Testowanie efektów (I/O) bez mocków i stubów
    3. Testy integracyjne z użyciem jsdom
    4. Testowanie kodu asynchronicznego z automatycznym czekaniem
  8. Deployment
    1. Transpilacja i budowanie paczki produkcyjnej
    2. Statyczny hosting i ciągłe wdrażanie na Netlify
  9. Narzędzia
    1. hyperapp - minimalistyczny, prosty, funkcyjny framework webowy (< 2kB)
    2. hyperlit - szablony widoku z opcjonalną transpilacją (< 1kB)
    3. mocha - testowanie bez magii
    4. prettier - spójne formatowanie kodu
    5. snowpack - moduły npm w przeglądarce
    6. http-server - statyczny serwer plików
    7. esbuild - szybszy bundler
    8. netlify - platforma do hostowania statycznych plików


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ń


Twoje dane osobowe przetwarzamy, aby udzielić odpowiedzi na Twoje pytanie. Administratorem Twoich danych osobowych jest Bottega It Minds Sławomir Sobótka. Przysługuje Ci prawo wniesienia sprzeciwu wobec przetwarzania, prawo dostępu do danych, prawo żądania ich sprostowania, usunięcia lub ograniczenia ich przetwarzania. Szczegółowe informacje dotyczące przetwarzania Twoich danych osobowych znajdują się TUTAJ.