/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