code-camp-meteor

Introduction to Meteor
Intoduction to
By Meghna Gogna

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

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

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

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.

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.

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.

INTRODUCTION
➢ Uses Javascript
➢ Reactive
Why Reactive ?

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.

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,

INTRODUCTION
➢ Uses Javascript
➢ Reactive
What is DDP ?

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.

DDP: Remote Procedure Call

INTRODUCTION
➢ Uses Javascript
➢ Reactive
Deploy ?

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

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

CREATE FIRST APP
Creating new app also takes a couple of seconds:
meteor create myApp

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

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)

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

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

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

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”);

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

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

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

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

Meteor
All the designing part goes to client hence
templating is done in “client” folder
Open “/client” directory and create templates
folder.

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>

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" }
]
});

Adding CSS
Create a folder name stylesheet and add
stylesheet.css file

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.

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

 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() });

Adding packages
We require 2 packages in this app :
➢ meteor add twbs:bootstrap
➢ meteor add underscore

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

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>

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

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>

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);
}
});

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

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

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>

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'
});

Security

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

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”.

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({});
});

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

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

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

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

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

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');
});

HandOn Exercises

We will now create our own app
named as
“post-by-me”

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

We have our own app deployed on server that
too in just very less time !!

The End

code-camp-meteor

More Related Content

What's hot (20)

Similar to code-camp-meteor (20)

code-camp-meteor