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

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

Part Two

Key features

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

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

**Meteor Account Managment**

- faceBook package

- loginPassword basic package

- gitHub Package

**Deploy/Delete Application**

- meteor deploy myapp.meteor.com (remember http://vocabulary.meteor.com/)

- With settings -> meteor deploy myapp.meteor.com --settings ---

 

****delete app****

- meteor deploy myapp.meteor.com --delete

**test examples:**

http://cmstest.meteor.com/ - user:admin, pass:maxim

- http://vocabulary.meteor.com/

THE END

 

 

 

 

 

 

 

 

Prepared by Maxim Shturmin

Meteor Js 0.8.0 Presentation

By maximshturmin

Meteor Js 0.8.0 Presentation

  • 756
Loading comments...