Embed Size (px)
Citation preview
What is 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.
Setup
» MacOS or Ubuntucurl https://install.meteor.com/ | sh
» WindowsGo get a Mac or a Ubuntu laptop
DemoSimple Todo App with Meteor ♡♡♡
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>
<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>
task.css
.task{ font-size: 20px; background-color: #EBEBEB; padding: 10px; margin-bottom: 2px;}
.done{ text-decoration: line-through;}
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' : '' } });
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(); } });}
Template.CompleteCounter.helpers({ completeTask: function(){ return Todos.find({is_done: true}).count(); },
totalTasks: function(){ return Todos.find({}).count(); } });}
if(Meteor.isServer){
}
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
Thank you!
