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

Transcript

1. INSTABAND As an excuse to present the reactive pattern { a u t h o r : @ c h u b a s , c o n t e x t : @ g d l j s }
2. ABOUT Instaband - Small app to generate a random album cover Based on a NoiseAddicts forum post
3. RULES Go to Wikipedia and hit , and the first 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"
4. APIS How can we get these automatically?
5. WIKIPEDIA API WIKIJS https://www.npmjs.com/package/wikijs v a r W i k 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 ] ) ; } ) ; } ;
6. FLICKR API FLICKRAPI https://www.npmjs.com/package/flickrapi v a r F l i 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 ) ; } ) ; } ) ; } ) ; } ) ;
7. QUOTATIONS "API" SCRAPING JS :( Are we in 1990 again? 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 ( ) ) } ) ; } ) ; }
8. FLUX ARCHITECTURE Unidirectional data flow
9. FLUX ARCHITECTURE: STORE Data Centric Applications
10. STORE They represent the State of a particular domain It 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
11. FLUX ARCHITECTURE: VIEW Bound to the Data Store
12. VIEW Should be always bound to the store Reacts to 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
13. FLUX ARCHITECTURE: ACTION Controlled state change
14. ACTION Represent abstract or concrete actions (duh) that change state 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
15. ACTION - DISPATCHER This is the communication channel between views and stores, or among stores. Controls the flow of the messages for more complex applications, may include other architectural patterns on its own.
16. INSTABAND ARCHITECTURE
17. DEMO TIME
18. DEMO TIME
19. DEMO TIME
20. DEMO TIME
21. DEMO TIME http://bit.do/instaband
22. GOT QUESTIONS?
23. THANKS!