This document provides an introduction to the Meteor platform for building web applications. It outlines Meteor's key features like using JavaScript on both the client and server, reactive programming, and the Distributed Data Protocol. The document then covers installing Meteor, creating a sample todo list app, using Meteor packages and templates, defining collections, routing, security concepts, and deploying built Meteor apps. It concludes with an example of building a blog posting app called "post-by-me" that demonstrates additional Meteor features like user accounts, editing content, and email functionality.

1. Introduction to Meteor
Intoduction to
By Meghna Gogna

2. Introduction to Meteor
Agenda
● Introduction To Meteor
● What is DDP ?
● Installing Meteor and create first App
● Meteor packages and App structure
● Meteor Template and Template Helpers
● Collections
● Routing
● Security in Meteor
● Deploying Apps build with Meteor
● Hands-on exercises

3. Introduction to Meteor
Founder of Meteor
➢ Meteor was first introduced in December
2011 under the name “Skybreak.
➢ Meteor is developed by the Meteor
Development Group.

4. Introduction to Meteor
INTRODUCTION
➢ Platform build on Node.js
➢ Uses Javascript
➢ Reactive
➢ Uses DDP protocol instead of HTTP
➢ Deployment is easy
What is this ?

5. Introduction to Meteor
INTRODUCTION
Meteor is a platform. Why ??
Because it sits between your app’s database and its user
interface and makes sure that both are kept in sync.

6. Introduction to Meteor

7. Introduction to Meteor
INTRODUCTION
➢ Platform build on Node.js
➢ Uses Javascript
➢ Reactive
➢ Uses DDP protocol instead of HTTP
➢ Deployment is easy
What is this ?

8. Introduction to Meteor
INTRODUCTION
Meteor is a platform. Why ??
Because it sits between your app’s database and
its user interface and makes sure that both are
kept in sync.

9. Introduction to Meteor
INTRODUCTION
It’s all JavaScript, so you don’t need to deal with
one language in the browser and another on the
server.
Meaning you can make the same code accessible
from both the client and server if you need to.

10. Introduction to Meteor
INTRODUCTION
➢ Platform build on Node.js
➢ Uses Javascript
➢ Reactive
➢ Uses DDP protocol instead of HTTP
➢ Deployment is easy
Why Reactive ?

11. Introduction to Meteor
INTRODUCTION
REACTIVE -
Meaning that any change to your data is automatically
reflected everywhere throughout the app without the
need for callbacks.
Both your changes and the changes made by other
users are instantly reflected in the UI.

12. Introduction to Meteor
INTRODUCTION
Instead of refreshing the whole browser window
every time the user changes the page or performs
an action, Meteor modifies only the part of the
app that actually changes without reloading the
rest,

13. Introduction to Meteor
INTRODUCTION
➢ Platform build on Node.js
➢ Uses Javascript
➢ Reactive
➢ Uses DDP protocol instead of HTTP
➢ Deployment is easy
What is DDP ?

14. Introduction to Meteor
DDP : Distributed Data Protocol
HTTP
DDP
Static + stateless
● REST for websocket
● Based on JSON
● DDP can be build on the
top of any duplex
transport.

15. Introduction to Meteor
DDP: Remote Procedure Call

16. Introduction to Meteor
INTRODUCTION
➢ Platform build on Node.js
➢ Uses Javascript
➢ Reactive
➢ Uses DDP protocol instead of HTTP
➢ Deployment is easy
Deploy ?

17. Introduction to Meteor
INTRODUCTION
Meteor deploy Applications just in a single
command.
We'll see this in a while !!

18. Introduction to Meteor
INSTALLING METEOR
Installing meteor takes a few seconds:
curl https://install.meteor.com | /bin/sh

19. Introduction to Meteor
CREATE FIRST APP
Creating new app also takes a couple of seconds:
meteor create myApp

20. Introduction to Meteor
PACKAGES
 Adding packages is made very simple by
meteor
 You just need to type following in the terminal:
meteor add <package-name>

21. Introduction to Meteor
Meteor app stucture
Meteor has some rules regarding its directory
structure. 4 main entities are:
1) /lib
2) /client
3) /server
4) /public
code runs on both
client and server
Code runs only
on client
Code runs only
on server
Static media
Files (like images, fonts)

22. Introduction to Meteor
Meteor App Structure
For code accessed both from server and client
side these can be used:
Meteor.isClient Meteor.isServer

23. Introduction to Meteor
Meteor Template
● Uses BLAZE template engine
● Looks like
● Forget about random
logic in templates.
● Everything happens
with helpers.
<template name="postItem">
<div class="post">
<a href="#" class="upvote btn btn-default">
↑</a>
<div class="post-content">
<h3><a href="{{url}}">{{title}}</a>
<span>{{domain}}</span></h3>
<p>
{{pluralize votes 'Vote'}},
submitted by {{author}},
<a href="#">Post</a>
{{#if ownPost}}
<a href="#">Edit</a>
{{/if}}</p>
</div>
</div>
</template>
helpers

24. Introduction to Meteor
Meteor template helpers
Helpers help to store logic outside of templates
making them readable.
Template with a name “post_item”
Helper

25. Introduction to Meteor
Meteor Collections
● Collections are defined really simple.
● After that MyCollection.[insert|update|remove]
methods can be called both on client ans
server.
● They can be fired by any user from console in
browser.
MyCollection = new Mongo.Collection(“my-collection”);

26. Introduction to Meteor
Creating a simple app in
Meteor
We are going to create a simple app to manage a
'to do' list.
To create the app, open your terminal and type:
meteor create simple-todos

27. Introduction to Meteor
Creating a simple app in
Meteor
This will create a new folder called simple-todos with all of the
files that a Meteor app needs:
➢ simple-todos.js # JavaScript file loaded on both client and
server
➢ simple-todos.html # an HTML file that defines view
templates
➢ simple-todos.css # a CSS file to define your app's styles
➢ .meteor

28. Introduction to Meteor
Creating a simple app in
Meteor
To run the newly created app:
Open browser and go to http://localhost:3000 to
see your app running
➢ cd simple-todos
➢ meteor

29. Introduction to Meteor
Creating a simple app in Meteor
Now delete all the files from the directory and
create four directories:
➢ /lib
➢ /server
➢ /client
➢ /public

30. Introduction to Meteor
Creating a simple app in
Meteor
All the designing part goes to client hence
templating is done in “client” folder
Open “/client” directory and create templates
folder.

31. Introduction to Meteor
Creating a simple app in
Meteor
Inside “/templates” folder create file “layout.html”
<head>
<title>simple-todos</title>
</head>
<body>
<div class="container">
<header>
<a href=”/”> <h1>Todo List</h1></a>
</header>
<div id=”main”>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>

32. Introduction to Meteor
Creating a simple app in
Meteor
Create “simple-todos.js” for writing helpers code:
Template.simpleTodos.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is task 2" },
{ text: "This is task 3" }
]
});

33. Introduction to Meteor
Adding CSS
Create a folder name stylesheet and add
stylesheet.css file

34. Introduction to Meteor
Creating a new collection is as easy as calling
➢ MyCollection = new Mongo.Collection("my-collection");
in your javascript.
On the server, this sets up a MongoDB collection
called my-collection; on the client, this creates a
cache connected to the server collection. On client
side the cached DB is called as “Mini-Mongo”.
Since collections are shared by both client and server
place them in “/lib” folder under “/collections”
folder.

35. Introduction to Meteor
Write:
➢ Tasks = new Mongo.Collection("tasks");
And then inside “simple-todos.js” write:
Template.simpleTodos.helpers({
tasks: function () {
return Tasks.find({});
}
});

36. Introduction to Meteor
 You can see the reactivity of Meteor by entering the
tasks from browser.
 Open the browser console and write:
 And without refreshing the page the task is rendered
on the browser window.
➢ Tasks.insert({ text : “Hello” , createdAt : new Date() });

37. Introduction to Meteor
Adding packages
We require 2 packages in this app :
➢ meteor add twbs:bootstrap
➢ meteor add underscore

38. Introduction to Meteor
Routing
We’d like these pages to be accessible via a
permalink, a URL of the form :
http://myapp.com/posts/xyz
So this routing is done by “Iron Router”. Install it by
writing:
➢ meteor add iron:router

39. Introduction to Meteor
So now in “simple-todos.html”
Replace {{#if task}} ... {{/if}} with just {{ > yield}}
Handlebar.
And now create “tasks.html”
template:
<div id=”main”>
{{>yield}}
</div>
</div>
</body>
<template
name=”tasks”>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</template>
<template name=”task”>
<li>{{text}}</li>
</template>

40. Introduction to Meteor
Now we define our router , so in /lib folder
create a router.js file and write the
following code :
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', {name: “tasks”});
Configuration
of router
Routers route with
A name tasks

41. Introduction to Meteor
Adding tasks from a form
Now we'll create a template for the user to add tasks
to the list . So create a template called “submit-
task.html”
<template name="submitTask">
<form>
<label class="control-label" for="task">TASK</label>
<div class="controls">
<input name="task" id="task" type="text" value=""
placeholder="Your TASK" class="form-control"/>
</div>
<input type="submit" value="Submit" class="btn btn-
primary"/>
</form>
</template>

42. Introduction to Meteor
Adding JS file
Insert in Tasks DB:
Template.taskSubmit.events({
'submit form': function(e) {
e.preventDefault();
var tasks = {
text: $(e.target).find('[name=task]').val(),
createdAt : new Date()
};
task._id = Tasks.insert(tasks);
Router.go(“tasks”, tasks);
}
});

43. Introduction to Meteor
Modifying main html file
Adding submit button in “simple-todos.html”
<div class="container">
<header>
<a href=”/”> <h1>Todo List</h1></a>
&nbsp;&nbsp;&nbsp;
<a href=”{{pathFor“taskSubmit”}}”>
Submit Task</a>
</header>
pathFor is provided
By Iron Router
And it return the path
Of taskSubmit

44. Introduction to Meteor
Defining the path of “taskSubmit page”
In lib/router.js define another route:
Router.route(“/submit” ,
{
name : “taskSubmit”,
});

45. Introduction to Meteor
Adding User Accounts
To enable the accounts system and UI, we need to
add the relevant packages :
Now in “simple-todos.html” add :
➢ meteor add accounts-ui
➢ meteor add accounts-password
<ul>
{{> loginButtons}}
</ul>

46. Introduction to Meteor
Add the following code to configure the accounts
UI to use usernames instead of email addresses
in “simple-todos.js”:
Accounts.ui.config({
passwordSignupFields: 'USERNAME_ONLY'
});

47. Introduction to Meteor
Security

48. Introduction to Meteor
Removing insecure and autopublish
➢ Meteor pass all the data from server to the client, and
client can add, delete and update data in the servers
database from the browser because of “autopublish”
package.
➢ But this can be insecure, so we remove “autopublish”
package.
➢ meteor remove autopublish

49. Introduction to Meteor
Now u' ll see no tasks in the browser. This is
because now server is not passing the Tasks
collection to the client.
For this we use “publications and
subscriptions”.

50. Introduction to Meteor
Publish and Subscribe
Meteor.publish() method lets server send the
required collection to the client. Create a
/server/publications.js file and add:
Meteor.publish("tasks",
function () {
return Tasks.find({});
});

51. Introduction to Meteor
Publish and Subscribe
Now to use the data send by the server, client use
Meteor.subscribe() method for restricting what data
should be available to the client. Add this method in
lib/router.js as follows:
Router.config({
layoutTemplate : “simpleTodo” ,
waitOn : function(){
return Meteor.subscribe('tasks');
}
});
Router.route('/' , { name : 'tasks'});
This loads all the
tasks before any
hooks run

52. Introduction to Meteor
Deploying Meteor App
There are many ways of deployment, we will deploy our App
on Meteor subdomaine
Just open terminal and type:
http://myapp.meteor.com
➢ meteor deploy simpletodos.meteor.com

53. Introduction to Meteor
Deploying Your App
After a few seconds you’ll be able to access your app at
http://simpletodos.meteor.com

54. Introduction to Meteor
API using Server-side Routing
Iron router can define server side routes also. RESTful routes
can be defined as follows :
Router.route( '/users/:name' , function(){
var name = this.params.name;
var getUser = Meteor.users.findOne({
'username' : name
});
this.response.end(JSON.stringify(getUser));
} , { where : 'server'});
Paramerters from
the request
Response to the
user
Says that this route
can be accessed only
From server

55. Introduction to Meteor
Type of request
We can also perform different actions based on the type of
request:
1) Get
2) Post
3) Put
4) Delete

56. Introduction to Meteor
Demo
Look at the code :
Router.route( '/users/:name' , { where :
'server'})
.get(function () {
this.response.end('get requestn');
})
.post(function () {
this.response.end('post requestn');
});

57. Introduction to Meteor
HandOn Exercises

58. Introduction to Meteor
We will now create our own app
named as
“post-by-me”

59. Introduction to Meteor
This should do following :
➢ Display posts from Posts collection
➢ Add user accounts
➢ Submit posts
➢ Edit posts
➢ Send Email to the users
➢ Deploy it on server

60. Introduction to Meteor
We have our own app deployed on server that
too in just very less time !!

61. Introduction to Meteor
The End