Part One

What is MeteorJS?

Package System, Meteorite

  • Current packages
    • bootstrap
    • jquery
    • backbone
    • underscore, less, coffescript, etc
  • Atmosphere, Meteorite, will be in box in Meteor version 1.0

Meteor architecture

Project Folders

  • Server, Client, Public, Privat, lib
  • Variable Scopes
  • Meteor Code Gathering Behavior


  • Gathering all CSS files to one (Files are separated during dev)
  • Search for HTML files
  • Implement separately tags HEAD and BODY
  • create javascript Code from TEMPLATE tags. init Template Variables from "name" attribute
  • Don`t check Public and Privat folders
  • Privat folder for server assets, server libs
  • Public folder for client files (images, front-end libs, etc.)

Project from the BOX

just few seconds to start

MeteorJs - reach API for data manipulation

Server - Node.js

DataBase - MongoDB and MiniMongo

MiniMongo - Meteor's client-side Mongo emulator
  • Document(Object) Based DB
  • "High performance, high availability, and easy scalability" (c).

Templater - HandleBars("SpaceBars")

Part Two

Key features


  • Send data to all connected users and ReRender templates
  • Establish Connection -> subscribe -> transfer data over DDP
  • Websockets. IE8 -> XHR

Automatic Redraw Templates

  • publish/subscribe, autopublisher

Simple API - Handlebars

{{variable}} // variable or object property
// Array of Objects 
{{#each doc}} //"docname" is a property of each object in "doc" Array
// if else  statement
{{#if userLoggedIn}}  
     {{> indexhtml}}
        {{> loginMenu}}
< body>
  {{> menu}} // template name
< /body

Template JS basics = function(){
    return [
} = function(){
    return Session.get('curname');
} = {
    'click .node-class' : function() {
        // do something

Quick work with DB

// insert data to DB
documents = new Meteor.Collection('documents');
documents.insert({ name:'default', content: 'empty' });

// update entry in DB
documents.update({'_id':currentID}, {$set: {name: 'myDocument'}});

documents.update({'_id':currentID}, {$set: {content: '<h1>Hello!</h1>'}});

//find collection

Part Three

Meteor install, create first APP

  • Download and install Meteor(link at forst slide)

  • Open command panel, go to project folder, Use "meteor create"

  • Creating base folders, files , app structure

Create HTML templates

  • homepage.html in homepage module

  • menu.html in menu module

<template name="homepage">
    // write homepage markup

<template name="menu">
    // write menu module html markup

Add "menu" template html code to "homepage" template

<template name="homepage">
    // here homepage index markup
    // .....
    // now we add MENU template to index template
    {{> menu}}

Create index.html in "Client" folder and add there our "Homepage" html template

< body>
    {{> homepage}}
< /body>

Yes, we add our template in BODY tag. We don`t need to add any html base tags like DOCUMENT, head, footer, etc.

We will come back to templates later.

Js files ctructure

  • create homepage.js in "homepage" folder

  • create menu.js in "menu" folder

  • create server.js in "Server" folder

Look at the picture and let`s Go to the "server"

Meteor API and MongoDB API basic

  • Meteor.startup()

  • Meteor.methods()

  • Meteor.Collection

    • collection.insert

    • collection.update

    • collection.find

    • collection.findOne

  • Meteor.Session

Open server.js file

Meteor.startup(function (){
    documents = new Meteor.Collection('documents');
    var fs = Npm.require('fs');

    //init Meteor methods here
        delAllData:function () {
           //here we remove all data from documents collection
        insertNewDoc:function(docName, clientId, websiteID){
            // here we add new enrty to DB
                   'clientId': clientId,
                   'websiteId': websiteID,
                   'docText':'document is empty'

Open menu.js file

menuItems = new Meteor.Collection('menuItems') = function() {
    return menuItems.find({});
} = {
    'click a' : function(e) {
        // do something on click
    'mouseenter a' : function(e) {
        //do something

Open menu.html file

<template name="menu">
    {{#each items}}
        <a href="{{link}}" target="_blank">{{title}}

Now each link have Binded "click and mouseenter" events. And we will se on page all links from DB Collection

**Meteor Account Managment**

- faceBook package

- loginPassword basic package

- gitHub Package

**Deploy/Delete Application**

- meteor deploy (remember

- With settings -> meteor deploy --settings ---


****delete app****

- meteor deploy --delete

**test examples:** - user:admin, pass:maxim











Prepared by Maxim Shturmin

Meteor Js 0.8.0 Presentation

By maximshturmin

Meteor Js 0.8.0 Presentation

  • 756
Loading comments...