Meteor

It came for the dinosaurs and now it's coming for you

by Kyle Mitofsky | @KyleMitBTV
Presentation | Demo

Overview

Who ... introductions
What ... is Meteor
Why ... should I care?
How ... demo time!
Where ... can I go to learn more?

Introductions

Who Am I

Software Development Tech Lead
at the Vermont Department of Health

Who Are you

Show of Hands

How many people....

Have ever used Meteor?
Do JS Development
Don't do JS Development

What is Meteor?

Buzz Words

Reactive, Full-Stack, Development Framework

Reactive
- Database - Distributed Data Protocol
- Application - Hot Code Pushes

Full-Stack
- Runs on Client
- Runs on Server

Development Framework
- Command Line Tool
- Build Pipeline

Meteor Stack

Why Should I care?

Modern Web Apps

Yesterday	Today
Browser	Mobile
Refresh Button	Live Update
Individual Sessions	Multi-User Collaboration
Links and Forms	Native Style GUI

Framework Proliferation

- geek-and-poke

Meteor Development Group

Fully Funded

Fully Open

Fully Awesome

How to Meteor

Demo Time!

Follow Along!


										git checkout tags/[tagname]

& revealjs-sync-git

Installation

curl https://install.meteor.com/ | sh

New Project


meteor create new-project-name
cd new-project
meteor


										git co p1

Where is the Code Running?


if (Meteor.isClient) { 
    // runs on the client
}

if (Meteor.isServer) { 
    // runs on the server
}

// runs on client and server

beter option ...

Directory Structure

/client - Runs only on the client
/server - Runs only on the server
/public - for static assets (images...)
/lib - loaded before anything else
main.* - loaded after everything else


										git co p2

Here's the App We're Building

Initialize Database

Create a collection and seed some data


Questions = new Mongo.Collection('quest');

Questions.insert(
  { text: "Seed Question?" }
);


										git co p3


Questions = new Mongo.Collection('questions');


if (Meteor.isServer) {
	if (Questions.find().count() === 0) {
	  Questions.insert(
	    {text: "Seed Question?"}
	  );
	}	
}

Check that it's there:


Questions.find();
Questions.find().fetch()
console.table(Questions.find().fetch());

Now that we have a database, before we jump ahead, 2 things I want to briefly expand on in next slides:
1. Global Variabals
2. SQL vs Mongo Comparison

git:p3

To Var or not To Var?


Questions = new Mongo.Collection('quest');

What's This?


(function() {
  /* ... */
})()

Immediately-Invoked Function Expression (IIFE)

Where will this collection be available
What does the var keyword do?
JavaScript Primer For Meteor
But wait, normally var'd variables are available everywhere, right
Meteor wraps all javascript files in IIFE (immediately invoked function expression) blocks
```
(function(){
  var msg = 'Hello'  
})()
						
```
Var Example
localhost:3000/lib/collections.js

Mongo DB

MongoDB adds a "PLEASE" keyword for inserts, boosting chance that data is stored to above 75%.
— Hacker News Onion (@HackerNewsOnion) September 24, 2013

MongoDB: Why Not?

I'll be available after the presentation to write slogans

Mongo v SQL - Overview

Structural

SQL	Mongo
Normalized	Denormalized
Schema-Bound	SchemaLess
PK - any unique column(s)	PK - always set to `_id`

Taxonomy

SQL	Mongo
Table	Collection
Row	Document
Column	Field

Mongo v SQL - New Table

SQL


CREATE TABLE table_name

Mongo


new Mongo.Collection('col_name');

Mongo v SQL - CRUD

SQL


INSERT INTO users(user_id, age, status)
VALUES           ("bcd001", 45, "A")

Mongo


db.users.insert({
  user_id: "bcd001",
  age: 45,
  status: "A"
})

Mongo v SQL - CRUD

SQL


SELECT _id, name, address -- Projection
FROM   users              -- Table
WHERE  age > 18           -- Criteria
LIMIT  5                  -- Cursor Modifier

Mongo


db.users.find(            // Collection
 { age: { $gt: 18 } },    // Criteria
 { name: 1, address: 1 }  // Projection
).limit(5)                // Cursor Modifier

Mongo v SQL - CRUD

SQL


UPDATE users                 -- Table
SET    name = 'Ed', 		     -- Modify
       rel_status = 'Single' 
WHERE  id = 1                -- Criteria

Mongo


db.users.update(             // Collection
 { id: 1 },                  // Criteria
 { $set: {                   // Modify
 		name: 'Ed',
 		rel_status: 'Single'
  }}  
)

Mongo v SQL - CRUD

SQL


DELETE FROM users             -- Table
WHERE  rel_status = 'single'  -- Criteria

Mongo


db.users.remove(              // Collection
 { rel_status: 'single' }     // Criteria
)

Roadmap - Revisted

Templates

Template Binding

Spacebars | React | Angular | ?

Include Template


{{> template_name}}

Define Template


<template name="template_name">
	I'm a Template!
</template>


									git co p4

Template Helpers

General


Template.<name>.helpers({})

Example


Template.question_list.helpers({
	questions: function() {
		return Questions.find();
	}
})


										git co p5

Print: {{property}}
Inlcusion: {{> template}}
Block Tags:
- {{#if}} ... {{/if}}
- {{#each}} ... {{/each}}
- {{#with}} ... {{/with}}


										git co p6

Spacebars Docs
Print will automaticaly sanitize any output. If you don't want to sanitize output, you can use three brackets, but be careful with user input
if has counterpart {{#unless}}
You can even make your own keywords and call methods with parameters
Packages can install templates. So sometimes templates are available without you having to define them i.e. {{login-buttons}}

That's all you really need - much more than that and too much logic is going into the view. Do it with helpers. You might object: but that's fewer directives than angular provides: on the grounds that the more of something you can possibly have, the better it is. Yeah, but things like ng-src only existed to prevent the flash of unstyled content issues. There's a fundamental difference in ownership. In angular, HTML owns all the code. it's right there in the body. In meteor, meteor owns everything. So in angular, I put all that markup in regular HTML and then rely on angular kicking in at the last minute and saying, hey, there's a new element that matches my directive, I guess I'll do something about it. In meteor, you write your templates and meteor renders good old fashioned mark up.

git:p6

Data Contexts

Sometimes when I'm writing Javascript I want to throw up my hands and say "this is bullshit!" but I can never remember what "this" refers to
— Ben Halpern (@bhalp1) March 20, 2015

Template Events

jQuery Example


$(template).on('event', 'selector', (e) => {
	//Do Stuff
});

Spacebar Event Handling:


Template.template-name.events({
	'event selector': (event, template) => {
		// Do Stuff
	}
})


										git co p7

Event Delegation
Arrow Functions - Mostly to shorten up code

We're going to do three things:

grab the event info
write to the database
Clean up after ourselves


Template.question_submit.events({
	'submit form': function (event, template) {
		// grab the input
		var text = event.target.question.value;

		// write to the database
		Questions.insert({
			text: text
		});

		// clean up form events
		event.preventDefault();
		event.target.question.value = "";
	}
});

git:p7

Deployment

Cheap and Quick
meteor deploy app-name.meteor.com

Platform as a Service (PaaS) - Modulus

Roll your own - Meteor UP (MUP)

Pick a Server:
- Digital Ocean
- Amazon Web Services (AWS)

Custom Deployment


npm install -g mup

mkdir ~/app-deploy
cd ~/app-deploy

mup init
open mup.json

mup setup
mup deploy

mup.json - configure:

hostname
SSH pem file
App Path
env.ROOT_URL

Once setup, you'll only need to run mup deploy again in the future.

Packages


# show all
meteor list

# add package
meteor add package-name

Smart packages mean packages can help take care of almost anything in the development pipeline

Accounts

Install:


meteor add accounts-ui accounts-password

Usage:


{{> loginButtons}}


										git co p8

Wiring Up Accounts

Spacebars Helper


{{currentUser}}

Everywhere else


var user = Meteor.user();
user._id
user.username


										git co p9


Accounts.ui.config({
	passwordSignupFields: 'USERNAME_ONLY'
});

git:p9

Mobile

Write once; run everywhere


# iOS
meteor install-sdk ios
meteor add-platform ios
meteor run ios

# android
meteor install-sdk android
meteor add-platform android
meteor run android


										git co p10

Meteor Myth #23

"Meteor isn't secure"

Security Basics

auto publish


meteor remove autopublish

Two Steps:

Server - Publish
Client - Subscribe


										git co p11

Pub / Sub

Publish


// on server
Meteor.publish("questions", function () {
    return Questions.find();
});


// on client
Meteor.subscribe("questions");


										git co p12

Insecure Package

Will someone open their console and run this:


Questions.remove({})

What Happened?

"Not permitted. Untrusted code may only remove documents by ID."

How about this instead?


Questions.find().forEach(function(doc) {
	Questions.remove(doc._id)
});

in secure


meteor remove insecure

Two Solutions:

Allow/Deny - Explicitly declare what is allowed
Methods - Canonical method is run on server


										git co p13

Allow / Deny

Allow


Posts.allow({
  insert: function (userId, doc) {
    // user must be logged in and modify their own doc
    return (userId && doc.owner === userId);
  }
});

Deny


Posts.deny({
  update: function (userId, docs, fields, modifier) {
    // can't change owners
    return _.contains(fields, 'owner');
  }
});

Methods

Add Method


Meteor.methods({
	'method-name': function([params]) {
		// Do Something
	}
})

Call Method


Meteor.call('method-name' [, params])


										git co p14

More Resources

Official Tutorial - Basics
Discover Meteor - Build a full app
BulletProof Meteor - Performance Tuning

Community:

Meteor Forums - Broad Questions
Crater.io - Meteor News (built with Telescope)
Meetup - Talks & Hacking
Stack Overflow - Specifics (please use MeteorPad)

Meteor

It came for the dinosaurs and now it's coming for you

Overview

Introductions

Who Am I

Who Are you

Show of Hands

How many people....

What is Meteor?

Buzz Words

Meteor Stack

Why Should I care?

Modern Web Apps

Framework Proliferation

Meteor Development Group

Fully Funded

Fully Open

Fully Awesome

How to Meteor

Demo Time!

Installation

New Project

Where is the Code Running?

Directory Structure

Here's the App We're Building

Initialize Database

To Var or not To Var?

Mongo DB

MongoDB: Why Not?

Mongo v SQL - Overview

Structural

Taxonomy

Mongo v SQL - New Table

SQL

Mongo

Mongo v SQL - CRUD

SQL

Mongo

Mongo v SQL - CRUD

SQL

Mongo

Mongo v SQL - CRUD

SQL

Mongo

Mongo v SQL - CRUD

SQL

Mongo

Roadmap - Revisted

Templates

Template Binding

Spacebars | React | Angular | ?

Template Helpers

{{Spacebars}}

Data Contexts

Template Events

Deployment

Custom Deployment

Packages

Accounts

Wiring Up Accounts

Mobile

Meteor Myth #23

Security Basics

auto publish

Pub / Sub

Insecure Package

in secure

Allow / Deny

Methods

More Resources

Thank You!