What the Flux

Transcript

1. What the Flux
2. $ w h o a m i • Alexey Raspopov • Front End developer in DataRobot • 4+ years in production • Functional Programming is my religion • Love movies, music, design and my PlayStation 2
4. React
5. React • View layer only • Stateless UI components • Declarative instead of imperative 5
6. In nutshell r e a c t ( d a t a ) → U I ; t e m p l a t e ( d a t a ) → U I ; 0 1 . 0 2 . 6
7. Amnon H Eden: Abstraction Classes in Software Design
9. Flux
10. What is Flux? • Pattern, not a framework • Not a MVC • Compilation of ideas from Event Sourcing and CQRS • Separates domain logic, rendering and asynchronous operations • Unidirectional data flow 10
11. Why? • Declarative instead of imperative • Mental models matter • Side effects and moving parts (mutations) isolation • We need better Separation of Concerns that MVC • Clear set of restrictments is good for you 11
12. Flux will work for you if • Your app has dynamic data • Different views for one type of data • Async actions • Support required 12
13. Structure / a c t i o n s / _ _ t e s t s _ _ U s e r A c t i o n s . j s / a p i / _ _ t e s t s _ _ E x t e r n a l W e b A P I . j s / c o m p o n e n t s / _ _ t e s t s _ _ U s e r P a g e . j s / s t o r e s / _ _ t e s t s _ _ U s e r S t o r e . j s A p p D i s p a t c h e r . j s C o n s t a n t s . j s i n d e x . j s 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 . 1 1 . 1 2 . 1 3 . 1 4 . 1 5 . 13
14. alexeyraspopov/ flux-structure-example
15. Stores • Singleton • The only one place for state mutations • Accumulate state • React on Dispatcher • Have only getters • Sync only • Domain data only 15
16. From stores to views C o n c r e t e S t o r e .s u b s c r i b e( f u n c t i o n ( ) { r e n d e r( C o n c r e t e S t o r e .g e t S t a t e( ) ) ; } ) ; 0 1 . 0 2 . 0 3 . 16
17. Dispatcher • Central part of data flow • Broadcast data to all stores • The only part of Flux that has concrete implementation 17
18. Dispatcher: API v a r F l u x = r e q u i r e (" f l u x ") ; v a r D i s p a t c h e r = n e w F l u x . D i s p a t c h e r ( ) ; D i s p a t c h e r .d i s p a t c h(a c t i o n) ; D i s p a t c h e r .r e g i s t e r(a c t i o n = > . . .) ; 0 1 . 0 2 . 0 1 . 0 2 . 18
19. Actions • Plain old JavaScript objects • Tell what happened in your system • Look like news article • Header tells about what happened (fact) • Body describes additional info about a fact 19
20. Actions: Example { t y p e: I T E M _ A D D E D _ I N _ C A R D d a t a: { i d : " 0 3 d f 5 a c " , n a m e : " T h e S h a w s h a n k R e d e m p t i o n " . . . } } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 20
21. Types c o n s t I T E M _ A D D E D _ I N _ C A R D = " I T E M _ A D D E D _ I N _ C A R D " ; • Constants not required, but recommended • Identifiers • Semantic matters • Past tense • Only in domain-related names • Passive voice if possible 21
22. Bad names S H O W _ L O A D _ S P I N N E R O P E N _ M O D A L C R E A T E _ T O D O L O A D _ U S E R S U P D A T E _ S O M E _ B U L L S H I T 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 22
23. Better names T O D O _ C R E A T E D D E P O S I T E D _ I N T O _ A C C O U N T W I T H D R A W A L _ F A I L E D T O K E N _ R E C E I V E D U S E R _ I N F O _ U P D A T E D 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 23
24. Key Mirror v a r A c t i o n T y p e s = k e y M i r r o r ( { T O D O _ C R E A T E D: n u l l , L I S T _ R E Q U E S T E D: n u l l } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 24
25. Stores: Implementations • Backbone Models • Baobab • Flux Stateful 25
26. Stores: Implementation S t o r e ( D i s p a t c h e r , { g e t I n i t i a l S t a t e ( ) { r e t u r n { . . . }; } , [ I T E M _ A D D E D ] ( s t a t e , a c t i o n ) { r e t u r n n e w S t a t e; } [ I T E M _ R E M O V E D ] ( s t a t e , a c t i o n ) { r e t u r n n e w S t a t e; } } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 26
27. Action Creators • Just functions • Can dispatch more than one action • Can be both async and sync • Know about Web API and Dispatcher 27
28. Action Creators: Example e x p o r t f u n c t i o n a d d I t e m I n C a r d( i t e m ) { D i s p a t c h e r . d i s p a t c h ( { t y p e : I T E M _ A D D E D _ I N _ C A R D d a t a : i t e m } ) ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 28
29. Web API • Isolated layer • Fully reusable • Interacts with world • Server requests • Devices and env-related API • Can be both async and sync • Async API is recommended (callbacks, observables, promises) 29
30. Web API: Example e x p o r t f u n c t i o n p r o j e c t s( t o k e n , p r o j e c t I d ) { r e t u r n f e t c h( " / p r o j e c t s / " " + p r o j e c t I d , { h e a d e r s : { A u t h o r i z a t i o n : " T o k e n " + t o k e n } } ) ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 30
31. Web API: Usage f u n c t i o n l o a d P r o j e c t s ( t o k e n , i d ) { r e t u r n W e b A P I . p r o j e c t s ( t o k e n , i d ) . t h e n ( d a t a = > d i s p a t c h ( { t y p e : P R O J E C T S _ L O A D E D , d a t a } ) , e r r o r = > d i s p a t c h ( { t y p e : P R O J E C T S _ L O A D _ F A I L E D , e r r o r ) ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 31
33. Benefits • Predictability • Testability • Loose coupling • Single Source of Truth • You can use whatever you want for UI (React, templates, etc) • Minimized effort to adding new functionality 33
34. Flux Recorder
35. FluxRecorder Demo
36. Vizone DevTool
38. Useful links • github.com/facebook/flux • github.com/alexeyraspopov/flux-stateful • github.com/voronianski/flux-comparison • Josh Perez: Principles of Flux • Gil Birman: How can React and Flux help us create better Angular applications? • Cássio Zen: Flux Cargo-Culting 38
39. Thank you! • twitter.com/alexeyraspopov • github.com/alexeyraspopov These slides — goo.gl/10469q 39