Créer un build avec Dojo

Septembre 2016


NDLR : cet article n'est pas encore tout à fait terminé ; des codes et images seront bientôt ajoutées

Bonjour à tous,

Ce tutoriel s'adresse aux personnes ayant créé un site internet autour du framework Javascript DOJO. Nous allons ici aborder un point essentiel du framework : le build.


Le build c'est quoi ?


En un phrase : c'est le regroupement de tous les fichiers JS en un afin d'alléger les appels serveurs.

Vous avez surement remarqué que le principe de Dojo est de séparer votre code Javascript en classes, s'appelant les unes les autres (via dojo.require), un peu comme un projet Java.
Oui mais voilà, chaque classe est contenue dans son propre fichier .JS et chaque fichier est un appel supplémentaire au serveur lors du chargement de votre site.
Si vous avez 20 classes, avec un serveur moyen répondant en 200ms (pour un hébergement mutualisé par exemple), vous arrivez à un temps de chargement de 4 secondes sans les images, le CSS, ... C'est long !
Petit exemple personnel : une interface que j'avais réalisée avec une dizaine de classes héritant d'une dizaine d'autres classes, plus des appels PHP en Ajax => temps de chargement de 40s environ sur le serveur !

Fort heureusement cela a été pensé par les développeurs de Dojo qui proposent le système de build. Concrètement, cela consiste à regrouper tous vos fichiers JS en un unique (ou plusieurs si vous le désirez), de compresser le tout si vous le voulez (notez que cela permet au passage de rendre votre code moins facilement lisible par les internautes), et de faire pareil avec vos CSS.

Au final : un fichier unique un peu plus lourd à charger : on retrouve un temps de chargement inférieur à 1s environ! Youpi !

Encore à titre d'exemple, je suis passé de 40s à 6s environ pour l'exemple ci-avant !

Principe du build


En théorie un build est très simple à mettre en place : vous définissez toutes les classes JS qu'utilise votre site dans un fichier .profile.js ; puis vous appelez un script tout prêt avec les options de votre choix et le build se fait. Facile, non ?

Création d'un build


En pratique c'est plus compliqué : le .profile.js n'est pas simple à appréhender et il n'est pas toujours facile de comprendre les imbrications entre les différents éléments. Expliquons tout cela autour d'un exemple "basique" qui, je l'espère, en aidera le plus grand nombre.

Etape 0 : prérequis


Le build utilise le framework Rhino (un moteur Javascript codé en JAVA) de Mozilla. Il est présent dans les sources du build ; néanmoins il nécessite que vous ayez Java JRE 1.4.2 ou plus sur votre ordinateur. Pour vérifier votre version, allez sur le site officiel de Java Sun : http://www.java.com/fr/download/installed.jsp?detect=jre&try=1

Etape 1 : téléchargement des sources de Dojo


La version de base de Dojo fournit les dossiers Dojo ; Dijit et Dojox. Il manque un dossier crucial : "util". Ce dossier contient tous les outils permettant de créer notre build. Il n'est présent que dans les téléchargements des sources complètes. Récupérez-les :
  • Rendez-vous ici : http://download.dojotoolkit.org/
  • Cliquez sur la dernière version stable (sauf si vous êtes joueur).
  • Téléchargez une archive dont le nom contient "-src" (zip ou tar.gz au choix)
  • Dézippez cela dans le dossier de votre choix !

Etape 2 : préparer vos classes


Cette étape est simple mais cruciale : il vous faut relever les noms de toutes vos classe JS déclarées dans Dojo. C'est à dire tous les "dojo.provide("mondossier1.mondossier2.MaClasse")". Pour chacune de ces classes, relevez :
  • Son nom ("mondossier1.mondossier2.MaClasse")
  • Son chemin relatif depuis le dossier "buildscripts" qui se trouve dans votre archive dézippée (<votrearchive>/util/buildscript).

Etape 3 : créer votre fichier .profile.js


Vous avez vos noms et chemins de classe ? Bon, rendez-vous à présent dans le dossier "profiles" du dossier "buildscripts". Tout un tas de profils existent déjà : créez-en un nouveau basé sur l'existant baseplus.profile.js, que vous renommez monprofil.profile.js ;
Ce profil baseplus contient un seul layer ainsi que les deux chemins (prefixes) nécessaires à ce layer. Maintenant c'est très simple :
  • conservez le layer dojo.js et remplacer les noms des classes par les votres.
  • ajouter tous vos chemins aux préfixes (exemple : "mondossier1.mondossier2 : "../../mondossier1/mondossier2")

/!\ Assurez vous bien que vos préfixes pointent vers les bons dossier depuis buildscripts/ !

Etape 4 : créez un dossier de release


Retourner dans le dossier racine de votre archive dézippée (celui qui contient dojo, dijit, dojox et util) et créez un nouveau dossier : "release". Ce dossier contiendra tous les fichiers créer par Dojo.
NOTE : le build ne vous pondra pas un unique fichier JS ! Il va compresser et copies toutes vos classes : c'est normal ; et n'oubliez pas de les recopier également dans votre site. Elle ne seront pas chargées mais Dojo les aura sous la main en cas de pépin avec un fichier compressé, par exemple !

Etape 5 : lancer le build


Maintenant c'est simple, passe en ligne de commande pour lancer le script. Si vous êtes sous Unix vous savez surement faire ; pour les utilisateurs de Windows, faites Démarrer - Exécuter - cmd
Dans la console qui s'ouvre, naviguez jusqu'au dossier buildscripts à l'aide de la commande "cd <monrepertoire>".
Une fois dans le dossier buildscript, lancer la ligne suivante :

build.bat profile=monprofil releaseDir=../release action:clean,release releaseName=1.0 cssOptimize=comments optimize=shrinksage mini=true


Nous lançons en fait le fichier build.bat avec diverses options :
  • profile : fichier profile que vous avez créé. Mettez juste son nom (sans ".profile.js").
  • releaseDir : chemin relatif vers le dossier release/ que vous avez créé.
  • action : ici on nettoie le dossier release et on en fait une nouvelle.
  • releaseName : nom de votre release (ici version 1.0 par exemple)
  • cssOptimize : "comments" ôtera tous les commentaires CSS et comprimera le tout.
  • optimize : "shrinksafe" demande au build de comprimer les fichiers JS finaux.
  • mini=true : demande à avoir la version la plus petite possible au final.


L'ensemble des options est répertorié ici : http://dojotoolkit.org/reference-guide/build/buildScript.html#build-buildscript

Etape 6 : copiez vos sources


Une fois le build terminé, retournez dans votre dossier release/ : vous voyez qu'un dossier avec le nom de release que vous aviez entré a été créé. Il contient normalement plusieurs dossiers, finalement une copie de chacun des dossiers que vous avez entré dans le .profile.js via les préfixes : c'est normal.

Comme je vous le disais, même si vous avez demandé de compresser la totalité de votre code dans dojo.js (par exemple), il est conseillé de copier la totalité des dossiers optimisés sur votre site. Ils ne seront pas chargé au lancement du site, mais pourront l'être en cas de besoin !

Une fois là, vous sauvegarder vos sources non optimisées quelque part et vous les remplacer par les sources de la dernière release.

Si jamais vous préférez les stocker dans un dossier à part, n'oubliez pas de modifier dans votre en-tête <head> le lien vers le nouveau fichier JS optimisé (dojo.js ou autre).


Et voilà, votre build est normalement terminé ! A vous de tester vos nouvelles performances !

Sources


Voici les sources qui m'ont permis d'apprendre le fonctionnement du Dojo Build.

A voir également :

Ce document intitulé «  Créer un build avec Dojo  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.