einführung in meteor
TRANSCRIPT
S I N G L E U N D T R O T Z D E M G L Ü C K L I C H - E I N E E I N F Ü H R U N G I N M E T E O R
@ M A L A G A N T W W W. R A I L S - E X P E R T S . C O M
W A S I S T M E T E O R ?
S I N G L E PA G E A P P S M I T J AVA S C R I P T
P R I N Z I P I E N
• Client renderd HTML
• Datenaustausch DDP
• Javascript für alles (Client, Server, Datenbank)
• Latency Compensation
• Reactive Apps
• MongoDB
C U R L H T T P S : / /I N S TA L L . M E T E O R . C O M / | S H
D E M O : T O D O L I S T E
A P P G E N E R I E R E N
• meteor create todos
• cd todos
• meteor
V I E W S M I T S PA C E B A R ST E M P L AT E S = H T M L + S PA C E B A R S
<head> <title>Todo List</title></head><body><div class="container"> <header> <h1>Todo List</h1> </header> <ul> {{#each tasks}} {{> task}} {{/each}} </ul></div></body><template name="task"> <li>{{text}}</li></template>
J AVA S C R I P T
if (Meteor.isClient) { // This code only runs on the client Template.body.helpers({ tasks: [ { text: "Aufstehen" }, { text: "Zähneputzen" }, { text: "Duschen" } ] }); }
H T M L D AT E I E N D E F I N I E R E N T E M P L AT E S
T O D O S I N C O L L E C T I O N S
Tasks = new Mongo.Collection("tasks"); if (Meteor.isClient) { // This code only runs on the client Template.body.helpers({ tasks: function () { return Tasks.find({}); } }); }
M O N G O C O N S O L E
db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
E I N G A B E F O R M U L A R H I N Z U F Ü G E N
<form class="new-task"> <input type="text" name="text" placeholder="Type to add new tasks" /> </form>
E V E N T S
Template.body.events({ "submit .new-task": function (event) { var text = event.target.text.value; Tasks.insert({ text: text, createdAt: new Date() // current time }); // Clear form event.target.text.value = ""; // Prevent default form submit return false; } });
S O R T I E R E N
Template.body.helpers({ tasks: function () { return Tasks.find({}, {sort: { createdAt: -1}}); } });
L Ö S C H E N U N D E R L E D I G E N V O N TA S K S
<template name="task"> <li class="{{#if checked}}checked{{/if}}"> <button class="delete">×</button> <input type="checkbox" checked="{{checked}}" class="toggle-checked" /> <span class="text">{{text}}</span> </li></template>
L Ö S C H E N U N D E R L E D I G E N V O N TA S K S
Template.task.events({ "click .toggle-checked": function () { Tasks.update(this._id, {$set: {checked: ! this.checked}}); }, "click .delete": function () { Tasks.remove(this._id); } });
D E P L O Y M E N T A U F M E T E O R . C O M
• meteor deploy todo-wjax2014.meteor.com
M O B I L E : A N D R O I D
$ meteor install-sdk android $ meteor add-platform android $ meteor run android
M O B I L E : I O S
$ meteor install-sdk ios $ meteor add-platform ios $ meteor run ios
S E S S I O N D ATA F Ü R D A S U I
<label class="hide-completed"> <input type="checkbox" checked="{{hideCompleted}}" /> Hide Completed Tasks</label>
E V E N T H A N D L I N G
"change .hide-completed input": function (event) { Session.set("hideCompleted", event.target.checked); }
U P D AT E D E R H E L P E R
Template.body.helpers({ tasks: function () { if (Session.get("hideCompleted")) { // If hide completed is checked, filter tasks return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}}); } else { // Otherwise, return all of the tasks return Tasks.find({}, {sort: {createdAt: -1}}); } }, hideCompleted: function () { return Session.get("hideCompleted"); } });
I N C O M P L E T E I N D I C AT O R
incompleteCount: function () { return Tasks.find({checked: {$ne: true}}).count(); }
<h1>Todo List ({{incompleteCount}})</h1>
L AT E N C Y C O M P E N S AT I O N
• Meteor schickt Daten an MongoDB
• Client geht davon aus, dass alles ok ist und zeigt das Ergebnis vorher schon an.
R A N A N D E N S P E C K
R E S S O U R C E N
• https://www.discovermeteor.com/
• https://www.meteor.com/
• https://www.yauh.de/articles/376/best-learning-resources-for-meteorjs/
F R A G E N U N D A N T W O R T E N