Instaband as an excuse to present the reactive pattern by @chubas
Slides de la cuarta sesión de GDLJS del 25 de agosto.
Instaband es una app sencilla para generar un disco con el nombre de la banda, cover y tracklist de manera random. Veremos cómo usar el modelo reactive para generar su UI
article you get is the name of your band Go to . The last four or five words of the very last quote of the page will be the title of your new album Go to Flickr and click on . The third picture will be your album cover "random" "Random Quotations" "Explore the Last Seven Days"
i = r e q u i r e ( ' w i k i j s ' ) ; g e t R a n d o m = f u n c t i o n ( ) { v a r w i k i = n e w W i k i ( ) ; v a r p a g e = w i k i . r a n d o m ( 1 ) . t h e n ( f u n c t i o n ( p a g e s ) { r e t u r n w i k i . p a g e ( p a g e s [ 0 ] ) ; } ) ; } ;
c k r = r e q u i r e ( ' f l i c k r a p i ' ) ; v a r a u t h e n t i c a t e = F l i c k r . a u t h e n t i c a t e ( . . . ) / / P r o m i s i f i e d g e t R a n d o m = f u n c t i o n ( ) { r e t u r n n e w P r o m i s e ( f u n c t i o n ( r e s o l v e , r e j e c t ) { r e t u r n a u t h e n t i c a t e ( ) . t h e n ( f u n c t i o n ( f l i c k r ) { f l i c k r . i n t e r e s t i n g n e s s . g e t L i s t ( o p t i o n s , f u n c t i o n ( e r r , p h o t o R e s u l t ) v a r p h o t o = p i c k ( p h o t o R e s u l t . p h o t o s . p h o t o ) ; f l i c k r . p h o t o s . g e t S i z e s ( { p h o t o _ i d : p h o t o . i d } , f u n c t i o n ( e r r , s i z e s ) v a r r e s u l t = { i m a g e U r l : e x t r a c t L a r g e I m a g e ( p h o t o , s i z e s ) } ; r e s o l v e ( r e s u l t ) ; } ) ; } ) ; } ) ; } ) ;
g e t R a n d o m = f u n c t i o n ( ) { v a r b a s e = ' h t t p : / / w w w . q u o t a t i o n s p a g e . c o m ' ; v a r u r l = b a s e + ' / r a n d o m . p h p 3 ' ; v a r p r o m i s e = n e w P r o m i s e ( f u n c t i o n ( r e s o l v e , r e j e c t ) { r e q u e s t ( u r l , f u n c t i o n ( e r r o r , r e s p o n s e , b o d y ) { v a r $ = c h e e r i o . l o a d ( b o d y ) ; r e s o l v e ( $ ( ' d t . q u o t e ' ) . l a s t ( ) . f i n d ( ' a ' ) . t e x t ( ) ) } ) ; } ) ; }
can be the stored data, or an ad-hoc representation of it A complex app may have several representations of the data coming from the same data source Examples: Messages in the inbox of a messaging app List of done and pending tasks on a ToDo app Player's position, HP and current action on a game
any state change in its own custom way It should never try to change the state directly Examples: Listening for new messages and updating chat Hooking to a new created model and sending an email notification Changing the sprite source, color and position when the character dies
Should be named and treated as first-class citizens Should fully contain the information of the things that changed (or the instructions to do it) Examples User sent a new message from chat window Credit card should be billed for an online order Player defeated a boss enemy