Meteor Tutorial

About

The purpose of this course is to teach you how to build awesome web applications with lightning speed.

This course, like most programming courses, takes an incremental approach to teaching Meteor. Firstly, there will be a quick and easy overview of Meteor. The purpose is to help people decide whether they want to continue learning the skill of creating Meteor apps.

In the first chapter I'll create an app that takes you through the basics of Meteor: templates, collections, reactivity, session etc. I take it easy so newcomers don't miss anything - the more experienced developers should be able to breeze through.

Free Sample: Meteor Overview

Meteor from above

Before jumping into coding an application, let's look at Meteor from a high level. How does Meteor work? Where does it fit in compared to other frameworks?

Meteor has it's fingers in a lot of the stack pie.

The Seven Principles

Meteor provides seven principles it abides by, which I'll copy out here:

  • Data on the Wire. Meteor doesn't send HTML over the network. The server sends data and lets the client render it.

  • One Language. Meteor lets you write both the client and the server parts of your application in JavaScript.

  • Database Everywhere. You can use the same methods to access your database from the client or the server.

  • Latency Compensation. On the client, Meteor prefetches data and simulates models to make it look like server method calls return instantly.

  • Full Stack Reactivity. In Meteor, realtime is the default. All layers, from database to template, update themselves automatically when necessary.

  • Embrace the Ecosystem. Meteor is open source and integrates with existing open source tools and frameworks.

  • Simplicity Equals Productivity. The best way to make something seem simple is to have it actually be simple. Meteor's main functionality has clean, classically beautiful APIs.

Javascript Everywhere

Meteor prides itself on allowing developers to write both their front end and back end code in one language: Javascript.

Folder names matter to Meteor. Anything you put in a folder called 'server' will only be run on the server. And anything in a 'client' folder will be run on the client. Code in other folders, such as 'lib', are run on both (yes you will be writing code that is run on both - defining your data collections, for example).

You are not limited to folder naming; even in files outside of these 'server' and 'client' folders, you can simply write:

if(Meteor.isClient){
  // do client stuff
}

// OR

if(Meteor.isServer){
  // do server stuff
}

Preprocessing and Minification

You can just write Javascript/CSS files and don't even have to include them in the head of your page - Meteor rounds them all up, minifies them and puts them in your app for you.

Like coding in Coffeescript or Sass? Well Meteor has a package manager - kind of like Ruby Gems or Sublime Text packages. You can type meteor add coffeescript in the terminal and suddenly you can write all your Javascript in Coffeescript - it just works.

At this time in writing there are over 4000 packages available. Note that a lot of them are likely untested or plain unuseful - but you will soon acquire a list of must-have packages. I'll be introducing you to the ones I use along the way.

Collections and Templating

Meteor's collections are wrappers for your data and stay almost perfectly in sync with the server. Change your data on the server and you'll see it change in your browser!

Meteor has it's own templating system called Spacebars. It's basically Handlebars, but built to minimize DOM manipulations to keep things speedy (kind of like Facebook's React).

No need to worry about compiling the templates. Just create html files and code away - Meteor collects them up just like it does with your Javascript and CSS - it just works straight off the bat. Getting excited yet?

Data syncing

What Meteor is especially good at is keeping data in sync between server and all of it's clients (good for chat rooms):

Client and Server communicate well in Meteor.

As the diagram shows, Meteor uses websockets coupled with a protocol called DDP (distributed data protocol). This replaces the traditional HTTP protocol.

Think of client and server like husband and wife. With traditional HTTP fights would emerge because client did all the talking and server kept forgetting what the conversation was about. Server also withheld certain information - like not telling when the database has been updated by someone else.

Luckily they went to therapy, which allowed them to now use websockets with DDP. From then on client and server got along like a house on fire - they tell each other everything.

Two Databases

In Meteor we have Mongo and Minimongo. Mongo is on the server and is a true representation of the data. Whereas Minimongo is a Javascript library sitting on the client pretending to be a database. Minimongo usually only has a subset of the data from Mongo (unless you decide to publish all the data in a collection to the client), but whatever data you publish will keep very nicely in sync with Mongo's version. It does this by communicating any data changes using the DDP messages I mentioned above.

How data is synchronised in Meteor.

In the next chapter we'll start building a Meteor application. Onwards!