The document outlines an agenda for a Meteor.js workshop, including presentations by two co-founders on their experiences using Meteor.js to build apps. It provides examples of apps built with Meteor, such as a todo list app, and walks through building a simple todo list app in Meteor.js to demonstrate its features and capabilities.

1. Arabnetdesign+codeday
Riyadh
11 Nov 2014
Meteor.js
Building real time apps for web & mobile in a fraction of the time

2. +

3. present….

5. 5
JawadAbdulsamad,Co-founder@KayfakCorp.
JawadhasbeenusingMeteorsinceitsearlydaysandbuilttheoriginaldemosforKayfakappforweb&mobileinMeteor.HeistheRiyadh‘captain’fortheMeteorcommunityandisexcitedaboutthepotentialofMeteortomakerapidweb& mobileappdevelopmentaccessibletomorepeople.
Jawad’sbackgroundisinmanagementconsulting.HeisfromLondon,hasanMAfromOxfordandpreviouslyworkedatMcKinsey,Ask.comandSTC.
MohamedTahaIbrahim,Co-founder@Dopravo
Mohamedco-foundedDopravobackin2008.HehasledseveraleBusinesssolutionsimplementationsinthegovernmentandprivatesectors.InhisfreetimeheenjoysdevelopingsolutionsinJavaScriptframeworkssuchas:Knockout.js, andAngularJS.
Mohamed’sbackgroundisinRoboticsengineeringfromMonashUniversity.
HOSTING TODAY’S WORKSHOP

6. 6
1.Why Meteor?
2.What can I build with this?
3.Example app
4.Building a "todos" app in 30m
5.Q&A
AGENDA

7. 7
1.Why Meteor?
2.What can I build with this?
3.Example app
4.Building a "todos" app in 30m
5.Q&A
AGENDA

8. 8
Meteor is a complete open source platformfor building web and mobile appsin pure JavaScript

9. 9
Build awesome user experiences
Modern UI
Browser & mobile
Live updates
Ultra responsive
Easily integrate with libraries like famo.us and velocity.js to create a slick native experience
Rapidly add mobile support and extend your app experience seamlessly onto tablet & smartphones
Data reactively updates live on the page when it changes making it easy to create real time experiences
Changes made on a client are reflected instantly using ‘latency compensation’ which reduces laggyperformance

10. 10
Develop apps simply and quickly
Radically less code
One language everywhere
Unified package system
Hot deploys
Write a apps in much fewer lines of code due to the reactive programming model extending from DB to client
Simple APIs enable you to write simple javascriptand run it on both client and server
Super-simple, reliable and integrated package system. A wealth of packages available to run on web & mobile
Simple one-command deploys which trigger a ‘hot code reload’ across all browsers and mobile devices

11. AGENDA
11
1.Why Meteor?
2.What can I build with this?
3.Example app
4.Building a "todos" app in 30m
5.Q&A

12. WORKPOP: LA-BASED METEOR STARTUP
12
Description
A simple tool for employers to hire employees for hourly tasks
Funding
$7.9m
Evan Williams, Biz Stone & others
What they said…
“the most rapid prototyping, iteration and development we’ve seen from an early stage company” Dan Scholnick

13. KAYFAK: ARABIC MESSAGING APP
13
Description
Instant messaging app for the Arabic speaking market
Current stage
Pre-seed funding and private beta
Find out more
www.kayfak.co
Meteor features used
Meteor Cordova for iOS & Android

14. 14
1.Why Meteor?
2.What can I build with this?
3.Example app
4.Building a "todos" app in 30m
5.Q&A
AGENDA

15. 15
DEMO 1
Illustreets.co.uk

16. 16
DEMO 2
Meteor-todos

17. 17
DEMO 3
Kayfakmobile app

18. 18
1.Why Meteor?
2.What can I build with this?
3.Example app
4.Building a "todos" app in 30m
5.Q&A
AGENDA

19. GETTING CONNECTED
19
http://goo.gl/tIdk8V
https://www.meteor.com/install
Wifi: tbd
Password: tbd

20. YOUR FIRST METEOR APP
20
https://www.meteor.com/install
Let’s walk through the official tutorial together and see how Meteor really works

21. FIRST THINGS FIRST: INSTALL METEOR
21
curl https://install.meteor.com/ | sh
Great, that was pretty easy. Now let’s build our first meteor app!

22. STEP 1: CREATE AN APP
22
meteor create arabnet-todos
This creates all the files you need to run your app:
•arabnet-todos.js-> JS loaded on client & server
•arabnet-todos.html-> where you define your view templates
•arabnet-todos.css-> app styling
•.meteor -> internal meteor files
cd arabnet-todos
meteor
http://localhost:3000
Your app is running! Ready for a hotcode reload??

23. STEP 2a: DEFINE YOUR VIEW TEMPLATES
23
<!--simple-todos.html -->
<head>
<title>ArabnettodoList</title>
</head>
<body>
<div class="container">
<header>
<h1>ArabnetTodoList</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template> and tags are treated like regular HTML but code inside tags is parsed and compiled into ‘spacebars’ templates and can then be included elsewhere in HTML using or referenced in JS using
// simple-todos.js
if(Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: [
{ text: "This is task 1"},
{ text: "This is task 2"},
{ text: "This is task 3"}
]
});
}
Add logic to your spacebars templates using curly braces {{ example }}
Here we iterate over the tasks array defined in the taskshelper method in our javascript
Here we created a JS helper called taskson Template.bodythat returns a simple array. We then call this in our template, and iterate over it to create the <ul> items which will eventually represent our todos

24. STEP 2b: ADDING CSS
24
https://www.meteor.com/try/2
Let’s go to the tutorial page & copy some CSS to put into arabnet-todos.css
This tutorial will focus on how to use Meteor so we’ll grab this ready-made CSS as a shortcut!

25. STEP 3: COLLECTIONS
25
// simple-todos.js
Tasks = newMongo.Collection("tasks");
if(Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: function() {
returnTasks.find({});
}
});
}
// open Meteor mongo console
$ meteor mongo
$ db.tasks.insert({ text: "Hello world!", createdAt: newDate() });
Here we update the code to remove the text array containing the placeholder ‘todos’ and replacing it with a Meteor collectionin Mongo which exists on both server andthe client (mini-mongo)
Here we will manually manipulate the mongoDBin order to see Meteor’s reactivityin action.
Upon inserting a new task into the ‘tasks’ collection you will see your app immediately update and reflect this new task item on the screen using the template we defined in the previous step.

26. STEP 4: FORMS & EVENTS
26
// Inside existing arabnet-todos.html file
<header>
<h1>TodoList</h1>
<!--add a form below the h1 -->
<form class="new-task">
<input type="text"name="text"
placeholder="Type to add new tasks"/>
</form>
</header>
// Inside the if (Meteor.isClient) block, right after Template.body.helpers:
Template.body.events({
"submit .new-task": function(event) {
// This function is called when the new task form is submitted
vartext = event.target.text.value;
Tasks.insert({
text: text,
createdAt: newDate() // current time
});
// Clear form
event.target.text.value = "";
// Prevent default form submit
returnfalse;
}
});
//Replace Template.body.helpersfind{} with this code to sort by time
returnTasks.find({}, {sort: {createdAt: -1}});
The events API uses keys & event handlers like Jqueryso will be very familiar for users of JS MVC frameworks like Backbone. The cool thing is that we add the task item (“document” in Mongo) directly from the client (latency compensation)
We add a form to the HTML giving it a class .new-taskwhich will be used in the JS file to capture the event & add new tasks to Mongo

27. STEP 5: UPDATE & REMOVE
27
<!--replace the existing task template with this code --> <template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">&times;</button>
<input type="checkbox"checked="{{checked}}"
class="toggle-checked"/>
<span class="text">{{text}}</span>
</li>
</template>
// In the client code, below everything elseTemplate.task.events({
"click .toggle-checked": function() {
// Set checked property to opposite of its current value
Tasks.update(this._id, {$set: {checked: ! this.checked}});
},
"click .delete": function() {
Tasks.remove(this._id);
}
});
Here we are simply adding a checkbox to enable users to indicate when a task is complete and can be removed from the list. We use Spacebars logic
{{ #if checked }}to apply a class of .checkedto the <li> items.
We also add a delete button
In the JS file we now create an event which triggers when a task item’s checkbox is clicked and will update the task item’s corresponding ‘document’ in MongoDBto have an attribute of checked which will be set to the opposite of whatever its current value is.
Similarly we create a delete event that removes the document from Mongo when it is clicked.
this._idin an event grabs the current task (this) and _idgrabs its unique Mongo identifier field

28. STEP 6: DEPLOY TO THE WEB!
28
meteor deploy your_app_name.meteor.com
THAT’S IT!!! Your app just hit a devserver hosted by Meteor
http://your_app_name.meteor.com
Try it out on your Mac and mobile browser…

29. STEP 7: RUNNING ON MOBILE
29
meteor install-sdkios
Follow all the prompts to set up everything you need to run iosapps
Sets up the app on your iOS device via xcode.
Awesome.
meteor add-platform ios
meteor run ios
meteor run ios-device
This gets your app up and running on the iOS simulator

30. STEP 8: USING SESSION AS A REACTIVE DATA STORE
30
<!--add the checkbox to <body> right below the h1 -->
<label class="hide-completed">
<input type="checkbox" checked="{{hideCompleted}}"/>Hide Completed Tasks
</label>
<!--display the count at the end of the <h1> tag --> <h1>TodoList ({{incompleteCount}})</h1>
// Add to Template.body.events
"change .hide-completed": function(event) { Session.set("hideCompleted", event.target.checked);
}
// Replace the existing Template.body.helpersTemplate.body.helpers({
tasks: function() {
if(Session.get("hideCompleted")) {
// If hide completed is checked, filter tasks
returnTasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
} else{
// Otherwise, return all of the tasks
returnTasks.find({}, {sort: {createdAt: -1}});
}
},
hideCompleted: function() {
returnSession.get("hideCompleted");
}
});
// Add to Template.body.helpers
incompleteCount: function() { returnTasks.find({checked: {$ne: true}}).count();
}
Now we will add a checkbox & use session to store the completed state of each task. If hide completed is selected the list will be sorted and only incomplete tasks will be shown.
We also use a similar technique to show the current count of incomplete tasks

31. 31
1.Why Meteor?
2.What can I build with this?
3.Case study
4.Building a "todos" app in 30m
5.Q&A
AGENDA

32. RESOURCES & LINKS
32
•Discover Meteor (https://www.discovermeteor.com/)
•Evented Mind (https://www.eventedmind.com/)
•Meteor Hacks (https://meteorhacks.com/)
•http://todomvc.com/
•www.dopravo.com
•www.kayfak.co
•Contact us:
–jawad@kayfak.co
–mohamed@dopravo.com