Meet with Meteor

The JavaScript App Platform
Meet with

Presented by -
Tahmina Khatoon
Software Engineer, Genweb2
Build Web Applications since 2008

What will be covered
● Introduction to meteor
● Principles of meteor
● Meteor architecture
● Live coding a simple meteor app

What is Meteor?
● Meteor is an ultra-simple environment for
building modern web and mobile app using
Javascript.
● Build to the power of next generation app
o Rich user interfaces
o Collaborative multi-user applications
o Cross platform apps
o Fast development

7 Meteor Principles
1. Data on the Wire
2. One Language
3. Database Everywhere
4. Latency Compensation
5. Full Stack Reactivity
6. Embrace the Ecosystem
7. Simplicity = Productivity

Why Meteor?
● Applications are real-time by default
● Develop with just one language
● Save a lot of time with smart packages
● Optimized for developer happiness
● Friendly to beginner developers
● Ahead of the tech curve
● Community is extremely supportive

Data on the Wire
Meteor doesn't send HTML over the network.
The server sends data and lets the client
render it.

Data on the Wire (Continue ...)
Traditional Web Architecture
Client
Server
HTTP
HTML
No Persistent Connection
http://www.prothom-alo.com
<html>
…
news - 1
news - 2
...
<.html>

Data on the Wire (Continue ...)
Traditional Web Architecture Modern Web Architecture
Client
Server
Client
Server
HTTPHTML
No Persistent Connection Persistent Connection
DDP
<html>
…
news - 1
news - 2
...
<.html>
http://www.prothom-alo.com http://www.prothom-alo.com
<html>
news - 1
news - 2
<.html>
news - 3
.
.
news - 4
.
.

DDP - Distributed Data Protocol
A protocol based on JSON.
Technically, DDP can be implemented on top of any
duplex transport. Meteor’s current implementation is
based on WebSockets and SockJS.
SockJS is a WebSockets emulation transport, which can be used when WebSockets is not available.

DDP - Distributed Data Protocol
DDP mainly does two things:
● It handles Remote Procedure Calls (RPC).
● It manages data.

Handling Remote Procedure Calls
1. {"msg":"method",
"method":
"transferMoney",
"params": ["1000USD",
"arunoda", "sacha"],
id": "randomId-1"}
2. {"msg": "result", id":
"randomId-1": "result":
"5000USD"}
3. {"msg": "updated",
"methods": ["randomId-
1"]}
It notifies the caller after all the write operations in the method have been reflected to all the
other connected clients.

DDP - Managing Data
The DDP protocol has three types of notification: added, changed and
removed
1. The DDP client (sacha) sends a
subscription request for his account.
2. He will receive a couple of added
notifications with the current
transactions in his account.
3. After all the transactions have been
sent by the DDP server (bank), DDP
will send a special message called
ready. The ready message indicates
that all the initial data for the
subscription has been sent and you
are good to go.
4. Some time later, after arunoda has
sent his transfer, sacha will receive
the transaction as another added
notification.

One Language
Meteor lets you write both the client and the
server parts of your application in JavaScript.

One Language
Client
Server
Database

Database Everywhere
You can use the same methods to access your
database from the client or the server.
● MongoDB on the server
● Minimongo in the browser
● Meteor keeps it all in sync

Mini Databases
● The minimongo package is a reimplementation of
(almost) the entire MongoDB API, against an in-
memory JavaScript database.
● It is like a MongoDB emulator that runs inside your web
browser. You can insert data into it and search, sort,
and update that data.
https://www.meteor.com/mini-databases

Latency Compensation
On the client, Meteor prefetches data and
simulates models to make it look like server
method calls return instantly.

In a traditional
application, when a
user does some
action on an app,
they have to wait
until the request is
processed on the
server before the
changes are
reflected by the UI.

But with latency
compensation, users
no longer need to
wait. The result of
an action is
reflected by the
browser
immediately. This is
a built-in feature of
Meteor and you can
use it very easily.

Implementing latency compensation
● Latency compensation works only for write operations to a data store
supported by Meteor (currently only MongoDB and Redis).
● For Third-party service like Twitter, there is no way to implement
latency compensation directly.
● There are only two places where you can do a write operation to a data
store: inside a method call or directly via a local collection.

Full Stack Reactivity
In Meteor, realtime is the
default. All layers, from
database to template,
update themselves
automatically when
necessary.
● Client UI and database
are updated 1st
● Change sent to server
● Issues are resolved after
the fact

Embrace the Ecosystem.
Meteor is open source and integrates with
existing open source tools and frameworks.

Simplicity = Productivity.
The best way to make something seem simple
is to have it actually be simple. Meteor's main
functionality has clean, classically beautiful
APIs.

App - Topic Bank
Topic Name Suggested By Vote Action
Dart Fyaz 10
Meteor Tahmina 12
Up Down
Up Down
Topic Bank

Let’s Get Started!
curl https://install.meteor.com/ | sh
Installing Meteor
Creating an app
meteor create hotTopics
cd hotTopics
meteor
Run app

Project Structure
lib/ # <- any common code for client/server.
lib/config.js # <- general configuration
lib/methods.js # <- Meteor.method definitions
lib/external # <- common code from someone else
## Note that js files in lib folders are loaded before other js files.
collections/ # <- definitions of collections and methods on them (could be models/)
client/lib # <- client specific libraries (also loaded first)
client/lib/config.js # <- configuration of any client side packages
client/lib/helpers # <- any helpers (handlebars or otherwise) that are used often in view files
client/main.js # <- subscriptions, basic Meteor.startup code.
client/index.html # <- toplevel html
client/index.js # <- and its JS
client/views/<page>.html # <- the templates specific to a single page
client/views/<page>.js # <- and the JS to hook it up
client/views/<type>/ # <- if you find you have a lot of views of the same object type
server/publications.js # <- Meteor.publish definitions
server/lib/config.js # <- configuration of server side packages

The JavaScript and CSS files in an application are loaded according to these
rules:
● Files in subdirectories are loaded before files in parent directories, so
that files in the deepest subdirectory are loaded first, and files in the
root directory are loaded last.
● Within a directory, files are loaded in alphabetical order by filename.
● After sorting as described above, all files under directories named lib are
moved before everything else (preserving their order).
● Finally, all files that match main.* are moved after everything else
(preserving their order).
CSS and Javascript Files Ordering

Meteor parses all of the HTML files in app folder and identifies three top-level
tags:
● <head>
● <body>
● <template>
Default Template Engine: Blaze
Can be replaced with any other template engine.
Create html view

Create html view
<head>
<title>Topic Bank</title>
</head>
<body>
<div class="container">
{{> header}}
{{> topicList}}
</div>
</body>
<template name="header">
<div class="row text-center">
<h1>Topic Bank</h1>
</div>
</template>
<template name="topicList">
<div class="row">
<div class="col-md-12">
</div>
</div>
</template>
<table class="table table-bordered">
<thead>
<tr>
<th>Topic Name</th>
<th>Suggested By</th>
<th>Vote</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{{#each topics }}
<tr>
<td>{{title}}</td>
<td><i>{{proposed_by}}</i></td>
<td>({{vote}} votes)</td>
<td></td>
</tr>
{{/each }}
</tbody>
</table>

Include package
Meteor Package manager: ATMOSPHERE
meteor add mizzao:bootstrap-3
Add Package in project (example: bootstrap-3)
meteor list
List all installed packages

Publish and Subscribe
// Create a collection
Topics = new Meteor.Collection('topics');
if (Meteor.isServer) {
// Publish collection
Meteor.publish('topics', function () {
return Topics.find();
});
} else if (Meteor.isClient) {
// Subscribe collection
Meteor.subscribe('topics');
Template.topicList.helpers({
topics: function () {
return Topics.find();
}
});
}

Related Links
https://www.youtube.com/watch?v=OXwnvkE5t_Y
https://www.youtube.com/watch?v=RDQ2GCWYIHI
http://www.slideshare.net/henrikingo/meteor-next-generation-stack-
41232294?related=1
https://medium.com/@benstr/meteorjs-vs-angularjs-aint-a-thing-
3559b74d52cc
http://www.meteorpedia.com/read/Why_Meteor
https://www.eventedmind.com/
https://meteorhacks.com/introduction-to-latency-compensation

Meet with Meteor

More Related Content

What's hot

What's hot (20)

Similar to Meet with Meteor

Similar to Meet with Meteor (20)

More from Tahmina Khatoon

More from Tahmina Khatoon (7)

Recently uploaded

Recently uploaded (20)

Meet with Meteor