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

Introduction to Meteor

Introduction to Meteor

Introduction to Meteor, characteristics of Meteor, why to use it and a basic overview of the technical details.

Dimitri

July 23, 2015
Tweet

More Decks by Dimitri

Other Decks in Programming

Transcript

  1. Workshop Meteor
    craftworkz.co

    View Slide

  2. Speakers
    Dimitri Mestdagh
    Software Engineer
    @g00glen00b
    g00glen00b.be

    View Slide

  3. Agenda
    What is Meteor
    Why Meteor
    Structure of a Meteor application
    Example: Chat application
    Q & A

    View Slide

  4. What is Meteor
    "Meteor is a complete open source
    platform for building web and mobile
    apps in pure JavaScript."

    View Slide

  5. Meteor platform
    Full stack (both server- and client side)
    MongoDB
    WebSockets: Live communication between server and client
    Code is shared between client and server
    Node.js

    View Slide

  6. Building web & mobile
    apps
    Meteor allows you to use the same code on server- and
    clientside
    The default platform is web, but other platforms can be added:
    Meteor packages are isomorphic (they might run on the web,
    on a mobile device or on the server)
    m
    e
    t
    e
    o
    r a
    d
    d
    -
    p
    l
    a
    t
    f
    o
    r
    m a
    n
    d
    r
    o
    i
    d
    m
    e
    t
    e
    o
    r a
    d
    d
    -
    p
    l
    a
    t
    f
    o
    r
    m i
    o
    s

    View Slide

  7. Building web & mobile
    apps
    Platforms
    Meteor uses Cordova to support Android and iOS
    To make an application available for Android devices, you
    simply use:
    If you don't have the Android SDK installed, you can install it
    with the Meteor CLI as well:
    To run it on an actual device, you use:
    m
    e
    t
    e
    o
    r a
    d
    d
    -
    p
    l
    a
    t
    f
    o
    r
    m a
    n
    d
    r
    o
    i
    d
    m
    e
    t
    e
    o
    r r
    u
    n a
    n
    d
    r
    o
    i
    d
    m
    e
    t
    e
    o
    r i
    n
    s
    t
    a
    l
    l
    -
    s
    d
    k a
    n
    d
    r
    o
    i
    d
    m
    e
    t
    e
    o
    r r
    u
    n a
    n
    d
    r
    o
    i
    d
    -
    d
    e
    v
    i
    c
    e

    View Slide

  8. Building web & mobile
    apps
    Isomorphic packages
    Native APIs can be accessed (GPS, camera, ...)
    Meteor wraps them in isomorphic packages (Camera,
    Geolocation, ...)
    Running the following code will work both on the web and on
    mobile devices:
    On the web it will use the
    On mobile devices it will use the native GPS using Cordova
    G
    e
    o
    l
    o
    c
    a
    t
    i
    o
    n
    .
    c
    u
    r
    r
    e
    n
    t
    L
    o
    c
    a
    t
    i
    o
    n
    (
    )
    HTML 5 Geolocation API

    View Slide

  9. Pure JavaScript
    Meteor is a full stack JavaScript framework
    Back-end = Node.js
    Front-end = Webbrowser
    Code can be shared between both the back-end and front-end
    (for example models, utilities, ...)

    View Slide

  10. Why Meteor
    Characteristics
    Running on both mobile and web
    Live updates (data changes will be visible immediately on all
    clients)
    Hot deployment (both local and on the cloud)
    Ultra responsive
    Easy authentication with accounts-packages (+ easy
    integration with Twitter/Facebook OAuth)

    View Slide

  11. Why Meteor
    The good... the bad and the ugly
    DO use it when live updates are important
    DO use it for new applications
    DO use it for mobile applications
    DON'T use it with existing data (unless it can be easily ported
    to MongoDB)

    View Slide

  12. Structure of a Meteor
    application
    Model (MongoDB collection)
    Client (MiniMongo, templates)
    Server (Node.js)
    Public (CSS, images)
    Private (configuration)

    View Slide

  13. Structure of a Meteor
    application
    Model
    Using a model in Meteor is as simple as:
    To insert/remove/update data you can use:
    M
    e
    s
    s
    a
    g
    e
    s = n
    e
    w M
    o
    n
    g
    o
    .
    C
    o
    l
    l
    e
    c
    t
    i
    o
    n
    (
    '
    m
    e
    s
    s
    a
    g
    e
    s
    '
    )
    ;
    M
    e
    s
    s
    a
    g
    e
    s
    .
    i
    n
    s
    e
    r
    t
    (
    {
    m
    e
    s
    s
    a
    g
    e
    : "
    M
    y m
    e
    s
    s
    a
    g
    e
    "
    ,
    t
    i
    m
    e
    : n
    e
    w D
    a
    t
    e
    (
    )
    }
    )
    ;

    View Slide

  14. Structure of a Meteor
    application
    Client
    The client side logic primarily contains templates, event
    handling and plain JavaScript
    To actually change data, you use MiniMongo (it emulates a
    MongoDB database on the client)
    Templates are written using Spacebars (template engine):
    jQuery is allowed within templates
    {
    {
    #
    i
    f c
    u
    r
    r
    e
    n
    t
    U
    s
    e
    r
    }
    }
    <
    h
    1
    >
    W
    e
    l
    c
    o
    m
    e u
    s
    e
    r
    <
    /
    h
    1
    >
    {
    {
    /
    i
    f
    }
    }

    View Slide

  15. Demo time
    Pray to the demo gods

    View Slide

  16. Q & A
    You have the questions
    We (might) have the answers
    More feedback: or
    #craftcamps @g00glen00b

    View Slide

  17. References
    Slides:
    HTML5 slides:
    Source code:
    Demo:
    Getting started:
    Craftworkz:
    http://www.slideshare.net/craftworkz
    http://craftworkz.github.io/ucll-workshop-
    meteor/slides/
    https://github.com/craftworkz/ucll-workshop-
    meteor
    http://ucll-demo-meteor.meteor.com/
    https://www.meteor.com/
    http://craftworkz.co

    View Slide

  18. View Slide