An introduction

Presented by
Julien Choulet (
QR Code Wechat Julien Choulet
@Agora Space, Shanghai, September 29th, 2015


  • What's Meteor?
  • Let's see it in action!

But first...

Who am I?

  • External CTO / Project leader @ Blue Reef
  • B2B Web applications
  • Experience with small and large companies

Do you have experience with

  • Javascript? / Jquery?
  • Angular JS? / React JS?
  • Node JS?
  • MEAN? / A full stack JS framework?
  • Meteor?

What is Meteor?

The JavaScript App Platform

  • Full stack
  • One language everywhere
  • Data on the wire (DDP)
  • Reactive
  • Ready for web AND mobile
  • Modular: use what you need
  • Great package system

But should I take it seriously?

It's hot!


  • Funded
  • Strong support from the open source community
  • Ease of building apps
  • Secure
  • Scalable
  • Embracing the ecosystem

Meteor 1.2

Just landed on planet earth!

  • Official integration with react and angular

  • Support for ES2015
  • Faster build times
  • Even better mobile support (and Crosswalk...)

Meteor 1.3 and beyond

  • Official SQL database support
  • Server side rendering
  • Official DDP clients for native mobile apps
  • Galaxy cloud platform
  • More... Meteor roadmap on trello

Demo time!

Let's code a hybrid HTML5

web AND mobile chat application... less than 60 minutes!

How to create a meteor application

                    meteor create myapp

that's it!

Now navigate to


The tutorial app is on github

The github repo

git clone
cd onehourchat

Each step is tagged, to go to step-N:

                    git checkout -f step-N


Basic application structure: main folders

            client: client only code
            server: server only code
            public: static public assets
            <others>: anything

Some helper files (so we focus on building a chat!)

            packages/camera: fork of mdg:camera
            client/lib/tools.js: helper javascript functions
            client/lib/style.less: less styles for our app
            public/meteor.png: static public assets


Basic UI structure and mobile build

  • Use semantic:ui for simple scaffolding

    meteor add less
    meteor add semantic:ui-css
    // for camera support
    meteor add bluereef:camera
  • Build iOS and Android App


Templates and template helpers

  • Reorganize code with templates
  • Display data with template helpers


Introduction to collections, DDP and reactivity

Hook up collection with messages template

// Declare collection
Messages = new Mongo.Collection('messages');

// Return cursor on collection


Input for new messages

  • Respond to events
  • Execute action when template is created


Add user management

Install accounts packages

// Adding base user account package
meteor add accounts-password

// Adding pre-styled basic user management forms
meteor add accounts-ui

Wire up the template!


Taking pictures!

Using cordova camera plugin.

// Fork of mdg:camera with fix for using chrome on mobile
meteor add bluereef:camera

                     MeteorCamera.getPicture(options, callback);


Securing database access

Remove automatic database write from client

meteor remove insecure

Add security on collection

  • Allow/Deny rules
  • Meteor methods


Controlling what data is published on the client

meteor remove autopublish

Add publish/subscribe mechanism!!!


Exercises and finishing touch

How would you...

  • Improve formatting of date?
  • Align your own chat messages on the right?
  • Auto-scrolling to bottom when keyboards open on mobile?
  • Prevent auto-scrolling when user has moved the msg list?


Deploy to!

meteor deploy

Some resources to know more