Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Functional Interface Programming

Functional Interface Programming

I gave this talk at Berlin.js 20th March 2014 as an introduction to the paradigms behind Facebook's React.js and Om by David Nolan. Sorry for the imperfect formatting of it, it has been exported from Reveal.js.

746d139f9b7c20f00641fd91bd26b451?s=128

mklappstuhl

March 20, 2014
Tweet

Transcript

  1. Functional Interface Programming / Martin Klepsch @martinklepsch

  2. Building Interfaces

  3. This is my first talk

  4. React

  5. Components receive data render DOM nodes maintain state respond to

    events
  6. v a r E x p a n d a

    b l e = R e a c t . c r e a t e C l a s s ( { g e t I n i t i a l S t a t e : f u n c t i o n ( ) { r e t u r n { e x p a n d : f a l s e } ; } , t o g g l e E x p a n d : f u n c t i o n ( ) { t h i s . s e t S t a t e ( { e x p a n d : ! t h i s . s t a t e . e x p a n d } ) ; } , r e n d e r : f u n c t i o n ( ) { v a r l e n g t h = ( t h i s . s t a t e . e x p a n d = = t r u e ? - 0 : 1 7 5 ) v a r t e x t = ( t h i s . s t a t e . e x p a n d = = t r u e ? t h i s . p r o p s . t e x t : t h i s . p r o p s . t e x t . s l i c e ( 0 , 1 7 5 v a r l a b e l = ( t h i s . s t a t e . e x p a n d = = t r u e ? ' s h r i n k ' : ' e x p a n d ' ) ; v a r d i v S t y l e = { t e x t A l i g n : ' l e f t ' , f o n t S i z e : ' 1 . 2 e m ' } r e t u r n ( < d i v s t y l e = { d i v S t y l e } > < p > { t e x t } < / p > < a h r e f = ' j a v a s c r i p t : ; ' o n C l i c k = { t h i s . t o g g l e E x p a n d } > { l a b e l } < / a > < / d i v > ) ; } } ) ; R e a c t . r e n d e r C o m p o n e n t ( < E x p a n d a b l e t e x t = " S o m e l o n g t e x t " / > , < b r > d o c u
  7. Composing Components < s p a n > < T

    h r e a d m e s s a g e s = { m e s s a g e s } > < / s p a n > < s p a n s t y l e = " f o n t - f a m i l y : m o n o s p a c e ; f o n t - s i z e : 1 6 . 0 4 6 2 1 3 1 5 0 0 2 4 4 1 4 p x ; f o n t - s t y l e : n o r m a l ; . . . < / s p a n > < s p a n s t y l e = " f o n t - f a m i l y : m o n o s p a c e ; f o n t - s i z e : 1 6 . 0 4 6 2 1 3 1 5 0 0 2 4 4 1 4 p x ; f o n t - s t y l e : n o r m a l ; v a r m e s s a g e s = t h i s . p r o p s . m e s s a g e s . m a p ( f u n c t i o n ( m ) { r e t u r n < M e s s a g e t e x t = { m . t e x t } a u t h o r = { m . a u t h o r } / > ; } < / s p a n > < s p a n s t y l e = " f o n t - f a m i l y : m o n o s p a c e ; f o n t - s i z e : 1 6 . 0 4 6 2 1 3 1 5 0 0 2 4 4 1 4 p x ; f o n t - s t y l e : n o r m a l ; r e t u r n ( < d i v c l a s s N a m e = ' t h r e a d ' > { m e s s a g e s } < C o m p o s e F o r m < / s p a n > < s p a n c l a s s = " n x " s t y l e = " f o n t - f a m i l y : m o n o s p a c e ; b o r d e r - s t y l e : < / s p a n > < s p a n > < / d i v > < / s p a n > < s p a n > ) ; < / s p a n > < s p a n > } } ) < / s p a n >
  8. Virtual DOM

  9. Virtual DOM

  10. A better API to the DOM It's a misconception that

    React needs the virtual DOM for performance. It's foremost an immutable shim over an inherently mutable DOM API. — Sebastian Markbåge (@sebmarkbage) February 6, 2014
  11. A better API to the DOM To say it another

    way, even if browsers become faster, we'll still want a better immutable DOM API for architectural reasons. — Sebastian Markbåge (@sebmarkbage) #reactjs February 6, 2014
  12. Community #reactjs on freenode

  13. Clojurescript a LISP

  14. None
  15. None
  16. Data Structures ( l i s t 1 2 3

    ) ( s e t < s p a n s t y l e = " f o n t - f a m i l y : m o n o s p a c e ; " > ( l i s t 1 1 2 3 3 ) ) ( h a s h - m a p : a 1 : b 2 ) < / s p a n > < s p a n s t y l e = " f o n t - s i z e : 1 8 p x ; f o n t - f a m i l y : m o n o s p a c e ; " > ' ( 1 2 3 ) < / s p a n > < s p a n s t y l e = " f o n t - s i z e : 1 8 p x ; f o n t - f a m i l y : m o n o s p a c e ; " > # { 1 2 3 } < / s p a n > < s p a n s t y l e = " f o n t - s i z e : 1 8 p x ; f o n t - f a m i l y : m o n o s p a c e ; " > { : a 1 : b 2 } < / s p a n >
  17. Function calls ; ; i n v o k i

    n g a f u n c t i o n ( l i s t 1 2 3 ) ; = > ( 1 2 3 ) ( r e d u c e + ( l i s t 1 2 3 ) ) ; = > 6 ; ; i n t e r - o p w i t h J S ( . l o g j s / c o n s o l e " H e l l o , w o r l d ! " )
  18. Immutability

  19. Referential Equality only pointer needs to be checked not each

    value
  20. Reference Types (atom { }) kind of like an implicit

    Object.observe by enforcing explicit functions to modify the content
  21. Om by @swannodette

  22. ( d e f n t o g g l

    e - e x p a n d [ e o w n e r s t a t e ] ( o m / s e t - s t a t e ! o w n e r : e x p a n d e d ( n o t ( : e x p a n d e d s t a t e ) ) ) ( p r i n t l n ( n o t ( : e x p a n d e d s t a t e ) ) ) ) ( d e f n e x p a n d a b l e [ a p p o w n e r ] ( r e i f y o m / I I n i t S t a t e ( i n i t - s t a t e [ _ ] { : e x p a n d e d f a l s e } ) o m / I R e n d e r S t a t e ( r e n d e r - s t a t e [ t h i s s t a t e ] ( d o m / d i v n i l ( d o m / p n i l ( c o n d ( : e x p a n d e d s t a t e ) ( : t e x t a p p ) : e l s e ( a p p l y s t r ( c o n j ( v e c ( t a k e 1 7 5 ( : t e x t a p p ) ) ) " . . . " ) ) ) ) ( d o m / a # j s { : h r e f " # " : o n C l i c k # ( t o g g l e - e x p a n d % o w n e r s t a t e ) } " e x p a n d " ) ) ) ) )
  23. Global App State ( d e f a p p

    - s t a t e ( a t o m { : m e s s a g e s [ { : t h r e a d 1 : b o d y " H e l l o " : a u t h o r 1 . . . } . . . ] : t h r e a d s [ { : t o p i c " T a l k " : i d 1 : p a r t i c i p a n t s [ 2 3 3 1 4 2 ] . . . } . . . ] : u s e r s [ { : u s e r n a m e " r m e h n e r " : i d 1 . . . } . . . ] } ) ) ( o m / r o o t y o u r - a p p - c o m p o n e n t a p p - s t a t e { : t a r g e t ( . j s / d o c u m e n t ( g e t E l e m e n t B y I d " a p p " ) ) } )
  24. Transactions listen to transactions in your global app-state ( o

    m / r o o t y o u r - a p p - c o m p o n e n t a p p - s t a t e { : t a r g e t ( . j s / d o c u m e n t ( g e t E l e m e n t B y I d " a p p " ) ) : t x - l i s t e n ( f n [ t x - d a t a r o o t - c u r s o r ] ( p u t ! t x - c h a n [ t x - d a t a r o o t - c u r s o r ] ) ) } )
  25. Instrumentation ( o m / r o o t y

    o u r - a p p - c o m p o n e n t a p p - s t a t e { : t a r g e t ( . j s / d o c u m e n t ( g e t E l e m e n t B y I d " a p p " ) ) : i n s t r u m e n t ( f n [ f c u r s o r m ] ( i f ( = f s u b - v i e w ) ( o m / b u i l d * s o m e t h i n g - e l s e [ f c u r s o r m ] ) : : o m / p a s s ) ) } )
  26. Rounding up React is a HUGE step the ability to

    compose components like ordinary functions offers great flexibility immutable data-structures improve performance significantly declarativeness removes explicit coupling to browser Structuring an application still challenging.
  27. Thanks @martinklepsch Some Links 1. by @swannodette 2. (check the

    wiki) 3. The Future of Javascript MVCs Om on Github Omchaya - a larger Om setup
  28. /html>