Whats 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 youre an expert developer

or just getting started.

?
y
l
l
a
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 Ive 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...

Lets 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 youre probably used to,

a web application is coded Imperatively.

In Meteor using its Reactive framework,

a web application is coded Declaratively.

Imperative Coding
if youre 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

to find and
change code
to me?
Easiermatter

Less extra coding

Changes are pushed, not pulled

When not to use

Meteor

Try It!

e
h
t
e
e
k
g
n
Ta
e
l
l
a
h
C
r
o
e
t
e
M

Give it two weeks and

expand what you know about
building web applications!

Questions?
Dave Anderson

dave@neo.com @eymiha