Welcome!

Tell us about yourself

http://bit.ly/1eKoDwO

The Room Today

Wifi:

Code Fellows Guest

guest2014

Introducing Meteor

The JavaScript App Platform

The Basics

• Full Stack JavaScript framework (true platform)
• JavaScript on client & server
• Built on top of Node and MongoDB
• Cross Platform (Web & Mobile)

Angular vs Meteor

Meteor

• Full Stack!

Angular

• Node
• Express
• Grunt/Gulp
• Database
• Websocket

React vs Meteor

Meteor

• Full Stack!

React

• Node
• Express
• Grunt/Gulp
• Database
• Websocket

Meteor Compontents

• Blaze / Spacebars
• Web socket / DDP
• Node
• MongoDB
• Atmosphere / NPM

• ~125 Core Packages

Community Packages

• jQuery UI
• Moment
• React
• Angular

• ~6000 Packages

NPM Packages!

• ~159,000 Packages

Getting Started

Installing Meteor

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

OS X / Linux

Windows

InstallMeteor.exe

Start Your First App

> meteor create my-app
> cd my-app
> meteor run

• Client (Blaze engine)
• Server (Node)
• Web socket (SocketIO + DDP)
• MongoDB

Meteor Structure

HTML: Introducing Templates

<template name='myTemplateName'>
    <!-- HTML goes here -->
</template>

JS: Introducing Client / Server

if(Meteor.isClient) {
    /*
        Add my JS code here
    */
}

if(Meteor.isServer) {
    /*
        Add my JS code here
    */
}

HTML + JS: Introducing Events

<template name='myTemplateName'>
    <button id='clickme'>Click Me</button>
</template>

//JS
Template.myTemplate.events({
    'click #clickme': function(e,t) {
        alert('i was clicked');
    }
})

HTML + JS: Introducing Helpers

<template name='myTemplateName'>
    <button id='clickme'>{{buttonName}}</button>
</template>

//JS
Template.myTemplate.helpers({
    'buttonName': function() {
        return 'Click Me Now';
    }
})

Introducing Collections

myCollection = new Mongo.Collection('mycollection');

myCollection.insert({names: 'my name'});

Deploying a Meteor App

> meteor deploy my-app.meteor.com

What about mobile?

Create iOS App

> meteor add-platform ios
> meteor run --mobile-server <IP/cname> ios-device

Create Android App

> meteor install-sdk android
# Install Java (web install)
# Install Emulator (web install)
> meteor add-platform android
> meteor run --mobile-server <IP/cname> android-device

Questions?!

Prove It!!!

Demo Time!

Demo

Step 1: Install Meteor

Step 2: Create First Meteor App

Step 3: Create iOS App

Step 4: Create Android App

Step 5: Live Coding

Demo: Join In

Join In: http://6a05defd.ngrok.io/

Local Companies

C-SATS Inc.

Meteor's greatest win is JavaScript everywhere: client, server,
database. Our team is all de facto full-stack developers.

Adam Monsen - Head of Engineering

Coolearth Software

Meteor has allowed us to reduce code needed by 4-10x over conventional techniques. Thanks to the in browser replicated DB, client side code has greatly reduced complexity, is mostly free from locking and is very reactive to user input. This makes it much faster to port our existing legacy applications to the web. As and example, in our legacy program it takes on average 100-200 lines to query the db, serialize and transmit it to the client, then bind that data on the dropdown and then report back to the server the users choice. In Meteor, its <10 lines, a DB query for the content, and a db update for the users choice

Nick Burrows - Coolearth Software

FlyBuy

Our original app, which was a hybrid app that only worked on iOS, took more than 15 months to build​, was still not complete​,​ and was buggy​ and difficult to maintain​. The new app ​was ​built from scratch using Meteor ​in less than 6 months​,​ has significantly more functionality​ than the original​​, supports Android & iOS and is much easier to maintain.

Bryan Terrell - FlyBuy

Questions?!