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

    View full-size slide

  2. Duke
    vertigem.xxx
    github.com/dukex
    [email protected]
    Onde me encontrar. Qualquer coisa, mande um email ;)

    View full-size slide

  3. Realtime
    Enfim, vamos lá, realtime...

    View full-size slide

  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

    View full-size slide

  5. Chat, Newsfeed,
    Analytics, Jogos,
    App colaborativos
    ...
    Estamos rodeados de aplicativos realtime

    View full-size slide

  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.

    View full-size slide

  7. WebSockets
    bidirecional, sem polling
    WebSockets é quase perfeito.

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  14. 3:58
    https://vimeo.com/77317201

    View full-size slide

  15. Meteor.meth
    ods/
    Meteor.call
    (RPC)

    View full-size slide

  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

    View full-size slide

  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
    )
    ;
    }
    }
    )
    ;

    View full-size slide

  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
    "
    }
    )
    ;

    View full-size slide

  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

    View full-size slide

  20. atmosphere.meteor.com
    ~600 Pacotes da comunidade

    View full-size slide

  21. 2:08
    https://vimeo.com/76804543

    View full-size slide

  22. 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

    View full-size slide

  23. 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/

    View full-size slide

  24. 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

    View full-size slide