Meteor

An introduction

Presented by
Julien Choulet (jchoulet@blue-reef.net)
QR Code Wechat Julien Choulet
(wechat)
@Agora Space, Shanghai, September 29th, 2015

Agenda

  • 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

  • HTML/CSS?
  • 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!

And...

  • 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...

...in less than 60 minutes!

How to create a meteor application


                    meteor create myapp
                

that's it!

Now navigate to


                        http://localhost:3000
                    

The tutorial app is on github

The github repo

git clone https://github.com/bluereefltd/onehourchat
cd onehourchat
                                    

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


                    git checkout -f step-N
                

step-0

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
                

step-1

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

step-2

Templates and template helpers

  • Reorganize code with templates
  • Display data with template helpers

step-3

Introduction to collections, DDP and reactivity

Hook up collection with messages template


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

// Return cursor on collection
Messages.find();
                

step-4

Input for new messages

  • Respond to events
  • Execute action when template is created

step-5

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!

step-6

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

step-7

Securing database access

Remove automatic database write from client


meteor remove insecure
                

Add security on collection

  • Allow/Deny rules
  • Meteor methods

step-8

Controlling what data is published on the client


meteor remove autopublish
                    

Add publish/subscribe mechanism!!!

step-9

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?

step-10

Deploy to meteor.com!


meteor deploy onehourchat.meteor.com
                

Some resources to know more

Questions?