Soirée technique JS : Meteor et Ember à l’honneur


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

Soirée Technique aant pour thème à Meteor et Ember

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>&times;</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 } });
    },
  });
}

Soirée Technique consacrée à Meteor et Ember

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.

Soirée Technique dédiée à Meteor et Ember

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 !

Vous aimerez aussi...