Introduction to Meteor

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

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