Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Realtime - Usando o MeteorJS

Duke
October 15, 2013

Realtime - Usando o MeteorJS

Aprensentação no WeWebConf2013 sobre meteor.js

Duke

October 15, 2013
Tweet

More Decks by Duke

Other Decks in Programming

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 [email protected] 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
  20. None
  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! [email protected] 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