The design and implementation of Meteor

The new platform

Created by @ajlopez

https://github.com/ajlopez/Talks/MeteorDesignImpl

https://github.com/ajlopez/MeteorDesignImpl

Using reveal.js

Sources

Applications

Evolution

Mainframe
PC
Web
???

We don't use the same tools

And now

New Kind of Applications

Realtime APIs and data
Desktop-like interface
Powerful, heterogenous devices
Distributed services in the cloud

Now: Cloud / client

Reactive
Distributed systems, that run on
Diverse architectures, and put
Data on the wire

Meteor

http://www.meteor.com/

Cloud/clients applications in pure JavaScript

A Platform, not a Framework

Frameworks tell you how to make an app
Meteor just gives you the key building blocks
You put them together however you want
Like UNIX, not like Rails

Built on two conceptual pillars

Full stack reactivity
Isomorphic APIs

Open architecture

Simple APIs
Small core
Atmosphere

Implementation

DDP

https://www.meteor.com/ddp

Distributed data protocol
Standard way to synchronize data
Uses websockets
Total separation of client and server
Shared tooling and interoperability btw c/c apps
Realtime APIs

DDP Subscriptions

Clients subscribe to a set of documents (named endpoint)
Server sends added/changed/removed messages
Akin to GET in REST

DDP Methods

Remote procedure calls
DDP assures once-and-only-once execution
Akin to POST/PUT/DELETE in REST

DDP Data

JSON over websockets
Long polling as fallback
Stateful, unlike HTTP

Livequery

JSON over websockets
Long polling as fallback
Stateful, unlike HTTP

## observeChanges ```js // Keep track of how many administrators are online. var count = 0; var query = Users.find({admin: true, onlineNow: true}); var handle = query.observeChanges({ added: function (id, user) { count++; console.log(user.name + " brings the total to " + count + " admins."); }, removed: function () { count--; console.log("Lost one. We're now down to " + count + " admins."); } }); // After five seconds, stop keeping the count. setTimeout(function () {handle.stop();}, 5000); ```

Mini databases

In-memory cache on the client
tipically fed by DDP subscriptions
DB queries on the client
Isomorphic. Pure JS, same API
Supports latency compensation
Speculative local writes

Tracker

Tiny (1k)
Transparent reactive programming in JavaScript
Simple convention/interface
Reactive data sources (like mini database)
Reactive data consumers (like template engine)
Makes plain old JS functions reactive
Alternative to: poll; diff/dirty; controllers listening for change events; bindings

## Example ```js var currentTemperatureFahrenheit = function () { return currentTemperatureCelsius() * 9/5 + 32; }; ``` ``` > var handle = Tracker.autorun(function () { console.log("The current temperature is", currentTemperatureFahrenheit(), "F"); }); The current temperature is 71.8 F (printed immediately) The current temperature is 71.9 F (printed a few minutes later) > handle.stop(); (stop temperature changes from printing) ```

Blaze

https://www.meteor.com/blaze

Reactive DOM update engine
Plain HTML template updated in real-time
No directives (unlike Angular or React)
Supports any template language (shipped with spacebars)

## Spacebars in Blaze https://atmospherejs.com/meteor/spacebars ```html <template name="myPage"> <h1>{{pageTitle}}</h1> {{> nav}} {{#each posts}} <div class="post"> <h3>{{title}}</h3> <div class="post-content"> {{{content}}} </div> </div> {{/each}} </template> ```

Isobuild

https://www.meteor.com/isobuild

Build tool
From one codebase, assembles code bundles
Server (Node)
Mobile (Cordova)
Browser
Akin to a linker in the UNIX toolchain
Closely related to the Meteor package system