What’s Meteor about?
“A better way to build apps.”
“Meteor is an open source platform
for building top-quality web apps
in a fraction of the time,
whether you’re an expert developer
or just getting started.”
ally?
Re

Programming in the
Reactive Style using
Meteor JS
Dave Anderson
dave@neo.com @eymiha

Why Meteor?

Will Meteor make
your web apps look better?

Will Meteor make it easier to
build web apps users will enjoy?

Will Meteor stop the
software apocalypse from coming?

Three Virtues
of a Great
Web Developer
Programmer
•
•
•
Laziness
Impatience
Hubris

•
Laziness

•
Impatience

•
Hubris

What Matters?
•
•
•
Fastest to Goal
Most for Least Effort
It Just Works

What Obstructs?
•
•
•
•
Wide Technology Stack
Finding and Changing Code
‘Extra’ Coding
Conventional Flow

Traditional Wide
Web Technology Stack
Client:
HTML, CSS, JavaScript
!
Server:
Programming Language, Database Access,
Marshaling Language

Meteor
Web Technology Stack
Client:
HTML, CSS, JavaScript, MiniMongo
!
Server:
JavaScript, Mongo

Additional Stack
Java
JavaScript libs, Jar files
Ruby on Rails
JavaScript libs, Gem files
ASP
Controls, Extensions
Clojure
Clojure files
Meteor
packages

How We Must Code
Nine months ago you wrote some code...

How We Must Code
Today you have to find and change it...

Follow the Breadcrumbs...
from the app in the browser
...to a search of the code base
...to the app inspector...
...repeatedly

Searching for Code, Traditionally
• look for element by CSS selector
• look for action bound to element
• look for code that emits element
• look for code that changes CSS selector
• keep looking inward...

Changing Code, Traditionally
• Change all the places!
• Test like the Dickens!
• ummm...
did you really change all the places?

Searching for Code in Meteor
• look for the template that emits the element
• examine its html, css and javascript

Changing Code in Meteor
• Change the code in the template
• Test the changes (tinytest, laika, …)

‘Extra’ Coding
This one is hard to quantify.
HTML with handlebar templates
JavaScript / CoffeeScript
CSS / SCSS
packages
the code needed to build
a Meteor-based web UX
is the most straightforward I’ve found.
YMMV

Conventional Flow
Code uses the current values when called.
If a is 5 and b is 3, then
c = a+b
would set c to 8.
Later, if a became 4 and b became 2,
then c would still be 8 - until the code
was called again.

Reactive Flow
Code uses values as they change.
If a is 5 and b is 3, then
c = a+b
would set c to 8.
Later, if a became 4 and b became 2,
then c would become 6 automatically.

Reactive Style Programming
is about writing code that
renders values when they are delivered
not code that
retrieves values so they can be rendered.
Data is pushed, not pulled.

How about an example...
Let’s Take Attendance!

webu13attend.meteor.com

webu13attend Deconstruction
client-only code
shared code
webby bits
server-only code

webu13attend client-only code
handlebars!
client/webu13attend.html

webu13attend client-only code
client/webu13attend.html

webu13attend client-only code
client/webu13attend.html

webu13attend client-only code
client/webu13attend.html

webu13attend client-only code
client/webu13attend.scss

webu13attend client-only code
client/webu13attend.coffee

webu13attend server-only code
server/attendees.coffee

webu13attend shared code
lib/collections.coffee

webu13attend webby bits
public/images/webu13.png

A Closer Look at
Reactivity

Reactivity from the
new-to-Meteor perspective...

In the frameworks you’re probably used to,
a web application is coded Imperatively.
In Meteor using its Reactive framework,
a web application is coded Declaratively.

Imperative Coding
if you’re lucky enough to have database notification
through an observe-like function,
you implement callbacks
Items.find().observe!
added: (item) ->!
$('ul').append '<li id="'+item._id+'">'+!
item.name+'</li>'!
changed: (item) ->!
$('ul li#'+item._id).text item.name!
removed: (item) -> !
$('ul li#'+item._id).detach()

Declarative Coding
Meteor does the observe callback behind the scenes
<template name="itemList">!
<ul>!
{{#each items}}!
<li>{{name}}</li>!
{{/each}}!
</ul>!
</template>
Template.itemList.helpers!
items: -> Items.find()

How does Reactivity work?
JS f
Reactive Source
first use

How does Reactivity work?
JS f
Reactive Source
Computation Processing

How does Reactivity work?
JS f
Reactive Source
Dependency Established

How does Reactivity work?
JS f
Reactive Source
ready to go

Why Computations?
Because Meteor has the potential to
change the entire interface
when a reactive source changes!
Changes based on a computation becoming invalid
focus on only the parts of the interface
that depend on the computation.

How does Reactivity work?
JS f
Reactive Source
ready to go

How does Reactivity work?
JS f
Reactive Source
Source Updated

How does Reactivity work?
JS f
Reactive Source
Computation Invalidated

How does Reactivity work?
JS f
Reactive Source
Computation Processing

How does Reactivity work?
JS f
Reactive Source
Computation Processing

How does Reactivity work?
JS f
Reactive Source
ready to go

What are Reactive Sources?
remote
local (client)
database queries
(subscriptions)
session variables
status
user / user id
logging in
subscription ready

Reactivity from the
Meteor-savvy perspective...
The magic is all in
the Deps object!

How does the Deps object work?
Deps
Computation
Dependency

Deps.Computation
firstRun
onInvalidate(function)
invalidate( )
invalidated
stop( )
stopped

Deps.Dependency
depend( )
changed( )
hasDependents( )

Deps
autorun(function)
currentComputation
active
onInvalidate(function)
flush( )
afterFlush(function)
nonreactive(function)

An Example:
Injectives
Sessions variables are reactive sources
global to the client.
An Injective is a local reactive source that
can be more closely scoped to the
functions and objects that uses it.

Deps.injective = (init) ->!
_value: init ? 0!
_dep: new Deps.Dependency!
!
set: (value) ->!
if (@_value != value)!
@_value = value!
@changed()!
get: ->!
@depend()!
@_value!
depend: ->!
@_dep.depend()!
changed: ->!
@_dep.changed()

Consider the use of the an injective:
Foo.innerWidth =!
Deps.injective window.innerWidth
Any computation that calls
Foo.innerWidth.get( ) will react when
its value changes.
So then,
$(window).resize ->!
Foo.innerWidth.set window.innerWidth

Example of Injectives
Use the height and width of a browser window
to control the size of some objects.
innerWidth = Deps.injective window.innerWidth!
innerHeight = Deps.injective window.innerHeight!
!
$(window).resize ->!
innerWidth.set window.innerWidth!
innerHeight.set window.innerHeight!
!
Template.box.helpers!
size: ->!
Math.floor (innerWidth.get()+innerHeight.get())/4.0

So why should
Meteor and Reactivity
Narrower technology stack
•
matter to change
• Easier to find and me? code
•
•
Less extra coding
Changes are pushed, not pulled

When not to use
Meteor

Try It!
the
ke
ge
Ta
len
al
Ch
or
te
e
M
Give it two weeks and
expand what you know about
building web applications!

Questions?
Dave Anderson
dave@neo.com @eymiha