Meteor architecture

Project Folders

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

Autogatherer

• 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")

• Just Another Cool Templater
• based on Mustache(Mustache templating language) Syntax http://mustache.github.io/mustache.5.html
• You can Try fast -> http://tryhandlebarsjs.com/

AutoPublish

• 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

---

• Let`s try together http://vocabulary.meteor.com

Simple API - Handlebars

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

Template JS basics

Temlplate.menu.menuitems = function(){
    return [
        {link:'#1',title:'firstlink'},
        {link:'#2',title:'secondlink'}
        ];
}

Temlplate.menu.currentName = function(){
    return Session.get('curname');
}
Temlplate.menu.events = {
    'click .node-class' : function() {
        // do something
        Session.set('curname','Maxim');
    }
}

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
documents.find({'name':'Maxim'});

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>

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

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

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

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
    Meteor.methods({
        delAllData:function () {
           //here we remove all data from documents collection
                documents.remove({});
            },
        insertNewDoc:function(docName, clientId, websiteID){
            // here we add new enrty to DB
                documents.insert({
                   'docName':docName,
                   'clientId': clientId,
                   'websiteId': websiteID,
                   'docText':'document is empty'
                });
            }
    })
});

Open menu.js file

menuItems = new Meteor.Collection('menuItems')

Template.menu.items = function() {
    return menuItems.find({});
}
Template.menu.events = {
    '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}}
    {{/each}}
</template>

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