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 [email protected]
www.meteorlog.com www.nurtureventure.com
Top Related