Reactive Programming with RxJS and Cycle

Transcript

1. REACTIVE PROGRAMMING WITH RXJS AND CYCLE / Benedict Hobart @superbenhobart
2. ASYNC PROGRAMMING IS HARD Memory Leaks Race Conditions Callback Hell Complex State Machines Disjointed Error Handling
3. l e t e r r o r C o u n t = 0 ; f u n c t i o n i n c r e m e n t T a l k C o u n t ( ) { g e t U s e r s ( ( u s e r s , e r r ) = > { i f ( e r r ) { e r r o r C o u n t + + ; i f ( e r r o r C o u n t < 3 ) { i n c r e m e n t T a l k C o u n t ( ) ; r e t u r n ; } t h r o w n e w E r r o r ( e r r ) ; } f o r ( l e t i = 0 ; i < u s e r s . l e n g t h ; i + + ) { i f ( u s e r s . n a m e = = = ' B e n e d i c t H o b a r t ' ) b r e a k ; } l e t b e n = u s e r s [ i ] ; b e n . t a l k s + + ; b e n . s a v e ( e r r = > { i f ( e r r ) {
4. WE'VE MADE PROGRESS
5. f u n c t i o n i n c r e m e n t T a l k C o u n t ( r e t r y = 3 ) { g e t U s e r s ( ) . t h e n ( u s r = > u s r . f i n d ( u s r = > u s r . n a m e = = = ' B e n e d i c t H o b a r t ' ) ) . t h e n ( u s r = > O b j e c t . a s s i g n ( b e n , { t a l k s : b e n . t a l k s + 1 } ) ) . t h e n ( u s r = > u s r . s a v e ( ) ) . t h e n ( ( ) = > a l e r t ( ' T h a t w a s e a s y ! ' ) ) . c a t c h ( e r r = > { i f ( r e t r y < = 0 ) { r e t u r n t h r o w n e w E r r o r ( e r r ) ; } i n c r e m e n t T a l k C o u n t ( r e t r y - 1 ) ; } ) ; } i n c r e m e n t T a l k C o u n t ( )
6. WHAT IS REACTIVE PRORAMMING Functional Reactive Programming, FRAN Reactive Paradigm Reactive Extensions http://conal.net/fran/ http://www.reactivemanifesto.org http://reactivex.io/ Let's just focus on Reactive Programming with Rx
7. PATTERNS Iterator map filter reduce flatMap Observer events
8. INSIGHT Iterators and Events are both collections Mouse Clicks Stock Ticks Database Transactions User Inputs/Actions Polling Network Requests
9. THE FOUR FUNDAMENTAL EFFECTS Single Multiple Sync T Array[T] Async Promise[T] Observable[T]
10. OBSERVABLE c l a s s O b s e r v a b l e < T > { s u b s c r i b e O n N e x t : O b s = > v o i d s u b s c r i b e O n C o m p l e t e d : O b s = > v o i d s u b s c r i b e O n E r r o r : O b s = > v o i d } c l a s s O b s e r v e r < T > { o n N e x t : T = > v o i d o n C o m p l e t e d : T = > v o i d o n E r r o r : E = > v o i d }
11. Observables can be (almost) anything Mouse Events Inputs Network Requests Users
12. CREATING OBSERVABLES c o n s t n u m b e r $ = R x . O b s e r v a b l e . r a n g e ( 1 , 5 ) ; c o n s t t i c k $ = R x . O b s e r v a b l e . i n t e r v a l ( 1 0 0 0 ) ; c o n s t i n p u t $ = R x . O b s e r v a b l e . f r o m E v e n t ( m y I n p u t , ' i n p u t ' ) ; c o n s t u s e r $ = R x . O b s e r v a b l e . f r o m P r o m i s e ( f e t c h ( ' / a p i / u s e r ' ) ) ;
13. HTTP CONNECTION STREAM i m p o r t h t t p f r o m ' h t t p ' ; i m p o r t R x f r o m ' r x ' ; c o n s t h t t p C o n n e c t i o n $ = R x . O b s e r v a b l e . c r e a t e ( o b s = > { c o n s t s e r v e r = h t t p . c r e a t e S e r v e r ( f u n c t i o n ( r e q , r e s ) { o b s . o n N e x t ( { r e q , r e s } ) ; } ) ; s e r v e r . l i s t e n ( 3 0 0 0 , ( ) = > c o n s o l e . l o g ( ' S e r v e r O p e n ' ) ) ; r e t u r n ( ) = > s e r v e r . c l o s e ( ( ) = > c o n s o l e . l o g ( ' S e r v e r C l o s e d ' ) ; } ) ; h t t p C o n n e c t i o n $ . s u b s c r i b e ( { r e q , r e s } = > r e s . s e n d ( ' H e l l o W o r l d ' ) ) ;
14. OPERATORS Iterators map filter reduce Functional Programming flatMap zip takeWhile Plus many many more...
15. l e t e r r o r C o u n t = 0 ; f u n c t i o n i n c r e m e n t T a l k C o u n t ( ) { g e t U s e r s ( ( u s e r s , e r r ) = > { i f ( e r r ) { e r r o r C o u n t + + ; i f ( e r r o r C o u n t < 3 ) { i n c r e m e n t T a l k C o u n t ( ) ; r e t u r n ; } t h r o w n e w E r r o r ( e r r ) ; } l e t i ; f o r ( i = 0 ; i < u s e r s . l e n g t h ; i + + ) { i f ( u s e r s . n a m e = = = ' B e n e d i c t H o b a r t ' ) b r e a k ; } l e t b e n = u s e r s [ i ] ; b e n . t a l k s + + ; b e n . s a v e ( e r r = > {
16. c o n s t i n c r e m e n t T a l k $ = u s e r $ . f i l t e r ( u s r = > u s r . n a m e = = = ' B e n e d i c t H o b a r t ' ) . m a p ( b e n = > O b j e c t . a s s i g n ( b e n , { t a l k s : b e n . t a l k s + 1 } ) . f l a t M a p ( b e n = > b e n . s a v e ( ) ) / / b e n . s a v e ( ) = > r e t u r n s a p r o m i s e . r e t r y ( 3 ) i n c r e m e n t T a l k $ . s u b s c r i b e ( ( ) = > a l e r t ( ' t h a t w a s e a s y ' ) ) ;
17. Reactive Programming is programming with streams
18. THE BENEFITS OF RXJS Stateless Treats sync and async data the same Cross-Platform Language Easy to read More maintainable
19. THINGS I'VE LEFT OUT Hot vs Cold Observables Schedulers Backpressure Subjects See https://xgrommx.github.io/rx-book/
20. CYCLEJS A functional and reactive JavaScript framework for cleaner code
21. FLUX
22. CYCLE
23. THE USER IS A FUNCTION input from the tv screen speakers output to the mouse microphone keyboard
24. DOM SOURCE, DOM SINK Your sources are observable Side effects And your outputs are commands/updates to affect the external world
25. Sources Sinks m a i n ( ) DOM side effects HTTP side effects Other side effects pure dataflow
26. SIMPLE EXAMPLE i m p o r t R x f r o m ' r x ' ; i m p o r t C y c l e f r o m ' @ c y c l e / c o r e ' ; i m p o r t { m a k e D O M D r i v e r , d i v , b u t t o n , p } f r o m ' @ c y c l e / d o m ' ; f u n c t i o n m a i n ( D O M ) { r e t u r n { D O M : D O M . s e l e c t ( ' b u t t o n ' ) . e v e n t s ( ' c l i c k ' ) . s c a n ( ( a c c ) = > a c c + 1 , 0 ) . m a p ( c o u n t = > d i v ( [ b u t t o n ( [ ' I n c r e m e n t ' ] ) , p ( [ ` c o u n t : $ { c o u n t } ` ] ) ] ) ) ; } ; } c o n s t d r i v e r s = { D O M : m a k e D O M D r i v e r ( ' # a p p ' )
27. MODEL VIEW INTENT c o n s t I n t e n t = D O M = > A c t i o n s c o n s t M o d e l = A c t i o n s = > S t a t e c o n s t V i e w = S t a t e = > D O M c o n s t D O M = V i e w ( M o d e l ( I n t e n t ( D O M ) ) ) c o n s t U s e r = D O M = > D O M S o u r c e
28. SIMPLE EXAMPLE i m p o r t R x f r o m ' r x ' ; i m p o r t C y c l e f r o m ' @ c y c l e / c o r e ' ; i m p o r t { m a k e D O M D r i v e r , d i v , b u t t o n , p } f r o m ' @ c y c l e / d o m ' ; c o n s t i n t e n t = D O M = > D O M . s e l e c t ( ' b u t t o n ' ) . e v e n t s ( ' c l i c k ' ) ; c o n s t m o d e l = a c t i o n $ = > a c t i o n $ . s c a n ( ( a c c ) = > a c c + 1 , 0 ) ; c o n s t v i e w = d a t a $ = > d a t a $ . m a p ( c o u n t = > d i v ( [ b u t t o n ( [ ' I n c r e m e n t ' ] ) , p ( [ ` c o u n t : $ { c o u n t } ` ] ) ] ) ) ; f u n c t i o n m a i n ( D O M ) { r e t u r n { D O M : v i e w ( m o d e l ( i n t e n t ( D O M ) ) ) } ; }
29. THANK YALL Feel Free to ask questions