EmberJs – De l’intérêt d’utiliser les Namespaces Ember ou comment connaître le nom de la classe d’une instance d’Ember.Object

Certaines parties de Ember/Ember-Data sont assez obscures pour les nouveaux venus. Parfois, les comportements du framework peuvent paraître relever de la magie aussi longtemps qu’on ne se plonge pas dans le code pour en isoler certains mécanismes.

C’était pour moi le cas concernant les requêtes émises par EmberData en fonction des modèles définit dans votre application.

Considérons le bout de code suivant :

MyApp.User = DS.Model.extend({
    firstname: DS.attr('string'),
    lastname: DS.attr('string')
    // ...
});

MyApp.User.find();

Lorsqu’on exécute un find sur ce modèle, EmberData est suffisamment intelligent pour lancer une requête GET sur /url/de/votre/api/user.

Mais comment ?

Quand on décortique l’adapter, on constate qu’au moment de construire la requête Ajax, ce dernier fait appel à la méthode rootForType du Serializer :

rootForType: function(type) {
    var typeString = type.toString();
    // [...]
    var parts = typeString.split(".");
    var name = parts[parts.length - 1];
    return name.replace(/([A-Z])/g, '_$1').toLowerCase().slice(1);
}

C’est en fait tout bête, le Serializer fait un toString sur notre classe du modèle.

MyApp.User.toString() // => MyApp.User

Et pour obtenir le même résultat depuis une instance, EmberData utilise tout simplement l’attribut constructor de l’objet :

MyApp.User.find(someId).then(function(someUser) {
    someUser.contructor.toString(); // => MyApp.User
});

On continue néanmoins à nager en pleine magie, comment Ember est-il capable d’afficher ce résultat sur un toString() d’un objet quelconque.
Ember redéfinie de manière intelligente la méthode toString de la manière suivante :

Ember.Mixin.prototype.toString = function() {
  if (!Ember.BOOTED && !this[NAME_KEY]) {
    processAllNamespaces();
  }

  var ret;
  if (this[NAME_KEY]) {
    ret = this[NAME_KEY];
  } else {
    var str = superClassString(this);
    if (str) {
      ret = "(subclass of " + str + ")";
    } else {
      ret = "(unknown mixin)";
    }
    this.toString = makeToString(ret);
  }

  return ret;
};

En lisant ce bout de code, on constate qu’un traitement particulier est fait à l’initialisation de l’application Ember pour parser tous les Namespaces.
Ember parcourt de manière récursive l’ensemble des Namespaces déclarés et surcharge pour chacune des classes appartenant à ces namespaces la méthode toString, de manière à renvoyer un path de la forme MyNameSpace.MySubNameSpace.MyAmazingClass.

Tout simplement !

Et je dois dire que ce comportement est bien pratique pour calculer certaines propriétés de manière générique, en se basant justement sur le nom de notre classe via la méthode toString.

Exemple :

// Au sein d'une classe héritant de Ember.Object et appartenant à un Namespace quelconque
myPropertyWhichReallyNeedMyClassname: function() {
    var parts = this.constructor.toString().split('.'),
        name = parts[parts.length - 1];

    return 'Something' + name;
}.property(),

Plus d’infos ici : http://www.emberist.com/2012/04/09/naming-conventions.html
Et dans le code évidemment : https://github.com/emberjs/ember.js/blob/master/packages/ember-runtime/lib/system/namespace.js

Ember Data Serialization Process – Hooks

Le Serializer de Ember Data s’occupe de transformer une instance d’un modèle Ember dans le format accepté par votre API.
Pour cela, Ember Data met à la disposition du développeur toute une série de Hooks permettant de s’adapter à chaque API, aussi complexe et peu consistante soit-elle.

Le code de Ember Data est extrêmement bien documenté mais comme on dit qu’une image vaut toujours mieux qu’un long discours, j’en ai extrait ce graphique me permettant de trouver plus rapidement où me brancher selon les cas :

Ember Data Serialization Process

Peut-être qu’il pourra être utile à certains.

Et pour plonger dans le code du Serializer : https://github.com/emberjs/data/blob/master/packages/ember-data/lib/system/serializer.js

Premiers pas avec Node.js – Installation de Node et Express

Edit du 26/11/2012

Depuis la rédaction de cet article, nodejs et npm ont beaucoup évolué (A l’époque, node était en version 0.4, il est désormais en 0.8 !).
La manière la plus simple de les installer à mon sens est de passer par le package manager de sa distribution.
Sous Ubuntu :

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm

RDV ici pour plus d’infos : https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

Article d’origine

Chez PMSIpilot, à chaque fin de Sprint, les équipes techniques organisent et participent à ce qu’on appelle les « ateliers ». Comme tout bon geek qui se respecte, j’ai une soif insatiable d’apprendre de nouvelles choses et je participe donc en général au plus grand nombre possible de ces ateliers. Un de ceux qui m’ont le plus marqué est sans aucun doute celui qui présentait le fonctionnement et l’utilisation de Node.js.

Je vais donc profiter de ce blog pour faire un retour au fur et à mesure de ma découverte de Node.js et de son écosystème.
Ce premier billet résume l’installation de Node et Express et me servira de mémo pour retrouver facilement les commandes qui vont bien.

Node.js est un framework très en vogue qui consiste à utiliser le langage Javascript avec le moteur V8 de Google côté serveur pour servir les requêtes HTTP reçues.

Parmis les intérêts majeurs de ce type d’approche on retient notamment :

  • L’approche évènementielle du framework (entrées / sorties non bloquantes…)
  • La possibilité d’utiliser un seul langage côté serveur et côté client pour les applications Full JS

Ainsi, grâce à sa légèreté et à ses I/O non bloquants, Node.js permet de développer une application web capable de recevoir et de répondre à un nombre de requêtes infiniment plus conséquent qu’une même application développée avec une pile LAMP classique.
C’est toute la philosophie du développement web qui se voit bouleversée par cette approche évènementielle.

Pour plus d’informations à ce sujet, je vous invite à lire les articles suivants :

Let’s get started!

Première étape, télécharger et installer Node.js. Pour se faire RDV sur le site officiel pour télécharger la dernière release en date : http://nodejs.org/#download. Décompressez l’archive, rendez-vous dans le dossier et exécutez les commandes suivantes une par une :

mkdir ~/local
./configure --prefix=$HOME/local/node
make
make install
export PATH=$HOME/local/node/bin:$PATH

La commande make prend un certain temps à s’exécuter donc il faut s’armer de patience. Ensuite le reste est trivial.
A noter que si au moment du lancement de configure, vous avez une erreur du type Could not autodetect OpenSSL support. Make sure OpenSSL development packages are installed, c’est qu’il vous manque la lib OpenSSL.
Dans ce cas, un petit apt-get résoud le problème :

sudo apt-get install libssl-dev

Dans le même ordre d’idée, il se peut qu’un message vous avertisse qu’il manque un compilateur du type g++ / c++. Dans ce cas :

sudo apt-get install g++

Voilà une bonne chose de faite. Testez l’installation en exécutant la commande suivante :

obalais@server:~$ node -v
v0.4.7

Même s’il est possible de créer une application web complète juste avec Node.js, nous allons installer des plugins qui vont nous faciliter le développement. Un framework MVC (Express) par exemple me semble plus que nécessaire, un moteur de template (Jade) ainsi qu’un ORM pour la base de données (Mongoose si on utilise une base MongoDb).
Nous avons de la chance puisqu’un gestionnaire de paquets spécifique à Node.js est devenu plus ou moins un standard pour récupérer facilement les plugins qui existent, à savoir NPM.

Si vous n’avez pas curl :

sudo apt-get install curl

Ensuite, l’installation de NPM est on ne peut plus simple puisqu’il suffit d’une seule ligne :

curl http://npmjs.org/install.sh | sh

Et une fois de plus, vous pouvez tester si l’installation s’est bien déroulée en lançant la commande suivante :

obalais@server:~$ npm -v
1.0.6

Nous allons tout de suite mettre à profit NPM en installant Express, le framework de développement web le plus abouti actuellement pour Node.js.

Voici la liste de ses features, directement récupérée depuis le site officiel :

  • Robust routing
  • Redirection helpers
  • Dynamic view helpers
  • Application level view options
  • Content negotiation
  • Application mounting
  • Focus on high performance
  • View rendering and partials support
  • Environment based configuration
  • Session based flash notifications
  • Built on Connect
  • Executable for generating applications quickly
  • High test coverage

Grâce à NPM, l’installation se fait encore une seule ligne toute simple :

npm install express

N’oubliez pas de rajouter express à votre PATH et de tester le résultat de l’installation :

obalais@server:~$ export PATH=$HOME/node_modules/express/bin:$PATH
obalais@server:~$ express --version
2.3.4

Maintenant installez Jade :

npm install jade

Tout est en place. Il ne reste plus qu’à créer notre serveur avec Node.js + Express. Pour cela, créez un fichier helloworld.js contenant le code suivant :

var app = require('express').createServer();

app.get('/', function(req, res){
  res.send('<h1>another hello world</h1>');
});

app.listen(3000);

On lance le serveur node.js avec la commande suivante :

node helloworld.js

Et on teste si tout fonctionne correctement en se rendant via son navigateur sur son localhost sur le port 3000.

Nous verrons dans un prochain article quels sont les principes fondamentaux du développement avec Express et Node.js.
En attendant, je vous laisse visiter le site officiel d’Express qui contient toute la documentation nécessaire pour se lancer dans l’utilisation du Framework. Faites un tour sur cette page pour commencer.

jQuery Mobile sort en version Alpha

Samedi dernier, la version mobile du célébrissime Framework Javascript jQuery est sortie en version Alpha. Assez semblable à ce qu’offre jQTouch, jQuery Mobile s’annonce comme une future référence pour les développeurs web qui veulent adapter leur site aux navigateurs des différents smartphones du marché.

Au menu, support cross-browser (iPhone, Androïd, Blackberry, …), graceful degradation pour les navigateurs qui n’implémentent pas encore toutes les propriétés CSS3 ou HTML5, animations et transitions du type iPhone, boîtes de dialogues et boutons prêts à être utilisés, gestion des thèmes et encore beaucoup d’autres choses très prometteuses.

Il est explicitement spécifié sur le site officiel de jQuery Mobile qu’il ne faut pas considérer ce framework comme un simple moyen d’adapter son site aux navigateurs mobiles puisqu’il peut très facilement profiter des fonctionnalités de PhoneGap pour créer de véritables clients lourds pour les différents Smartphones. Un bon moyen de coder une seule fois son application mobile pour la déployer ensuite sur les différents stores des constructeurs.

J’ai jeté un rapide coup d’oeil à l’application de démonstration qui s’annonce en effet très bien réalisée. Quelques bugs semblent persister mais je pense qu’ils devraient rapidement être résolus en fonction des retours de la communauté. Dès que j’aurai un peu plus de temps, je tâcherai de poster un petit tutoriel pour démarrer un projet symfony avec jQuery Mobile.

En attendant, n’hésitez pas à consulter le site officiel et surtout la démo en ligne de ce projet.