##What is it?
-
####Meteor is MAGIC!!!
-
Meteor is an open source Javascript framework, written on top Node.js.
-
Meteor also comes with a useful command line tool.
-
Unlike other frameworks, Meteor has both client AND server side Javascript with built-in hosting capabilities.
-
Most of all, building sites with Meteor is fast and your code will be short!
##Core Features
The Seven Principles of Meteor
####One Language
Until now, we've built apps using javascript and a rails (or firebase) backend. Meteor allows you to write both client and server-side javascript in one app, with a file tree similar to Rails. More on this file system later...
####Full Stack Reactivity
Meteor uses .events for click events and .rendered for template events
It has built-in templating capability using mustachejs
In Meteor, you don't program routines and functions, you program page elements. It is very component-oriented, in that just instruct Meteor how something should work, and it will take care of updating the page in realtime.1
####Latency Compensation
When the user sends some information to the database, Meteor will update the browser in realtime, without waiting for the database to confirm and send that update to the browser. Without this latency compensation, the user may experience a slower response when interacting with the site.
####Packages You can think of these as the equivalent of Ruby Gems for Meteor
Add packages using $ meteor add <package_name> in the command line (and remove them using $ meteor remove <package_name>)
Examples:
- user accounts: instant user authentication, including optional 2-step email verification
- email: provides send email functionality in your app
- random: provides functionality to generate types of random numbers, including random.id([n]) and random.secret([n])
- bootstrap, coffeescript, d3, jQuery, less, force-ssl
User-designed Packages
Meteor also supports third-party packages. These are not part of the Meteor Core but are just as easily installed. Browse these packages on Atmosphere
Instead of $ meteor add <package_name>, run these commands:
- Add Meteorite to your app:
npm install -g meteorite - Add your package:
mrt add <package_name>
Examples:
- iron-router: client and server-side routing specifically for Meteor*
- fast-render: improves the initial load time of your app and gives you 2-10 times faster page loads
Local Smart Packages
You could separate each feature of your app into packages. And it's pretty simple! Check out these instructions
##Getting started
-
Run :
$ curl https://install.meteor.com | /bin/sh, which installs a MongoDB database, a development server, and a command line program for creating and deploying your app. (Note: you only have to install this on your machine once) -
Create a project:
$ meteor create <your_app_name> -
Cd into your app and run it locally:
$ meteorand you will see:Meteor server running on: http://localhost:3000/, so check it out in your browser -
Deploy to meteor's free servers:
$ meteor deploy <your_app_name>.meteor.com
#####A note about JS console Keep in mind that the eqivalent of rails c is now in your browser, so you can play with information from your database there.
#####Organization (aka: where do I put my code?)2 At first, you could just have three files: a .js file, a .css file, and a .html file. Once things get a bit more complicated, you might structure your code like this:
lib/ # <- any common code for client/server.
lib/environment.js # <- general configuration
lib/methods.js # <- Meteor.method definitions
lib/external # <- common code from someone else
**Note that js files in lib folders are loaded before other js files.
collections/ # <- definitions of collections and methods on them (could be models/)
client/lib # <- client specific libraries (also loaded first)
client/lib/environment.js # <- configuration of any client side packages
client/lib/helpers # <- any helpers (handlebars or otherwise) that are used often in view files
client/application.js # <- subscriptions, basic Meteor.startup code.
client/index.html # <- toplevel html
client/index.js # <- and its JS
client/views/<page>.html # <- the templates specific to a single page
client/views/<page>.js # <- and the JS to hook it up
client/views/<type>/ # <- if you find you have a lot of views of the same object type
client/stylesheets/ # <- css / styl / less files
server/publications.js # <- Meteor.publish definitions
server/lib/environment.js # <- configuration of server side packages
public/ # <- static files, such as images, that are served directly.
tests/ # <- unit test files (won't be loaded on client or server)
#####Code Re-use:
Since the entire app is built in Javascript, you can write a function once and use it on both the client and server-sides. To separate them out, you can use: Meteor.isServer and Meteor.isClient, like this:
// This function is available on both the client and the server.
var greet = function(name) {
console.log("Hi. I'm " + name);
}
// Everything in here is only run on the server.
if(Meteor.isServer) {
greet("SERVER");
}
// Everything in here is only run on the client.
if(Meteor.isClient) {
greet("CLIENT");
}
##Example Exercises
##Fun Things to Try
- Push your Meteor project to Heroku
- Build your own Meteor Packages using Atmosphere
- Check out the Meteor Roadmap Trello Board
- Contribute to Meteor -- it's open source, afterall
##Meteor In The Wild
- Check out the Meteor Gallery, Made With Meteor and this list
- Here is a sample word game app built from the Meteor Examples
##Advanced Topics
- Fibers: meteor abstracts Fibers with its APIs, allowing you to write your app without callbacks.
- Permissions: autopublish and insecure
- Iron-Router Filters, Before and After Hooks
##Resources
- Meteor Docs
- Meteor Resources
- More Resources
- Meteor Best Practices
- Unofficial Meteor FAQ
- Meteor on Stack Overflow