Angular offre gli strumenti necessari per la creazione di UI e di applicazioni sofisticate ma risulta spesso complesso e oneroso mantenere software nel medio-lungo periodo. Redux ha rivoluzionato il modo di creare architetture front-end, inizialmente in React e successivamente in tutto il mondo Javascript, ed è ormai uno standard de-facto utilizzato dalla maggior parte dei team di tutto il mondo. NGRX implementa questo pattern e fornisce ad Angular gli strumenti per la gestione di uno stato reattivo: typed actions, lazy loaded reducers, effects, memoization, time travelling debug e molto altro

1. Front-end data architectures in
Angular, Redux & NGRX
Fabio Biondi
Milan | November 29 - 30, 2018

2. fabiobiondi.io
TRAINING AND MENTORING

3. WHAT’S THE
PROBLEM?

4. AFTER
1 MONTH

6. AFTER
2 MONTHS

8. AFTER
3 MONTHS

10. WITH A
STATE
MANAGER

11. redux
state
actions

12. • Redux is a PATTERN to manage
the STATE of your (large) applications
• Split business logic from presentation
• Used in React, Angular, Vue, Flutter …

13. NGRX

14. • BASED ON REDUX
• FUNCTIONAL
• REACTIVE
• IMMUTABILITY
• TYPE SAFETY
• SERIALIZABILITY
• TESTABILITY

15. • (lazy) store
• reducers & selectors
• typed actions
• effects
• entities
• 1st & 3rd parties plugins
• schematics

16. REDUX FLOW

17. redux state
actions
CONTAINERS
Components}
PRESENTATIONAL
Components
}

18. Component Action Reducer
State
SIMPLEST VERSION

19. Container
Component
Presentational
Components
Effects Reducers
Services
XHR, Routing,
LocalStorage
Store
SelectorsAction Action
@output@input
state
( effects, Sagas, Thunk, …)
FINAL VERSION

20. PROJECT STRUCTURE

22. REDUX DEVTOOLS

26. CODE

27. INSTALL NGRX

28. APPLICATION STORE

30. Container
Components
Presentational
Components
Actions Effects Reducers
State &
Selectors

31. Container
Components
Presentational
Components
Actions Effects Reducers
State &
Selectors

32. Container
Components
Presentational
Components
Actions Effects Reducers
State &
Selectors

33. Container
Components
Presentational
Components
Actions Effects Reducers
State &
Selectors

34. Container
Components
Presentational
Components
TYPED
Actions
Effects Reducers
State &
Selectors

35. Container
Components
Presentational
Components
Actions Effects Reducers
State &
Selectors

36. Container
Components
Presentational
Components
Actions Effects Reducers
State &
Selectors

37. Container
Components
Presentational
Components
Actions Effects Reducers
State &
Selectors
Selector
Container
USAGE

38. LAZY REDUCERS

39. forRoot
forFeatures
(lazy)

41. IS REDUX
OVERKILL?

42. PROBABLY
YES for most apps/sites

43. REDUX SIMPLIFIES
COMPLEX APPS

44. ALTERNATIVES

45. • Angular Redux
• NGXS
• Akita
• MobxStateTree

46. ANGULAR JAVASCRIPT REACT
OPPORTUNITÀ per DEVELOPER ITALIANI
(jobs / collaborations / training and more)
developer italianideveloper italianideveloper italiani

47. ANGULARFUNDAMENTALS
VIDEOCORSO / FEB2019

48. fabiobiondi.io