Accueil > Non classé > Radio Liferay – Episode 3 : Nate Cavanaugh présente AlloyUI

Radio Liferay – Episode 3 : Nate Cavanaugh présente AlloyUI

Cet article est un résumé du troisième épisode de radio Liferay relatant la conversation entre Olaf Kock, consultant sénior chez Liferay, et Nate Cavanaugh, directeur du service en charge de l’interface utilisateur.

Nate Cavanaugh et Liferay

Nate Cavanaugh a commencé sa carrière professionnelle en tant que designer graphique. Il est à l’origine du développement de nombreux sites internet mais a aussi travaillé à la construction de son propre CMS (Content Management System). Sa rencontre avec Michael Young, directeur technique de Liferay, lui a permis d’intégrer le projet Liferay. Ses premiers pas sur le projet ont consisté à repenser l’architecture du système mis en place pour les thèmes.

 

De JQuery à AlloyUI

Liferay est le premier portail à avoir proposé le “drag and drop” pour ses portlets. Dans la version 4.3, l’implémentation de cette fonctionnalité a été repensée pour utiliser JQuery. Suite à cela, JQuery est devenu le framework standard de l’interface utilisateur dans la version 5.7.

Mais la version 6 de Liferay a apporté un énorme changement : l’interface utilisateur n’est plus gérée par JQuery mais par AlloyUI ! Pourquoi ce choix ? Parce que développeurs et clients étaient trop souvent confrontés à des problèmes avec JQuery. En effet, l’intégration de JQuery à Liferay est gérée par des plugins. A chaque mise à jour de JQuery les développeurs devaient résoudre des bugs avec les plugins mais devaient aussi pouvoir répondre des bugs rencontrés par les utilisateurs de Liferay. Pour pouvoir sécuriser les clients utilisant la version entreprise, mais aussi pour faciliter le développement, il était nécessaire d’utiliser un framework sur lequel ils auraient plus de contrôle. Toutes ces constatations ont mené à l’abandon de JQuery.

Il a fallu alors se pencher sur l’adoption d’un autre framework. Les membres de Liferay voulaient un framework plus flexible et plus fiable que JQuery pour l’interface utilisateur. Ils ont donc fait le tour des frameworks javascript disponibles sur le marché, et deux d’entre eux ont spécifiquement retenu leur attention : Dojo et YUI (de Yahoo). Les tests en interne de Dojo n’étant pas concluants, YUI a été retenu semblant plus facile d’utilisation et mieux adapté à leur besoin.

Si YUI a été retenu, un dernier choix a dû être fait : quelle version utiliser ? En effet, à l’heure où ce problème s’est posé, deux versions étaient disponibles : la 2, stable et utilisée en entreprise, et la 3 pas encore complètement publiée et jamais utilisée encore en entreprise. Malgré les risques que comportait le choix de la version 3, c’est bien cette dernière que Liferay a choisi d’utiliser, faisant le pari de l’innovation et se disant que si nécessaire, ils développeraient leurs propres plugins. Mais cette nouvelle version ne présentant pas assez de fonctionnalités pour les développeurs, ces derniers ont décidé de construire leur propre framework au dessus de YUI : AlloyUI.

Ainsi est né AlloyUI, ne laissant aujourd’hui plus aucune place à JQuery dans Liferay. Les équipes de Liferay ont travaillé main dans la main avec les équipes de Yahoo pour intégrer ce nouveau framework basé sur YUI 3 à Liferay, faisant d’eux la première entreprise à utiliser la version 3 d’YUI.

 

Prendre en main AlloyUI

Nate Cavanaugh recommande aux débutants d’aller voir la librairie YUI (http://yuilibrary.com/yui/docs/examples/). En changeant les Y par de A dans les exemples, il y a tout ce qu’il faut à cette adresse pour débuter avec AlloyUI. Cependant AlloyUI a aussi ses propres spécificités, documentées bien sûr (http://alloy.liferay.com/deploy/api/index.html).

On retrouve notamment dans ces spécificités les fonctionnalités que Liferay aimait dans JQuery et qu’ils n’ont pas retrouvées dans YUI. Le module AutoComplete en fait partie par exemple, bien qu’il ait été ajouté à YUI postérieurement.

L’avantage principal avec AlloyUI et YUI, est l’utilisation d’un objet central appelé AUI avec AlloyUI et YUI avec YUI. Cette objet retourne une nouvelle instance d’YUI à chaque fois qu’il est appelé permettant notamment l’utilisation du module AutoComplete d’AlloyUI et de celui de YUI dans une sandbox sans créer de conflit particulier. Cet exemple n’aurait pas été aussi facile avec JQuery car il utilise le même objet, il aurait alors été conflictuel d’utiliser deux modules d’AutoComplete différents dans une même sandbox. Ce mécanisme de retourner une nouvelle instance est d’autant plus pratique que les portails sont des environnements dans lesquels beaucoup d’applications peuvent tourner, il est important de minimiser les conflits entre ces dernières.

Une difficulté lorsque l’on commence avec AlloyUI (et que l’on ne connait pas bien les modules disponibles) est de choisir le module adapté à son application. Pour pouvoir faciliter ce choix et répondre un maximum aux besoins simples des applications, Liferay a un créé module “AUI” qui regroupe la plupart des fonctionnalités (node, event, creation de composant). Faire appel à ce module vous offrira donc tout ce dont vous avez besoin. Si vous souhaitez répondre à un besoin bien particulier, il vous faudra alors vous lancer dans la recherche du module adapté.

Liferay 6.1 propose aussi l’utilisation de taglib pour n’importe quel widget. Mais il est parfois pénible d’utiliser les taglibs car cela impose la création d’un fichier XML, d’une JSP et d’une classe Java à faire fonctionner ensemble. C’est pourquoi Liferay a voulu proposer un “TaglibBuilder”. Ce dernier prend un fichier XML, il faut lui spécifier l’attribut et le namespace voulu et le TaglibBuilder s’occupera de la génération de la JSP et de la classe Java. Si toutefois vous devez rajouter un attribut plus tard, il vous suffira de l’ajouter au fichier XML, de relancer le TaglibBuilder et ce dernier fera les mises à jour dans les JSP et les classes. Cet outil construit l’implémentation de base d’une taglib en se basant sur la documentation du système YUI. Ainsi, plus les composants seront documentés (Javadoc), plus il sera facile d’en générer les taglibs.

 

Les améliorations à venir

L’équipe en charge de l’interface utilisateur prévoit d’améliorer la communication en général, c’est-à-dire aussi la documentation. Nate Cavanaugh rappelle que le projet est Open Source donc que personne ne doit hésiter à partager son expérience, ses difficultés, ajouter de la documentation, poser des questions… Une page github du projet est également disponible.

L’équipe a aussi le projet de mettre à disposition des exemples voués à montrer la différence entre JQuery, YUI et AlloyUI en proposant des fonctionnalités implémentées avec ces trois outils. Ainsi, l’utilisateur pourra comparer ces trois technologies et peut-être être aidé dans sa migration de l’un à l’autre.

 

Conclusion

Cette interview de Nate Cavanaugh permet de mieux comprendre les choix des technologies faits pour l’interface utilisateur. AlloyUI a été créé pour répondre au besoin de faciliter le travail des développeurs mais aussi de sécuriser les clients de Liferay. Il semble être l’outil le plus adapté pour proposer beaucoup de fonctionnalités au niveau de l’interface et faciliter la gestion d’applications multiples dans une même page. Des efforts sont faits pour proposer plus de documentation, cependant le projet étant Open Source, tout le monde est invité à participer s’il le souhaite. Pour écouter l’interview (en Anglais), suivez ce lien : http://feeds.feedburner.com/RadioLiferay. Vous pourrez vous inscrire ou bien écouter l’article directement en cliquant sur Play now sous l’article concerné : RL003 Nate Cavanaugh – Radio Liferay Episode 3.

 

 

Share
  1. 20/12/2011 à 14:38 | #1

    A little rationality lifts the quality of the debate here. Thanks for cntorbiuting!

  1. Pas encore de trackbacks