Google Closure : premiers retours d'expérience

Submitted by Maxence on Fri, 13/11/2009 - 15:33

goog.require

Cette fonction est à la base du système de paquets de Google Closure. D'une façon similaire à la fonction require_once de PHP, elle permet d'inclure les dépendances. Techniquement parlant, elle charge les scripts nécessaires en ajoutant des balises SCRIPT. Le problème c'est que le chargement de ces scripts se fait de façon asynchrone. Pour être sur que les dépendances ont bien été chargées avant de faire appel à la bibliothèque, il faut donc utiliser 2 blocs SCRIPT :

<html>
<head>
  <!-- On inclut le fichier de base -->
  <script type="text/javascript" src="/lib/closure/base.js"></script>
</head>
<body>
 
<!-- Un premier bloc pour les différents appels à require -->
<script type="text/javascript">
goog.require("goog.dom");
...
</script>
 
<!-- require va ajouter des balises SCRIPT ici pour charger les scripts -->
 
<!-- On peut utiliser la bibliothèque, les dépendances sont chargées -->
<script type="text/javascript">
var el = goog.dom.getElement("mon_element");
</script>
</body>
</html>

En procédant de cette façon, le deuxième bloc n'est exécuté que lorsque tous les scripts ajoutés par require sont chargés.

C'est valable uniquement pour le développement. Pour le passage en production, on utilise le script Python calcdeps.py et le compilateur Google Closure pour générer un seul fichier .js qui contient tout le code nécessaire.

CSS

Un gros avantage de Closure, c'est que le code CSS est très simple. Contrairement à ExtJS qui utilise toute une série d'astuces pour pouvoir appliquer notamment des coins arrondis à chaque composant, Google Closure fait dans la simplicité. Pas de sliding doors, pas de sprites, pas d'image de fond, de dégradé à tous les étages. C'est donc beaucoup plus facile à personnaliser et le code HTML est beaucoup moins lourd et bien plus simple à comprendre.

ExtJS permet de faire des interfaces beaucoup plus élaborées sur le plan esthétique, mais c'est au prix d'un code HTML encombré de DIV, SPAN et autres EM. Dès qu'on veut sortir du look officiel, ça devient très vite compliqué.

i18n

On peut traduire certaines parties de l'interface, notamment les noms de jours et les noms de mois dans le calendrier, mais pour d'autres éléments comme le bouton Today, on est obligé de faire un chercher/remplacer dans le code source ! En effet, il semblerait que Google utilise un plugin qui vient se greffer sur le compilateur et qui remplace les appels à la méthode goog.getMsg. Malheureusement ce plugin et les fichiers de traduction ne sont pas publiés, donc on est obligé de bricoler :-(.

Etiquettes:

Add new comment