Realtime - Usando o MeteorJS

Aprensentação no WeWebConf2013 sobre meteor.js

Transcript

1. Realtime Usando o Meteor para criar aplicações reativas Olá! Notas, como está, irá ajudar a entender melhor a aprensentação
2. Duke vertigem.xxx github.com/dukex duke@riseup.net Onde me encontrar. Qualquer coisa, mande um email ;)
3. Realtime Enfim, vamos lá, realtime...
4. The real-time web is a set of technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates. — Wikipedia
5. Chat, Newsfeed, Analytics, Jogos, App colaborativos ... Estamos rodeados de aplicativos realtime
6. HTTP :( Um dos primeiros problemas que se encontra para construir esse tipo de aplicação para web, HTTP. Transportar dados em tempo real com HTTP é um saco. Baixa latência, unidirecional, fazer coisas como ajax polling.
7. WebSockets bidirecional, sem polling WebSockets é quase perfeito.
8. v a r c o n n e c t i o n = n e w W e b S o c k e t ( ' w s : / / e x a m p l e . o r g : 1 2 3 4 5 / m y a p p ' ) ; c o n n e c t i o n . o n m e s s a g e = f u n c t i o n ( e ) { v a r s e r v e r _ m e s s a g e = e . d a t a ; c o n s o l e . l o g ( s e r v e r _ m e s s a g e ) ; } v a r m e s s a g e = { ' n a m e ' : ' D u k e ' , ' c o m m e n t ' : ' I a m a t W e W e b C o n f ' } ; c o n n e c t i o n . s e n d ( J S O N . s t r i n g i f y ( m e s s a g e ) ) ; A API do WebSockets pura não é muito produtiva
9. meteor.js * Pure JavaScript. * Live page updates. * Clean, powerful data synchronization. * Latency compensation. * Hot Code Pushes. * Sensitive code runs in a privileged environment. * Fully self-contained application bundles. * Interoperability. * Smart Packages.
10. $ m e t e o r c r e a t e r a d i o & & c d r a d i o $ m e t e o r Alguns comandos e sua app está começada
11. i f ( M e t e o r . i s C l i e n t ) { T e m p l a t e . h e l l o . g r e e t i n g = f u n c t i o n ( ) { r e t u r n " W e l c o m e t o r a d i o . " ; } ; } i f ( M e t e o r . i s S e r v e r ) { M e t e o r . s t a r t u p ( f u n c t i o n ( ) { / / c o d e t o r u n o n s e r v e r a t s t a r t u p } ) ; } Código base que o meteor cria, isClient apenas no browser o codigo é executado, isServer apenas no servidor
12. l i b / # S e m p r e s e r á c a r r e g a d o p r i m e i r o c l i e n t / # C a r r e g a d o a p e n a s n o c l i e n t c l i e n t / l i b / # S e m p r e s e r á c a r r e g a d o p r i m e i r o s e r v e r / # C a r r e g a d o a p e n a s n o s e r v e r s e r v e r / l i b / # S e m p r e s e r á c a r r e g a d o p r i m e i r o n o s e r v e r t e s t s / # N ã o s ã o c a r r e g a d o s docs.meteor.com/#structuringyourapp Criar uma aplicação em um arquivo só não é muito bom, o meteor tem uma forma de ler as pasta, você pode criar sua estrutura
13. S t a t i o n s = n e w M e t e o r . C o l l e c t i o n ( " s t a t i o n s " ) ; / / s e r v e r M e t e o r . p u b l i s h ( " p u b l i c _ s t a t i o n s " , f u n c t i o n ( ) { " u s e s t r i c t " ; r e t u r n S t a t i o n s . f i n d ( { p u b l i c : t r u e } ) ; } ) ; / / c l i e n t M e t e o r . s u b s c r i b e ( ' p u b l i c _ s t a t i o n s ' ) ; T e m p l a t e . i n d e x . p u b l i c _ s t a t i o n s = f u n c t i o n ( ) { r e t u r n S t a t i o n s . f i n d ( ) . f e t c h ( ) ; } ; Criando canais, quem estiver subrescrito num determinado canal, recebe apenas dados que foi especificado nele
14. 3:58 https://vimeo.com/77317201
15. Meteor.meth ods/ Meteor.call (RPC)
16. - - > { " j s o n r p c " : " 2 . 0 " , " m e t h o d " : " s u b t r a c t " , " p a r a m s " : { " s u b t r a h e n d " : 2 3 , " m i n u e n d " < - - { " j s o n r p c " : " 2 . 0 " , " r e s u l t " : 1 9 , " i d " : 3 } - - > { " j s o n r p c " : " 2 . 0 " , " m e t h o d " : " s u b t r a c t " , " p a r a m s " : { " m i n u e n d " : 4 2 , " s u b t r a h e n d " < - - { " j s o n r p c " : " 2 . 0 " , " r e s u l t " : 1 9 , " i d " : 4 } Apenas um exemplo do JSON-RPC, o Meteor usa RPC para comunicação client <=> server
17. M e t e o r . m e t h o d s ( { c r e a t e S t a t i o n : f u n c t i o n ( o p t i o n s ) { " u s e s t r i c t " ; v a r s t a t i o n = { o w n e r : t h i s . u s e r I d , t i t l e : o p t i o n s . t i t l e , d e s c r i p t i o n : o p t i o n s . d e s c r i p t i o n } ; r e t u r n S t a t i o n s . i n s e r t ( s t a t i o n ) ; } } ) ;
18. M e t e o r . c a l l ( ' c r e a t e S t a t i o n ' , { t i t l e : " D u k e ' s S t a t i o n " , d e s c r i p t i o n : " L o r e m " } ) ;
19. packages $ m e t e o r l i s t Meteor trabalha com pacotes, para ver os pacotes pré- intalados, rode esse comando
21. atmosphere.meteor.com ~600 Pacotes da comunidade
22. 2:08 https://vimeo.com/76804543
23. Links en.wikipedia.org/wiki/Real-time_web html5rocks.com/pt/tutorials/websockets/basics developerfusion.com/article/143158/an-introduction-to-websockets dev.w3.org/html5/websockets en.wikipedia.org/wiki/JSON-RPC youtube.com/watch?v=vpp-8gkPWVE stackoverflow.com/a/13039681/1034223
24. Links win.meteor.com venturebeat.com/2013/04/05/why-your-app-needs-to-be-real-time webhooks.wordpress.com/2009/12/22/how-to-argue-for-webhooks/ thomasdavis.github.io/2012/04/11/the-obligatory-refutation-of-rpc.html yauh.de/articles/376/best-learning-resources-for-meteorjs trello.com/b/hjBDflxp/meteor-roadmap atmosphere.meteor.com/
25. Obrigado! duke@riseup.net Minhas considerações: Ainda não conheço nenhum case grande usando meteor. Suporte a SOMENTE MongoDB como banco de dados não é legal. Não utiliza o npm para servir os pacotes