Przyjrzymy się bliżej typom komponentów występujących w dużych aplikacjach typu SPA. Postaramy się wyodrębnić najważniejsze struktury tworzące aplikację oraz zastanowimy się jak przetwarzać otrzymane dane. Za przykład posłuży nam projekt realizowany dla amerykańskiego giganta rozwiązań bukmacherskich Sportech.

1. /GrandParadePoland
www.grandparade.co.uk
Podział odpowiedzialności
komponentów i ich dekompozycja w
aplikacji React/Redux
Studium przypadków z projektu Sportech
Konrad Kwiatkowski, Senior Frontend Developer / Grand Parade

2. Co to za projekt?
Jakie wymagania?
/GrandParadePoland
www.grandparade.co.uk

3. /GrandParadePoland
www.grandparade.co.uk

4. React i Redux z perspektywy
architektury komponentów
/GrandParadePoland
www.grandparade.co.uk

5. Architektura komponentów - React
Brak informacji na temat typów komponentów, podziału i ich architektury
/GrandParadePoland
www.grandparade.co.uk

6. Architektura komponentów - Redux
Propozycja podziału komponentów na:
- Prezentacyjne
- Kontenery
- Inne
/GrandParadePoland
www.grandparade.co.uk

7. Ogólny podział zastosowany w Sportech
/GrandParadePoland
www.grandparade.co.uk

8. Architektura komponentów
- Prezentacyjne
- Kontenery
- Komponowane
/GrandParadePoland
www.grandparade.co.uk

9. Architektura komponentów - dodatkowa klasyfikacja
- Atomowe
- Abstrakcyjne
- Bezstanowe (stateless, pure)
- Stanowe (stateful, impure)
- Wyższego rzędu
/GrandParadePoland
www.grandparade.co.uk

10. Dlaczego taki podział?
Po co to jest i jak się do niego
zastosować?
/GrandParadePoland
www.grandparade.co.uk

11. Architektura komponentów
- Czysty interfejs
- Jeden komponent, jedna odpowiedzialność
- Mniejsze komponenty łatwiej użyć ponownie lub się ich pozbyć
/GrandParadePoland
www.grandparade.co.uk

12. Konkretny problem, case study...
/GrandParadePoland
www.grandparade.co.uk

13. To nie jest
TodoList
A funkcjonalność do
tworzenia/przygotowania
zakładów
/GrandParadePoland
www.grandparade.co.uk

14. /GrandParadePoland
www.grandparade.co.uk

15. DataGrid
● Komponent wyższego rzędu
● Brak związku z danymi
/GrandParadePoland
www.grandparade.co.uk

16. DataGrid
Komponenty atomowe
wchodzące w jego skład
/GrandParadePoland
www.grandparade.co.uk

17. Komponent atomowy
/GrandParadePoland
www.grandparade.co.uk

18. Komponent komponowany
/GrandParadePoland
www.grandparade.co.uk

19. Komponent abstrakcyjny
/GrandParadePoland
www.grandparade.co.uk

20. Komponent abstrakcyjny
/GrandParadePoland
www.grandparade.co.uk

21. Zachowanie stanu, kontener
/GrandParadePoland
www.grandparade.co.uk

22. Dostarczenie danych, komponent wyższego rzędu
/GrandParadePoland
www.grandparade.co.uk

23. Dostarczenie danych, komponent wyższego rzędu
/GrandParadePoland
www.grandparade.co.uk

24. Dostarczenie danych, komponent wyższego rzędu
/GrandParadePoland
www.grandparade.co.uk

25. Komponent ze stanem wewnętrznym
/GrandParadePoland
www.grandparade.co.uk

26. Dostarczenie danych, kontener
/GrandParadePoland
www.grandparade.co.uk

27. Finalne zastosowanie
/GrandParadePoland
www.grandparade.co.uk

28. Dzięki za uwagę!
/GrandParadePoland
www.grandparade.co.uk