Meteor.js

METEOR.JS 8th August 2012 - Codeaholics.hk @MatthewRudy

SOLR TAKEDA HOLMES

METEOR a javascript full stack framework compiles, combines, and distributes
your JS, CSS, and HTML deploys on the ﬂy to users without interrupting their session

LEARN ABOUT IT http://docs.meteor.com https://github.com/siuying/todomvc-meteor `meteor create --example leaderboard`

7 PRINCIPLES marketing-style

#1 DATA ON THE WIRE no HTML rendered on the
server JSON sent to the browser the browser renders templates

#2 ONE LANGUAGE All code is Javascript (or maybe coffeescript)

#3 DATABASE EVERYWHERE Client Data API mirrors the Server Database
API the local data API looks just like Mongo

#4 LATENCY COMPENSATION All data operations take place in memory
ﬁrst The callback to the server is asynchronous What happens if it fails?

#5 FULL STACK REACTIVITY Every thing has a callback Templates
re-render themselves automatically

#6 EMBRACE THE ECOSYSTEM Plug and Play Use Backbone or
whatever

#7 SIMPLICITY = PRODUCTIVITY Clean and Simple APIs

WHAT’S THE REAL DEAL?

COLLECTIONS # define Items = new Meteor.Collection “items” # insert
Items.insert {name: “giraffe”} # find Items.find {}, {sort: {name: 1}}

SESSIONS # get Session.get(“selected”) #set Session.set(“selected”, item._id) # check Session.equals(“selected”,
this._id)

HANDLEBARS <template name=”list”> <h1>Items</h1> <ul> {{#each items}} <li>{{> item }}</li>
{{/each}} </ul> </template>

TEMPLATES They automatically re-render when data changes!

TEMPLATES # {{> item }} <template name=”item”> <article class=”item”> {{name}}
</article> </template>

HELPERS {{#if selected}}selected{{/if}} Template.item.selected = -> Session.equals(“selected”, this._id)

{{pluralize itemCount “item” “items”}} Template.list.itemCount = -> Items.ﬁnd({}).count() Template.list.pluralize =
(n, s, p) -> “#{n} #{if n == 1 then s else p}” HELPERS WITH ARGUMENTS

EVENTS Template.item.events = “click article”: -> Session.set(“selected”, this._id)

Item = new Meteor.collection “items” if Meteor.is_client Session.set(“selected”, null) if
Meteor.is_server Secret = 123 CLIENT + SERVER IN THE SAME FILE

CLIENT + SERVER IN FOLDERS client/some.js server/some.js shared.js

PACKAGES Backbone - Backbone on Client + Server Bootstrap -
Adds the Bootstrap CSS Coffeescript - Compiles .coffee ﬁles Handlebars - the default templating system

PACKAGES (AUTH) accounts - central API for accounts accounts-ui -
log in and sign up accounts-facebook - plug into facebook accounts-weibo - plug into weibo insecure - remove!

HTML CONCATENATION <body> <h1>The header</h1> </body> <body> <nav class=”navbar navbar-ﬁxed-top”
/> </body>

TIME FOR A PLAY Live demo!

meteor create --example leaderboard

PROBLEMS there are quite a few

COMPLEXITY going beyond the basics things quickly get complex

NO NAMESPACE FOR TEMPLATES item_form item_list item_show content sidebar nav

AUTHENTICATION there is an “auth” branch but its hard to
use

BETTER TOOLS MRT is a good idea but frequently breaks
for me

BETTER DEBUG Coffee -> JS many JS ﬁles -> one
JS ﬁle => Big confusion

ROUTING Just use Backbone.Router?

TESTING? An afterthought

BUT...

ITS COOL Stuff magically works

THE FUTURE It’s awesome as a deployment tool Better integration
with Backbone and Angular

THANKS Any Questions?

Meteor.js

Meteor.js

More Decks by Matthew Rudy Jacobs

Other Decks in Technology

Featured

Transcript