N U R T U R E V E N T U R E

METEORThe Meteor Revolution

Massimo Sgrelli @ NURTURE VENTURE

meteorlog.com

Towards Connected Clients

• Model View Controller (MVC) • Changed in the last 5 years

• How? • Most modern applications moved the Model on the client and access

the server through API

• Many Javascript frameworks pop up to address this need

• Some frameworks like Rails still keep most of the login on the server

• Why move things on the client? • To reduce latency and provide responsive applications

meteorlog.com

What’s Meteor

Meteor is a platform to build web and mobile applications using just Javascript.

It’s been built on top of Nodejs.

• What’s a platform?

• Why is it different from a framework?

meteorlog.com

A Platform

• A framework • Simplifies app creation

• Solves part of the problem

• A platform • Provides you the building block to build a complete application

• It’s all-in-one solution for a broad range of problems

Meteor is a modular platform. It provides its own solutions, but it’s open to integration with other frameworks like Angular and React.

meteorlog.com

How We Got Here• ’70 Mainframe era

• DB, network, dumb terminals

• 3270

• ’80 Client-Server era • DBDB, network, fat client applications

• Corba, DCOM, structure data sent

• ’90 Web era • DB, LAMP, HTTP/TCP, browsers

• HTML, data

• NOW • DB

• Mobile = a whole computer again

APPSCREENS

APP

RPC, CORBA, DCOM

LAMP

HTTP/TCP

DATA, WHY HTTP !?!

API

meteorlog.com

No Refresh Button

• 2015 ~ ’80 • We need to move data

• Different users using iOS, Android, HTML …

• You don’t push the refresh button anymore. It just happen that your data get updated when needed

APP

APP

APP

APP

meteorlog.com

Applications: What Changed

• They use (massively) • Live updating

• Collaborative techniques

• Mobile

• They move data in real time, back and forth, between server and client(s)

meteorlog.com

Meteor Architecture

APP

HOW HTTP WORKS

GET/POST

200OK ….

• It was designed to get documents

• Pretty simple

meteorlog.com

Meteor Architecture

APP

DDP (Distributed Data Protocol)

• DDP runs over web sockets (not HTTP)

• DDP is a simple protocol for fetching structured data from a server and receiving live updates when those data change.

web socket APP

meteorlog.com

Just in Case You Don’t Know…

• Socket • 2 end points can talk to each other over a wire/pipe

• Data are sent in order, reliably and with no changes

• Web Socket • You can do the same between a web browser and a point in the

cloud

meteorlog.com

How DDP Works

• Publication • Client subscribe a Publication from the server

• Server starts exchanging data and messages (added, changed, remove)

• Ex. Subscribe Leaderboard publications: scores —> clients

• RPCs • Client and server can call remote “methods”

• Ex. addToScore() <—

• Ex. result() —>

• JSON data are exchanged

feed the foundersN U R T U R E V E N T U R E

DDP is like "REST for websockets"It standardizes how real time applications should talk to each other.

… or let’s say it’s just a few JSON messages over a websocket.

meteorlog.com

Data

• How does data move?

• Where does it come from?

APP DDP APP

PUBLISH SUBSCRIBE

meteorlog.com

Respond To Changes Real Time

• The usual way it’s a lot of code to create a pub/sub mechanism using some web socket library

• Reactive data • As soon as data changes at the server, they are sent to clients subscribing those data

• HOW: Observable queries

DATA CHANGESPUBLISH SUBSCRIBE

meteorlog.com

Watch for data changes

{ name : “Max”, score : 10 }

{ name : “Alex”, score : 20 }

• MongoDB doesn’t do that

• How to change a traditional database in a real time database?

meteorlog.com

Observing DB Changes

• Poll & Diff —> Expensive • Computation and cost on the wire

• Latency

• OpLog Tailing • Mongo admits a log for every

update it makes to the db

MASTER

SECONDARY SECONDARY

MONGO OPLOG

meteorlog.com

Latency is Still a Problem

MONGO

SECONDARY SECONDARY

METEOR HOOKS UP HERE

100-200ms

APPAPP

CHANGE {name:”Max, score:15}

DATA CHANGED {name:”Max, score:15}

How do we solve this?

meteorlog.com

How Meteor Solves This

MONGO

SECONDARY SECONDARY

METEOR HOOKS UP HERE

100-200ms

APPAPP

LOCAL CACHE (MINI MONGO)

The query language on the client is the same API you have at the server – Mongo syntax :)

LIVEQUERY

meteorlog.com

Some Advantages of This Approach

• Code sharing • This mechanism allows to share code between client and server

• Javascript both on client and server

• Mongo syntax between client and server

• Livequery • Turns your database into a reactive database, with streaming

queries

• Mongo, Redis (experimental) + more on the way

meteorlog.com

Some Advantages of This Approach

• Latency compensation • On the client first (fork), than server

• If the server fails, the client rolls back

Mini Mongo

SpeculationTruth

MONGO

Fork

meteorlog.com

Reactive Templating

• Blaze • Make your templates reactive thanks to Tracker (1K library for transparent

reactive programming)

• Same purpose as Angular, Backbone, Ember, React, Polymer …

• Spacebar: Handlebar dialect + reactivity

• Great separation between UI and code

<template name="messages"> {{#if Template.subscriptionsReady}} {{#each messages}} {{> message}} {{/each}} {{/if}} </template>

meteorlog.com

Transparent Reactive Programming?

• Reactive data binding • Blaze to automatically set up callbacks to detect changes to the

template's data sources, recompute any values affected by the change, and patch the DOM in place with the update.

• Template • HTML file with Spacebar syntax

• Template manager file for event management and callbacks (helpers) invoked every time a reactive data source changes

meteorlog.com

Application Directory Structure

./client

./server

./public

./private

./tests

everything else is loaded with on the client and the server:

./lib

meteorlog.com

A Sample <template name="messages"> {{#if Template.subscriptionsReady}} {{#each messages}} {{> message}} {{/each}} {{/if}} </template>

<template name="message"> <div class="message"> <span id =“{{_id}}">{{{messageBody}}}</span> </div> </template>

Template.messages.onCreated(function() { this.subscribe(‘messages’) }); Template.messages.helpers({ ‘messages’ : function() { return Messages.find(); } });

Template.message.helpers({ ‘messageBody’ : function() { return this.messageBody; } });

Messages = new Mongo.Collection(‘messages’);

Messages.publish(‘messages’, function() { if (! this.userId) return this.ready(); return Message.find(); });

//SERVER

//CLIENT

//CLIENT AND SERVER

N U R T U R E V E N T U R E

INSTALL METEOR & START HAVING FUN

Send me your questions to massimo.sgrelli@gmail.com

www.meteorlog.com www.nurtureventure.com