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
uetyo
lamodatech
kotamanegi
satoshi256kbyte
.jpeg){kind=avatar}
ostk0069
taiyow
shibuyamizuho
fabpot
chiroruxx
kimura_m_29
soarteclab
myohei
62gerente
reverentgeek
vanstee
chrisshort
productmarketing
tenderlove
afnizarnur
speakerdeck
yeseniaperezcruz
jonrohan
stephaniewalter
danielanewman
