Budowanie UI - problemy

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Budowanie UI - problemy wyzwania

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Budowanie UI - problemy wyzwania

■ spójność komponentów

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Budowanie UI - problemy wyzwania

■ spójność komponentów■ mnogość zdarzeń

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Budowanie UI - problemy wyzwania

■ spójność komponentów■ mnogość zdarzeń■ debugowanie

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Budowanie UI - problemy wyzwania

■ spójność komponentów■ mnogość zdarzeń■ debugowanie■ testowanie

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Spójność komponentów

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Spójność komponentów

■ niezależne komponenty■ każdy musi sobie pobrać dane do wyświetlania

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Spójność komponentów: globalny stan

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Mnogość zdarzeń

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Mnogość zdarzeń

■ działania użytkownika■ rezultaty asynchronicznych akcji■ zdarzenia z zewnątrz

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Mnogość zdarzeń: mody�kowanie stanu nie wprost

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Mnogość zdarzeń: mody�kowanie stanu nie wprost

reduce(currentState, action) -> newState

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Mnogość zdarzeń: mody�kowanie stanu nie wprost

reduce(currentState, action) -> newState

reduce( ● , □ ) → ■

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Mnogość zdarzeń: mody�kowanie stanu nie wprost

reduce(currentState, action) -> newState

reduce( ● , □ ) → ■

reduce( ● , 🖌) → ●

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Mnogość zdarzeń: kolejkowanie akcji

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Debugowanie

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Debugowanie

■ jeden punkt wejścia

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Debugowanie

■ jeden kierunek przepływu danych

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Debugowanie

■ brak efektów ubocznych (seria transformacji stanu)

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Testowanie

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Testowanie

■ oddzielenie logiki od samego wyświetlania

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Testowanie

■ możliwość testowania logiki jednostkowo

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Testowanie

■ testowanie wyświetlania w separacji

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Dodatkowe zalety

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Dodatkowe zalety

■ wzorzec projektowy wysokiego poziomu

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Dodatkowe zalety

■ wzorzec projektowy wysokiego poziomu■ łatwość wprowadzania zmian w UI

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Dodatkowe zalety

■ wzorzec projektowy wysokiego poziomu■ łatwość wprowadzania zmian w UI■ skalowalność

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Dodatkowe zalety

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Co dalej?

■ dokumentacja Facebooka: https://facebook.github.io/flux/

■ gotowe implementacje: ■ Flux ;-)■ FlexDotNet■ FlexJava

■ Do It Yourself

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI

Sebastian Kremiec

Flux — architektura aplikacji dla budowania UI