JavaScript Craftsmanship i TDD

Kod: Craft-practices-js-craft
Kategoria: Craftsmanship
Forma: 20% wykład / 80% warsztat
Czas trwania: 4 dni
Grupa docelowa: developerzy
architekci
Logistyka: W siedzibie klienta lub w innym dowolnym miejscu.
Data i dokładny zakres do ustalenia podczas analizy przed-szkoleniowej.

"Not only working JavaScript code, but also well-crafted JavaScript code"

Szkolenie przeznaczone dla programistów i projektantów
pragnących poszerzyć swoje kompetencje w zakresie profesjonalnych technik zwiększających jakość kodu JavaScript.

Jakie problemy adresuje to szkolenie?

1) Frameworki do testowania

Problem: nie nadążamy z nauką ciągle zmieniających się frameworków do testowania

Czego się nauczysz? Budujemy własny framework do testowania w 50 linijkach kodu aby zrozumieć esencję działania tego typu narzędzi

2) Testowanie jednostkowe istniejącego kodu UI

Problem: testowanie komponentów UI zajmuje dużo czasu i nikt tego nie robi

Czego się nauczysz? Dodawać tzw. snapshot tests do istniejących komponentów

3) TDD kodu biblioteki

Problem: chcesz nauczyć się jak robić TDD nietrywialnej biblioteki do swojego kolejnego projektu open source

Czego się nauczysz? Projektować testami własną bibliotekę na przykładzie narzędzia do budowania Virtual DOM. Przy okazji nauki TDD poznasz też co siedzi pod maską nowoczesnych bibliotek tj. React.

4) TDD dla kodu UI

Problem: chcesz robić TDD dla rzeczywistych komponentów UI

Czego się nauczysz? Projektować testami nowy komponent Reactowy, który ma stan oraz obsługuje asynchroniczne operacje

5) TDD API backendowego

Problem: chcesz robić TDD dla API w Node.js, ale nie wiesz jak rozłożyć odpowiedzialności pomiędzy modułami

Czego się nauczysz? Projektować testami API, które zależy od bazy danych oraz posiada kontrolery, serwisy i repozytoria

6) Refaktoring logiki biznesowej

Problem: proces refaktoryzacji jest losowy i nie wiesz od czego zacząć

Czego się nauczysz? Powtarzalnych reguł refaktoryzacji logiki biznesowej z kodu proceduralnego na obiektowy i funkcyjny

7) Refaktoring kodu UI

Problem: komponenty UI robią się coraz większe, a konwencje modularnego CSS coraz trudniejsze do przestrzegania

Czego się nauczysz? Dzielić komponenty UI na mniejsze fragmenty oraz odkryjesz wady i zalety podejścia CSS-in-JS

8) Debugging

Problem: dostajesz raporty o błędach w aplikacji po stronie klienta

Czego się nauczysz? Debugować błędy logiczne, wycieki pamięci oraz problemy sieciowe z użyciem Chrome Dev Tools

9) Wydajność

Problem: przy rosnącej ilości kodu JS po stronie przeglądarki i dużej popularności aplikacji typu Single Page App klasyczne techniki optymalizacji Webowej nie wystarczą

Czego się nauczysz? Optymalizować czas ładowania oraz renderowania w aplikacji typu SPA

10) Styl programowania

Problem: brakuje ci rzeczywistych przykładów pokazujących różnice w programowaniu obiektowym i funkcyjnym

Czego się nauczysz? Rozwiązywać te same problemy w podejściu obiektowym oraz funkcyjnym

11) Formatowanie kodu

Problem: każda osoba w zespole formatuje kod według swoich lokalnych ustawień, powodując niepotrzebne konflikty w systemie kontroli wersji

Czego się nauczysz? automatycznie formatować kod w jednolity sposób

12) Standardy kodowania

Problem: zespół nie przestrzega standardów kodowania, które zostały wcześniej ustalone

Czego się nauczysz? Identyfikować niechciane wzorce w kodzie z użyciem lintera oraz rozszerzać go o własne reguły



Wymagania do szkolenia:

  • znajomość JavaScript
  • podstawy biblioteki React (możliwość dołożenia 3h wstępu w razie braku znajomości)

Wyróżniki szkolenia

  • przykłady zbliżone do tych spotykanych w pracy (np. TDD komponentów UI, API backendowego a nie tylko proste operacje matematyczne)
  • ćwiczenia tłumaczące jak działa warstwa abstrakcji poniżej tego co Web Developer robi na co dzień (Virtual DOM pod maską, własny framework do testów)
  • przekrojowe podejście do zwiększania jakości kodu: od formatowania i standardów kodowania, przez testy, TDD, refaktoring, debugowanie aż po style programowania w JS

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. Frameworki do testowania
    1. jest, mocha, tape
    2. zrób to sam: framework do testowania w 50 linijkach
    3. esencja narzędzi do testowania
  2. Projektowanie testami/TDD kodu biblioteki
    1. zrób to sam: TDD własnego Reacta
    2. koncepcja Virtual DOM
    3. testowanie DOM z jsdom
  3. Projektowanie testami/TDD API backendowego w Node.js
    1. spiking
    2. testy E2E z supertest
    3. testy jednostkowe i integracyjne
    4. outside-in TDD
    5. rozdzielenie odpowiedzialności (kontrolery, serwisy, repozytoria)
    6. testy asynchroniczne
    7. express.js i MongoDB w kontekście TDD
  4. Testowanie istniejącego kodu UI
    1. testowanie komponentów Reaktowych z Jest i Enzyme
    2. snapshot testing
    3. testowanie jednostkowe vs testowanie integracyjne
  5. Projektowanie testami/TDD nowego komponentu UI
    1. spike dla komponentów prezentacyjnych
    2. TDD komponentów prezentacyjnych
    3. spike dla kontenera logiki
    4. TDD dla kontenera logiki
    5. obsługa synchronicznych i asynchronicznych zależności (localStorage, HTTP API, generator liczb losowych)
  6. Refaktoring logiki biznesowej
    1. text-based approval testing
    2. dodawanie testów do istniejącego kodu
    3. identyfikowanie szwów w kodzie odziedziczonym
    4. przejście z kodu imperatywnego na obiektowy
    5. przejście z kodu obiektowego na funkcyjny
  7. Refaktoring kodu UI
    1. usuwanie duplikacji w komponentach
    2. rozbijanie komponentów na mniejsze
    3. zwiększanie testowalności kodu UI bez konieczności nadpisywania importów
    4. eksperymenty z CSS-in-JS (styled-components)
  8. Debugowanie
    1. debugowanie błędów logicznych z użyciem source maps
    2. debugowanie wycieków pamięci
    3. debugowanie problemów z czasem ładowania
    4. debugowanie problemów z renderowaniem (w kontekście React)
  9. OO vs FP
    1. porównanie logiki biznesowej w stylu OO i FP
    2. funkcyjny UI: od komponentów do funkcji i scentralizowanego stanu
    3. testowalność w Elm architecture
  10. Formatowanie kodu oraz standardy kodowania
    1. formatowanie z narzędziem prettier
    2. integracja prettier ze skryptami npm oraz z IDE/edytorem tekstu
    3. sprawdzanie standardów kodowania z ESLint
    4. integracja ESLint ze skryptami npm oraz z IDE/edytorem tekstu
    5. połączenie prettier z ESLint
    6. odpalanie ESLint oraz prettier z poziomu precommit hooks
    7. tworzenie własnych reguł ESLint


Pobierz program w formacie PDF

Trenerzy

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

Materiały związane ze szkoleniem

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

Zapytaj o 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