Recommended
More Related Content
What's hot
What's hot (20)
Similar to Meteor.js for DOers
Similar to Meteor.js for DOers (20)
Recently uploaded
Recently uploaded (20)
Meteor.js for DOers
- 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
- 4. 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
- 6. JAVASCRIPT
- 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
- 8. JAVASCRIPT VAR ▸ stores a value for later var x = 1; keyword operator end statement
- 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?
- 13. JAVASCRIPT COMMON ERRORS ▸ syntax ▸ missing punctuation ▸ missing quotation marks ▸ misspelling commands
- 14. CHECK THE DOCS WHEN IN DOUBT Javascript Reference
- 16. 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
- 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
- 19. METEOR.JS CREATE A NEW PROJECT ▸ terminal $ meteor create keywords
- 20. CHECK THE DOCS WHEN IN DOUBT docs.meteor.com
- 21. PROCESS STRUCTURE Templates Actions Events Save to DB Collections .insert( ) | .update( ) | Display Publish | Subscribe
- 23. PROCESS USER STORY UX / UI DESIGN DATA MODEL
- 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
- 37. METEOR.JS
- 38. PROCESS STRUCTURE Templates Actions Events Save to DB Collections .insert( ) | .update( ) | Display Publish | Subscribe
- 39. PROCESS STRUCTURE Templates Actions Events Save to DB Collections .insert( ) | .update( ) | Display Publish | Subscribe HTML < > </ > CSS . { : ; }
- 40. METEOR.JS ADD PACKAGES - ATMOSPHEREJS.COM ▸ terminal $ meteor add twbs:bootstrap $ meteor add jquery
- 41. 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 _____
- 42. PROCESS STRUCTURE Templates Actions Events Save to DB Collections .insert( ) | .update( ) | Display Publish | Subscribe JS ( ) { } HTML < > </ > Build out features
- 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
- 46. PROCESS STRUCTURE Templates Actions Events Save to DB Collections .insert( ) | .update( ) | Display Publish | Subscribe JS ( ) { } Save to the Database
- 47. 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 _____
- 48. MONGODB
- 49. JS ( ) { } METEOR CREATE A COLLECTION
- 50. METEOR.JS CREATE A COLLECTION ▸ Keywerds = new Mongo.Collection(“keywerds”);
- 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(); }
- 54. MONGOLDB CRUD FUNCTIONS ▸ Collection.insert( ); ▸ Collection.update( ); ▸ Collection.delete( );
- 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
- 56. PROCESS STRUCTURE Templates Actions Events Save to DB Collections .insert( ) | .update( ) | Display Publish | Subscribe JS ( ) { } Save to the Database HTML < > </ >
- 57. METEOR.JS HELPERS Template.panel.helpers({ keywerds: function() { return Keywerds.find(); } }) }
- 58. METEOR.JS DEPLOY ▸ terminal $ meteor deploy appname.meteor.com
- 59. WRAPPING UP RESOURCES ▸ docs.meteor.com ▸ Youtube: ▸ Meteor ▸ Josh Owens ▸ theMeteorChef.com ▸ Differential Blog ▸ crater.io