React - głębokie zanurzenie

Warsztat ekspercki to coś więcej niż szkolenie. To praca w kontekście konkretnych problemów.

Tytuł: React - głębokie zanurzenie
Kod: react-deep
Kategoria: React
Forma: warsztaty
Czas trwania: 4 dni
Odbiorcy: developerzy, architekci
Zapisy: Indywidualne zamówienie i dopasowanie dla grupy.
Logistyka: W siedzibie klienta lub w innym dowolnym miejscu.

Otwórz nowe horyzonty swojemu zespołowi dzięki wejściu wgłąb Reacta, dotykając zagadnień, po których tutoriale tylko prześlizgują nie dając możliwości ich zasadniczego zrozumienia. Głębsze spojrzenie na Reacta w Twoim zespole umożliwi rozwijanie projektu w czytelny architektonicznie sposób, a poznane metody pisania kodu zwiększą jego niezawodność i utrzymywalność. Wprowadź ekspercką wiedzę do swojego zespołu w zakresie architektury komponentowej oraz wpływu konstrukcji Reacta na Wasze decyzje architektoniczne.

Poznaj narzędzia wspierające utrzymanie dobrej architektury aplikacji. Z poziomu, w którym projekt już na starcie stał się zagmatwany i rozwijany po omacku, wejdź na poziom, gdzie świadomie wydzielasz konkretne odpowiedzialności, stosujesz krytyczne zasady przepływu danych i zarządzania stanem, a projekt stanie się prosty dzięki odpowiednim wzorcom tworzenia API komponentów.

Programiści Reacta z wieloletnim doświadczeniem, poznając prezentowane zagadnienia, najczęściej odpowiadają:

„W ogóle nie myślałem o tym w ten sposób, a jest to ultraciekawe i bardzo ważne. Wychodzi na to, że nie znałem Reacta”.

Szkolenie jest prowadzone w formie warsztatów, podczas których pracujemy na realnych problemach, krok po kroku odkrywając problematykę zagadnienia i możliwe kierunki rozwiązania. Jest oparte na dwóch filarach – filarze faktów i nauki oraz filarze opinii i osobistego doświadczenia trenera. Pierwszym filarem jest bliższe przyjrzenie się Reactowi od strony, której zazwyczaj nie dotykamy, pisząc aplikacje, a której zgłębienie pozwoli inaczej spojrzeć na pisany kod, istniejące ograniczenia oraz poznać niewykorzystane dotąd możliwości Reacta. Drugim filarem są praktyczne ćwiczenia organizacji struktury komponentów i odpowiedzialności w kodzie, czyli temat po prostu unikany na wielu szkoleniach, a który to właśnie ma największy wpływ na to, co się dzieje w Waszych projektach.

Techniki i narzędzia wykorzystywane podczas szkolenia:
  • Storybook
  • Jest/Mocha
  • React Testing Library
  • TypeScript
  • typy generyczne w zakresie podstawowym
  • Zod
  • json-server
  • repozytorium GitHub
Czym to szkolenie nie jest?
  • podstawowym kursem Reacta
  • przeglądem API Reacta
  • przeglądem dostępnych i najświeższych technologii
  • wprowadzeniem do TypeScript
Proponowany przebieg szkolenia:
  • Każdy uczestnik wypełnia ankietę z ćwiczeniami do samodzielnego rozwiązania – pozwoli to na dostosowanie poziomu szkolenia do konkretnego zespołu deweloperskiego.
  • Zespół dostarcza trenerowi fragment kodu napisanego w React, nad którym obecnie pracuje.
  • Trener spotyka się z zespołem on-line przed szkoleniem, aby omówić największe wątpliwości zespołu co do rozwijanego przez siebie projektu.
  • Na podstawie zebranych informacji trener dostosowuje materiał szkolenia do realiów codziennej pracy zespołu.
  • W części warsztatowej uczestnicy pracują w większości na przygotowanym wcześniej kodzie, w parach, na zasadzie pair programmingu.
  • Końcowy etap szkolenia polega na wybraniu dowolnego elementu w kodzie zespołu i próbie usprawnienia go przy zastosowaniu wiedzy zdobytej na szkoleniu.
  • Może to być na przykład wydzielenie dodatkowych komponentów, zmiana API, naprawa nadużyć Reacta w kodzie, czy przemodelowanie stanu i przepływu danych, albo reorganizacja kodu pod kątem bardziej praktycznych testów.

Wyróżniki warsztatu

  • Będziesz podejmować bardziej świadome decyzje projektowe i optymalizacyjne.
  • Unikniesz wielu potencjalnych bugów związanych z nieodpowiednim modelowaniem i wykorzystaniem stanu oraz interakcji.
  • Będziesz wiedzieć, jak tworzyć kod łatwy w utrzymaniu i łatwy do przyswojenia dla kolegów z zespołu.
  • Zrozumiesz w końcu, czym jest komponent funkcyjny i czym zasadniczo różni się od klasowego.
  • Będziesz stosować techniki z TDD, które nie są bezpośrednio dostępne podczas implementowania komponentów UI.
  • Będziesz lepiej rozumieć możliwości i ograniczenia przy tworzeniu komponentów i łączeniu ich w większe części dzięki poznaniu całego cyklu życia Reacta – od składni JSX do samej mutacji DOM.
  • Będziesz się lepiej orientować podczas debugowania komponentów reactowych, a Virtual DOM zobaczysz z bliska „gołym okiem”, poznasz go z innej strony niż z ogólnikowych haseł z Internetu.
  • Nauczysz się lepiej modelować stan aplikacji, prawidłowo odwzorowując fakty i unikając sytuacji niemożliwych lub wieloznacznych – dzięki zastosowaniu tzw. discriminated union w TypeScript.
  • Poznasz prosty sposób na rozdzielenie wyglądu, logiki interakcji, asynchronicznego I/O, a nawet integracji z konkretnym backendem dzięki wprowadzeniu wzorców czystych komponentów, layoutu, hooków zarządzających, klienta I/O, adaptera typów serwerowych i aplikacyjnych.
  • Wypełnisz największą lukę w swoim idealnie otypowanym projekcie poprzez wprowadzenie prostych i niesamowicie wygodnych tzw. runtime parserów typów w TypeScript.
  • Będziesz w stanie przeorganizować swój projekt tak, aby testowanie rzeczy ważnych było łatwiejsze i przyjemniejsze podczas pisania testów, bez konieczności mockowania modułów albo wprowadzaniu specjalnych hacków w kodzie, czy też reprodukowania nieistotnego stanu tylko po to, żeby komponent w ogóle dał się przetestować.

Program Warsztatu eksperckiego

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

  1. TypeScript – środowisko występowania typów, typowanie strukturalne, inferencja
  2. Renderowanie rozebrane na czynniki pierwsze
    1. Składnia JSX, drzewa pełne i płaskie
    2. Rekoncyliacja, problem złożoności czasowej, heurystyki porównawcze, pełne wyjaśnienie key attribute
    3. Faza commit
    4. Re-render
    5. Komponent vs. element vs. instancja komponentu
  3. Komponenty funkcyjne
    1. Omówienie zasadniczych różnic względem komponentów klasowych, wyjaśnienie genezy krytycznej zasady normalizacji stanu
    2. Domknięcia w JS i błędne postrzeganie przepływu danych w komponencie funkcyjnym
    3. Sposób pozyskiwania stanu w funkcji (useState) -– wyjaśnienie powodu istnienia tzw. rules of hooks
    4. UseEffect – omówienie różnic względem klasycznych metod cyklu życia, omówienie ograniczenia w przekazywaniu zależności
  4. Rekurencja i mylna intuicja
    1. Praktyczne ćwiczenie, które pozwoli na zrozumienie problemu granic odpowiedzialności między komponentami w jej najtrudniejszym wydaniu – granicą między samym sobą.
      1. Lepiej zrozumiesz współpracę funkcji renderującej oraz mechanizmu renderującego
      2. Zrozumiesz zasadniczą różnicę między klasyczną rekurencją a rekurencyjnym renderowaniem.
  5. Architektura
    1. Przegląd metod zarządzania stanem (redux, useState, useReducer, immer, …)
    2. Make Impossible State Impossible – modelowanie prawdy w TypeScript
    3. Service hooks – separacja obsługi interakcji i widoku
    4. Wzorzec klienta – separacja I/O
    5. Model adaptera – wspieranie różnych interfejsów na backendzie
    6. Zabezpieczanie typów w runtime
    7. Izolacja domen – czyli kto z kim powinien mieć zależności
    8. Komponentowe „dziel i rządź” – bo przecież nikt nie lubi spaghetti
    9. Storybook – czyli TDD które jest do zrobienia
    10. React Testing Library – testowanie integracyjne komponentów
    11. Testowanie service hooks
  6. Praca na kodzie własnym wskazanym przez zespół


Pobierz program w formacie PDF

Trenerzy

Poznaj ekspertów, którzy mogą poprowadzić Twój Warsztat.

Materiały związane z warsztatem

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

  • Looking for the Holy Grail of Mobile Web Performance
    KATEGORIE: JS i Front-end

    W świecie mobilnym Istnieje przeświadczenie, że jedynie aplikacje natywne są w stanie sprostać oczekiwaniom użytkowników. Wraz z pojawieniem się Progresywnych Aplikacji Webowych, które mają przenieść na platformę webową wiele cech zarezerwowanych dotąd tylko dla rozwiązań natywnych, oczekiwania dotyczące wydajności są silniejsze niż kiedykolwiek wcześniej. Czy Web jest w stanie im sprostać?

    Autor Bottega:

    Adam Bar

    Powiązane usługi:

    Audyty architektury

    Audyty architektury

  • JSON taki albo owaki... czyli kontrolowanie struktur z JSON Schema
    KATEGORIE: JS i Front-end

    Slides

    JSON jest najpopularniejszym formatem definiowania/wymiany danych w sieci. Jest elastyczny niczym XML oraz zwięzły, jak to tylko możliwe. Nie mniej, rozwiązłość strukturalna JSONów powoduje utratę kontroli nad tym, jakie dane są przechowywane. Jeśli chcesz kontrolować, co może być przechowywane w formacie JSON, zerknijmy na JSON Schema.

    Autor Bottega:

    Tomasz Ducin

    Powiązane usługi:

    Audyty architektury

    Audyty architektury

  • A Ty co zrobisz bez frameworka
    KATEGORIE: JS i Front-end

    Podczas tej prezentacji poznamy lit-html – bibliotekę, która w prosty sposób abstrahuje zawiłości operacji na DOM-ie – oraz jej kuzyna lit-element, dzięki któremu Web Componenty są dziś na wyciągnięcie ręki. Sprawdzimy, jak wiele można mieć za tak niewiele i zastanowimy się, czy lit-html może stanowić alternatywę dla frameworków.

    Autor Bottega:

    Adam Bar

    Powiązane usługi:

    Audyty architektury

    Audyty architektury

Zamów warsztat

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.