Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Meteor.js
Search
Matthew Rudy Jacobs
August 08, 2012
Technology
3
1.8k
Meteor.js
My talk given at Codeaholics.hk on Wednesday 8th August 2012.
Matthew Rudy Jacobs
August 08, 2012
Tweet
Share
More Decks by Matthew Rudy Jacobs
See All by Matthew Rudy Jacobs
From Developer to Architect (and back again)
matthewrudy
3
230
Humans are Hard
matthewrudy
0
140
[Alpha] Humans Are Hard
matthewrudy
0
96
From Developer To Architect
matthewrudy
0
76
Git Commit Signing: Code we can trust?
matthewrudy
0
180
We Need To Talk About Postgres
matthewrudy
0
88
Coding as a Team At GoGoVan
matthewrudy
3
440
10 Years of Code
matthewrudy
0
110
Elixir - Part 1
matthewrudy
1
190
Other Decks in Technology
See All in Technology
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
yama3133
1
170
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
480
GPUをつかってベクトル検索を扱う手法のお話し~NVIDIA cuVSとCAGRA~
fshuhe
0
180
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
kinunori
0
770
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
390
猫でもわかるAmazon Q Developer CLI 解体新書
kentapapa
1
130
What's new in OpenShift 4.20
redhatlivestreaming
0
350
AI時代の発信活動 ~技術者として認知してもらうための発信法~ / 20251028 Masaki Okuda
shift_evolve
PRO
1
120
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.2k
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
4
890
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Code Reviewing Like a Champion
maltzj
526
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Site-Speed That Sticks
csswizardry
13
930
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
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 fly 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
first 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.find({}).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 files 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-fixed-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 files -> one
JS file => 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?