This intro to javascript and Meteor.js presentation was put together for the VegasJS Meetup (www.javascript.vegas) Nov 17, 2015. We built an app called Keywerds to help new developers learn programming by the use of keywords. Check out the demo here: keywerds.meteor.com.
Stay connected with more lessons for meteor beginners looking to learn to prototype apps at urbaninnovators.org
2. TEXT
GOALS
▸ To help you prototype your first 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
7. 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
9. 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
10. JAVASCRIPT
FUNCTION
▸ group of statements
function sayHi ( name, age ) {
console.log( “Hi “ + name + “ you
are “ + age );
}
sayHi( “Jayde”, 13);
11. JAVASCRIPT
OBJECT
▸ key value store
{
keyword : “article“,
description : “section of html“,
type : “html“,
saved : false,
creator: Meteor.userId()
}
12. JAVASCRIPT
IF / ELSE
▸ decision making
if ( num1 > num2 ) {
console.log( “The fist number is larger“ );
} else {
console.log( “The second number is larger“ );
}
is this true?
17. CLIENT SERVER
HTML
CSS JavaScript
Request
DDP
Web App
File System Database
{{> templateName}}
<h3> {{ keyword}} </h3>
Templates
MiniMongo
Local Storage
Node.js
MongoDB
Collections
JavaScript
MongoDB
/posts/34.html
Publications
Terminal
$ meteor _____
METEOR.JS
18. 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
24. WHAT DO YOU WANT TO
BUILD?
APP DESIGN & PLANNING
25. USER STORY
Structure your idea by
creating a user story
detailing every interaction
and goal the user
experiences
TEXT
26. APP DESIGN & PLANNING
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
27. APP DESIGN & PLANNING
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 difficult to understand out of
context. She is looking for a resource where she can learn
what things mean easily.
▸ Monica finds Keywerd
28. APP DESIGN & PLANNING - UX
USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN
▸ On the front page she see's a list of keywords in panels
with their:
▸ Definition
▸ Code snippet
▸ Person who created
▸ Number of people who saved for practice
29. APP DESIGN & PLANNING - UX
USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN
▸ In the upper right corner there is a login button
▸ She registers with her email and password
▸ Maybe options for github and/or twitter
30. APP DESIGN & PLANNING - UX
USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN
▸ 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
31. UX / UI DESIGN
Structure your features by
showing visually how a
user would interact with the
software
MARVEL
32. FIRST RUN.
DID I INCLUDE ALL OF
THE FEATURES FROM
MY USER STORY?
33. DATA MODEL
Structure your software by
what pieces of information
it needs to remember and
analyze.
WORKFLOWY
34. APP DESIGN & PLANNING - UX
USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN
▸ On the front page she see's a list of keywords in panels
with their:
▸ Definition
▸ Code snippet
▸ Person who created
▸ Number of people who saved for practice
35. FIRST RUN.
IF I CREATED A FORM,
WHAT FIELDS WOULD I
WANT TO HAVE?
WORKFLOWY
43. APP DESIGN & PLANNING - UX
USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN
▸ On the front page she see's a list of keywords in panels
with their:
▸ Definition
▸ Code snippet
▸ Person who created
▸ Number of people who saved for practice
44. APP DESIGN & PLANNING - UX
USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN
▸ In the upper right corner there is a login button
▸ She registers with her email and password
▸ Maybe options for github and/or twitter
45. APP DESIGN & PLANNING - UX
USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN
▸ 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
51. MONGODB
DATA MODEL
{
keyword: string
definition: string
link to docs: string
type: [
css,
html
meteor
javascript
mongo
programming werd
],
example code: string
save: boolean
practiced: boolean
date added: Date
}
52. MONGODB
DATA MODEL {
keyword: “Template.myTemplate.events()”,
definition: Specify event handlers for this template.
link to docs: “http://docs.meteor.com/#/full/...”,
type: [meteor],
example code: string,
}
53. MONGODB
DATA MODEL
{
keyword: “Template.myTemplate.events()”,
definition: ”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();
}
55. 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