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.
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
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 >
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
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
) ( 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 >
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 ! " )
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 " ) ) ) ) )
- 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 " ) ) } )
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 ] ) ) } )
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 ) ) } )
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.
mklappstuhl
seike460
msato
l2hyunwoo
tomodo_ysys
uhooi
gotok365
cairolibrary720
kishima
watawatavoltage
azuki
tomiyan
megmogmog1965
jnunemaker
lara
brad_frost
sachag
jlugia
trallard
skipperchong
marcduiker
brettharned
lauravandoore
robhawkes
