mirror of
https://github.com/meteor/meteor.git
synced 2026-05-02 03:01:46 -04:00
By choosing names like Template.registerHelper(…) and Template.instance() (instead of Blaze), we can separate the “Templates” section and the “Blaze” section of the docs.
815 lines
34 KiB
HTML
815 lines
34 KiB
HTML
<template name="concepts">
|
|
|
|
<h1 id="concepts">Concepts</h1>
|
|
|
|
We've written our fair share of single-page JavaScript applications by hand.
|
|
Writing an entire application in one language (JavaScript) with one
|
|
data format (JSON) is a real joy. Meteor is everything we wanted
|
|
when writing those apps.
|
|
|
|
{{> whatismeteor }}
|
|
{{> structure }}
|
|
{{> data_ }}
|
|
{{> reactivity }}
|
|
{{> livehtmltemplates }}
|
|
{{> packages_concept }}
|
|
{{> namespacing }}
|
|
{{> deploying }}
|
|
{{> packages_writing }}
|
|
</template>
|
|
|
|
<template name="whatismeteor">
|
|
|
|
{{#markdown}}
|
|
|
|
<h2 id="whatismeteor">What is Meteor?</h2>
|
|
|
|
Meteor is two things:
|
|
|
|
* A _library of packages_: pre-written, self-contained modules that
|
|
you might need in your app.<br>
|
|
There are about a dozen core Meteor
|
|
packages that most any app will use (for example `webapp`, which
|
|
handles incoming HTTP connections, and `templating`, which lets you
|
|
make HTML templates that automatically update live as data changes).
|
|
Then there are optional packages like `email`, which lets your app
|
|
send emails, or the Meteor Accounts series (`accounts-password`,
|
|
`accounts-facebook`, `accounts-ui`, and others) which provide a
|
|
full-featured user account system that you can drop right into your
|
|
app. In addition to these "core" packages, there are thousands of
|
|
community-written packages in [Atmosphere](https://atmospherejs.com/),
|
|
one of which might do just what you need.
|
|
|
|
* A _command-line tool_ called `meteor`.<br>
|
|
`meteor` is a build tool analogous to `make`, `rake`, or the non-visual parts of
|
|
Visual Studio. It gathers up all of the source files and assets in your
|
|
application, carries out any necessary build steps (such as compiling
|
|
[CoffeeScript](http://coffeescript.org), minifying CSS, building
|
|
[npm](https://npmjs.org/) modules, or generating source maps), fetches the
|
|
packages used by your app, and outputs a standalone, ready-to-run application
|
|
bundle. In development mode it can do all of this interactively, so that
|
|
whenever you change a file you immediately see the changes in your browser. It's
|
|
super easy to use out of the box, but it's also extensible: you can add support
|
|
for new languages and compilers by adding build plugin packages to your app.
|
|
|
|
The key idea in the Meteor package system is that _everything should
|
|
work identically in the browser and on the server_ (wherever it makes
|
|
sense, of course: browsers can't send email and servers can't capture
|
|
mouse events). Our whole ecosystem has been built from the ground up
|
|
to support this.
|
|
|
|
{{/markdown}}
|
|
</template>
|
|
|
|
<template name="structure">
|
|
{{#markdown}}
|
|
|
|
<h2 id="structuringyourapp">Structuring your application</h2>
|
|
|
|
A Meteor application is a mix of JavaScript that runs inside a client web
|
|
browser, JavaScript that runs on the Meteor server inside a
|
|
[Node.js](http://nodejs.org/) container, and all the supporting HTML fragments,
|
|
CSS rules, and static assets. Meteor automates the packaging and transmission
|
|
of these different components. And, it is quite flexible about how you choose
|
|
to structure those components in your file tree.
|
|
|
|
The only server assets are JavaScript and files in the `private` subdirectory.
|
|
Meteor gathers all your JavaScript
|
|
files, excluding anything under the `client`, `public`, and `private`
|
|
subdirectories, and loads them into a Node.js
|
|
server instance inside a fiber. In Meteor, your server code runs in
|
|
a single thread per request, not in the asynchronous callback style
|
|
typical of Node. We find the linear execution model a better fit for
|
|
the typical server code in a Meteor application.
|
|
|
|
Meteor gathers any files under the `private` subdirectory and makes the contents
|
|
of these files available to server code via the [`Assets`](#assets) API. The
|
|
`private` subdirectory is the place for any files that should be accessible to
|
|
server code but not served to the client, like private data files.
|
|
|
|
There are more assets to consider on the client side. Meteor
|
|
gathers all JavaScript files in your tree, with the exception of
|
|
the `server`, `public`, and `private` subdirectories, for the
|
|
client. It minifies this bundle and serves it to each new client.
|
|
You're free to use a single JavaScript file for your entire application, or
|
|
create a nested tree of separate files, or anything in between.
|
|
|
|
Some JavaScript libraries only work when placed in the
|
|
`client/compatibility` subdirectory. Files in this directory are
|
|
executed without being wrapped in a new variable scope. This means
|
|
that each top-level `var` defines a global variable. In addition,
|
|
these files are executed before other client-side JavaScript files.
|
|
|
|
Files outside the `client`, `server` and `tests` subdirectories are loaded on
|
|
both the client and the server! That's the place for model definitions and
|
|
other functions. Meteor provides the variables [`isClient`](#meteor_isclient) and
|
|
[`isServer`](#meteor_isserver) so that your code can alter its behavior depending
|
|
on whether it's running on the client or the server. (Files in directories named
|
|
`tests` are not loaded anywhere.)
|
|
|
|
Any sensitive code that you don't want served to the client, such as code
|
|
containing passwords or authentication mechanisms, should be
|
|
kept in the `server` directory.
|
|
|
|
CSS files are gathered together as well: the client will get a bundle with all
|
|
the CSS in your tree (excluding the `server`,
|
|
`public`, and `private` subdirectories).
|
|
|
|
In development mode, JavaScript and CSS files are sent individually to make
|
|
debugging easier.
|
|
|
|
HTML files in a Meteor application are treated quite a bit differently
|
|
from a server-side framework. Meteor scans all the HTML files in your
|
|
directory for three top-level elements: `<head>`, `<body>`, and
|
|
`<template>`. The head and body sections are separately concatenated
|
|
into a single head and body, which are transmitted to the client on
|
|
initial page load.
|
|
|
|
Template sections, on the other hand, are converted into JavaScript
|
|
functions, available under the `Template` namespace. It's
|
|
a really convenient way to ship HTML templates to the client.
|
|
See the [templates](#livehtmltemplates) section for more.
|
|
|
|
Lastly, the Meteor server will serve any files under the `public` directory.
|
|
This is the place for images, `favicon.ico`, `robots.txt`, and anything else.
|
|
|
|
It is best to write your application in such a way that it is
|
|
insensitive to the order in which files are loaded, for example by
|
|
using [Meteor.startup](#meteor_startup), or by moving load order
|
|
sensitive code into [packages](#usingpackages), which can explicitly control both
|
|
the load order of their contents and their load order with respect to
|
|
other packages. However sometimes load order dependencies in your
|
|
application are unavoidable. The JavaScript and CSS files in an
|
|
application are loaded according to these rules:
|
|
|
|
* Files in subdirectories are loaded before files in parent directories, so that
|
|
files in the deepest subdirectory are loaded first, and files in the root
|
|
directory are loaded last.
|
|
|
|
* Within a directory, files are loaded in alphabetical order by
|
|
filename.
|
|
|
|
* After sorting as described above, all files under directories named `lib` are
|
|
moved before everything else (preserving their order).
|
|
|
|
* Finally, all files that match `main.*` are moved after everything else
|
|
(preserving their order).
|
|
|
|
{{/markdown}}
|
|
</template>
|
|
|
|
<template name="data_">
|
|
{{#markdown}}
|
|
|
|
<h2 id="dataandsecurity">Data and security</h2>
|
|
|
|
Meteor makes writing distributed client code as simple as talking to a
|
|
local database. It's a clean, simple, and secure approach that obviates
|
|
the need to implement individual RPC endpoints, manually cache data on
|
|
the client to avoid slow roundtrips to the server, and carefully
|
|
orchestrate invalidation messages to every client as data changes.
|
|
|
|
In Meteor, the client and server share the same database API. The same
|
|
exact application code — like validators and computed properties — can
|
|
often run in both places. But while code running on the server has
|
|
direct access to the database, code running on the client does *not*.
|
|
This distinction is the basis for Meteor's data security model.
|
|
|
|
{{#note}}
|
|
By default, a new Meteor app includes the `autopublish` and `insecure`
|
|
packages, which together mimic the effect of each client having full
|
|
read/write access to the server's database. These are useful
|
|
prototyping tools, but typically not appropriate for production
|
|
applications. When you're ready, just remove the packages.
|
|
{{/note}}
|
|
|
|
Every Meteor client includes an in-memory database cache. To manage the
|
|
client cache, the server *publishes* sets of JSON documents, and the
|
|
client *subscribes* to those sets. As documents in a set change, the
|
|
server patches each client's cache.
|
|
|
|
Today most Meteor apps use MongoDB as their database because it is the
|
|
best supported, though support for other databases is coming in the
|
|
future. The
|
|
[`Meteor.Collection`](http://docs.meteor.com/#meteor_collection) class
|
|
is used to declare Mongo collections and to manipulate them. Thanks to
|
|
`minimongo`, Meteor's client-side Mongo emulator, `Meteor.Collection`
|
|
can be used from both client and server code.
|
|
|
|
// declare collections
|
|
// this code should be included in both the client and the server
|
|
Rooms = new Meteor.Collection("rooms");
|
|
Messages = new Meteor.Collection("messages");
|
|
Parties = new Meteor.Collection("parties");
|
|
|
|
// server: populate collections with some initial documents
|
|
Rooms.insert({name: "Conference Room A"});
|
|
var myRooms = Rooms.find({}).fetch();
|
|
Messages.insert({text: "Hello world", room: myRooms[0]._id});
|
|
Parties.insert({name: "Super Bowl Party"});
|
|
|
|
Each document set is defined by a publish function on the server. The
|
|
publish function runs each time a new client subscribes to a document
|
|
set. The data in a document set can come from anywhere, but the common
|
|
case is to publish a database query.
|
|
|
|
// server: publish all room documents
|
|
Meteor.publish("all-rooms", function () {
|
|
return Rooms.find(); // everything
|
|
});
|
|
|
|
// server: publish all messages for a given room
|
|
Meteor.publish("messages", function (roomId) {
|
|
check(roomId, String);
|
|
return Messages.find({room: roomId});
|
|
});
|
|
|
|
// server: publish the set of parties the logged-in user can see.
|
|
Meteor.publish("parties", function () {
|
|
return Parties.find({$or: [{"public": true},
|
|
{invited: this.userId},
|
|
{owner: this.userId}]});
|
|
});
|
|
|
|
Publish functions can provide different results to each client. In the
|
|
last example, a logged in user can only see `Party` documents that
|
|
are public, that the user owns, or that the user has been invited to.
|
|
|
|
Once subscribed, the client uses its cache as a fast local database,
|
|
dramatically simplifying client code. Reads never require a costly
|
|
round trip to the server. And they're limited to the contents of the
|
|
cache: a query for every document in a collection on a client will only
|
|
return documents the server is publishing to that client.
|
|
|
|
// client: start a parties subscription
|
|
Meteor.subscribe("parties");
|
|
|
|
// client: return array of Parties this client can read
|
|
return Parties.find().fetch(); // synchronous!
|
|
|
|
Sophisticated clients can turn subscriptions on and off to control how
|
|
much data is kept in the cache and manage network traffic. When a
|
|
subscription is turned off, all its documents are removed from the cache
|
|
unless the same document is also provided by another active
|
|
subscription.
|
|
|
|
When the client *changes* one or more documents, it sends a message to
|
|
the server requesting the change. The server checks the proposed change
|
|
against a set of allow/deny rules you write as JavaScript functions.
|
|
The server only accepts the change if all the rules pass.
|
|
|
|
// server: don't allow client to insert a party
|
|
Parties.allow({
|
|
insert: function (userId, party) {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// client: this will fail
|
|
var party = { ... };
|
|
Parties.insert(party);
|
|
|
|
If the server accepts the change, it applies the change to the database
|
|
and automatically propagates the change to other clients subscribed to
|
|
the affected documents. If not, the update fails, the server's database
|
|
remains untouched, and no other client sees the update.
|
|
|
|
Meteor has a cute trick, though. When a client issues a write to the
|
|
server, it also updates its local cache immediately, without waiting for
|
|
the server's response. This means the screen will redraw right away.
|
|
If the server accepted the update — what ought to happen most of the
|
|
time in a properly behaving client — then the client got a jump on the
|
|
change and didn't have to wait for the round trip to update its own
|
|
screen. If the server rejects the change, Meteor patches up the
|
|
client's cache with the server's result.
|
|
|
|
Putting it all together, these techniques accomplish latency
|
|
compensation. Clients hold a fresh copy of the data they need, and
|
|
never need to wait for a roundtrip to the server. And when clients
|
|
modify data, those modifications can run locally without waiting for the
|
|
confirmation from the server, while still giving the server final say
|
|
over the requested change.
|
|
|
|
{{#note}}
|
|
The current release of Meteor supports MongoDB, the popular document
|
|
database, and the examples in this section use the
|
|
[MongoDB API](http://www.mongodb.org/display/DOCS/Manual). Future
|
|
releases will include support for other databases.
|
|
{{/note}}
|
|
|
|
<h3 id="dataandsecurity-authentication">Authentication and user accounts</h3>
|
|
|
|
Meteor includes [Meteor Accounts](#accounts_api), a state-of-the-art
|
|
authentication system. It features secure password login using the
|
|
[bcrypt](http://en.wikipedia.org/wiki/Bcrypt) algorithm,
|
|
and integration with external services including Facebook, GitHub,
|
|
Google, Meetup, Twitter, and Weibo. Meteor Accounts defines a
|
|
[`Meteor.users`](#meteor_users) collection where developers can store
|
|
application-specific user data.
|
|
|
|
Meteor also includes pre-built forms for common tasks like login, signup,
|
|
password change, and password reset emails. You can add [Accounts
|
|
UI](#accountsui) to your app with just one line of code. The `accounts-ui` package even provides a configuration wizard that walks you through the steps to
|
|
set up the external login services you're using in your app.
|
|
|
|
<h3 id="dataandsecurity-validation">Input validation</h3>
|
|
|
|
Meteor allows your methods and publish functions to take arguments of any
|
|
[JSON](http://json.org/) type. (In fact, Meteor's wire protocol supports
|
|
[EJSON](#ejson), an extension of JSON which also supports other common types
|
|
like dates and binary buffers.) JavaScript's dynamic typing means you don't need
|
|
to declare precise types of every variable in your app, but it's usually helpful
|
|
to ensure that the arguments that clients are passing to your methods and
|
|
publish functions are of the type that you expect.
|
|
|
|
Meteor provides a [lightweight library](#match) for checking that arguments and
|
|
other values are the type you expect them to be. Simply start your functions
|
|
with statements like `check(username, String)` or
|
|
`check(office, {building: String, room: Number})`. The `check` call will
|
|
throw an error if its argument is of an unexpected type.
|
|
|
|
Meteor also provides an easy way to make sure that all of your methods
|
|
and publish functions validate all of their arguments. Just run
|
|
<code>meteor add [audit-argument-checks](#auditargumentchecks)</code> and any
|
|
method or publish function which skips `check`ing any of its arguments will fail
|
|
with an exception.
|
|
|
|
{{/markdown}}
|
|
</template>
|
|
|
|
<template name="reactivity">
|
|
{{#markdown}}
|
|
|
|
<h2 id="reactivity">Reactivity</h2>
|
|
|
|
Meteor embraces the concept of [reactive
|
|
programming](http://en.wikipedia.org/wiki/Reactive_programming). This means that
|
|
you can write your code in a simple imperative style, and the result will be
|
|
automatically recalculated whenever data changes that your code depends on.
|
|
|
|
Tracker.autorun(function () {
|
|
Meteor.subscribe("messages", Session.get("currentRoomId"));
|
|
});
|
|
|
|
This example (taken from a chat room client) sets up a data
|
|
subscription based on the session variable `currentRoomId`.
|
|
If the value of `Session.get("currentRoomId")` changes for any reason, the
|
|
function will be automatically re-run, setting up a new subscription that
|
|
replaces the old one.
|
|
|
|
This automatic recomputation is achieved by a cooperation between
|
|
`Session` and `Tracker.autorun`. `Tracker.autorun` performs an arbitrary "reactive
|
|
computation" inside of which data dependencies are tracked, and it
|
|
will re-run its function argument as necessary. Data providers like
|
|
`Session`, on the other hand, make note of the computation they are
|
|
called from and what data was requested, and they are prepared to send
|
|
an invalidation signal to the computation when the data changes.
|
|
|
|
This simple pattern (reactive computation + reactive data source) has wide
|
|
applicability. Above, the programmer is saved from writing
|
|
unsubscribe/resubscribe calls and making sure they are called at the
|
|
right time. In general, Meteor can eliminate whole classes of data
|
|
propagation code which would otherwise clog up your application with
|
|
error-prone logic.
|
|
|
|
These Meteor functions run your code as a reactive computation:
|
|
|
|
* [Templates](#livehtmltemplates)
|
|
* [`Tracker.autorun`](#tracker_autorun)
|
|
* [`Blaze.render`](#blaze_render) and [`Blaze.renderWithData`](#blaze_renderwithdata)
|
|
|
|
And the reactive data sources that can trigger changes are:
|
|
|
|
* [`Session`](#session) variables
|
|
* Database queries on [Collections](#find)
|
|
* [`Meteor.status`](#meteor_status)
|
|
* The `ready()` method on a [subscription handle](#meteor_subscribe)
|
|
* [`Meteor.user`](#meteor_user)
|
|
* [`Meteor.userId`](#meteor_userid)
|
|
* [`Meteor.loggingIn`](#meteor_loggingin)
|
|
|
|
In addition, the following functions which return an object with a
|
|
`stop` method, if called from a reactive computation, are stopped when
|
|
the computation is rerun or stopped:
|
|
|
|
* [`Tracker.autorun`](#tracker_autorun) (nested)
|
|
* [`Meteor.subscribe`](#meteor_subscribe)
|
|
* [`observe()`](#observe) and [`observeChanges()`](#observe_changes) on cursors
|
|
|
|
Meteor's
|
|
[implementation](https://github.com/meteor/meteor/blob/master/packages/tracker/tracker.js)
|
|
is a package called [`Tracker`](#tracker) that is fairly short and straightforward.
|
|
You can use it yourself to implement new reactive data sources.
|
|
|
|
{{/markdown}}
|
|
</template>
|
|
|
|
<template name="livehtmltemplates">
|
|
{{#markdown}}
|
|
|
|
<h2 id="livehtmltemplates">Live HTML templates</h2>
|
|
|
|
HTML templating is central to web applications. With Blaze, Meteor's live
|
|
page update technology, you can render your HTML _reactively_, meaning
|
|
that it will update automatically to track changes in the data used to
|
|
generate it.
|
|
|
|
Meteor makes it easy to use your favorite HTML templating language along with
|
|
Meteor's live page update technology. Just write your template as you normally
|
|
would, and Meteor will take care of making it update in realtime.
|
|
|
|
Meteor ships with a templating language called
|
|
[Spacebars](https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md),
|
|
inspired by [Handlebars](http://handlebarsjs.com/). It shares some of the
|
|
spirit and syntax of Handlebars, but it has been tailored to produce reactive
|
|
Meteor templates when compiled.
|
|
|
|
{{#note}}
|
|
Today, the only templating system that ships with Meteor is Spacebars, though
|
|
our community has created packages for other languages such as
|
|
[Jade](https://atmospherejs.com/package/jade).
|
|
{{/note}}
|
|
|
|
To define templates, create a file in your project with the `.html`
|
|
extension. In the file, make a `<template>` tag and give it a
|
|
`name` attribute. Put the template contents inside the tag. Meteor
|
|
will precompile the template, ship it down to the client, and make it
|
|
available as on the global `Template` object.
|
|
|
|
When your app is loaded, it automatically renders the special template called
|
|
`<body>`, which is written using the `<body>` element instead of a
|
|
`<template>`. You insert a template inside another template by using the
|
|
`{{dstache}}> inclusion}}` operator.
|
|
|
|
The easiest way to get data into templates is by defining helper
|
|
functions in JavaScript. Just add the helper functions directly on the
|
|
`Template.`*templateName* object. Putting it all together:
|
|
|
|
|
|
<!-- in myapp.html -->
|
|
<body>
|
|
<h1>Today's weather!</h1>
|
|
{{dstache}}> forecast}}
|
|
</body>
|
|
|
|
<template name="forecast">
|
|
<div>It'll be {{dstache}}prediction}} tonight</div>
|
|
{{lt}}/template>
|
|
|
|
// in client/myapp.js: reactive helper function
|
|
Template.forecast.prediction = function () {
|
|
return Session.get("weather");
|
|
};
|
|
|
|
// in the JavaScript console
|
|
> Session.set("weather", "cloudy");
|
|
> document.body.innerHTML
|
|
=> "<h1>Today's weather!</h1> <div>It'll be cloudy tonight</div>"
|
|
|
|
> Session.set("weather", "cool and dry");
|
|
> document.body.innerHTML
|
|
=> "<h1>Today's weather!</h1> <div>It'll be cool and dry tonight</div>"
|
|
|
|
|
|
To iterate over an array or database cursor, use `{{dstache}}#each}}`:
|
|
|
|
<!-- in myapp.html -->
|
|
<template name="players">
|
|
{{dstache}}#each topScorers}}
|
|
<div>{{dstache}}name}}</div>
|
|
{{dstache}}/each}}
|
|
{{lt}}/template>
|
|
|
|
// in myapp.js
|
|
Template.players.topScorers = function () {
|
|
return Users.find({score: {$gt: 100}}, {sort: {score: -1}});
|
|
};
|
|
|
|
In this case, the data is coming from a database query. When the
|
|
database cursor is passed to `{{dstache}}#each}}`, it will wire up all of the
|
|
machinery to efficiently add and move DOM nodes as new results enter
|
|
the query.
|
|
|
|
Helpers can take arguments, and they receive the current template context data
|
|
in `this`. Note that some block helpers change the current context (notably
|
|
`{{dstache}}#each}}` and `{{dstache}}#with}}`):
|
|
|
|
// in a JavaScript file
|
|
Template.players.leagueIs = function (league) {
|
|
return this.league === league;
|
|
};
|
|
|
|
<!-- in a HTML file -->
|
|
<template name="players">
|
|
{{dstache}}#each topScorers}}
|
|
{{dstache}}#if leagueIs "junior"}}
|
|
<div>Junior: {{dstache}}name}}</div>
|
|
{{dstache}}/if}}
|
|
{{dstache}}#if leagueIs "senior"}}
|
|
<div>Senior: {{dstache}}name}}</div>
|
|
{{dstache}}/if}}
|
|
{{dstache}}/each}}
|
|
{{lt}}/template>
|
|
|
|
Helpers can also be used to pass in constant data.
|
|
|
|
// Works fine with {{dstache}}#each sections}}
|
|
Template.report.sections = ["Situation", "Complication", "Resolution"];
|
|
|
|
Finally, you can use an `events` declaration on a template function to set up a
|
|
table of event handlers. The format is documented at [Event
|
|
Maps](#eventmaps). The `this` argument to the event handler will be
|
|
the data context of the element that triggered the event.
|
|
|
|
<!-- myapp.html -->
|
|
<template name="scores">
|
|
{{dstache}}#each player}}
|
|
{{dstache}}> playerScore}}
|
|
{{dstache}}/each}}
|
|
{{lt}}/template>
|
|
|
|
<template name="playerScore">
|
|
<div>{{dstache}}name}}: {{dstache}}score}}
|
|
<span class="givePoints">Give points</span>
|
|
</div>
|
|
{{lt}}/template>
|
|
|
|
<!-- myapp.js -->
|
|
Template.playerScore.events({
|
|
'click .givePoints': function () {
|
|
Users.update(this._id, {$inc: {score: 2}});
|
|
}
|
|
});
|
|
|
|
For more details about Spacebars, read [the Spacebars
|
|
README](https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md).
|
|
|
|
{{/markdown}}
|
|
</template>
|
|
|
|
<template name="packages_concept">
|
|
{{#markdown}}
|
|
|
|
<h2 id="usingpackages">Using packages</h2>
|
|
|
|
All of the functionality you've read about so far is implemented as
|
|
standard Meteor packages. This is possible thanks to Meteor's
|
|
unusually powerful package and build system. The same packages work in
|
|
the browser and on the server, and packages can contain plugins that
|
|
extend the build process, such as `coffeescript` ([CoffeeScript](http://coffeescript.org)
|
|
compilation) or `templating` (compiling HTML templates).
|
|
|
|
Anyone can publish a Meteor package, and thousands of community-written packages
|
|
have been published to date. The easiest way to browse these packages
|
|
is <a href="http://www.atmospherejs.com">Atmosphere</a>, by Percolate Studio. You can
|
|
also use [`meteor search`](#meteorsearch) and [`meteor show`](#meteorshow) commands.
|
|
|
|
You can add packages to your project with [`meteor add`](#meteoradd) and remove
|
|
them with [`meteor remove`](#meteorremove).
|
|
Additionally, [`meteor list`](#meteorlist) will tell you what
|
|
packages your project is using, and [`meteor update`](#meteorupdate)
|
|
will help keep them up to date.
|
|
|
|
By default all apps include the `standard-app-packages` package. This
|
|
automatically pulls in the packages that make up the core Meteor
|
|
stack. If you want to build your own custom stack, just remove
|
|
`standard-app-packages` from your app and add back in whichever of the standard
|
|
packages you want to keep.
|
|
|
|
Meteor uses a single-loading packaging system, meaning that it loads just one
|
|
version of every package. Before adding or upgrading to a particular version of
|
|
a package, Meteor uses a constraint solver to check if doing so will cause
|
|
other packages to break. By default, Meteor will choose conservatively. When
|
|
adding transitive dependencies (packages that other packages, but not the
|
|
application itself) depend on, Meteor will try to choose the earlier version.
|
|
|
|
In addition to the packages in the official Meteor release being used by your
|
|
app, `meteor list` and `meteor add` also search the `packages` directory at the
|
|
top of your app. You can also use the `packages` directory to break your app
|
|
into subpackages for your convenience, or to test packages that you might want
|
|
to publish. See [Writing Packages](#writingpackages).
|
|
|
|
{{/markdown}}
|
|
</template>
|
|
|
|
|
|
<template name="namespacing">
|
|
{{#markdown}}
|
|
|
|
<h2 id="namespacing">Namespacing</h2>
|
|
|
|
Meteor's namespacing support makes it easy to write large applications
|
|
in JavaScript. Each package that you use in your app exists in its own
|
|
separate namespace, meaning that it sees only its own global variables
|
|
and any variables provided by the packages that it specifically
|
|
uses. Here's how it works.
|
|
|
|
When you declare a top-level variable, you have a choice. You can make
|
|
the variable File Scope or Package Scope.
|
|
|
|
// File Scope. This variable will be visible only inside this
|
|
// one file. Other files in this app or package won't see it.
|
|
var alicePerson = {name: "alice"};
|
|
|
|
// Package Scope. This variable is visible to every file inside
|
|
// of this package or app. The difference is that 'var' is
|
|
// omitted.
|
|
bobPerson = {name: "bob"};
|
|
|
|
Notice that this is just the normal JavaScript syntax for declaring a
|
|
variable that is local or global. Meteor scans your source code for
|
|
global variable assignments and generates a wrapper that makes sure
|
|
that your globals don't escape their appropriate namespace.
|
|
|
|
In addition to File Scope and Package Scope, there are also
|
|
Exports. An export is a variable that a package makes available to you
|
|
when you use it. For example, the `email` package exports the `Email`
|
|
variable. If your app uses the `email` package (and _only_ if it uses
|
|
the `email` package!) then your app can see `Email` and you can call
|
|
`Email.send`. Most packages have only one export, but some packages
|
|
might have two or three (for example, a package that provides several
|
|
classes that work together).
|
|
|
|
You see only the exports of the packages that you use directly. If you
|
|
use package A, and package A uses package B, then you only see package
|
|
A's exports. Package B's exports don't "leak" into your namespace just
|
|
because you used package A. This keeps each namespace nice and
|
|
tidy. Each app or package only sees their own globals plus the APIs of
|
|
the packages that they specifically asked for.
|
|
|
|
When debugging your app, your browser's JavaScript console behaves as
|
|
if it were attached to your app's namespace. You see your app's
|
|
globals and the exports of the packages that your app uses
|
|
directly. You don't see the variables from inside those packages, and
|
|
you don't see the exports of your transitive dependencies (packages
|
|
that aren't used directly by your app, but that are used by packages
|
|
that are used by your app).
|
|
|
|
If you want to look inside packages from inside your in-browser
|
|
debugger, you've got two options:
|
|
|
|
* Set a breakpoint inside package code. While stopped on that
|
|
breakpoint, the console will be in the package's namespace. You'll
|
|
see the package's package-scope variables, imports, and also any
|
|
file-scope variables for the file you're stopped in.
|
|
|
|
* If a package `foo` is included in your app, regardless of whether
|
|
your app uses it directly, its exports are available in
|
|
`Package.foo`. For example, if the `email` package is loaded, then
|
|
you can access `Package.email.Email.send` even from namespaces that
|
|
don't use the `email` package directly.
|
|
|
|
When declaring functions, keep in mind that `function x () {}` is just
|
|
shorthard for `var x = function () {}` in JavaScript. Consider these
|
|
examples:
|
|
|
|
// This is the same as 'var x = function () ...'. So x() is
|
|
// file-scope and can be called only from within this one file.
|
|
function x () { ... }
|
|
|
|
// No 'var', so x() is package-scope and can be called from
|
|
// any file inside this app or package.
|
|
x = function () { ... }
|
|
|
|
{{#note}}
|
|
Technically speaking, globals in an app (as opposed to in a package)
|
|
are actually true globals. They can't be captured in a scope that is
|
|
private to the app code, because that would mean that they wouldn't be
|
|
visible in the console during debugging! This means that app globals
|
|
actually end up being visible in packages. That should never be a
|
|
problem for properly written package code (since the app globals will
|
|
still be properly shadowed by declarations in the packages). You
|
|
certainly shouldn't depend on this quirk, and in the future Meteor may
|
|
check for it and throw an error if you do.
|
|
{{/note}}
|
|
|
|
{{/markdown}}
|
|
</template>
|
|
|
|
|
|
<template name="deploying">
|
|
{{#markdown}}
|
|
|
|
<h2 id="deploying">Deploying</h2>
|
|
|
|
Meteor is a full application server. We include everything you need
|
|
to deploy your application on the internet: you just provide the JavaScript,
|
|
HTML, and CSS.
|
|
|
|
<h3 class="nosection">Running on Meteor's infrastructure</h3>
|
|
|
|
The easiest way to deploy your application is to use `meteor
|
|
deploy`. We provide it because it's what, personally, we've always
|
|
wanted: an easy way to take an app idea, flesh it out over a weekend,
|
|
and put it out there for the world to use, with nothing getting in the
|
|
way of creativity.
|
|
|
|
$ meteor deploy myapp.meteor.com
|
|
|
|
Your application is now available at myapp.meteor.com. If
|
|
this is the first time deploying to this hostname, Meteor creates a
|
|
fresh empty database for your application. If you want to deploy an
|
|
update, Meteor will preserve the existing data and just refresh the
|
|
code.
|
|
|
|
You can also deploy to your own domain. Just set up the hostname you
|
|
want to use as a CNAME to `origin.meteor.com`, then deploy to that name.
|
|
|
|
$ meteor deploy www.myapp.com
|
|
|
|
We provide this as a free service so you can try Meteor. It is also
|
|
helpful for quickly putting up internal betas, demos, and so on. For
|
|
more information, see [meteor deploy](#meteordeploy).
|
|
|
|
<h3 class="nosection">Running on your own infrastructure</h3>
|
|
|
|
You can also run your application on your own infrastructure, or any
|
|
other hosting provider like Heroku.
|
|
|
|
To get started, run
|
|
|
|
$ meteor bundle myapp.tgz
|
|
|
|
This command will generate a fully-contained Node.js application in the form of
|
|
a tarball. To run this application, you need to provide Node.js 0.10 and a
|
|
MongoDB server. (The current release of Meteor has been tested with Node
|
|
0.10.29; older versions contain a serious bug that can cause production servers
|
|
to stall.) You can then run the application by invoking node, specifying the
|
|
HTTP port for the application to listen on, and the MongoDB endpoint. If
|
|
you don't already have a MongoDB server, we can recommend our friends at
|
|
[MongoHQ](http://mongohq.com).
|
|
|
|
$ cd bundle
|
|
$ (cd programs/server && npm install)
|
|
$ PORT=3000 MONGO_URL=mongodb://localhost:27017/myapp node main.js
|
|
|
|
Other packages may require other environment variables (for example, the `email`
|
|
package requires a `MAIL_URL` environment variable).
|
|
|
|
{{/markdown}}
|
|
</template>
|
|
|
|
|
|
<template name="packages_writing">
|
|
{{#markdown}}
|
|
|
|
<h2 id="writingpackages">Writing packages</h2>
|
|
|
|
Writing Meteor packages is easy. To initialize a meteor package, run
|
|
`meteor create --package username:packagename`, where `username` is your Meteor
|
|
Developer username. This will create a package from scratch and prefill the
|
|
directory with a package.js control file and some javascript. By default, Meteor
|
|
will take the package name from the name of the directory that contains the
|
|
package.js file.
|
|
|
|
Meteor promises repeatable builds for both packages and applications. This means
|
|
that, if you built your package on a machine, then checked the code into a
|
|
repository and checked it out elsewhere, you should get the same result. In your
|
|
package directory, you will find an automatically generated versions.json
|
|
file. This file specifies the versions of all packages used to build your
|
|
package and is part of the source. Check it into version control to ensure
|
|
repeatable builds across machines.
|
|
|
|
{{#note}}
|
|
|
|
Sometimes, packages do not just stand on their own, but function in the context
|
|
of an app (specifically, packages in the packages directory of an app). In that
|
|
case, the app's context will take precedence. Rather than using the
|
|
versions.json file as a guide, we will build the package with the same
|
|
dependencies as used by the app (we think that, in practice, it would be
|
|
confusing to find your local packages built with different versions of
|
|
things). However, we will still write the new versions.json file.
|
|
|
|
{{/note}}
|
|
|
|
You can read more about [`package.js`](#packagejs) files in the API
|
|
section.
|
|
|
|
A word on testing: since testing is an important part of the development process,
|
|
there are two common ways to test a package:
|
|
|
|
* Integration tests (putting a package directly into an application, and writing
|
|
tests against the application) is the most common way to test a package. After
|
|
creating your package, add it to your app's /packages directory and run `meteor
|
|
add`. This will add your package to your app as a local package. You can then
|
|
test and run your app as usual. Meteor will detect and respond to changes to
|
|
your local package, just as it does to your app files.
|
|
|
|
* Unit tests are run with the command [`meteor test-packages
|
|
package-name`](#meteortestpackages). As described in the [`package.js`](#packagejs)
|
|
section, you can use the `package.js` file to specify where your unit tests are
|
|
located. If you have a repository that contains only the package source, you can
|
|
test your package by specifying the path to the package directory (which must
|
|
contain a slash), such as `meteor test-packages ./`.
|
|
|
|
To publish a package, run [`meteor publish`](#meteorpublish) from the package
|
|
directory. There are some extra restrictions on published packages: they must
|
|
contain a version (Meteor packages are versioned using
|
|
strict <a href="http://www.semver.org">semver</a> versioning) and their names
|
|
must be prefixed with the username of the author and a colon, like so:
|
|
`iron:router`. This namespacing allows for more descriptive and on-topic package
|
|
names.
|
|
|
|
{{/markdown}}
|
|
</template>
|