ucll-workshop-meteor-slides

Meteor platform

• Full stack (both server- and client side)

• MongoDB

• WebSockets: Communication over DDP (Distributed Data Protocol)

• Reactive

• Code is shared between client and server

• Node.js

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 add-platform android
  meteor add-platform ios

• Meteor packages are isomorphic (they might run on the web, on a mobile device or on the server)

Building web & mobile apps

Platforms

• Meteor uses Cordova to support Android and iOS
• To make an application available for Android devices, you simply use:

  meteor add-platform android
  meteor run android

• If you don't have the Android SDK installed, you can install it with the Meteor CLI as well:

  meteor install-sdk android

• To run it on an actual device, you use:

  meteor run android-device

Building web & mobile apps

Isomorphic packages

• To communicate with native elements of the device (camera, geolocation, ...) Cordova is used

• Meteor wraps them in isomorphic packages (Camera, Geolocation, ...)

• Running the following code will work both on the web and on mobile devices:

  Geolocation.currentLocation()

• On the web it will use the HTML 5 Geolocation API

• On mobile devices it will use the native GPS using Cordova

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, ...)

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)

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)

Structure of a Meteor application

• Model (MongoDB collection)

• Client (MiniMongo, templates)

• Server (Node.js)

• Public (CSS, images)

• Private (configuration)

Structure of a Meteor application

Model

• Using a model in Meteor is as simple as:

  Messages = new Mongo.Collection('messages');

• To insert/remove/update data you can use:

  Messages.insert({
    message: "My message",
    time: new Date()
  });

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):

  {{#if currentUser}}
    <h1>Welcome user</h1>
  {{/if}}

• jQuery is allowed within templates