Meteor.js for DOers

METEOR FOR DOERS
URBANINNOVATORS.ORG
{VEGASJS}

TEXT
GOALS
▸ To help you prototype your ﬁrst app by:
▸ understanding how to go from idea to prototype
▸ understanding basic web architecture
▸ understanding basic javascript
▸ understanding the basics of meteor framework
▸ learning a few basic design patterns

CLIENT SERVER
HTML
CSS JavaScript
Request
Response
Web App
File System Database
▸ Your job is to use a programming language
to get the client to talk to the server

METEOR.JS
CORE
COMPETENCIES
BUILDING AN APP
bit.ly/M4DCOMP

JAVASCRIPT
BASIC CONCEPTS
▸ {} - object
▸ . - Property accessors provide
access to an object's properties by
using the dot notation or the
bracket notation
▸ =, ==, ===
▸ ( )
▸ var - A stored variable item

JAVASCRIPT
VAR
▸ stores a value for later
var x = 1;
keyword
operator
end statement

JAVASCRIPT
BASIC CONCEPTS
▸ global scope
▸ let - new to ECMA2015
▸ loop
▸ this - current data in iteration
▸ functions - Subprogram that can be
called by code. Group of instructions
▸ events
▸ click
▸ target

JAVASCRIPT
FUNCTION
▸ group of statements
function sayHi ( name, age ) {
console.log( “Hi “ + name + “ you
are “ + age );
}
sayHi( “Jayde”, 13);

JAVASCRIPT
OBJECT
▸ key value store
{
keyword : “article“,
description : “section of html“,
type : “html“,
saved : false,
creator: Meteor.userId()
}

JAVASCRIPT
IF / ELSE
▸ decision making
if ( num1 > num2 ) {
console.log( “The ﬁst number is larger“ );
} else {
console.log( “The second number is larger“ );
}
is this true?

JAVASCRIPT
COMMON ERRORS
▸ syntax
▸ missing punctuation
▸ missing quotation marks
▸ misspelling commands

CHECK THE DOCS
WHEN IN DOUBT
Javascript Reference

CLIENT SERVER
HTML
CSS JavaScript
Request
DDP
Web App
{{> templateName}}
<h3> {{ keyword}} </h3>
Templates
MiniMongo
Local Storage
Node.js
MongoDB
Collections
JavaScript
MongoDB
/posts/34.html
Publications
Terminal
$ meteor _____
METEOR.JS

METEOR.JS
WHAT DO YOU GET
▸ A whole host of function and methods to build your app faster:
▸ Templates & Helpers - Spacebars, React, Angular
▸ Accounts - {{> loginButtons}}, Meteor.userId, currentUser
▸ Publish & Subscribe
▸ Mongo Collections
▸ Packages - atmospherejs.com
▸ Command Line helpers

METEOR.JS
CREATE A NEW PROJECT
▸ terminal
$ meteor create keywords

CHECK THE DOCS
WHEN IN DOUBT
docs.meteor.com

PROCESS
STRUCTURE
Templates
Actions
Events
Save to DB
Collections
.insert( ) | .update( ) |
Display
Publish | Subscribe

PROCESS
USER STORY
UX / UI DESIGN
DATA MODEL

WHAT DO YOU WANT TO
BUILD?
APP DESIGN & PLANNING

USER STORY
Structure your idea by
creating a user story
detailing every interaction
and goal the user
experiences
TEXT

THINGS TO CONSIDER
▸ Program one feature at a time
▸ Where is the interaction shown?
▸ What feedback does the user receive?
▸ What triggers it?
▸ Does it need to be saved?
▸ What happens if/when it fails what else should happen?
▸ Animations / user experience
▸ Who has access?
▸ What happens if…
▸ 5Ws

USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN
▸ Monica is looking to learn to code. All the words look
confusing to her and the programming language
documents (or docs) are difﬁcult to understand out of
context. She is looking for a resource where she can learn
what things mean easily.
▸ Monica ﬁnds Keywerd

APP DESIGN & PLANNING - UX
▸ On the front page she see's a list of keywords in panels
with their:
▸ Deﬁnition
▸ Code snippet
▸ Person who created
▸ Number of people who saved for practice

▸ In the upper right corner there is a login button
▸ She registers with her email and password
▸ Maybe options for github and/or twitter

▸ Once she's logged in she is able to:
▸ Create a keyword
▸ Save a keyword for practice
▸ See her keywords
▸ See her keywords for practice
▸ See completed practiced keywords
▸ Mark saved keywords complete after practice
▸ Logout

UX / UI DESIGN
Structure your features by
showing visually how a
user would interact with the
software
MARVEL

FIRST RUN.
DID I INCLUDE ALL OF
THE FEATURES FROM
MY USER STORY?

DATA MODEL
Structure your software by
what pieces of information
it needs to remember and
analyze.
WORKFLOWY

FIRST RUN.
IF I CREATED A FORM,
WHAT FIELDS WOULD I
WANT TO HAVE?
WORKFLOWY

PROCESS
STRUCTURE
Templates
Actions
Events
Save to DB
Collections
Display
Publish | Subscribe
HTML
< > </ >
CSS
. { : ; }

METEOR.JS
ADD PACKAGES - ATMOSPHEREJS.COM
▸ terminal
$ meteor add twbs:bootstrap
$ meteor add jquery

CLIENT SERVER
HTML
CSS JavaScript
Request
DDP
Web App
{{> templateName}}
<h3> {{ keyword}} </h3>
Templates
MiniMongo
Local Storage
Node.js
MongoDB
Collections
JavaScript
MongoDB
/posts/34.html
Publications
Terminal
$ meteor _____

PROCESS
STRUCTURE
Templates
Actions
Events
Save to DB
Collections
Display
Publish | Subscribe
JS
( ) { }
HTML
< > </ >
Build out features

PROCESS
STRUCTURE
Templates
Actions
Events
Save to DB
Collections
Display
Publish | Subscribe
JS
( ) { }
Save to the Database

JS
( ) { }
METEOR
CREATE A
COLLECTION

METEOR.JS
CREATE A COLLECTION
▸ Keywerds = new Mongo.Collection(“keywerds”);

MONGODB
DATA MODEL
{
keyword: string
deﬁnition: string
link to docs: string
type: [
css,
html
meteor
javascript
mongo
programming werd
],
example code: string
save: boolean
practiced: boolean
date added: Date
}

MONGODB
DATA MODEL {
keyword: “Template.myTemplate.events()”,
deﬁnition: Specify event handlers for this template.
link to docs: “http://docs.meteor.com/#/full/...”,
type: [meteor],
example code: string,
}

MONGODB
DATA MODEL
{
keyword: “Template.myTemplate.events()”,
deﬁnition: ”Specify event handlers for this template.” ,
link to docs: “http://docs.meteor.com/#/full/template_events”,
type: [meteor],
example code: string,
save: true,
practiced: false,
date added: Date,
user: “user id” Meteor.userId();
}

MONGOLDB
CRUD FUNCTIONS
▸ Collection.insert( );
▸ Collection.update( );
▸ Collection.delete( );

METEOR.JS
INSERTING TO THE DB
▸ stores a value for later
Keywerds.insert({
keywerd: keywerd,
definition: definition,
snippet: snippet
});
var keywerd = event.target.keywerd.value;
var definition = event.target.definition.value;
var snippet = event.target.snippet.value;
Pull data from the form Save to the Database

PROCESS
STRUCTURE
Templates
Actions
Events
Save to DB
Collections
Display
Publish | Subscribe
JS
( ) { }
Save to the Database
HTML
< > </ >

METEOR.JS
HELPERS
Template.panel.helpers({
keywerds: function() {
return Keywerds.ﬁnd();
}
})
}

METEOR.JS
DEPLOY
▸ terminal
$ meteor deploy appname.meteor.com

WRAPPING UP
RESOURCES
▸ docs.meteor.com
▸ Youtube:
▸ Meteor
▸ Josh Owens
▸ theMeteorChef.com
▸ Differential Blog
▸ crater.io

PROTOTYPE
FASTER!
gum.co/meteorcheatsheet
UrbanInnovators.com

Meteor.js for DOers

More Related Content

What's hot

Similar to Meteor.js for DOers

Recently uploaded

Meteor.js for DOers