TodoAppwith Meteor
» Long Nguyen
» @vangnol
Whatis Meteor?
Meteor is a framework for building incredible web
application. Meteor helps you build complex web
applicati...
Setup
» MacOS or Ubuntu
curl https://install.meteor.com/ | sh
» Windows
Go get a Mac or a Ubuntu laptop
Demo
Simple Todo App with Meteor
♡♡♡
task.html
<head>
<title>Simple Todo App</title>
</head>
<body>
<h1>Awesome Todo App</h1>
<hr/>
<div class="container">
{{>...
<template name="Task">
<input type="checkbox" name="is_done" {{isDoneChecked}} />
{{subject}}
</template>
<template name="...
task.css
.task{
font-size: 20px;
background-color: #EBEBEB;
padding: 10px;
margin-bottom: 2px;
}
.done{
text-decoration: l...
task.js
Todos = new Meteor.Collection('todos');
if(Meteor.isClient){
Template.ListTasks.helpers({
tasks: function(){
retur...
Template.Task.events({
"click [name=is_done]": function(e, tmpl){
var id = this._id;
var isDone = tmpl.find('input').checke...
Template.CompleteCounter.helpers({
completeTask: function(){
return Todos.find({is_done: true}).count();
},
totalTasks: fun...
References
» MeteorHacks
» Best Learning Resources
» Meteor Packages
» Why Meteor will kill Ruby on Rails
» Meteor Won’t K...
Thankyou!
Upcoming SlideShare
Loading in …5
×

Simple todo app with meteor

919 views
634 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
919
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Simple todo app with meteor

  1. 1. TodoAppwith Meteor » Long Nguyen » @vangnol
  2. 2. Whatis Meteor? Meteor is a framework for building incredible web application. Meteor helps you build complex web application but in minimal amount of time. It's full- stack framework. On the server it runs on Nodejs, which means Meteor written in Javascript. Meteor has out of the box integration with MongoDB database. Meteor uses DDP Protocal to communicate between client and server.
  3. 3. Setup » MacOS or Ubuntu curl https://install.meteor.com/ | sh » Windows Go get a Mac or a Ubuntu laptop
  4. 4. Demo Simple Todo App with Meteor ♡♡♡
  5. 5. task.html <head> <title>Simple Todo App</title> </head> <body> <h1>Awesome Todo App</h1> <hr/> <div class="container"> {{> CreateTask}} {{> ListTasks}} {{> CompleteCounter}} </div> </body> <template name="ListTasks"> <ul> {{#each tasks}} <li class="task {{doneClass}}">{{> Task}}</li> {{/each}} </ul> </template>
  6. 6. <template name="Task"> <input type="checkbox" name="is_done" {{isDoneChecked}} /> {{subject}} </template> <template name="CreateTask"> <form class="create-task" > <input type="text" placeholder="Creating new task...!" /> </form> </template> <template name="CompleteCounter"> <h3>{{completeTask}} / {{totalTasks}} tasks completed</h3> </template>
  7. 7. task.css .task{ font-size: 20px; background-color: #EBEBEB; padding: 10px; margin-bottom: 2px; } .done{ text-decoration: line-through; }
  8. 8. task.js Todos = new Meteor.Collection('todos'); if(Meteor.isClient){ Template.ListTasks.helpers({ tasks: function(){ return Todos.find(); }, doneClass: function(){ return this.is_done ? 'done' : ''; } }); Template.Task.helpers({ isDoneChecked: function(){ return this.is_done ? 'checked' : '' } });
  9. 9. Template.Task.events({ "click [name=is_done]": function(e, tmpl){ var id = this._id; var isDone = tmpl.find('input').checked; Todos.update({_id: id}, {$set: { is_done: isDone}}); } }); Template.CreateTask.events({ 'submit form': function(e, tmpl){ e.preventDefault(); var subject = tmpl.find('input').value; Todos.insert({subject: subject, created_at: new Date, is_done: false}); var form = tmpl.find('form'); form.reset(); } }); }
  10. 10. Template.CompleteCounter.helpers({ completeTask: function(){ return Todos.find({is_done: true}).count(); }, totalTasks: function(){ return Todos.find({}).count(); } }); } if(Meteor.isServer){ }
  11. 11. References » MeteorHacks » Best Learning Resources » Meteor Packages » Why Meteor will kill Ruby on Rails » Meteor Won’t Kill Rails Anytime Soon » How to Learn JavaScript Properly
  12. 12. Thankyou!

×