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.


July 23, 2015

More Decks by Dimitri

Other Decks in Programming


  1. Agenda What is Meteor Why Meteor Structure of a Meteor

    application Example: Chat application Q & A
  2. What is Meteor "Meteor is a complete open source platform

    for building web and mobile apps in pure JavaScript."
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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, ...)
  8. 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)
  9. 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)
  10. Structure of a Meteor application Model (MongoDB collection) Client (MiniMongo,

    templates) Server (Node.js) Public (CSS, images) Private (configuration)
  11. 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 ( ) } ) ;
  12. 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 } }
  13. Q & A You have the questions We (might) have

    the answers More feedback: or #craftcamps @g00glen00b
  14. 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