Understanding Meteor Stack

METEOR STACK

ABOUT THIS GUY廖偉涵 Wei-Han (Adrian) Liawadrianliaw / adrianliaw2000Homeschooling high school studentPython and Meteor enthusiastCo-organiser of the meetupgithub.com/adrianliaw

WHAT THIS TALK IS COVERINGComponents make Meteor workingMeteor stackReplacing components?

METEOR IS CUSTOMISABLEUse any UI library you likeYour preferred databaseDDP server/client in any langYeah, and no one would do that

STANDARD METEOR APP

BLAZEwww.meteor.com/blaze

client-side UI frameworkreactive templatingcompiles HTML into JS

REPLACING BLAZE

meteor remove blaze-html-templates

meteor add react (or angular or ...)

meteor add static-html

TRACKERwww.meteor.com/tracker

transparent reactive programming~1KBmakes client-side reactivity working(previously called Deps)

DDPDistributed Data Protocol

www.meteor.com/ddp

DDPData on the wirelike "REST for websockets"client-side Meteor implements DDP clientserver-side Meteor implements DDP serverthe "ddp" package provides client/server DDP

DDPstringified JSON over websocketSockJS for supporting older browsers

DDP MESSAGE{"msg": "ping"}

{"msg": "method", "method": "foo","params": [], "id": "1"}

connection methods data

connect method sub

connected result ready

failed updated added

ping changed

pong removed

unsub

nosub

DDP CLIENTSmeteorpedia.com/read/DDP_Clients

DDP SERVER

(in-progress)

chees/ddpservermeteorhacks/goddpTarang/DDP-Servercommoncode/django-ddpadrianliaw/meteorish.py

FULL-STACK DB DRIVERSWe've got Mongo in Meteor

And people hate it

FULL-STACK DB DRIVERSpublish / subscribelive querypure-JS implementationlatency compensation

MONGO IN METEORMongo.Cursoroplog tailingMinimongo

Meteor.publish("foo", function() { this.added("collname", "docid", {...fields...}); this.ready();});

docs.meteor.com/#/full/meteor_publish

Meteor.publish("foo", function() { return MyColl.find();});

Meteor.publish("foo", function() { MyColl.find()._publishCursor(this);});

IN THE CLIENTMeteor.connection.registerStore("collname", { "update": function(msg) { if (msg.msg == "added") { ... // Update local cache } else if (msg.msg == "changed") { ... // Update local cache } ... }});

ALTERNATIVE DATABASESmeteorpedia.com/read/Alternative_Databases

RESOURCESPro Meteor by Meteorhacks:

DDP spec: Real-time Database by Slava Kim Meteor Explained by Arunoda

meteorhacks.com/pro-meteor/

bit.ly/1h6CLAHyoutu.be/nEjIjJ3TC40

gum.co/meteor-explained