Slide 1

Slide 1 text

REACTIVE PROGRAMMING WITH RXJS AND CYCLE / Benedict Hobart @superbenhobart

Slide 2

Slide 2 text

ASYNC PROGRAMMING IS HARD Memory Leaks Race Conditions Callback Hell Complex State Machines Disjointed Error Handling

Slide 3

Slide 3 text

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 ) {

Slide 4

Slide 4 text

WE'VE MADE PROGRESS

Slide 5

Slide 5 text

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 ( )

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

PATTERNS Iterator map filter reduce flatMap Observer events

Slide 8

Slide 8 text

INSIGHT Iterators and Events are both collections Mouse Clicks Stock Ticks Database Transactions User Inputs/Actions Polling Network Requests

Slide 9

Slide 9 text

THE FOUR FUNDAMENTAL EFFECTS Single Multiple Sync T Array[T] Async Promise[T] Observable[T]

Slide 10

Slide 10 text

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 }

Slide 11

Slide 11 text

Observables can be (almost) anything Mouse Events Inputs Network Requests Users

Slide 12

Slide 12 text

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 ' ) ) ;

Slide 13

Slide 13 text

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 ' ) ) ;

Slide 14

Slide 14 text

OPERATORS Iterators map filter reduce Functional Programming flatMap zip takeWhile Plus many many more...

Slide 15

Slide 15 text

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 = > {

Slide 16

Slide 16 text

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 ' ) ) ;

Slide 17

Slide 17 text

Reactive Programming is programming with streams

Slide 18

Slide 18 text

THE BENEFITS OF RXJS Stateless Treats sync and async data the same Cross-Platform Language Easy to read More maintainable

Slide 19

Slide 19 text

THINGS I'VE LEFT OUT Hot vs Cold Observables Schedulers Backpressure Subjects See https://xgrommx.github.io/rx-book/

Slide 20

Slide 20 text

CYCLEJS A functional and reactive JavaScript framework for cleaner code

Slide 21

Slide 21 text

FLUX

Slide 22

Slide 22 text

CYCLE

Slide 23

Slide 23 text

THE USER IS A FUNCTION input from the tv screen speakers output to the mouse microphone keyboard

Slide 24

Slide 24 text

DOM SOURCE, DOM SINK Your sources are observable Side effects And your outputs are commands/updates to affect the external world

Slide 25

Slide 25 text

Sources Sinks m a i n ( ) DOM side effects HTTP side effects Other side effects pure dataflow

Slide 26

Slide 26 text

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 ' )

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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 ) ) ) } ; }

Slide 29

Slide 29 text

THANK YALL Feel Free to ask questions