Meteor platform introduction.

1. N U R T U R E V E N T U R E
METEORThe Meteor Revolution
Massimo Sgrelli @ NURTURE VENTURE

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

3. 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?

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

5. 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
APP
SCREENS
APP
RPC, CORBA, DCOM
LAMP
HTTP/TCP
DATA, WHY HTTP !?!
API

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

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

8. meteorlog.com
Meteor Architecture
APP
HOW HTTP WORKS
GET/POST
200OK ….
• It was designed to get documents
• Pretty simple

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

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

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

12. feedthefounders
N 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.

13. meteorlog.com
Data
•How does data move?
•Where does it come from?
APP DDP APP
PUBLISH SUBSCRIBE

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

15. 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?

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

17. 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?

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

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

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

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

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

23. meteorlog.com
Application Directory Structure
./client
./server
./public
./private
./tests
everything else is loaded with on the client and the server:
./lib

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

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