Meteor wraps

• Blaze
• WebSocket
• NodeJS
• MongoDb

Server publishes (LiveQuery)

MongoDb

DDP

Client subscribes

Mini mongo

Quick start

~ : meteor create myapp
~ : cd myapp
~ : meteor

...

~ : mkdir server
~ : mkdir lib
~ : mkdir client

• server : code executed only on server side
• client : code executed only on client side
• lib : code executed on both sides (optimistic ui)

Code in lib

// Create a collection
Categories = new Mongo.Collection("Categories");


// Create Methods (can be executed on both side)
Meteor.methods({
  createCategory(category) {
    return Categories.insert(category);
  },
  updateCategoryImage(categoryId, fileId) {
    Categories.update({ _id: categoryId }, { $set: { file: fileId } });
  },
  updateCategory(categoryId, name) {
    Categories.update({ _id: categoryId }, { $set: { name } });
  },
});

Code in server

// Publish collection
Meteor.publish('categories', function categoriesPublication() {
    return Categories.find();
});

HTML in client (Blaze)

<template name="Home">
    <ul>
        {{#each categories}}
        <li>{{name}}</li>
        {{/each}}
    </ul>

    {{>CreateCategory}}
</template>

<template name="CreateCategory">
 <form>
    <label for="name">Nom de la catégorie</label>
    <input type="text" class="form-control" id="name" placeholder="Name" required>
    <button type="submit" class="btn btn-success">Create</button>
 </form>
</template>

JS in client (Blaze)

Template.Home.created = function templateHomeCreated() {
 	 	this.subscribe('categories');
};


Template.Home.helpers({
	categories() {
		return Categories.find();
	},	
})

Template.CreateCategory.events({
    'submit form' : (event) => {
                event.preventDefault()
		const category = {
			name : event.target.name.value,
		}
		Meteor.call('createCategory', category, (error, result) => {
			if(error){ alert(error); }
                })
                return false;
});

Meteor packages

meteor add mymodule

npm integration

meteorhacks:npm

meteor npm install --save moment

es6 modules

import { Meteor } from 'meteor/meteor';

React

Meteor

Our plans around the view layer are to maintain strong integrations (along with guidance) with React, Angular and Blaze. We'll make essential fixes to Blaze but most likely won't be adding new features ourselves.

Tests

• Mocha (runner) + Chai (asserts)
• Factory + StubCollections (mock database)
• Chimp (acceptance tests)

Application Structure

imports/
  startup/
    client/
      index.js                 # import client startup through a single index entry point
    server/
      index.js                 # import server startup through a single index entry point

  api/
    categories/                     # a unit of domain logic
      server/
        publications.js        # all list-related publications
      categories.js                 # definition of the Lists collection
      methods.js               # methods related to lists

  ui/
    components/                # all reusable components in the application
                               # can be split by domain if there are many
    layouts/                   # wrapper components for behaviour and visuals
    pages/                     # entry points for rendering used by the router

client/
  main.js                      # client entry point, imports all client code

server/
  main.js                      # server entry point, imports all server code

Publication

import '/imports/startup/server';

server/main.js

import/startup/server/index.js

import './register-api.js';

import/startup/server/register-api.js

import '../../api/categories/server/publications.js';
import '../../api/categories/methods.js';

import/api/categories/server/publications.js

import { Meteor } from 'meteor/meteor';
import { Conversations } from '../categories.js';

// Publish collection
Meteor.publish('categories', function categoriesPublication() {
    return Categories.find();
});

Collection

import/api/categories/categories.js

import { Mongo } from 'meteor/mongo';

class ConversationsCollection extends Mongo.Collection {
   
    insert(doc, callback) {
         const ourDoc = doc;
         ourDoc.creationDate = ourDoc.creationDate || new Date();
         const result = super.insert(ourDoc, callback);
         return result;
    }

    update(selector, modifier) {
         ...
    }

    remove(selector) {
         ...
    } 
}


export const Conversations = new ConversationsCollection('Conversations');

Client

client/main.js

import '/imports/startup/client';

import/client/startup/index.js

import './routes.js';

import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';
import { AccountsTemplates } from 'meteor/useraccounts:core';

// import layouts
import '../../ui/layouts/layout.js';
// import pages
import '../../ui/pages/home.js';

FlowRouter.route('/', {
  action: () => {
    BlazeLayout.render('Layout', {
      main: 'Home',
    });
  },
  name: 'home',
});

import/client/startup/routes.js