The document introduces Meteor, a full-stack JavaScript framework that enables rapid development of real-time applications using Node.js and MongoDB. It highlights Meteor's features such as reactive templates, instant development environment, and easy deployment while emphasizing its utility for both beginners and advanced users. It also covers key concepts of reactivity, including how data updates automatically through a defined data flow in reactive contexts.

1. METEOR
Robert Dickert
@rdickert
robertdickert.com
Build high quality real-time apps quickly

2. PART I: WHY METEOR?

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. DEMO

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. So Why Meteor?
• Real-time (chat, dashboard, games, etc.)
• Rapid prototyping
• Productive
• Declarative
• All JavaScript

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. Questions?

9. PART II: REACTIVITY
How does Meteor achieve live client-side updates?

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. 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. Lamest Demo Ever: Excel

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. 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. Demo: computations

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. 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. 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. 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. 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. Demo – make a reactive data source

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. 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. 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. Questions?

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. 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. • 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. Meteor Features
• One language
• Database everywhere
• Latency compensation
• Full stack reactivity
• Hot code pushes
• Low-friction prototyping and deployment