On aime, on partage #50

Bienvenue dans la série « On aime, on partage » de Viseo Technologies ! Chaque semaine retrouvez les meilleurs articles du web issus de notre veille technologique.

Web & Mobile

Why AJAX isn’t enough

Un article sur le pubsup et WAMP (Web Application Messaging Protocol).

Comparatif StackOverflow de frameworks JS populaires

Quelques statistiques comparatives sur le volume de questions / réponses pour AngularJS / EmberJS / Backbone.
Chacun pourra interpréter à sa façon.

.NET

Gestion des exceptions avec Polly

Polly est un package Nuget qui permet de définir des policy pour la gestion des exceptions de manière fluent. Il permet de gérer des policy comme Retry, Retry Forever, Wait and Retry ou Circuit Breaker.

Scott Hanselman en parle dans son blog.

Lire la suite

Routes et templates Ember.js

Cet article est le troisième d’une série consacrée à la découverte d’Ember.js, framework javascript pour créer des applications web single page, que j’utilise quotidiennement avec bonheur depuis maintenant plus d’un an.

Dans le précédent article, nous avons déjà écrit le routeur spécifiant les différents états de l’application. Rappel:

App.Router.map(function () {
    this.resource('catalog', function () {
        this.resource('category', { path: '/category/:category_id' }, function () {
            this.resource('item', { path: '/item/:item_id' });
        });
    });
    this.route('checkout');
});

Nous allons maintenant implémenter les routes et les templates permettant de naviguer dans l’application.
Récupérer la branche step1 du projet git si vous avez manqué le précédent article.

git checkout step1

En cas de problème vous pourrez regarder la version finale de ce 3ème article dans la branche step2.

Continuons… Une ressource est une route spécialisée regroupant d’autres routes.
Naviguer dans l’application revient donc à faire le rendu des différentes routes rencontrées sur le chemin.

Préparatifs

Mise en page dans le template application

Qui dit hiérarchie de route dit hiérarchie d’IHM. Nous devons donc d’abord éditer le template application pour indiquer à Ember via un helper {{outlet}} l’emplacement où il devra insérer le rendu d’une route enfant:

<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1><a href="#">Flashy clothes store</a></h1>
        <h4>An Ember.js demo application</h4>
    </header>
    {{outlet}}
</script>

S’outiller pour débugger en cas de problème

En cas de problème dans ce tuto, pas de panique, Javascript et Ember sont maintenant bien outillés.
1er réflexe: ouvrir la console du navigateur pour chercher l’ erreur et afficher sa stacktrace. Si celà ne suffit pas d’autres solutions existent:

Logger les transitions du routeur (en dev)
var App = Ember.Application.create({
    LOG_TRANSITIONS: true
});
Utiliser Chrome et installer l’extension Ember Inspector

Lire la suite

Démarrer un projet Ember.js

Cet article est le second d’une série consacrée à la découverte d’Ember.js, framework javascript pour créer des applications web single page, que j’utilise quotidiennement avec bonheur depuis maintenant plus d’un an.

Après une introduction rapide aux concepts fondamentaux d’Ember dans le 1er article, passons à la pratique en ciblant une première application idéale : un site de commerce en ligne. La vente de vêtements flashy permettra d’exploiter une police d’icônes vectorielles sans se prendre la tête avec les illustrations graphiques (oui c’est fluo, c’est moche et je le revendique).

Obtenir le kit de démarrage rapide du projet

Cloner le projet Github:

git clone git@github.com:philcast/flashy-clothes-store.git

Autopsie du kit:

  • index.html: source html unique de notre appli single page
  • css
    • app.css: styles css de l’application
    • foundation: toolkit css avec grille responsive (version 5.x)
  • fonts
    • cloths: police d’icones vectorielles que l’on pourra utiliser en css en modifiant leur taille et leur couleur
  • js
    • app.js: source js de l’application
    • lib: les dépendances js
      Dépendance Version Description
      ember.js 1.3.2 (obligatoire)
      ember-data.js 1.0.0-beta.6 librairie de persistance de données pour Ember.js (facultatif – utilisé plus tard)
      handlebars.js 1.2.1 librairie de templating logic-less (obligatoire)
      foundation 5.x librairie js nécessaire aux plugins du toolkit css Foundation + dépendance Modernizr (facultatif)
      jquery 2.0.3 (obligatoire)
Sources du projet:

Le fichier app.js contient le minimum vital pour créer une application Ember.js. La variable App servira d’espace de nommage pour éviter de possibles conflits avec les librairies tierces.

var App = Ember.Application.create();

Le fichier index.html contient lui un script inline de type text/x-handlebars dans son body. Il s’agit du template Handlebars de l’application, qui sera compilé au runtime par Ember pour générer du html à insérer dans le DOM (avant la balise fermante du body).

<html>
...
<body>

<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1><a href="#">Flashy clothes store</a></h1>
        <h4>An Ember.js demo application</h4>
    </header>
</script>

<script src="js/lib/jquery-2.0.3.min.js"></script>
<script src="js/lib/modernizr-2.7.1.min.js"></script>
<script src="js/lib/foundation-5.0.3/foundation.min.js"></script>
<script src="js/lib/handlebars-1.2.1.js"></script>
<script src="js/lib/ember-1.3.2.js"></script>
<script src="js/app.js"></script>

</body>
</html>

Pour simplifier le tutoriel, tous les futurs templates seront regroupés dans cette même page html.

Conception des modèles

Nous concevons ici des modèles pour Ember Data, un store client permettant de s’interfacer avec des fournisseur de données tiers via des adaptateurs.

Lire la suite

A la découverte d’Ember.js

Cet article est le premier d’une série consacré à la découverte d’Ember.js,  framework javascript pour créer des applications web single page, que j’utilise quotidiennement avec bonheur depuis maintenant plus d’un an.

Ember.js se démarque en imposant une architecture et des conventions permettant de structurer un projet et de gagner en productivité.
–   : le coût d’apprentissage est un peu plus élevé que d’autres frameworks (malgré les récents efforts de documentation et de stabilisation de l’api).
–   : 67kb minifié-compressé, sans compter les dépendances js obligatoires Handlebars et JQuery.
+ : en privilégiant les conventions à la configuration, le framework nous apporte beaucoup de magie pour plus de productivité.
+ : en utilisant la même recette imposée, tous les projets se ressemblent.

Concepts de base d’Ember.js

Modèle objet riche

Javascript est un langage orienté objet à prototype. Ember.js introduit la notion de classe afin de faciliter l’héritage.

Exemple de définition d’une classe utilisateur et de son instanciation:

App.User = Ember.Object.extend({
   //propriété avec une valeur par défaut
   creationDate: new Date()
});
var cowboy = App.User.create({
   firstName: 'Clint',
   lastName: 'Eastwood'
});

Lire la suite