Meteor Day Talk

Overview
1. What is Meteor? Why should I use it?
2. Example App
3. Apps using Meteor
4. Additional Resources
Web + Mobile Tutorial!
Discover Meteor Giveaway
Brandon Bechtel
@brandonbechtel
bsbechtel@gmail.com

What is Meteor??
• Not your traditional MVC framework
– Instead of html templates over http, data-over-
the-wire (DDP)
– Think Ruby on Rails + Angular.js
– Better yet, think of it as something completely
new
– -MongoDB Backend
• Built on top of Node.js – all JavaScript
Framework – meteor.js

• Fulltime meteor core dev team working on
tools for the entire developer lifecycle:
– Developer Accounts
– Package Repository – atmospherejs.com
• 1 line command to add or publish packages
– Deploy to web and mobile from same codebase
What is Meteor??
Platform – meteor.com

• 195,000 Unique Installs
• 20,357 stars on Github
• 2565 packages on atmosphere
• 134 Meteor Day Meetups across the globe
• $11.2mm in seed funding from @a16z
What is Meteor??
Community

Why Meteor??
• Modern UI with less code
– No more web pages with links to navigate, instead
modern, fast, JS transitions
• Live updates/hot code deploy
• Reactive – db updates visible in UI
immediately, across all clients
• Latency Compensation – super fast!!
Technical Case

• Rapid iteration and MVP development
(cheaper)
• All web devs know JS, HTML, and CSS (easy to
find tech help)
• Easy for a non-tech founder to get started
coding!
Why Meteor??
Business Case

Example
• Install:
$ curl https://install.meteor.com/ | sh
• Example App:
$ meteor create --example localmarket
$ cd localmarket
$ meteor
**Only for Mac and Linux, Windows users use nitrous.io

Best Resources
• Discover Meteor (discovermeteor.com)
– For learning Meteor from the ground up, this is
the best resource available
• Meteor-talk Google Group
– Many friendly developers ready to answer your
questions
• Official Documentation (docs.meteor.com)
• Online Meteor DevShops:
– EventMind, Meteor Hacks

Future Developments
• Roadmap.meteor.com
– SEO (Meteor serves entire pages that are
rendered in JS)
– SQL Integration
– Server Side Rendering

Tutorial!
• Windows users, open up and register at:
http://www.nitrous.io
• Follow along at:
– www.meteor.com/install

Tutorial!
• If you haven’t installed, do so now:
$ curl https://install.meteor.com/ | sh
• Create app:
$ meteor create simple-todos
$ cd simple-todos
$ meteor
With app running, you can view it at localhost:3000

Tutorial – simple-todos.css
Copy and paste from:
https://www.meteor.com/try/2
*Tutorial is to learn Meteor, not CSS

Tutorial – simple-todos.html
<head>
<title>Todo List</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>

Tutorial – simple-todos.js
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is task 2" },
{ text: "This is task 3" }
]
});
}

Tutorial – Collections (our data)
// At the top of simple-todos.js
Tasks = new Mongo.Collection("tasks");
MongoDB Collections
Data structure can be migrated and modified as desired, no additional code needed.
Data is structured similar to JSON.

Tutorial – Collections (our data)
// simple-todos.js
if (Meteor.isClient) {
// This code only runs on the client
tasks: function () {
return Tasks.find({});
}
});
}
Remember: tasks is the data variable (called expressions) in the template, we are now
pulling the data from the database

Tutorial – Forms

<header>
<h1>Todo List</h1>

<form class="new-task">
<input type="text" name="text" placeholder="Type to add new
tasks" />
</form>
</header>

Tutorial – Saving Inputs
// simple-todos.js
// Inside the if (Meteor.isClient) block, right after Template.body.helpers:
Template.body.events({
"submit .new-task": function (event) {
// This function is called when the new task form is submitted
var text = event.target.text.value;
Tasks.insert({
text: text,
createdAt: new Date() // current time
});
// Clear form
event.target.text.value = "";
// Prevent default form submit
return false;
}
});

Tutorial – Sorting Results
// simple-todos.js
// Show newest tasks first
return Tasks.find({}, {sort: {createdAt: -1}});
}
});
We are now sorting our tasks based on the createdAt timestamp we added when
inserting our task in the collection

Tutorial – Updating and Deleting

<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="toggle-
checked" />
<span class="text">{{text}}</span>
</li>
</template>
We are adding check boxes and a delete button to each saved task

Tutorial – Updating and Deleting
// simple-todos.js
// In the client code, below everything else
Template.task.events({
"click .toggle-checked": function () {
// Set the checked property to the opposite of its current
value
Tasks.update(this._id, {$set: {checked: ! this.checked}});
},
"click .delete": function () {
Tasks.remove(this._id);
}
});
These event handlers update the db accordingly

Tutorial – Deploy!
$ meteor deploy my_app_name.meteor.com
Deploy your app to Meteor’s servers *need to create a meteor acct to do this

Tutorial – Deploy to Mobile
$ meteor install-sdk android
$ meteor add-platform android
$ meteor run android
Or
$ meteor run android-device

Tutorial – Sessions

<label class="hide-completed">
<input type="checkbox" checked="{{hideCompleted}}" />
Hide Completed Tasks
</label>
Adding a checkbox to hide completed tasks

// simple-todos.js
// Add to Template.body.events
"change .hide-completed input": function (event {
Session.set("hideCompleted", event.target.checked);
}
Adding event handler for checkbox

// simple-todos.js
// Replace the existing Template.body.helpers
if (Session.get("hideCompleted")) {
// If hide completed is checked, filter tasks
return Tasks.find(
{checked: {$ne: true}},
{sort: {createdAt: -1}}
);
} else {
// Otherwise, return all of the tasks
return Tasks.find({}, {sort: {createdAt: -1}});
}
},
hideCompleted: function () {
return Session.get("hideCompleted");
}
});
Returning tasks expression with completed tasks filtered out if box is checked

Tutorial – Count of Incomplete Tasks
// simple-todos.js
// Add to Template.body.helpers
incompleteCount: function () {
return Tasks.find({checked: {$ne: true}}).count();
}

<h1>Todo List ({{incompleteCount}})</h1>

Tutorial – Adding User Accounts
$ meteor add accounts-ui accounts-password
{{> loginButtons}}
// simple-todos.js
// At the bottom of the client code
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});

// simple-todos.js
Tasks.insert({
text: text,
createdAt: new Date(), // current time
owner: Meteor.userId(), // _id of logged in user
username: Meteor.user().username // username of
logged in user
});

// simple-todos.js
{{#if currentUser}}
<form class="new-task">
<input type="text" name="text" placeholder="Type to
add new tasks" />
</form>
{{/if}}
<span class="text"><strong>{{username}}</strong> - {{text}}</span>

$ meteor add accounts-facebook
$ meteor add accounts-twitter
$ meteor add accounts-github
$ meteor add accounts-google
$ meteor add accounts-meetup

Tutorial – Security
$ meteor remove insecure
Meteor automatically adds insecure package to new
projects for getting started.
Insecure allows editing of database from client.
We don’t want this on a production app!

Tutorial – Security
Now our client side db operations (insert, update, and
remove) don’t work!
We need to replace these with a call to a Meteor Method.
Meteor Methods run on both the client and server to
immediately update the local copy of the db (mini-
mongo) and speed up operation – latency
compensation.

Tutorial – Defining Methods
// At the bottom of simple-todos.js, outside of the client-only block
Meteor.methods({
addTask: function (text) {
// Make sure the user is logged in before inserting a task
if (! Meteor.userId()) {
throw new Meteor.Error("not-authorized");
}
Tasks.insert({
text: text,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().username
});
},
deleteTask: function (taskId) {
Tasks.remove(taskId);
},
setChecked: function (taskId, setChecked) {
Tasks.update(taskId, { $set: { checked: setChecked} });
}
});

Tutorial – Defining Methods
// replace Tasks.insert( ... ) with:
Meteor.call("addTask", text);
// replace Tasks.update( ... ) with:
Meteor.call("setChecked", this._id, ! this.checked);
// replace Tasks.remove( ... ) with:
Meteor.call("deleteTask", this._id);

Tutorial – Filtering Data
Use Publications and Subscriptions to send the right data
to the right templates instead of sending your whole db
to the client!
$ meteor remove autopublish

Tutorial – Publications and
Subscriptions
// At the bottom of simple-todos.js
if (Meteor.isServer) {
Meteor.publish("tasks", function () {
return Tasks.find();
});
}
// At the top of our client code
Meteor.subscribe("tasks");

Meteor Day Talk

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Meteor Day Talk

Similar to Meteor Day Talk (20)

Recently uploaded

Recently uploaded (12)

Meteor Day Talk

Editor's Notes