programming in the reactive style with meteor js
DESCRIPTION
presented by Dave Anderson at FITC's Web Unleashed event in Boston on Nov 7ht, 2013. Meteor allows you to quickly create new web applications. Using a single code base for the client and the server, no-sql mongo, template-oriented UX organization and painless deployment, designing and developing with Meteor is fun. But the real game changer is Reactivity. Reactivity is made up of two parts – data sources and computations. When you build a page, Meteor remembers the computations that use reactive data sources. Then, when a data in a reactive source changes, the computations that depend on the data are invalidated and re-run – which can re-render the affected parts of your application. The true beauty of it is that it’s all automatic. You don’t need to write any code to watch for changes – Meteor does all that for you. Learning to build web applications in the Reactive Style gives you more time to concentrate on UX than traditional web development. Being able to side-step much of the application setup and data management frees you to focus on providing a pleasurable experience as well as useful functionality.TRANSCRIPT
![Page 1: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/1.jpg)
![Page 2: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/2.jpg)
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.”
Really?
![Page 3: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/3.jpg)
![Page 5: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/5.jpg)
Why Meteor?
![Page 6: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/6.jpg)
Will Meteor make your web apps look better?
![Page 7: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/7.jpg)
Will Meteor make it easier to build web apps users will enjoy?
![Page 8: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/8.jpg)
Will Meteor stop the software apocalypse from coming?
![Page 9: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/9.jpg)
Three Virtues of a Great
• Laziness
• Impatience
• Hubris
Web DeveloperProgrammer
![Page 10: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/10.jpg)
• Laziness
![Page 11: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/11.jpg)
• Impatience
![Page 12: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/12.jpg)
• Hubris
![Page 13: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/13.jpg)
What Matters?
• Fastest to Goal
• Most for Least Effort
• It Just Works
![Page 14: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/14.jpg)
What Obstructs?
• Wide Technology Stack
• Finding and Changing Code
• ‘Extra’ Coding
• Conventional Flow
![Page 15: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/15.jpg)
Traditional Wide Web Technology Stack
Client:
HTML, CSS, JavaScript !
Server: Programming Language, Database Access, Marshaling Language
![Page 16: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/16.jpg)
Meteor Web Technology Stack
Client:
HTML, CSS, JavaScript, MiniMongo !
Server:
JavaScript, Mongo
![Page 17: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/17.jpg)
Additional Stack
Java JavaScript libs, Jar files
Ruby on Rails JavaScript libs, Gem files
ASP Controls, Extensions
Clojure Clojure files
Meteor packages
![Page 18: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/18.jpg)
How We Must Code
Nine months ago you wrote some code...
![Page 19: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/19.jpg)
How We Must Code
Today you have to find and change it...
![Page 20: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/20.jpg)
Follow the Breadcrumbs...
from the app in the browser
...to the app inspector...
...to a search of the code base
...repeatedly
![Page 21: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/21.jpg)
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...
![Page 22: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/22.jpg)
Changing Code, Traditionally
• Change all the places!
• Test like the Dickens!
did you really change all the places?
• ummm...
![Page 23: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/23.jpg)
Searching for Code in Meteor• look for the template that emits the element
• examine its html, css and javascript
![Page 24: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/24.jpg)
Changing Code in Meteor
• Change the code in the template
• Test the changes (tinytest, laika, …)
![Page 25: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/25.jpg)
‘Extra’ CodingThis 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
![Page 26: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/26.jpg)
Conventional FlowCode 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.
![Page 27: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/27.jpg)
Reactive FlowCode 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.
![Page 28: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/28.jpg)
Reactive Style Programming
not code that retrieves values so they can be rendered.
Data is pushed, not pulled.
is about writing code that renders values when they are delivered
![Page 29: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/29.jpg)
How about an example...
Let’s Take Attendance!
![Page 30: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/30.jpg)
webu13attend.meteor.com
![Page 31: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/31.jpg)
webu13attend Deconstruction
client-only code
server-only code
shared code
webby bits
![Page 32: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/32.jpg)
webu13attend client-only code
handlebars!
client/webu13attend.html
![Page 33: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/33.jpg)
webu13attend client-only code
client/webu13attend.html
![Page 34: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/34.jpg)
webu13attend client-only code
client/webu13attend.html
![Page 35: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/35.jpg)
webu13attend client-only code
client/webu13attend.html
![Page 36: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/36.jpg)
webu13attend client-only code
client/webu13attend.scss
![Page 37: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/37.jpg)
webu13attend client-only code
client/webu13attend.coffee
![Page 38: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/38.jpg)
webu13attend server-only code
server/attendees.coffee
![Page 39: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/39.jpg)
webu13attend shared code
lib/collections.coffee
![Page 40: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/40.jpg)
webu13attend webby bits
public/images/webu13.png
![Page 41: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/41.jpg)
A Closer Look at Reactivity
![Page 42: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/42.jpg)
Reactivity from the new-to-Meteor perspective...
![Page 43: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/43.jpg)
In Meteor using its Reactive framework, a web application is coded Declaratively.
In the frameworks you’re probably used to, a web application is coded Imperatively.
![Page 44: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/44.jpg)
Imperative Coding
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()
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()
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()
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()
![Page 45: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/45.jpg)
Declarative Coding
<template name="itemList">! <ul>! {{#each items}}! <li>{{name}}</li>! {{/each}}! </ul>!</template>
Meteor does the observe callback behind the scenes
Template.itemList.helpers! items: -> Items.find()
![Page 46: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/46.jpg)
How does Reactivity work?
JS f Reactive Source
first use
![Page 47: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/47.jpg)
How does Reactivity work?
JS f Reactive Source
Computation Processing
![Page 48: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/48.jpg)
How does Reactivity work?
JS f Reactive Source
Dependency Established
![Page 49: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/49.jpg)
How does Reactivity work?
JS f Reactive Source
ready to go
![Page 50: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/50.jpg)
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.
![Page 51: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/51.jpg)
How does Reactivity work?
JS f Reactive Source
ready to go
![Page 52: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/52.jpg)
How does Reactivity work?
JS f Reactive Source
Source Updated
![Page 53: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/53.jpg)
How does Reactivity work?
JS f Reactive Source
Computation Invalidated
![Page 54: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/54.jpg)
How does Reactivity work?
JS f Reactive Source
Computation Processing
![Page 55: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/55.jpg)
How does Reactivity work?
JS f Reactive Source
Computation Processing
![Page 56: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/56.jpg)
How does Reactivity work?
JS f Reactive Source
ready to go
![Page 57: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/57.jpg)
What are Reactive Sources?
local (client)remote
database queries (subscriptions)
session variables
status
user / user id
logging in
subscription ready
![Page 58: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/58.jpg)
Reactivity from the Meteor-savvy perspective...
The magic is all in the Deps object!
![Page 59: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/59.jpg)
Deps
Computation Dependency
How does the Deps object work?
![Page 60: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/60.jpg)
Deps.Computation
firstRun
onInvalidate(function)
stop( )
stopped
invalidate( )
invalidated
![Page 61: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/61.jpg)
Deps.Dependency
depend( )
changed( )
hasDependents( )
![Page 62: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/62.jpg)
Depsautorun(function)currentComputationactiveonInvalidate(function)flush( )afterFlush(function)nonreactive(function)
![Page 63: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/63.jpg)
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.
![Page 64: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/64.jpg)
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()
![Page 65: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/65.jpg)
Foo.innerWidth =! Deps.injective window.innerWidth
Consider the use of the an injective:
$(window).resize ->! Foo.innerWidth.set window.innerWidth
Any computation that calls Foo.innerWidth.get( ) will react when its value changes.
So then,
![Page 66: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/66.jpg)
Example of InjectivesUse 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
![Page 67: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/67.jpg)
So why should Meteor and Reactivity
matter to me?• Less extra coding
• Narrower technology stack
• Changes are pushed, not pulled
• Easier to find and change code
![Page 68: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/68.jpg)
When not to use Meteor
![Page 69: Programming in the Reactive Style with Meteor JS](https://reader034.vdocument.in/reader034/viewer/2022050807/53f38d098d7f72c80e8b48e0/html5/thumbnails/69.jpg)
Try It!
Take the
Meteor Challenge
Give it two weeks and expand what you know about
building web applications!