Apps, faster.

w/ Meteor 0.7.0.1

apps, faster.

Meteor

Build a realtime, reactive web-app in a day!

I'm Yuriy Dybskiy

Curious Front-End Engineer

Hello, Buenos Aires!

@html5cat

yuriy@dybskiy.com

Current stack:

The problem

With Meteor you don't care

goto.meteor.com

Meteor + GPS

Blackboard

blackboard.meteor.com

foam.meteor.com

Plus many popular libraries
(Handelbars, Sockjs, Underscore)
Packed into one tasty Javascript bundle

7 Principles

1. Data on the Wire

2. One Language

3. Database Everywhere

4. Latency Compensation

5. Full Stack Reactivity

6. Embrace the Ecosystem

7. KISS

The Meteor magic

Reactive programming

Data syncing

Automatic includes

Minification and concatenation in production

Meteor DEPLOY

Smart packages

Spiderable

Get started in three steps

Install

 $ curl https://install.meteor.com | /bin/sh

Init

$ meteor create myapp

Launch

$ cd myapp
$ meteor
=> Meteor server running on: http://localhost:3000/

Let's make an app...

Mongo everywhere

var Photos = new Meteor.Collection("photos");

Photos.find(id);
Photos.findOne();
Photos.insert({'photo': url});
Photos.update({id, { $set:{'herp': 'derp'} });
Photos.remove(id);

Subscriptions

// server: publish the photos collection
Meteor.publish("photos", function () {
  return Photos.find();
});

// client: subscribe to the photos collection
Meteor.subscribe("photos");

Reactivity

 <template name="thePhotos">  <ul>
    {{#each all}}<li>{{name}}</li>{{/each}}
  </ul>
</template>

Template.thePhotos.all = function(){ return Things.find() }

Smart Packages

$ meteor list


accounts-base          A user account system
accounts-facebook      Login service for Facebook accounts
accounts-github        Login service for Github accounts
accounts-google        Login service for Google accounts
accounts-meetup        Login service for Meetup accounts
accounts-password      Password support for accounts.
accounts-twitter       Login service for Twitter accounts
accounts-ui            Simple templates to add login widgets to an app.
accounts-ui-unstyled   Unstyled version of login widgets
accounts-weibo         Login service for Sina Weibo accounts
amplify                API for Persistant Storage, PubSub and Request
appcache               enable the application cache in the browser
audit-argument-checks  Try to detect inadequate input sanitization
autopublish            Automatically publish the entire database to all clients
backbone               A minimalist client-side MVC framework
bootstrap              Front-end framework from Twitter
code-prettify          Syntax highlighting of code, from Google
coffeescript           Javascript dialect with fewer braces and semicolons
d3                     Library for manipulating documents based on data.
ejson                  Extended and Extensable JSON library
email                  Send email messages
force-ssl              Require this application to use secure transport (HTTPS)
handlebars             Simple semantic templating language
htmljs                 Easy macros for generating DOM elements in Javascript
http                   Make HTTP calls to remote servers
insecure               Allow all database writes by default
jquery                 Manipulate the DOM using CSS selectors
jquery-history         pushState module from the jQuery project
jquery-layout          Easily create arbitrary multicolumn layouts
jquery-waypoints       Execute a function when the user scrolls past an element
less                   The dynamic stylesheet language.
madewith               Made With Meteor badge
page-js-ie-support     Tiny ~1200 byte Express-inspired client-side router
preserve-inputs        Automatically preserve all form fields with a unique id
router                 A reactive router built on page.js
showdown               Markdown-to-HTML processor
spiderable             Makes the application crawlable to web spiders.
spin                   Simple spinner package for Meteor
stylus                 Expressive, dynamic, robust CSS.
underscore             Collection of small helper functions: _.map, _.each, ...

Meteorite

github.com/oortcloud/meteorite

$ npm install -g meteorite $ mrt

Atmosphere

atmosphere.meteor.com

Building a smart package

smart.json


{
  "name": "router",
  "description": "A Reactive Router for multipage apps",
  "homepage": "https://github.com/tmeasday/meteor-router",
  "author": "Tom Coleman ",
  "version": "0.5.3",
  "git": "https://github.com/tmeasday/meteor-router.git",
  "packages": {
    "page-js-ie-support": {}
  }
}

Building a smart package

package.js


Package.describe({
  summary: "A reactive router built on page.js"
});

Package.on_use(function (api, where) {
  api.use('deps', 'client');
  api.use('startup', 'client');
  api.use('page-js-ie-support', 'client');
  api.use('underscore', ['client', 'server']);
  
  api.add_files('lib/router_client.js', 'client');
  api.add_files('lib/router_helpers.js', 'client');
  api.add_files('lib/router_server.js', 'server');
  api.add_files('lib/router_common.js', ['client', 'server'])
});


Package.on_test(function (api) {
  api.use('router', ['client', 'server']);
  api.use('test-helpers', ['client', 'server']);
  api.use('tinytest', ['client', 'server']);
  
  api.use('session', 'client');
  api.add_files('tests/router_client_tests.js', 'client');
  
  api.use('http', 'server');
  api.add_files('tests/router_server_tests.js', 'server');
  
  api.add_files('tests/router_common_tests.js', ['client', 'server']);
});

Shipping!

Meteor infrastructure

$ meteor deploy myappopen http://myapp.meteor.com

#OR$meteor deploy www.myapp.com

own infrastructure

$ meteor bundle myapp.tgz

...because standard deployment is old news.

Hot {code} Pushes

Hot Code Pushes

"Update your app while users are connected without disturbing them. When you push a new version, the new code is seamlessly injected into each browser frame in which the app is open."