Konrad Kwiatkowski - Type of components in React/Redux
-
Upload
business-link-krakow -
Category
Engineering
-
view
113 -
download
0
Transcript of Konrad Kwiatkowski - Type of components in React/Redux
/GrandParadePolandwww.grandparade.co.uk
Podział odpowiedzialności komponentów i ich dekompozycja w aplikacji React/ReduxStudium przypadków z projektu Sportech
Konrad Kwiatkowski, Senior Frontend Developer / Grand Parade
Co to za projekt?Jakie wymagania?
/GrandParadePolandwww.grandparade.co.uk
/GrandParadePolandwww.grandparade.co.uk
React i Redux z perspektywy architektury komponentów
/GrandParadePolandwww.grandparade.co.uk
Architektura komponentów - ReactBrak informacji na temat typów komponentów, podziału i ich architektury
/GrandParadePolandwww.grandparade.co.uk
Architektura komponentów - ReduxPropozycja podziału komponentów na:
- Prezentacyjne- Kontenery- Inne
/GrandParadePolandwww.grandparade.co.uk
Ogólny podział zastosowany w Sportech
/GrandParadePolandwww.grandparade.co.uk
Architektura komponentów- Prezentacyjne- Kontenery- Komponowane
/GrandParadePolandwww.grandparade.co.uk
Architektura komponentów - dodatkowa klasyfikacja- Atomowe- Abstrakcyjne- Bezstanowe (stateless, pure)- Stanowe (stateful, impure)- Wyższego rzędu
/GrandParadePolandwww.grandparade.co.uk
Dlaczego taki podział? Po co to jest i jak się do niego
zastosować?
/GrandParadePolandwww.grandparade.co.uk
Architektura komponentów- Czysty interfejs- Jeden komponent, jedna odpowiedzialność- Mniejsze komponenty łatwiej użyć ponownie lub się ich pozbyć
/GrandParadePolandwww.grandparade.co.uk
Konkretny problem, case study...
/GrandParadePolandwww.grandparade.co.uk
To nie jest TodoList
A funkcjonalność do tworzenia/przygotowania
zakładów
/GrandParadePolandwww.grandparade.co.uk
/GrandParadePolandwww.grandparade.co.uk
DataGrid● Komponent wyższego rzędu● Brak związku z danymi
/GrandParadePolandwww.grandparade.co.uk
DataGridKomponenty atomowe
wchodzące w jego skład
/GrandParadePolandwww.grandparade.co.uk
Komponent atomowy
/GrandParadePolandwww.grandparade.co.uk
Komponent komponowany
/GrandParadePolandwww.grandparade.co.uk
Komponent abstrakcyjny
/GrandParadePolandwww.grandparade.co.uk
Komponent abstrakcyjny
/GrandParadePolandwww.grandparade.co.uk
Zachowanie stanu, kontener
/GrandParadePolandwww.grandparade.co.uk
Dostarczenie danych, komponent wyższego rzędu
/GrandParadePolandwww.grandparade.co.uk
Dostarczenie danych, komponent wyższego rzędu
/GrandParadePolandwww.grandparade.co.uk
Dostarczenie danych, komponent wyższego rzędu
/GrandParadePolandwww.grandparade.co.uk
Komponent ze stanem wewnętrznym
/GrandParadePolandwww.grandparade.co.uk
Dostarczenie danych, kontener
/GrandParadePolandwww.grandparade.co.uk
Finalne zastosowanie
/GrandParadePolandwww.grandparade.co.uk
Dzięki za uwagę!
/GrandParadePolandwww.grandparade.co.uk