Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

SOLR TAKEDA HOLMES

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

7 PRINCIPLES marketing-style

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

#7 SIMPLICITY = PRODUCTIVITY Clean and Simple APIs

Slide 13

Slide 13 text

WHAT’S THE REAL DEAL?

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

HANDLEBARS

Items

{{> item }}

Slide 17

Slide 17 text

TEMPLATES They automatically re-render when data changes!

Slide 18

Slide 18 text

TEMPLATES # {{> item }} {{name}}

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

{{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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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!

Slide 26

Slide 26 text

HTML CONCATENATION

The header

Slide 27

Slide 27 text

TIME FOR A PLAY Live demo!

Slide 28

Slide 28 text

meteor create --example leaderboard

Slide 29

Slide 29 text

PROBLEMS there are quite a few

Slide 30

Slide 30 text

COMPLEXITY going beyond the basics things quickly get complex

Slide 31

Slide 31 text

NO NAMESPACE FOR TEMPLATES item_form item_list item_show content sidebar nav

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ROUTING Just use Backbone.Router?

Slide 36

Slide 36 text

TESTING? An afterthought

Slide 37

Slide 37 text

BUT...

Slide 38

Slide 38 text

ITS COOL Stuff magically works

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

THANKS Any Questions?