What’s Meteor about?
“A better way to build apps.”
“Meteor is an open source platform	

for building top-quality web apps	...
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...
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

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

...repe...
Searching for Code, Traditionally

• look for element by CSS selector	

• look for action bound to element	

• look for co...
Changing Code, Traditionally

• Change all the places!	

• Test like the Dickens!
• ummm...
did you really change all the ...
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	

pack...
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...
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...
Reactive Style Programming
is about writing code that	

renders values when they are delivered
not code that	

retrieves v...
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 framew...
Imperative Coding
if you’re lucky enough to have database notification
through an observe-like function,	

you implement ca...
Declarative Coding
Meteor does the observe callback behind the scenes
<template name="itemList">!
<ul>!
{{#each items}}!
<...
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!
Chan...
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 / use...
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 s...
Deps.injective = (init) ->!
_value: init ? 0!
_dep: new Deps.Dependency!
!
set: (value) ->!
if (@_value != value)!
@_value...
Consider the use of the an injective:
Foo.innerWidth =!
Deps.injective window.innerWidth

Any computation that calls	

Foo...
Example of Injectives
Use the height and width of a browser window
to control the size of some objects.
innerWidth = Deps....
So why should
Meteor and Reactivity
Narrower technology stack
•
matter to change
• Easier to find and me? code

•
•

Less e...
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
Programming in the Reactive Style with Meteor JS
Programming in the Reactive Style with Meteor JS
Upcoming SlideShare
Loading in …5
×

Programming in the Reactive Style with Meteor JS

14,381 views

Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca

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

Published in: Internet, Technology
2 Comments
20 Likes
Statistics
Notes
  • Slide 20-22, its not like that at all in Django or RoR or any MVC for that matter. Just look at the url/route, and go to the view that is tied to it.

    Meteor has its uses and I like it but it isn't going to remove the use cases for Django. Both are useful and have their purposes but if I had to choose its an easy choice.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The presentation was an animated osx keynote presentation - this is compressed to pdf. Some slides look to be in a bit of a muddled state, but things were just caught out of the animated context.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
14,381
On SlideShare
0
From Embeds
0
Number of Embeds
4,532
Actions
Shares
0
Downloads
128
Comments
2
Likes
20
Embeds 0
No embeds

No notes for slide

Programming in the Reactive Style with Meteor JS

  1. 1. 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
  2. 2. Programming in the Reactive Style using Meteor JS Dave Anderson dave@neo.com @eymiha
  3. 3. Why Meteor?
  4. 4. Will Meteor make your web apps look better?
  5. 5. Will Meteor make it easier to build web apps users will enjoy?
  6. 6. Will Meteor stop the software apocalypse from coming?
  7. 7. Three Virtues of a Great Web Developer Programmer • • • Laziness Impatience Hubris
  8. 8. • Laziness
  9. 9. • Impatience
  10. 10. • Hubris
  11. 11. What Matters? • • • Fastest to Goal Most for Least Effort It Just Works
  12. 12. What Obstructs? • • • • Wide Technology Stack Finding and Changing Code ‘Extra’ Coding Conventional Flow
  13. 13. Traditional Wide Web Technology Stack Client: HTML, CSS, JavaScript ! Server: Programming Language, Database Access, Marshaling Language
  14. 14. Meteor Web Technology Stack Client: HTML, CSS, JavaScript, MiniMongo ! Server: JavaScript, Mongo
  15. 15. Additional Stack Java JavaScript libs, Jar files Ruby on Rails JavaScript libs, Gem files ASP Controls, Extensions Clojure Clojure files Meteor packages
  16. 16. How We Must Code Nine months ago you wrote some code...
  17. 17. How We Must Code Today you have to find and change it...
  18. 18. Follow the Breadcrumbs... from the app in the browser ...to a search of the code base ...to the app inspector... ...repeatedly
  19. 19. 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...
  20. 20. Changing Code, Traditionally • Change all the places! • Test like the Dickens! • ummm... did you really change all the places?
  21. 21. Searching for Code in Meteor • look for the template that emits the element • examine its html, css and javascript
  22. 22. Changing Code in Meteor • Change the code in the template • Test the changes (tinytest, laika, …)
  23. 23. ‘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
  24. 24. 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.
  25. 25. 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.
  26. 26. 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.
  27. 27. How about an example... Let’s Take Attendance!
  28. 28. webu13attend.meteor.com
  29. 29. webu13attend Deconstruction client-only code shared code webby bits server-only code
  30. 30. webu13attend client-only code handlebars! client/webu13attend.html
  31. 31. webu13attend client-only code client/webu13attend.html
  32. 32. webu13attend client-only code client/webu13attend.html
  33. 33. webu13attend client-only code client/webu13attend.html
  34. 34. webu13attend client-only code client/webu13attend.scss
  35. 35. webu13attend client-only code client/webu13attend.coffee
  36. 36. webu13attend server-only code server/attendees.coffee
  37. 37. webu13attend shared code lib/collections.coffee
  38. 38. webu13attend webby bits public/images/webu13.png
  39. 39. A Closer Look at Reactivity
  40. 40. Reactivity from the new-to-Meteor perspective...
  41. 41. 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.
  42. 42. 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()
  43. 43. 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()
  44. 44. How does Reactivity work? JS f Reactive Source first use
  45. 45. How does Reactivity work? JS f Reactive Source Computation Processing
  46. 46. How does Reactivity work? JS f Reactive Source Dependency Established
  47. 47. How does Reactivity work? JS f Reactive Source ready to go
  48. 48. 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.
  49. 49. How does Reactivity work? JS f Reactive Source ready to go
  50. 50. How does Reactivity work? JS f Reactive Source Source Updated
  51. 51. How does Reactivity work? JS f Reactive Source Computation Invalidated
  52. 52. How does Reactivity work? JS f Reactive Source Computation Processing
  53. 53. How does Reactivity work? JS f Reactive Source Computation Processing
  54. 54. How does Reactivity work? JS f Reactive Source ready to go
  55. 55. What are Reactive Sources? remote local (client) database queries (subscriptions) session variables status user / user id logging in subscription ready
  56. 56. Reactivity from the Meteor-savvy perspective... The magic is all in the Deps object!
  57. 57. How does the Deps object work? Deps Computation Dependency
  58. 58. Deps.Computation firstRun onInvalidate(function) invalidate( ) invalidated stop( ) stopped
  59. 59. Deps.Dependency depend( ) changed( ) hasDependents( )
  60. 60. Deps autorun(function) currentComputation active onInvalidate(function) flush( ) afterFlush(function) nonreactive(function)
  61. 61. 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.
  62. 62. 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()
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. When not to use Meteor
  67. 67. 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!
  68. 68. Questions? Dave Anderson dave@neo.com @eymiha

×