En février, le front était à l’honneur lors de notre soirée technique du mois. C’était l’occasion de découvrir de nouveaux frameworks: Meteor et Ember !
Un grand merci aux présentateurs et à Sylvain Cau pour l’organisation !
Présentation de Meteor par Evan Liomain
Evan Liomain est développeur front chez SFEIR.
MeteorJS est la plateforme JS fullstack pour développer des applications web, mobile et desktop. Avec MeteorJS, on peut :
- créer, builder et déployer rapidement une application
- partager son code client et server
- accéder à des données temps réelles grâce au combo MongoDB, websocket et livequery
- disposer d’un riche écosystème de package fullstack
Voici un petit exemple d’une TODO list :
Installation de meteor
curl https://install.meteor.com/ | sh
Création du projet :
meteor create myTodoList cd myTodoList
Remplacez le contenu de myTodoList.html et myTodoList.js avec :
myTodoList.html
<head>
<title>Todo List</title>
</head>
<body>
<header>
<h1>Todo List ({{incompleteCount}})</h1>
<form>
<input type="text" name="text" placeholder="Type to add new tasks" />
</form>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</body>
<template name="task">
<li>
<button>×</button>
<input type="checkbox" checked="{{checked}}" />
<span>{{text}}</span>
</li>
</template>
myTodoList.js
Tasks = new Mongo.Collection('tasks');
Meteor.methods({
addTask: function (text) {
Tasks.insert({
text : text,
createdAt : new Date()
});
},
deleteTask: function (taskId) {
Tasks.remove(taskId);
},
setChecked: function (taskId, setChecked) {
Tasks.update(taskId, { $set: { checked: setChecked} });
}
});
if (Meteor.isClient) {
Template.body.helpers({
tasks: function () {
return Tasks.find({}, { sort : { createdAt : -1 } } );
},
incompleteCount: function () {
return Tasks.find({checked: { $ne : true } } ).count();
}
});
Template.body.events({
'submit .new-task': function (event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
var text = event.target.text.value;
// Insert a task into the collection
Meteor.call('addTask', text);
// Clear form
event.target.text.value = '';
}
});
Template.task.events({
'click .toggle-checked': function () {
// Set the checked property to the opposite of its current value
Meteor.call('setChecked', this._id, ! this.checked);
},
'click .delete': function () {
Meteor.call('deleteTask', this._id);
}
});
}
Lancez le projet :
meteor
Allez sur localhost:3000 pour admirer le résultat.
Les slides de cette présentation sont disponibles.
Livecoding Meteor par Vianney Lecroart
Vianney Lecroart est freelance et développe principalement avec Meteor. Il est également le créateur du meetup Meteor Paris et fondateur de Talkus.
Il nous a présenté un début de twitter-clone en livecoding. Le code est ici.
twitteor.html
<head>
<title>twitteor</title>
</head>
<body>
{{> input}}
{{> tweets}}
</body>
<template name="input">
<input type="text">
</template>
<template name="tweets">
{{#each tweets}}
{{createdAt}} <b>{{text}}</b>
{{/each}}
</template>
twitteor.js
Tweets = new Mongo.Collection('tweets');
if (Meteor.isClient) {
Template.input.events({
'change #text': function () {
Tweets.insert({ text: $('#text').val(), createdAt: new Date });
$('#text').val('');
}
});
Template.tweets.helpers({
tweets() {
return Tweets.find({}, { sort: { createdAt: -1 } });
},
});
}
Il a aussi utilisé le client en ligne de commande Meteor pour déployer l’application sur http://sfeir.meteor.com/.
Présentation d’EmberJS par Sylvain Cau
Sylvain est développeur front chez SFEIR et formateur pour plusieurs SFEIR School.
Il a travaillé pendant plusieurs années avec AngularJS 1.x, et tout le monde attendait donc un comparatif entre les deux. Sans trop troller, il a insisté sur les avantages et les inconvénients de EmberJS sans donner de classement entre les frameworks. Cela invite les gens à se faire une idée de l’outil et de l’essayer.
Sylvain travaille actuellement sur un hands-on EmberJS.
Voir Les slides et le code de sa présentation !
The post Soirée technique JS : Meteor et Ember à l’honneur appeared first on SFEIR Mag.