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
130
[Alpha] Humans Are Hard
matthewrudy
0
93
From Developer To Architect
matthewrudy
0
74
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
430
10 Years of Code
matthewrudy
0
110
Elixir - Part 1
matthewrudy
1
190
Other Decks in Technology
See All in Technology
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
12
3.5k
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
24
6.4k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
120
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
280
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
Featured
See All Featured
Building an army of robots
kneath
306
45k
A designer walks into a library…
pauljervisheath
207
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
BBQ
matthewcrist
89
9.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Six Lessons from altMBA
skipperchong
28
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Speed Design
sergeychernyshev
32
1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
980
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?