Site IHM 2016

Ce site web a été construit en utilisant Vue.JS version 1.*. Vous trouverez ci-dessous quelques explications quant à son fonctionnement.

Structure du projet

• documents : dossier regroupant tous les fichiers téléchargeables sur le site (templates et compagnie)
• inc : dossier comprenant les assets du site (police de caractère, images, fichier javascript). Notez qu'avec l'architecture actuelle, le fichier "pages.json" et la plupart des logos ne sont pas directement utilisés sur le site. Le premier est intégré dans "build.min.js" à la compilation alors que les seconds ont été directement rajoutés sur la page en base64, de sorte à limiter le nombre de requêtes HTTP.
• md : dossier contenant toutes les pages du site, sous format Markdown.
• node_modules : dossier standard des projets NodeJS qui contient tous les modules nécessaires pour le fonctionnement du site. En l'occurrence, ce dossier ne sert qu'au développement : une fois compilé, le fichier JavaScript final (inc/build.min.js) est autonome.
• src : l'ossature du site
  • components : composants .vue
  • aside.vue : barres latérales du site (feed Twitter, Partenaires et Keynotes)
  • footer.vue : pied-de-page du site
  • header.vue : en-tête du site
  • page.vue : corps de la page
  • services : fichiers de fonctions
    • domFunctions.js : différentes fonctions utilitaires pour manipuler le DOM.
    • store.js : "single-source-of-truth" pour le site. Initialement prévu pour jouer un rôle beaucoup plus important que dans la version finale, ce fichier se contente désormais de garder en mémoire les pages.
• .babelrc : fichier de configuration pour Babel
• index.html : fichier d'entrée pour le site, qui charge le fichier JavaScript (inc/build.min.js)
• package.json : fichier de configuration du projet NodeJS
• README.md : le fichier que vous lisez depuis quelques minutes

Fichiers Markdown (md/*.md)

La première partie de chaque fichier Markdown, délimitée par les ---, définit les "méta-données" de la page : id sert à identifier la page et doit être similaire au nom du fichier, parent est l'id d'une page de premier niveau (= sans parent) et permet d'afficher un sous-menu, background est un entier entre 1 et 10 qui définit le fond utilisé sur la page (voir images dans inc/images/banners), title est une chaîne de caractère utilisée pour le titre h1 de la page ainsi que pour la balise "title", jumbo est une phrase-clé qui apparaît au dessus de la page, partners est un boolean qui précise si les logos des sponsors doivent apparaître sur la page, twitter est un boolean qui définit sur le feed Twitter doit apparaître sur la page, toc est un boolean qui précise si la table des matières doit apparaître au sommet de la page et description définit le contenu de la balise "meta name='description'".

Fichiers .vue

Pour plus d'informations sur Vue.JS, vous pouvez vous référer à l'excellent guide officiel (http://vuejs.org/).

Les composants .vue sont construits à partir de trois éléments : une balise "template" qui contient du html, une balise "script" qui contient du JavaScript et une balise "style" qui contient du CSS. En sus, pour ce projet, les preprocesseurs "Jade" (désormais connu sous le nom de "Pug" https://pugjs.org) et "LESS" (http://lesscss.org/) ont été choisis pour le HTML et le CSS. Fondamentalement, le contenu de la balise "template" est affiché en lieu et place du tag HTML que le composant .vue remplace. Par exemple : dans le fichier "index.html", vous trouverez trois balises inhabituelles : "site-header", "router-view" et "site-footer". Ces balises sont interprétées par Vue.JS, qui les remplace par les composants "header.vue", "page.vue" et "site-footer" (la configuration des composants peut être trouvée dans le fichier "src/app.js"). Chaque template fait appel à des variables (appelées via les moustaches {{}} ou grâce à des attributs spéciaux comme v-bind:class) qui sont définies dans la partie "script" du composant. Enfin, la partie "style" est inlinée lorsque les composants sont chargés.

Compilation et développement

Pour afficher le site en production, il suffit de déposer le fichier "index.html" et les dossiers "documents" et "inc" sur un serveur web. Cette solution est même préférable au déployement de l'intégralité du projet, puisque les visiteurs pourraient potentiellement accéder au contenu des autres répertoires. En revanche, si vous souhaitez modifier le site, vous pouvez vous référer aux instructions suivantes.

Prérequis

• Idéalement : un poste de travail Unix ou Linux
• NodeJS & npm : https://nodejs.org/en/
• le module m2j installé de manière globale. npm -g markdown-to-json (sur Unix/Linux, il sera sans doute nécessaire de sudoerla commande)
• Pour le serveur web : Python (2.* ou 3.*, peu importe)

Installation

Naviguez avec un terminal jusqu'au répertoire du projet et tapez npm install, afin d'installer les dépendances indiquées dans le fichier package.json (sous "dependencies" et "devDependencies").

Compiler les changements

La logique de compilation est la suivante : (1) m2j convertit le contenu de tous les fichiers Markdown en JSON et injecte le résultat dans le fichier temporaire "inc/page.json". Puis (2), Browserify appelle à l'aide ses copains Vueify et Babel pour compiler l'intégralité des composants vue et de leur prérequis dans un seul gros fichier JavaScript, "inc/build.min.js".

Pour compiler vos modifications, naviguez jusqu'au répertoire du projet et tapez la commande npm run compile. Cette commande appellera à son tour les commandes npm run compile:md qui s'occupe de la partie (1), puis npm run compile:js qui s'occupe de la partie (2).

Lancer un server web et tester le site localement

Naviguez jusqu'au répertoire du projet et tapez npm start. Cette commande va exécuter la compilation, puis lancer un serveur web en python qui vous permettra d'accéder au site à l'adresse http://localhost:8000.

Suggestions de développement

Si vous souhaitez vous servir de ce projet comme base pour un autre site, voici quelques suggestions de modifications :

• Une documentation plus rigoureuse des parties compliquées du code permettrait une prise en main plus rapide.
• De manière générale, le code a bien besoin d'un coup de nettoyage. Le binding du smooth_scroll est une catastrophe, par exemple.
• Dans la même idée, des tests unitaires et fonctionnels seraient les bienvenus afin de limiter les risques de régression. Vous pouvez utiliser nightowl pour les tests fonctionnels et Karma+Jasmine pour les tests unitaires.
• Vue.JS est passé à la version 2. Les améliorations apportées sont nombreuses, aussi une conversion du projet à Vue.JS 2.* est à envisager.
• Le fait d'avoir tenté de limiter le nombre de requêtes HTTP correspond à une logique très "HTTP 1.1". Avec la démocratisation imminente de HTTP 2, cette solution perd tout son sens. En 2017, il serait plus judicieux de séparer les fichiers JavaScript, d'utiliser une feuille de style externe et de tirer un trait sur les images en base64.
• La conversion vers Vue.JS 2 permettra d'employer du PreRendering (http://vuejs.org/guide/ssr.html#SSR-vs-Prerendering), une solution particulièrement intéressante pour un site de ce type. Non seulement le contenu des pages sera plus rapide à charger, mais vous pourrez également vous débarrasser des hashbangs hideux qui n'étaient pas sans poser des problèmes au site de IHM 2016.
• Initialement, le fichier "inc/pages.json" était séparé car le contenu des pages était "lazyloadé". Les premières versions du fichier "inc/pages.json" n'excédant pas les 30ko, celui-ci fut intégré directement dans le fichier JavaScript global afin de ne plus avoir à traiter avec Ajax. Malheureusement, le contenu des pages finales du site dépasse les 100ko et il est fort probable que chaque conférence IHM finisse avec une masse d'informations similaire. Par conséquent, réactiver le lazyloading des pages serait judicieux !