METEOR
Robert Dickert
@rdickert
robertdickert.com
Build high quality real-time apps quickly
PART I: WHY METEOR?
What is Meteor?
• Full-stack JavaScript Framework
• Build tool
• Package system
• Real-time protocol - DDP
• Built on Node...
DEMO
What we saw
• Instant dev environment
• A working base app
• Smart packages
• Hot code push
• Code can run on client, serv...
So Why Meteor?
• Real-time (chat, dashboard, games, etc.)
• Rapid prototyping
• Productive
• Declarative
• All JavaScript
Further resources
• docs.meteor.com and blog.meteor.com
• Discover Meteor (book) – highly recommended
• Meteor Weekly (new...
Questions?
PART II: REACTIVITY
How does Meteor achieve live client-side updates?
Meteor Advanced Topics
• Goal: useful for both beginners and advanced users
• A lot of “magic” in Meteor
• Is Meteor the j...
What is Reactivity?
• Reactivity describes a declarative data flow through
which changes propagate automatically.
• i.e., ...
Lamest Demo Ever: Excel
Meteor Computations
A computation contains a stored function to be rerun
whenever required. A function running inside a
co...
Step 1: Put functions in computations
To place any function fn in a computation:
Templates and template helpers are automa...
Demo: computations
Reactivity Requirements
Meteor Reactivity requires two things:
1. Run your code in a reactive context (e.g., with
Deps.aut...
Built-in Reactive Data Sources
• Session.get(“key”)
• Collection.find({sel})
• Meteor.user()
• Meteor.userId()
• Meteor.st...
Making a reactive data source
Why?
• Control what to reactively respond to
• Create a package with reactive API
• Better c...
Reactive Data Source is In Charge
• <data source>.get(): Data source stores the current
computation in a list of dependenc...
Deps.Dependency object
To create a reactive data source:
• Create a new Deps.Dependency()
• Call its .depend() method to r...
Demo – make a reactive data source
Quiz: Will this update reactively?
Session.set('a', 1);
var x = Session.get('a')
Deps.autorun(function () {
console.log(x)...
What we didn’t cover
• Cascading dependencies and Deps.flush()
• Cleanup and other implementation details.
• Other Meteor ...
Resources
• robertdickert.com: Why Is My Meteor App Not Updating
Reactively?
• https://github.com/meteor/meteor/tree/devel...
Questions?
Other possible surprises
• Computations run the whole function
• You need to .stop() unneeded computations
• Deps does not...
The data source is in charge
1. Stores computations in Deps.Dependency instance
2. Decides when to register a dependency
(...
• B1 needs to be rerun over and over
• It needs to be rerun when A1 changes
 B1 is dependent on A1
• B1 is a computation ...
Meteor Features
• One language
• Database everywhere
• Latency compensation
• Full stack reactivity
• Hot code pushes
• Lo...
Upcoming SlideShare
Loading in …5
×

Meteor Boulder meetup #1

270 views
206 views

Published on

Slides for Boulder Meteor's first meetup. The Reactivity portion of the presentation was never given - will be presented soon!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
270
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Meteor Boulder meetup #1

  1. 1. METEOR Robert Dickert @rdickert robertdickert.com Build high quality real-time apps quickly
  2. 2. PART I: WHY METEOR?
  3. 3. What is Meteor? • Full-stack JavaScript Framework • Build tool • Package system • Real-time protocol - DDP • Built on Node.js • Currently integrates with Mongodb (others to follow)
  4. 4. DEMO
  5. 5. What we saw • Instant dev environment • A working base app • Smart packages • Hot code push • Code can run on client, server, or both • Mongo api can be used locally to access server • Reactive templates • Data kept updated to all connected browsers • Session store local – maintained through hot code pushes • easy deployment to meteor.com • bundle for deployment to any node.js environment
  6. 6. So Why Meteor? • Real-time (chat, dashboard, games, etc.) • Rapid prototyping • Productive • Declarative • All JavaScript
  7. 7. Further resources • docs.meteor.com and blog.meteor.com • Discover Meteor (book) – highly recommended • Meteor Weekly (newsletter) • Meteor 101 screencast (Naomi Seyfer) • www.eventedmind.com • IRC • Google Groups • Github • win.meteor.com – for Windows users
  8. 8. Questions?
  9. 9. PART II: REACTIVITY How does Meteor achieve live client-side updates?
  10. 10. Meteor Advanced Topics • Goal: useful for both beginners and advanced users • A lot of “magic” in Meteor • Is Meteor the jQuery of web app development? Abstraction debt? • Meteor’s hidden parts are in plain view – just go look • Great chance to pick something to research and share with the group
  11. 11. What is Reactivity? • Reactivity describes a declarative data flow through which changes propagate automatically. • i.e., Data/variables update automatically when their upstream dependencies change. • Spreadsheet is the typical example
  12. 12. Lamest Demo Ever: Excel
  13. 13. Meteor Computations A computation contains a stored function to be rerun whenever required. A function running inside a computation is said to be running in a reactive context. _func: function () { return Session.get(“a1”)+ 1; } .stop() .invalidate() a Deps.Computation:
  14. 14. Step 1: Put functions in computations To place any function fn in a computation: Templates and template helpers are automatically put in a computation by Meteor. Code in fn is said to be running in a reactive context. In a reactive context, Deps.active===true handle = Deps.autorun(fn);
  15. 15. Demo: computations
  16. 16. Reactivity Requirements Meteor Reactivity requires two things: 1. Run your code in a reactive context (e.g., with Deps.autorun()). 2. Use a reactive data source inside the computation. Other data sources will not update reactively.
  17. 17. Built-in Reactive Data Sources • Session.get(“key”) • Collection.find({sel}) • Meteor.user() • Meteor.userId() • Meteor.status() • <subscription>.ready() • Meteor.loggingIn() Or use one from an outside module e.g. Iron Router’s Router.current()
  18. 18. Making a reactive data source Why? • Control what to reactively respond to • Create a package with reactive API • Better code organization (Session === global?) • To really understand what you are doing
  19. 19. Reactive Data Source is In Charge • <data source>.get(): Data source stores the current computation in a list of dependencies. • <data source>.set(): Data source calls the .invalidate() method on each computation in its list. Comp id=1 Comp id=2 Comp id=3 id=1 Id=2 Id=3 Reactive Data Source source.get() Comp id=1 Comp id=2 Comp id=3 id=1 Id=2 Id=3 Reactive Data Source invalidate() Registering dependencies Invalidating dependencies on change
  20. 20. Deps.Dependency object To create a reactive data source: • Create a new Deps.Dependency() • Call its .depend() method to register a computation • Call its .changed() method to invalidate all dependencies _dependentsById: .changed() Computation {_id:1} Computation {_id:2} Computation {_id:3} .depend()
  21. 21. Demo – make a reactive data source
  22. 22. Quiz: Will this update reactively? Session.set('a', 1); var x = Session.get('a') Deps.autorun(function () { console.log(x); //console logs 1 }); Session.set ('a', 2); //console logs ???
  23. 23. What we didn’t cover • Cascading dependencies and Deps.flush() • Cleanup and other implementation details. • Other Meteor packages that play a part in full-stack reactivity • Spark/UI • Publish/subscribe • Events • Observe and other callback-based mechanisms • Remember, Deps works on the client only!
  24. 24. Resources • robertdickert.com: Why Is My Meteor App Not Updating Reactively? • https://github.com/meteor/meteor/tree/devel/packages/de ps • www.eventedmind.com
  25. 25. Questions?
  26. 26. Other possible surprises • Computations run the whole function • You need to .stop() unneeded computations • Deps does not run on the server • Know the difference between this and other Meteor packages that playa part in “full-stack reactivity” • Spark/UI • Publish/subscribe • Events • Observe and other callback-based mechanisms
  27. 27. The data source is in charge 1. Stores computations in Deps.Dependency instance 2. Decides when to register a dependency (dependency.depend()) 3. Triggers the .invalidate() method of every dependent computation (dependency.changed()).
  28. 28. • B1 needs to be rerun over and over • It needs to be rerun when A1 changes  B1 is dependent on A1 • B1 is a computation (aka “reactive context”) • A1 is a reactive data source
  29. 29. Meteor Features • One language • Database everywhere • Latency compensation • Full stack reactivity • Hot code pushes • Low-friction prototyping and deployment

×