meteor-presentation
meteor-presentation
5 6
meteor-presentation
An introduction to MeteorOn Github SachaG / meteor-presentation
Meteor 101
@SachaGreif
Discover Meteor
How It All Started
So What's Meteor?
Client-Side JavaScript
Server-Side JavaScript
Full-Stack JavaScript
Three Meteor Principles
Data on the Wire
Database Everywhere
Reactivity
A Few More Cool Things…
Everything Included
Hot Code Reload
Meteor takes existing technologies and makes them work together seamlessly, on both client and server.What We're Building
Grid + Dribbble = Gribbble
Showing the Dribbble homepage over the past 12 hours.
The App
Step 1: Setting Up
Install Meteor
curl https://install.meteor.com | /bin/sh
Create an App
Create the app.
meteor create gribbble
Open the app's directory.
cd gribbble
Run the App
meteor
File Structure
- Remove Meteor's placeholder files.
rm gribbble.css gribbble.html gribbble.js
- Create three directories
mkdir client mkdir server mkdir collections
- Copy-paste the stylesheet into client/style.css. Run
Recap
We now have a working Meteor app. Let's make it actually do something!
Step 2: Collecting Data
Create a Collection
Snapshots = new Meteor.Collection('snapshots');
/collections/snapshots.js (both)
The Dribbble API
http://api.dribbble.com/shots/popular?per_page=12
Query the Dribbble API
meteor add http
var url="http://api.dribbble.com/shots/popular?per_page=12";
var queryAPI = function () {
HTTP.get(url, function(error, result){
if(result){
result.timestamp = new Date().getTime();
Snapshots.insert(result);
}
});
}
/server/api.js (server)
Schedule to Run Every Hour
Meteor.setInterval(function(){
queryAPI();
}, 3600000);
/server/api.js (server)
Recap
We're now collecting the 12 most popular Dribbble shots every hour. Next step: displaying them.
Step 3: Displaying Data
The Main Template
The Main Template
<head>
<title>Gribbble</title>
</head>
<body>
<h1>Gribbble</h1>
{{> grid}}
</body>
/client/main.html (client)
The Grid
The Grid
<template name="grid">
<div class="grid">
{{#each snapshots}}
<div class="grid-snapshot grid-col">
{{timestamp}}
</div>
{{/each}}
</div>
</template>
/client/grid.html (client)
Fill The Grid With Data
Template.grid.helpers({
snapshots: function () {
return Snapshots.find({}, {
sort: {timestamp: -1},
limit: 12
});
}
});
/client/grid.js (client)
Run
Loop Over The Shots
<template name="grid">
<div class="grid">
{{#each snapshots}}
<div class="grid-snapshot grid-col">
{{#each data.shots}}
<p>{{title}}</p>
{{/each}}
</div>
{{/each}}
</div>
</template>
/client/grid.html (client)
Run
The Shot
Add Shot Template
<template name="shot">
<a href="{{url}}" target="_blank" class="grid-shot">
<img src="{{image_teaser_url}}" class="grid-image"/>
</a>
</template>
/client/shot.html (client)
Include Shot Template
<template name="grid">
<div class="grid">
{{#each snapshots}}
<div class="grid-snapshot grid-col">
{{#each data.shots}}
{{>shot}}
{{/each}}
</div>
{{/each}}
</div>
</template>
/client/grid.html (client)
Run
Recap
We're storing and displaying data. We now need to control the flow of data from server to client.
Step 4: Controlling Data
Remove Packages
meteor remove autopublish meteor remove insecure
Add a Publication
Meteor.publish('snapshots', function(limit) {
return Snapshots.find({}, {
sort: {timestamp: -1},
limit: limit
});
});
/server/publications.js (server)
Subscribe to the Publication
Meteor.subscribe('snapshots', 12);
/client/main.js (client)
Run
Recap
We built a simple web app in less than 100 lines of code, and saw an overview of the main Meteor features.