Raphaël Brugier's blog

Il y a quelques jours, Google a annoncé la sortie de la version 2 de son framework GWT.
Cette nouvelle version majeur marque un tournant en apportant de nombreuses fonctionnalités destinées à faciliter la vie du développeur.
L'accent à clairement été mis sur la rapidité dans cette nouvelle version, rapidité pour le développement et rapidité pour l'utilisateur final

UI Binder

L'UI Binder tout d'abord est une nouvelle façon de décrire les interfaces GWT de façons déclarative avec une syntaxe XML. L'utilisation d'UI Binder permet de séparer clairement l'interface de la logique l'application. Par la suite il sera donc facile de modifier l'interface de l'application. UI Binder à été complètement intégré au plugin google pour Eclipse, avec par exemple un wizard de création, la complétion du code, le refactoring, ...
Un petit exemple pour comparer une interface écrite "à la" swing et avec UI Binder :

En java :

final Label label = new Label("Enter your name");
final Button sendButton = new Button("Send");
HorizontalPanel hPanel = new HorizontalPanel();
hPanel.add(label);
VerticalPanel vPanel = new VerticalPanel();
vPanel.add(hPanel);
vPanel.add(button);

Avec Ui binder :

<g:VerticalPanel >
		<g:HorizontalPanel>
			<g:Label>Enter your name</g:Label>			
		</g:HorizontalPanel>
		<g:Button text="Send" styleName="{style.pretty}" ui:field="button" />
</g:VerticalPanel>

Development mode

Sûrement la fonctionnalité qui va faire gagner le plus de temps aux développeurs. Exit le hosted mode, bonjour le development mode !
Désormais, un simple plugin installé dans le browser remplace le navigateur de test qui était fournit. Le principe est toujours le même, une simple sauvegarde du fichier modifié et un refresh dans le navigateur permettent de voir les changements. Inutile de compiler en javascript pendant de longues minutes, le byte code java est utilisé à la place. Ceci permet donc par ailleurs de pouvoir tester en même temps le rendu dans plusieurs navigateurs.

Amélioration du code compilé.

Comme à chaque nouvelle version, la qualité du code javascript produit par le compilateur est encore optimisée. Le simple fait donc de recompiler un projet avec cette nouvelle version devrait donc sensiblement améliorer les performances de votre applications web.

Code Splitting

Le code splitting part d'un constat simple : pourquoi télécharger la totalité du code javascript de l'application quand on pourrait télécharger à la demande à la manière du streaming ? Les ingénieurs GWT ont donc ajouté cette fonctionnalité et le premier bénéficiaire en est Wave qui a vu son temps de téléchargement initial considérablement diminué.
Le principe : différer le téléchargement des blocs indépendants de l'application. Quelques lignes de codes suffisent pour cela :

GWT.runAsync(new RunAsyncCallback() {
          public void onFailure(Throwable caught) {
            Window.alert("Code download failed");
          }
 
          public void onSuccess() {
            Window.alert("Hello, AJAX");
          }
        });

Speed Tracer

Un outil de profiling a été annoncé en même temps que cette nouvelle version de GWT. Speed tracer est en fait une extension pour Google Chrome qui permet de profiler les requêtes, les temps de parsing et les temps de rendus du navigateur. Speed tracer identifie automatiquement les problèmes de performances de votre application.

Conclusion

Avec cette nouvelle version de GWT, Google continue la guerre des RIA. L'ensemble des fonctionnalités permettra de diminuer le temps de développement et d'améliorer l'expérience utilisateur.
Et bien sur, tout cela repose toujours sur les standards HTML 5 + CSS + Ajax donc inutile d'installer un plugin propriétaire dans le navigateur comme le demandent flash et silverlight.
Le premier livre sur GWT 2 devrait sortir très prochainement et la bonne nouvelle c'est qu'il est en français !
C'est écrit par Sami Jabber et vous pouvez déjà lire le sommaire et un chapitre entier ou le commander ici.

Sources :

Google camp fire on GWT and Speed Tracer : part 1, part 2, part 3, part 4, part 5, part 6

décembre 01

Twitter : Ajout de la fonctionnalité ReTweet [RT] en natif

Twitter, le célèbre site de micro-blogging, possède ses règles et ses mots propres. Parmi ceux-ci, le plus utilisé est sans aucun doute le RT, pour ReTweet.
Le RT permet d'indiquer aux personnes qui vous suivent une information intéressante et son auteur.
Concrètement, lorsqu'un tweet vous plaît, vous pouvez le recopier en précédant le message de la mention "RT" suivi d'une arobasse et du nom de l'émetteur.
RT @samijaber: GWT 2 RC released, Google Eclipse Plugin too http://bit.ly/6W4N6

J'avoue que c'est un peu déroutant au début comme dialecte :).... et c'est pourquoi une bêta pour intégrer directement le RT à la plateforme.
Je fait partie des testeurs sélectionnés et je vous propose un petit tour des fonctionnalités.

La participation à la bêta est indiquée par un bandeau qui en explique le fonctionnement :

Lors des premières utilisations, un encart signale les RT gérés par Twitter :

Il est désormais possible de RT directement un Tweet intéressant via un lien.

Enfin, la fonctionnalité la plus intéressante selon moi, il est désormais possible de ne plus afficher les RT d'une personne suivie. Ainsi, ça filtre les messages des personnes qui ont tendances à trop RT et on voit seulement les Tweets originaux.

L'intégration du RT à Twitter est donc vraiment bien réussi, d'un point de vue pratique comme ergonomique. Par contre je n'ai pas encore vu le cas où plusieurs personnes RT le même message. Ce serait vraiment génial si c'était filtré et regroupé en un seul Tweet. A vérifier.

Le mot de la fin : Follow me on Twitter

novembre 08

Eclipse & GTK 2.18

Un court billet sur la résolution d'un bug qui rendait la plupart des boutons d'Eclipse inutilisable

La dernière version de GTK, 2.18, qui vient par défaut avec Ubuntu 9.10 ou Arch a crée un conflit avec la librairie swt utilisé par Eclipse.
Pour le corriger, une solution : export GDK_NATIVE_WINDOWS=1

Pour simplifier, on peut utiliser un script qui va lancer eclipse :

#!/bin/sh
export GDK_NATIVE_WINDOWS=1
/home/raf/.bin/eclipse/eclipse

Sources :

http://bugs.archlinux.org/task/16618
http://bbs.archlinux.org/viewtopic.php?id=82894
http://www.eclipse.org/forums/index.php?S=3061129fb70b1822c6520239b136e342&t=msg&th=153842
http://blog.export.be/2009/10/fixing-eclipse-for-ubuntu-karmic-koala-9-10/

octobre 21

Code de réduction chez manning

Manning, l'éditeur de la série de livres "* in Action" et "* in practice" propose en ce moment un code de réduction sur tout les livres concernants la société SpringSource.

Rendez-vous sur http://www.manning.com et utilisez le code "spring45"
Cela concerne donc tout les livres sur le framework Spring, mais aussi le langage supporté par SpringSource : Groovy.

J'en ai donc profité pour commander Groovy in Action, second edition. Il faut savoir que le livre n'est pas encore écrit, mais que manning propose quelque chose d'assez intelligent : le Earlier Access Program.
Autrement dit, à chaque fois que l'auteur finit d'écrire un chapitre, il est publié sous forme d'ebook. Lorsque le livre sera totalement écrit, vous recevrez une copie papier tout droit sortie des presses. A noter qu'il est possible de choisir de ne pas commander la version papier et donc de payer moins cher.

Avec la conversion $ -> €, j'en ai eu pour 26€. Ce qui n'est vraiment pas cher quand on connaît le prix normal de livres techniques de qualité.

Un mot sur Groovy

Groovy est un langage de programmation orienté objet assez récent. Il a la particularité de ressembler fortement à Java et de tourner sur une jvm.
Contrairement à Java, c'est un langage dynamique. Il peut être utilisé simplement pour coder des scripts, ou pour coder des applications complètes très rapidement.
La rapidité vient du fait que Groovy supporte nativement et simplement les fonctionnalités des langages modernes (parser Xml, Closure, etc).

Un langage très intéressant en complément de java que je vais désormais avoir le plaisir d'avoir dans ma toolbox ! :D

Ressources :

Groovy : http://groovy.codehaus.org
Livre, Groovy In Action, Second édition : http://www.manning.com/koenig2/

septembre 06

Installer la version de développement de GWT

Un court billet sous forme de note sur la compilation et l'installation de la version en développement de GWT.
La version d'Eclipse utilisée est Galileo (3.5).

Compiler les sources

[raf@raf-desktop ~]$ cd ~
[raf@raf-desktop ~]$ mkdir gwt
[raf@raf-desktop ~]$ cd gwt
[raf@raf-desktop gwt]$ svn checkout http://google-web-toolkit.googlecode.com/svn/tools/ tools
[raf@raf-desktop gwt]$ svn checkout http://google-web-toolkit.googlecode.com/svn/trunk/ trunk
[raf@raf-desktop gwt]$ cd ~/gwt/trunk
[raf@raf-desktop gwt]$ ant

Eclipse

La compilation produit 3 archives contenant le SDK pour les 3 OS : Windows, Linux et Mac.
Il reste donc à remplacer le sdk GWT d'un projet vers la bonne archive.

Activer le Out Of Process Hosted Mode (OOPHM)

Par défaut le nouveau hosted mod de GWT 2 n'est pas activé. Il faut ajouter le jar correspondant, gwt-dev-oophm.jar, au buildpath du projet et s'assurer que le jar est utilisé avant le jar par défaut de GWT.
Click - droit -> Build path -> configure build path -> librairies -> Add external Jar -> choisir "gwt-dev-oophm.jar" qui se trouve dans le sdk compilé.

64 bits

Histoire de rajouter du challenge, mon pc tourne en 64 bits
Avec le OOPHM, plus besoin d'utiliser un jdk 32 bits! Je peux enfin utiliser complètement le 64 bits!

Divers

J'ai perdu pas mal de temps bloqué sur une erreur au lancement du hosted mode : "Caused by: java.net.UnknownHostException at java.net.InetAddress.getLocalHost(InetAddress.java:1353)"

En fait c'était du à une mauvaise configuration de mon fichier /etc/hosts sous Archlinux.
A savoir donc : lorsqu'on spécifie un "hostname" dans rc.conf, il faut aussi le spécifier dans /etc/hosts
Soit:

#<ip-address>	<hostname.domain.org>	<hostname>

127.0.0.1		localhost.domain	localhost raf-desktop

Sources

Compiling GWT
OOPHM

septembre 06

Google IO mai 2009 : Best Practices For Architecting Your GWT App

Lors de la conférence annuelle de Google, en mai dernier, Ray Ryan à fait une présentation très intéressante sur les meilleures pratiques pour concevoir une application avec GWT. Cette présentation, a eu beaucoup d'écho dans la communauté GWT et plusieurs frameworks sont apparus pour faciliter l'implémentation de ces "bonne pratiques".

Nb: vous pouvez activer les sous-titres en anglais.
Voici un résumé sous forme de note de quelques points importants abordés dans cette présentation.

AJAX

Il faut minimiser la taille des objets retournés au client. Par exemple en ayant une liste d'identifiants d'objets en attribut plutôt qu'une liste d'objets.
Il faut spécifier le type d'une liste lorsque cela est possible:

 ArrayList<Object> maListe;

 plutôt que

 List<Object> maListe;

En effet, le compilateur GWT produira moins de code javascript s'il connaît plus précisément le type de liste.

Command Pattern

Le "Command Pattern" est un pattern classique des IHM.
Appliqué à GWT il permet de :

Mettre en place plus facilement une solution de cache. Avant d'appeler un service, la commande execute vérifiera qu'elle n'a pas déjà la donnée.
Mettre en place plus facilement des traitements par lots (batch).
Centraliser les messages d'erreurs. Les onFailure() des réponses asynchrones pourront directement être implémenté dans la classe command.
Découper le code javascript avec la méthode runAsync() de gwt 2.0 Les classes command qui encapsulent les services pourront être chargé par l'application que lorsque c'est nécessaire.

Les exemples de code présentés:

/** Le nom Command est déjà utilisé dans GWT et est donc remplacé par Action */
interface Action<T extends Response> { }
 
interface Response { }
 
interface ContactsService extends RemoteService {
  <T extends Response> T execute(Action<T> action);
}
 
interface ContactsServiceAsync {
  <T extends Response> void execute(Action<T> action,
      AsyncCallback<T> callback);
}
 
class GetDetails implements Action<GetDetailsResponse> {
  private final ArrayList<ContactDetailId> ids;
  public GetDetails(ArrayList<ContactDetailId> ids) {
    this.ids = ids;
  }
  public ArrayList<ContactDetailId> getIds() {
    return ids;
  }
}
 
class GetDetailsResponse implements Response {
  private final ArrayList<ContactDetail> details;
  public GetDetailsResponse(ArrayList<ContactDetail> details) {
    this.details = details;
  }
  public ArrayList<ContactDetail> getDetails() {
    return new ArrayList<ContactDetail>(details);
  }
}
 
abstract class GotDetails implements
    AsyncCallback<GetDetailsResponse> {
  public void onFailure(Throwable oops) {
    /* default appwide failure handling */
  }
  public void onSuccess(GetDetailsResponse result) {
    got(result.getDetails());
  }
  public abstract void got(ArrayList<ContactDetail> details);
}
 
void showContact(final Contact contact) {
  service.execute(new GetDetails(contact.getDetailIds()),
    new GotDetails() {
      public void got(ArrayList<ContactDetail> details) {
        renderContact(contact);
        renderDetails(details);
      }
  });
}

Une librairie proposant une implémentation du command-pattern est disponible : gwt-dispatch

Event bus

Plutôt que d'enregistrer les composants graphiques entre eux et d'utiliser le classique MVC, Ray recommande d'utiliser un "Event bus". Chaque composant s'enregistre sur le bus (en fait un handlerManager) et reste à l'écoute d'événements.

Model-View-Presenter (MVP)

Le "Model-View-Presenter" pattern vient en remplacement du classique MVC dans les applications GWT.
L'utilisation de ce pattern facilite les Test Unitaires, seul la partie "Presenter" a besoin d'être testée. Les changements dans la partie "View" sont entièrement géré par la partie "Presenter".

Une librairie proposant une implémentation du MVP et de l'event-bus est disponible : gwt-presenter

Injection de dépendance

L'injection de dépendance est réalisé du coté client avec le framework GIN et du coté serveur avec le framework GUICE. Je ne pense pas que ce soit nécessaire de rappeler les bénéfices de l'injection, Spring est là pour ça

Test unitaires

La partie "Presenter" du pattern MVP est facilement testable grace à l'utilisation de mock pour simuler la partie "View". EasyMock ou d'autres frameworks simplifie la création de mock et des test unitaires.

septembre 05

Lancer de rayons

Dans le cadre de l'UE de synthèse d'images tout les étudiants du master 1 devaient réaliser un moteur de lancer de rayon en C++.

Le lancer de rayon

Le lancer de rayon est une technique de synthèse d'image. Elle consiste à lancer de multiples rayons dans une scène à partir d'un point fixe (caméra). À chaque impact du rayon sur un objet de la scène la couleur renvoyée par l'objet touché est calculée. Cette couleur (luminance) est calculée en fonction de différents facteurs : propriétés physiques de l'objet touché, sources lumineuses éclairant l'objet, transparence, ...

Voici un schéma tiré de Wikipédia illustrant un lancer de rayon ;

Le lancer de rayon et ses algorithmes est un sujet d'étude très présent au Laboratoire SIC de l'université de Poitiers.

Projet commun

La base du moteur 3D était imposée (mais pas l'implémentation! ). Nous avons, tous assez rapidement, eu un moteur capable de positionner des sphères et des triangles dans une scène puis de calculer les intersections avec une caméra déplaçable. Puis chaque binôme avait le choix des fonctionnalités à ajouter à son moteur. Certains ont choisis la transparence, d'autres les fractales, d'autres encores d'imiter les textures en utilisant du bruit de Perlin.
Nous avons choisis, avec Pierre, d'ajouter à notre moteur une structure accélératrice pour pouvoir afficher des milliers de polygones. Ainsi nous pouvions réaliser le rendu de modèles compliqués depuis le format de fichier Pov.

KD-Tree

La technique de structure accélératrice que nous avons utilisé est un kd-tree. Cette technique consiste à partitionner l'espace de la scène en sous-espace récursivement. Le partitionnement est représenté par un arbre binaire, où chaque nœud est un sous-espace. La récursivité se termine lorsque le sous-espace contient un minimum d'objets de la scène ou est réduit à une taille minimale.

Ainsi lorsqu'un rayon est lancé, il n'est plus nécessaire de tester l'intersection avec chaque objet contenu dans la scène. L'intersection est seulement testée avec les sous-espaces traversés par le rayon. Ces sous-espaces étant stockés dans l'arbre pré-construit, il est donc rapide de les parcourir.

L'implémentation de cette technique nous a posé beaucoup plus de problème que prévue. En effet, l'algorithme de parcours de l'arbre implique de prendre en compte de nombreux cas lors du calcul d'une intersection. Nous avons donc passé un certains temps à réécrire et refactoriser l'algorithme pour arriver à une version exempte de bugs.

Une fois implémenté, l'utilisation de la structure accélératrice à été magique! Passer de 2 heures à 15 minutes pour calculer une scène de 100 000 triangles, ça fait chaud au cœur :p .

Améliorations du rendu

Pour améliorer le rendu de l'image nous avons implémenté deux techniques, l'anti-aliasing et l'ambient occlusion.

L'anti-aliasing consiste à lancer plusieurs rayons par pixel pour ensuite faire la moyenne des valeur de luminances retournées. L'effet qui en résulte est d'adoucir les contour et d'estomper les effets dîts "d'escalier".

L'ambient occlusion est une technique d'éclairage qui consiste à remplacer les sources lumineuses statiques de la scène par une lumière ambiante. La lumière ambiante est simulée en retirant dans une demi-sphère un nombre conséquents de rayons à chaque point d'intersection du rayon initial. Si ces rayons touchent un objet, le point d'intersection ne reçoit pas de lumière ambiante. Le rapport des rayons ne touchant pas d'objet sur ceux en touchant défini la quantité de lumière reçue au point d'intersection.
L'effet obtenue est de creuser et d'adoucir les cavités des objets, par exemple les coins d'une pièce ou les détails d'un visage.

À noter que cette technique vient d'être implémenter récemment par nvidia en natif dans ses drivers.

Avec ces deux techniques implémentées pour améliorer le rendu, il est évident que le nombre de rayons lancés dans la scène augmente de façons conséquente : de 480 000 à plusieurs millions pour image 800x600. La structure accélératrice était donc indispensable.

Images obtenues

Voici quelques images obtenues.
Le modèle de Lara Croft est un modèle assez simple composé de moins de polygones (40 000) qui nous à servi de base pour les premiers tests.
Les modèles du bouddha et du dragon sont ceux fournis par l'université de Standford qui sont généralement utilisés comme référence pour le lancer de rayon. Ils sont composés d'une peu plus d'un millions de polygones chacun et le temps de calcul est d'une dizaine de minutes.
Le modèle du dragon est particulièrement intéressant pour l'ambient occlusion pour ses écailles qui forment de nombreuses cavités.

Conclusion

Avec ce projet concret de C++ nous avons pu réaliser un moteur de lancer rayon modulaire avec des fonctionnalités avancées. L'implémentation des techniques d'optimisations et d'amélioration du rendu à nécessité de lire des publications scientifiques et d'en extraire les implémentations. D'un point de vue algorithmique, le kd-tree était un gros challenge qui à nécessité des heures de chasses aux bugs mais qui était passionnant.

Ce que je retiendrai de ce projet c'est la découverte de la synthèse d'image. Désormais, je sais ce qui ce qu'il y a comme boulot derrière les Shreks, Ages de glace et autres Toy Story! Je retiendrais aussi l'entraide entre les groupes. Chacun montrait ses fonctionnalités, aidait les autres à en implémenter de nouvelles.
Et c'était surtout motivant d'avoir un résultat concret à travers des images.

août 03

Test de JoliCloud

Edit : JoliCloud vient d'envoyer 10 invitations à chaque testeur, à distribuer. Contactez moi si vous voulez que je vous en envoie une.

Je viens de recevoir une invitation à tester JoliCloud.
JoliCloud est une distribution Linux spécialement conçue pour exécuter des applications webs sur les netbooks.
Elle est pour cela basée Ubuntu et sur l'interface développée par le projet Easy Peasy. À cela s'ajoute les technologies permettant d'exécuter les applications web en local : Prism, Gears, Adobe Air, etc ...
Une autre particularité de JoliCloud est de proposer une interface pour installer très simplement, comme si c'était des applications bureau classique, toutes ces applications web. Je ne possède pas (pour l'instant ) de netbook, mais j'ai réalisé ce test sur un Dell Vostro 1500 sans rencontrer aucun soucis.

Après avoir téléchargé l'iso, j'ai commencé par une installation dans VirtualBox en suivant les indications du site officiel. Évidemment ça n'a pas fonctionné! Je soupçonne le fait que mon installation est en 64 bits et que le l'iso de JoliCloud n'est disponible qu'en 32 bits.
J'ai donc finalement réalisé l'installation sur une clé usb pour tester en live, toujours en suivant les indications du site.

Pas de soucis au démarrage, tout mon matériel et mes partitions sont reconnues sans problème. Le réseau wifi fonctionne parfaitement en WPA sur une livebox. Par contre je n'ai pas réussi à me connecter en WEP au boulot.
Passons maintenant au tour du propriétaire en image et je donnerais mes impressions à la fin du billet.

Le chargement du système :

Le bureau principal :

Le menu préférences (avec toutes les options typiques à Gnome) :

Le bouton pour se connecter à l'interface JoliCloud :

La connection à l'interface JoliCloud :

Les applications web "installables" via l'interface :

Les applications Gmail et twitter installés via l'interface JoliCloud :

GMail tournant dans Prism, avec la synchronisation en local via Gears :

Synaptic reste disponible :

Même Eclipse peut être installé! :

Impressions:

Même si je n'ai pas fait le test sur une installation en dur ni sur un netbook, cette première alpha est prometteuse. Malheureusement le fait de ne pas faire le test sur un netbook ne me permet pas de juger les améliorations apportées au noyau pour le support des processeurs Atom.
J'ai adoré l'interface du "bureau", mais tout le mérite revient à EasyPeasy.
Le principal point positif que je retiendrais est de proposer une interface très bien pensée pour installer les applications web.
Le problème c'est qu'à part ça je ne vois pas énormément de différence avec la distribution EasyPeasy classique. Espérons que d'autres fonctionnalités viendront s'ajouter.
J'ai aussi regretté que Firefox prenne autant de place! Il existe pourtant des plugins qui permettent de réduire l'interface, car là sur un netbook les barres de menus prendrait presque le tier de l'écran :s.

Conclusion :

Une distribution à surveiller et à re-tester quand la version finale sera sortie.
Une alternative, que je vais surement essayer lors de la sortie de la prochaine Ubuntu, serait de partir d'une installation normale d'Ubuntu et d'installer l'interface d'utilisateur d'EasyPeasy + Prism + Gear. Car pour l'instant pas grande chose de plus n'est proposée.

août 01

Google Gears pour Firefox 3.5 et Prism, en 64 bits.