Chapitre 2 Conception technique

Ce chapitre évoque les différents choix de conception et l'organisation de la stack technique

2.1 Schéma

Figure 3. Schéma de principe

Le schéma ci-dessus présente l'architecture de Document UI.

2.2 Côté serveur

Le serveur s'appuie sur Dynacase Platform et notamment les mécanismes suivants :

• Application/Action : l'initialisation de l'interface se fait au moyen d'une action,
• Asset Management : l'ensemble des assets utilisés (CSS, JS, images) sont gérés par Dynacase via :
  • Style : production de la CSS via des règles LESS,
• REST : le module API HTTP REST fournit la couche d'abstraction entre le moteur de droits, le moteur documentaire et le client.

La couche REST inclut un ensemble de mécanismes permettant de modifier les informations transmises au moteur de rendu client.

Lors de l'initialisation d'une nouvelle page contenant un document, le serveur fournit une trame minimaliste (liste des assets JS, CSS) et le code de démarrage JS. C'est ensuite le JavaScript qui se charge de faire la requête auprès du REST pour obtenir :

• la structure du document,
• le contenu du document,
• les options de représentation.

2.3 Côté client

Le client est composé des éléments suivants :

• RequireJS : il permet de charger les assets et les dépendances JavaScript nécessaires au fonctionnement de la page,
• Backbone.js : il gère l'état du client :
  • il va chercher les données sur le serveur et ordonne la construction de l'interface,
  • il stocke les données pendant la consultation et l'édition de la page,
  • il se charge de transmettre les données au serveur pour sauvegarder le document,
• Underscore.js : cette librairie facilite les manipulations des objets, tableaux et fonctions JavaScript,
• jQuery : cette librairie facilite les manipulation du DOM et les requêtes XHR,
• KendoUI : cette librairie fournit un ensemble de widgets (picker de date, tabs, etc.),
• MustacheJS : cette librairie fournit un moteur de template.

Ces éléments sont organisés en widgets qui sont mis en place par Bacbkone.js. Lors de l'initialisation d'une page, les éléments suivants sont mis en place :

• RequireJS récupère les assets manquants,
• Backbone initialise un modèle représentant le document en cours,
• le modèle va chercher sur le serveur, via l'API REST, le contenu du document et les options de représentation,
• le modèle initialise une vue du document,
• la vue initialise l'ensemble des widgets composant le document.

Une fois l'ensemble initialisé, au cours de la vie du document, les widgets communiquent à la vue les modifications effectuées par l'utilisateur. La vue communique ces modifications au modèle. Le pattern inverse est appliqué lorsque le modèle est modifié : le modèle transmet à la vue la modification, et la vue l'applique au travers du widget sur la représentation visible pour l'utilisateur.

Il est à noter que lorsqu'un utilisateur change de document la page entière n'est pas rechargée. Dans ce cas, seul le modèle est mis à jour avec les données du nouveau document, ce qui permet un chargement rapide.