Reactive Application Using METEOR

Reactive web
application using
Meteor
By Sapna Upreti @sapna0214

About Me
A Full Stack Developer @NodeXperts
Speaker at MeteorNoida and JsFusion

What’s inside?
Start
Meteor? Working Structure Templating
Engine
Publications/
Subscription
MethodUnit TestsBest PracticesDeployment
Maintenance Stop

What is Meteor?
Reactivity Isomorphic Hybrid Apps+ +

Reactivity
Change in data source → clients connected to the
Meteor server → gets updated automatically without
refresh.

Reactivity
Client
Listeners
Database
Pushes/Publishes data
Subscribes
Listens the changes
Pushed data
Data Listeners

Conventional Approach
a b c=+
4 6 10
Value Update 3 3 10
1st Call
c would still be 10 - until the code was called again.

Reactive Approach
a b c=+
4 6 10
Value Update 3 3 6
1st Call
c would become 6 automatically

Isomorphic?
Javascript Everywhere.
(Application logic that runs on both
server and client)

Conventional Systems
API
JavaScript
Client
Ruby, Python, Java, php
Server

Meteor’s System
API
JavaScript
Client
JavaScript Server
Your App

What is inside Meteor?
Command Line Tool
Server
Communication layer
Isobuild- for installing
packages via:
● Atmosphere
● NPM
● Cordova plugins
● Node.js
● Connect
● Database Driver
(Mongo)
● Livequery
● Fibers/Futures
● DDP
(Distributed
Data Protocol)
● EJSON

What is inside Meteor?
Browser
Cordova
The Packages
● Tracker
● Spacebars
● Blaze
● Minimongo
● Session
The Cordova interface is
just built upon the same
libraries as the browser,
listed on the left.
Reusable piece of
code.
It has few core
packages.

Reactivity in Meteor
Meteor's reactivity system uses
functions.
By passing a function to
Tracker.autorun we can
rerun that function any time
one of its reactive data sources
changes.
Posts.find();
Reactive data source
Ordinary function
let posts = function() {
Return Posts.find();
};
Function upgrader
Tracker.autorun(posts);
Posts
The posts function will re-run
itself every time Posts.find()
returns a different value.

DDP (Distributed Data Protocol)
● client-server protocol for querying
and updating a server-side database
● publish-subscribe messaging pattern

DDP Example
User
Posts
DDP Client DDP Server
Subscribes Posts
Post 1 Added
Post 2 Added
Post n Added

DDP Example
Post Added by user method call
Response (post data)
Updated
User Post
DDP Client
DDP Server

Minimongo
● reimplementation of
(almost) the entire
MongoDB API
● copy of MongoDB that
runs inside your web
browserMongoDB
Minimongo
Changes
Event

Minimongo cont...
View
( e.g. Blaze, Angular,
React )
Client Cache
( Minimongo )
Client Cache
( MongoDB )
Method Call
Network
latency
Data for
Client-Side
Cache
Data for
View
User input
event
Client-Side temporary
Optimistic update
Server-side persistent database operation

Architecture
ATMOSPHERE
NPM
METEOR
CLIENT
METEOR
CLIENT
NODE JS
RUNTIME
Spacebars
JavaScript
Mini Mongo
JavaScript
MongoDB
MongoDBLocal Storage

Advantages
Reactive
Data
Advantages
Single
Language
Large
community
Scalable
Scalable
Mobile
+
Web Apps

Disadvantages
Disadvantages
Ships all
templates, CSS,
JS
to Client
No need to
be real-time
REST-API
Only
Re-write server
code in JS

Let’s Code Now!
Enough Talking...Let’s get our hands dirty in
Meteor

What you need?
Meteor
Linux: curl https://install.meteor.com/ | sh
Windows: https://install.meteor.com/windows
GitHub Repo
https://github.com/sapna92/post-app

What we are going to make?
● A user posting application, where you can view
and like the user’s post.
● You can observe the reactivity through like
counts.

Road to our App
Step 1- Directory Structure
Step 2- Templates
Step 3- Routes
Step 4- Schemas/Collections
Step 5- Forms and Events
Step 6- Methods and Method call
Step 7- Subscription/Publication
Step 8- Update/Remove
Step 9- Unit Test Cases (TDD)
Step 10- Deployment
Step 11- Maintenance
Step 12- Mobile app build

Create Project
Create a Meteor Project
meteor create project_name

Load Order
nav.html
main.html
client/lib/methods.js
lib/feature/styles.js
client/feature-y.js
client/main.js
HTML template ﬁles
Files inside any lib/directory
Files with deeper paths
Loaded in alphabetical order
Files beginning with main

Templates
Parses HTML 5 with top three level tags
<head> tag is added to the head
section
<template> tags → compiled→
Meteor templates → included inside
HTML with {{> templateName}}→
normal HTML tags
<body> tag is added to body section
Compiled using Spacebars compiler
Spacebars syntax {{#if}} or {{#each}}

Templates
Add the following code to client/head.html
<head>
<title>appName</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello" >
<h1>Meteor is great for Rapid Application
Development</h1>
</template>

Meteor Build Process
Parse html ﬁle Template. main. jshead. html
Insert into the
Actual DOM
Render templates &
generate a DOM Range
Register body
And templates
When bundling your app
On screen
Load into client

User Accounts
Add the following packages by using the following commands:
meteor add accounts-ui
meteor add accounts-password
meteor add useraccounts:materialize
meteor add materialize:materialize
meteor add meteorstuff:materialize-modal

Routes
Add packages FlowRouter and useraccounts:ﬂow-routing by
using the following commands:
meteor add kadira:flow-router
meteor add useraccounts:flow-routing
meteor add arillo:flow-router-helpers

Routes cont.
Add below code to imports/startup/client/routes.js
import { Meteor } from 'meteor/meteor';
import { FlowRouter } from
'meteor/kadira:flow-router';
import { BlazeLayout } from
'meteor/kadira:blaze-layout';
import { AccountsTemplates } from
'meteor/useraccounts:core';

Routes cont.
Add below code to imports/startup/client/routes.js continue...
// Import needed templates
import '../../ui/layouts/masterLayout.js';
import '../../ui/layouts/nav.js';
import '../../ui/layouts/loading.html';
import '../../ui/layouts/footer.html';
import '../../ui/pages/home/home.js';
import '../../ui/pages/post/post.js';
import '../../ui/pages/post/add.js';
import '../../ui/layouts/not-found.js';

Routes cont.
FlowRouter.route('/', {
name: 'home',
triggersEnter: [function (context, redirect) {
if (Meteor.userId()) {
redirect('/posts');
}
}],
action(params, queryParams) {
BlazeLayout.render('masterLayout', {
main: 'home',
});
},
});

Routes cont.
FlowRouter.route('/posts', {
name: 'post',
subscriptions(params) {
},
if (!Meteor.userId()) {
redirect('/');
}
}],
footer: 'footer',
main: 'post',
nav: 'nav',
});
},
});

Routes cont.
FlowRouter.route('/add-posts', {
name: 'addPost',
},
redirect('/');
}
}],
footer: 'footer',
main: 'addPost',
nav: 'nav',
});
},
});

Routes cont.
FlowRouter.notFound = {
action() {
footer: 'footer',
main: 'pageNotFound',
nav: 'nav',
});
},
};
FlowRouter.route('/dashboard', {
nav: 'header',
main: 'dashboard',
});
},
});

Routes cont.
AccountsTemplates.configure({
defaultLayout: 'masterLayout',
defaultLayoutRegions: {
nav: 'nav',
footer: 'footer',
},
defaultContentRegion: 'main',
showForgotPasswordLink: true,
overrideLoginErrors: true,
enablePasswordChange: true,
negativeValidation: true,
positiveValidation: true,
negativeFeedback: false,
positiveFeedback: true,
});
AccountsTemplates.configureRoute('changePwd');
AccountsTemplates.configureRoute('forgotPwd');
AccountsTemplates.configureRoute('resetPwd');
AccountsTemplates.configureRoute('signIn');
AccountsTemplates.configureRoute('signUp');
AccountsTemplates.configureRoute('verifyEmail');

Create Pages
Add below code to imports/ui/layouts/masterLayout.html
<template name="masterLayout">
<div id="wrapper">
{{#if currentUser}}
{{> Template.dynamic template=nav}}
{{/if}}
<main id="main">
{{> Template.dynamic template=main}}
</main>
{{#if currentUser}}
{{> Template.dynamic template=footer}}
{{/if}}
</div>
</template>

Create Pages
Add below code to imports/ui/layouts/masterLayout.js
import './masterLayout.html';
Add below code to imports/ui/layouts/loading.html
<template name="loading">
</template>

Create Pages
Add below code to imports/ui/layouts/footer.html
<template name="footer">
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">
© 2017 NodeXperts
<a class="grey-text text-lighten-4 right"
href="http://www.nodexperts.com">NodeXperts</a>
</div>
</div>
</footer>
</template>

Create Pages
Add below code to imports/ui/layouts/nav.html
<template name="nav">
<nav>
<div class="">
<div class="nav-wrapper">
<ul id="nav-mobile" class="right side-nav">
<li class="{{isActiveRoute regex='post'}}"><a
href="/posts">Posts</a></li>
<li class="{{isActiveRoute regex='addPost'}}"><a
href="/add-posts">Add Post</a></li>
<li>{{> atNavButton }}</li>
</ul>
<a class="button-collapse show-on-large" href="#"
data-activates="nav-mobile"><i
class="material-icons">menu</i></a>
</div>
</div>
</nav>
</template>

Create Pages
Add below code to imports/ui/layouts/nav.js
import { Template } from 'meteor/templating';
import { $ } from 'meteor/jquery';
import './nav.html';
Template.nav.rendered = function () {
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: true, // Closes side-nav on <a> clicks,
useful for Angular/Meteor
draggable: true, // Choose whether you can drag to open on
touch screens
},
);
};

Create Pages
Add below code to imports/ui/layouts/not-found.html
<template name="pageNotFound">
<div id="not-found">
<div class="not-found-image">
<img src="/img/404.svg" alt="" />
</div>
<div class="not-found-title">
<h1>Sorry, that page doesn't exist</h1>
<a href="/" class="gotohomepage">Go to home</a>
</div>
</div>
</template>
Add below code to imports/ui/layouts/not-found.js
import './not-found.html';

Create Pages
Add below code to imports/ui/pages/home/home.html
<template name="home">
<div class="container">
<div class="row center">
<a href="/sign-in" class="btn-large waves-effect
waves-light">Log in</a>
</div>
<div class="row center">
<a href="/sign-up" class="btn-large waves-effect
waves-light">Sign Up</a>
</div>
</div>
</template>
Add below code to imports/ui/pages/home/home.js
import './home.html';

Create Pages
Add a blank html ﬁle imports/ui/pages/post/post.html
Add below code to imports/ui/pages/post/post.js
import './post.html';
Add a blank html ﬁle imports/ui/pages/post/add.html
Add below code to imports/ui/pages/post/add.js
import './add.html';

Schemas & Collections
Add packages for deﬁning database schemas and collections
by using the following commands:
meteor add aldeed:simple-schema
meteor add aldeed:collection2

Add below code to imports/api/posts/posts.js
import { Mongo } from 'meteor/mongo';
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
const postSchema = new SimpleSchema({
title: {
type: String,
},
description: {
type: String,
},
author: {
type: String,
},
likes: {
type: Number,
},

Add below code to imports/api/posts/posts.js continue..
createdAt: {
type: Date,
optional: true,
},
users: {
type: [String],
optional: true,
},
});
const Posts = new Mongo.Collection('posts');
Posts.attachSchema(postSchema);
export default Posts;

Add below code to imports/api/users/users.js
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
const userSchema = new SimpleSchema({
emails: {
type: [Object],
},
'emails.$.address': {
type: String,
regEx: SimpleSchema.RegEx.Email,
label: 'Email Address',
},
'emails.$.verified': {
type: Boolean,
defaultValue: false,
},
createdAt: {
type: Date,
},

Add below code to imports/api/users/users.js continue..
profile: {
type: Object,
optional: true,
blackbox: true,
},
services: {
type: Object,
optional: true,
blackbox: true,
},
});
const Users = Meteor.users;
Users.attachSchema(userSchema);
export default Users;

Forms & Events
Add below code to imports/ui/pages/post/add.html
<template name="addPost">
<div class="col s12">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="description" name="description" type="text" class="validate">
<label for="description">Description</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="submit" class="btn"/>
</div>
</div>
</form>
</div>
</div>
</template>
<div class="row">
<div class="input-field
col s12">
<input id="title"
name="title" type="text"
class="validate">
<label
for="title">Title</label>
</div>
</div>

Forms & Events
Add below code to imports/ui/pages/post/add.js
import { FlowRouter } from 'meteor/kadira:flow-router';
import { Materialize } from 'meteor/materialize:materialize';
import { $ } from 'meteor/jquery';
import Posts from './../../../api/posts/posts';
import './add.html';

Forms & Events
Add below code to imports/ui/pages/post/add.js continue...
Template.addPost.events({
submit(event) {
event.preventDefault();
const data = {};
$('form').serializeArray().map((obj) => {
data[obj.name] = obj.value;
return obj;
});
if (!postId) {
Materialize.toast('Unknown Error', 4000, 'rounded');
} else {
Materialize.toast('Post added Successfully', 4000,
'rounded');
FlowRouter.go('/posts');
}
},
});
const postId =
Posts.insert({
title: data.title,
description:
data.description,
userId:
Meteor.userId(),
likes: 0,
author:Meteor
.user().emails[0].address,
createdAt: new
Date(),
users: []
});

Template Helpers
import { FlowRouter } from 'meteor/kadira:flow-router';
import Posts from './../../../api/posts/posts';
import './../../layouts/loading.html';
import './post.html';

Template Helpers
Add below code to imports/ui/pages/post/post.js continue...
Template.post.helpers({
posts() {
return Posts.find();
},
isLiked(userIds) {
return userIds.indexOf(Meteor.userId()) >= 0;
},
});

Template Helpers
Add below code to
imports/ui/pages/post/post.html
<template name="post">
<ul class="collection">
{{#each posts}}
{{else}}
<div>
No post to display yet!
</div>
{{/each}}
</ul>
</template>
<li class="collection-item avatar">
<i class="material-icons circle">folder</i>
<span class="title">{{title}}</span>
<p>{{description}}
</p>
<p>Likes: {{likes}}</p>
{{#if isLiked users}}
<a href="" id="unlike"
class="secondary-content waves-effect
waves-light"><i
class="material-icons">thumb_down</i></a>
{{else}}
<a href="" id="like"
class="secondary-content waves-effect
waves-light"><i
class="material-icons">thumb_up</i></a>
{{/if}}
</li>

Methods & Method Call
Add package check which will restrict the type of data
to be sent from client by using following command
meteor add check
Let’s remove the insecure package which will restrict
database write operation on client side by using
following command
meteor remove insecure

Add Below code to imports/api/posts/method.js
import { check } from 'meteor/check';
import Posts from './posts.js';
Meteor.methods({
'posts.insert': function (title,
description, userId = this.userId) {
});
check(description, String);
check(title, String);
check(userId, String);
return Posts.insert({
title,
description,
userId,
likes: 0,
author:Meteor
.user().emails[0].address,
createdAt: new Date(),
users: [],
});

Registering the api to the server, add below code to imports/startup/server/register-api.js
import '../../api/posts/methods.js';
Import register-api.js ﬁle to imports/startup/server/index.js
import './register-api.js';

Replace the code in imports/ui/pages/post/add.js with newly created method
const postId = Posts.insert({
title: data.title,
description: data.description,
userId: Meteor.userId(),
likes: 0,
author: Meteor.user().emails[0].address,
createdAt: new Date(),
users: []
});
if (!postId) {
Materialize.toast('Unknown Error', 4000, 'rounded');
} else {
Materialize.toast('Post added Successfully', 4000,
'rounded');
}
},
Meteor.call('posts.insert',
data.title, data.description,
(err) => {
if (err) {
Materialize.toast(err.reason ||
'Unknown Error', 4000,
'rounded');
} else {
Materialize.toast('Post
added Successfully', 4000,
'rounded');
}
});

Methods
Client - 1
Meteor.Call ( ‘posts.insert’ )
Posts. Collection
Local Method Body
MongoDB
Server method
Body
Meteor Server
Method Call
Result

Publications
Let’s remove autopublish package as we don’t want everything
to be available on client side by using below code
Meteor remove autopublish

Publications
Add below code to imports/api/posts/server/publications.js
import Posts from '../posts.js';
Meteor.publish('posts.all', () => Posts.find());
Register the publication in register-api ﬁle under imports/startup/server/register-api.js
import '../../api/posts/server/publications.js';

Subscriptions
Let’s subscribe to the publication created in previous step inside route deﬁned
for displaying posts
Add below code to imports/startup/client/routes.js
FlowRouter.route('/posts', {
name: 'post',
},
redirect('/');
}
}],
this.register('posts',
Meteor.subscribe('posts.all'));

Subscriptions
Let’s add logic for showing loader until subscription is ready
Add below code to imports/ui/pages/post/post.html to
modify it
<template name="post">
<ul class="collection">
{{#if isReady "posts"}}
{{else}}
{{> loading}}
{{/if}}
</ul>
</template>
{{#each posts}}
<li class="collection-item avatar">
<i class="material-icons
circle">folder</i>
...
...
<div>
No post to display yet!
</div>
{{/each}}

Subscriptions
Let’s add the helper isReady to
imports/ui/pages/post/post.js so that our loader works
until subscription is ready
Template.post.helpers({
posts() {
return Posts.find();
},
isLiked(userIds) {
return
userIds.indexOf(Meteor.userId()) >=
0;
},
});
isReady(sub) {
if (sub) {
return FlowRouter.subsReady(sub);
}
return FlowRouter.subsReady();
},

Pub/Sub
Posts Collection
Posts Collection
Blaze Template
MongoDB
Oplog Observers
Client - 1
Client - 2
Sending Posts
document
Meteor Server
Newly added
Posts document

Update & Remove
Let’s update the code to add more methods under imports/api/posts/methods.js
'posts.like': function (postId, userId = this.userId) {
check(postId, String);
return Posts.update({
_id: postId,
}, {
$inc: { likes: 1 },
$push: { users: userId },
});
},

Update & Remove
Let’s update the code to add more methods under imports/api/posts/methods.js ...continue
'posts.unlike': function (postId, userId = this.userId) {
check(postId, String);
return Posts.update({
_id: postId,
}, {
$inc: { likes: -1 },
$pop: { users: userId },
});
},

Update & Remove
Add events for calling above methods from client side
Template.post.events({
'click #like': function () {
Meteor.call('posts.like', this._id,
Meteor.userId());
},
'click #unlike': function () {
Meteor.call('posts.unlike', this._id,
Meteor.userId());
},
});

Unit Tests
To write unit test cases use below command to add package
practicalmeteor:mocha
meteor add practicalmeteor:mocha
To collect published data in test environment use below command to add
package johanbrook:publication-collector
meteor add johanbrook:publication-collector

Unit Tests
Add below code to imports/api/posts/server/publications.test.js
import { assert } from 'meteor/practicalmeteor:chai';
import Posts from '../posts.js';
import { PublicationCollector } from
'meteor/johanbrook:publication-collector';
import './publications.js';

Unit Tests
Add below code to imports/api/posts/server/publications.test.js ...continue
describe('posts publications', () => {
beforeEach(() => {
Posts.remove({});
Posts.insert({
title: 'NX homepage',
description: 'This is our home page',
author: 'userId',
likes: 2,
});
});

Unit Tests
Add below code to imports/api/posts/server/publications.test.js ...continue
describe('posts.all', () => {
it('sends all posts', (done) => {
const collector = new PublicationCollector();
collector.collect('posts.all', (collections) => {
assert.equal(collections.posts.length, 1);
done();
});
});
});
});

Unit Tests
Add below code to imports/api/posts/methods.test.js
import './methods.js';
if (Meteor.isServer) {
describe('post methods', () => {
beforeEach(() => {
Posts.remove({});
});

Unit Tests
Add below code to imports/api/posts/methods.test.js ...continue
it('can add a new post', () => {
const addPost =
Meteor.server.method_handlers['posts.insert'];
addPost.apply({}, ['test', 'test description',
'user_id']);
assert.equal(Posts.find().count(), 1);
});
});
}

Unit Tests
Add below code to imports/api/posts/posts.test.js
describe('post collection', () => {
it('insert correctly', () => {
const postId = Posts.insert({
title: 'Test post',
description: 'Test description',
userId: 'user_id',
author: 'test',
users: [],
likes: 0,
});

Unit Tests
Add below code to imports/api/posts/posts.test.js ...continue
const added = Posts.find({ _id: postId });
const collectionName = added._getCollectionName();
const count = added.count();
assert.equal(collectionName, 'posts');
assert.equal(count, 1);
});
});
}

Unit Tests
Add below code to imports/api/users/users.test.js
import Users from './users.js';
describe('users collection', () => {
it('insert correctly', () => {
const userId = Accounts.createUser({
email: 'testuser@test.com',
password: '123445',
});

Unit Tests
Add below code to imports/api/users/users.test.js ...continue
const added = Users.find({ _id: userId });
const collectionName = added._getCollectionName();
const count = added.count();
assert.equal(collectionName, 'users');
assert.equal(count, 1);
});
});
}

Deployment
● Sign up for Galaxy, https://www.meteor.com/galaxy/signup
● Conﬁgure your MongoDB database using: mLab, compose or
MongoDB Atlas.
● Create a settings.json ﬁle with following info:
{
"galaxy.meteor.com": {
"env": {
"NODE_ENV": "production",
"MONGO_URL":
"mongodb://sapna:sapna@ds143767.mlab.com:43767/posts
"
}
},
"public": {
}
}

Deployment cont.
● Login to your meteor account using: meteor login
● Create a deploy.sh ﬁle with following info:
DEPLOY_HOSTNAME=us-east-1.galaxy-deploy.
meteor.com meteor deploy
http://posts-demo.meteorapp.com
--settings settings.json
● Instead of using this URL http://posts-demo.meteorapp.com you
can use your own domain.
● Type the following command to deploy your app:
sh deploy.sh

Maintenance using APM
● Meteor APM formally Kadira
● Add Meteor APM to your app:
meteor add mdg:meteor-apm-agent
● App will send data to Meteor APM
● Re-deploy sh deploy.sh

Mobile app build
● Download tools for Mobiles like Android Studio, Xcode
● Running on an iOS simulator (Mac Only):
○ meteor install-sdk ios
○ meteor add-platform ios
○ meteor run ios
● Running on an iOS device:
○ meteor run ios-device
● Running on an Android emulator:
○ meteor install-sdk android
○ meteor run android
● Running on an Android device:
○ meteor run android-device
Note: Currently, Meteor on Windows does not support mobile builds.

Thank You.
Questions?
By Sapna Upreti @sapna0214

Reactive Application Using METEOR

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Reactive Application Using METEOR

Similar to Reactive Application Using METEOR (20)

More from NodeXperts

More from NodeXperts (20)

Recently uploaded

Recently uploaded (20)

Reactive Application Using METEOR