Comme vous le savez peut-être, nous avons récemment publié notre premier aperçu de la nouvelle UI Web conçue avec Polymer.
Lorsque nous avons commencé, nous avons utilisé le Polymer Starter Kit en tant que point de départ pour notre application. Ce kit utilise maintenant les récents éléments de routing (app-route et app-location) pour gérer le routing de l’application, mais lorsque nous avons commencé, cette tâche était déléguée au fichier page.js, ce qui est toujours la solution utilisée dans notre application.
Concevoir une plateforme étendue et riche en contenu telle que Nuxeo Platform implique de suivre un ensemble de bonnes pratiques permettant de proposer une bonne utilisabilité lors de l’utilisation d’une application Web, et nous allons nous concentrer aujourd’hui sur la génération d’URL.
Une URL joue un rôle important lors de la navigation au sein d’une application, car elle permet aux utilisateurs de naviguer rapidement vers une page spécifique, de la partager avec un collaborateur ou même de l’enregistrer pour la réutiliser ultérieurement. Fournir des liens dans les applications Web est généralement très simple : il suffit d’ajouter tout un tas de balises <a> et ça suffit.
</a> [Home](”/home”)
Il ne faut cependant pas oublier que nous parlons de Polymer et de composants Web en général et que ceux-ci sont conçus pour offrir des fonctionnalités d’encapsulation, de composition et de séparation des différents éléments. Par ailleurs, chaque élément peut être utilisé dans des applications ou des contextes complètement différents ayant tous une approche spécifique du routing ou n’ayant même pas besoin de lien.
Un autre problème potentiel dans les grosses applications est la multiplication des liens codés en dur répartis dans différents endroits, ce qui peut être pénible en cas de maintenance ou de refactoring.
Dans cette perspective, nous avons besoin de donner aux éléments la capacité de générer eux-mêmes une URL pour un chemin spécifique. Ce procédé est également connu sous le nom de routing inversé (reverse routing).
La solution
Avant de s’attaquer au code, il est important de noter que cette solution ne dépend d’aucune bibliothèque de routine client spécifique. Dans nos échantillons, nous utilisons page.js car c’est la bibliothèque que nous utilisons actuellement.
Commençons en définissant des exemples de chemins pour notre application :
page('/home', function() {
// home page route
});
page('/document/:id, function() {
// route for a specific document
});
page('/admin/user-group-management/:type/:id, function() {
// route to manage a user or a group
});
Comme vous pouvez le voir, créer des chemins avec page.js est plutôt simple : il vous suffit de spécifier les chemins qui seront gérés par le routeur et une fonction de rappel pour faire ce que vous souhaitez - rien de nouveau ici. Maintenant que nous avons nos chemins, il nous suffit d’ajouter des balises <a> dans nos éléments avec le bon attribut href pour créer des liens vers nos pages. Mais alors que le chemin vers l’accueil peut être utilisé une ou deux fois dans une application, les URL pointant vers des documents ou des utilisateurs/groupes apparaissent plusieurs fois dans différents éléments (listes, recherches, etc.) - et c’est là que notre solution dévoile tout son intérêt.
Nous avons développé un comportement Polymer intitulé Nuxeo.RoutingBehavior et qui fournit une propriété d’un type de fonction nommée urlFor utilisée pour générer une URL pour un chemin spécifique.
Chaque élément disposant de ce comportement est maintenant capable de générer des URL adaptées :
</a> <a href$="[[urlFor('document', document.uid)]]">My document</a>
Remarquez qu’au lieu de coder directement l’URL en dur, nous avons nommé nos chemins. De cette façon, nos éléments sont plus flexibles et nous avons la possibilité d’utiliser différentes URL si l’élément est utilisé dans deux applications différentes : par exemple dans l’application A, l’URL pour la page du document pourrait être /my-document/:id, tandis que dans l’application B, l’URL pourrait être /document-page/:id.
Jetons un œil à ce qui se passe en coulisse : la fonction urlFor prend en tant qu’arguments le nom du chemin et d’autres paramètres supplémentaires utilisés pour produire l’URL.
Nuxeo.RoutingBehavior = {
properties: {
urlFor: {
type: Function,
notify: true,
value: function() {
return this.generateUrl;
}
}
},
generateUrl: function() {
if (this.router) {
var route = arguments[0];
if (route.startsWith('/')) {
return this.baseUrl + route;
}
if (!this.router[route]) {
console.error('Could not generate a url for route ' + route);
return;
}
var params = Array.prototype.slice.call(arguments, 1);
return this.router[route].apply(this, params);
}
}
}
Si vous regardez attentivement, vous pouvoir voir un objet router utilisé plusieurs fois. Cet objet tous nos gestionnaires de chemin inversé et nommés et l’utiliser en tant que propriété vous permet de définir facilement un routeur personnalisé pour vos éléments. Dans une application, nous voulons que tous les éléments acceptant des chemins partagent le même ensemble de chemins pour pouvoir utiliser des événements déclenchant une mise à jour lorsque nos chemins sont (re)définis, tout comme nous l’avions fait avec notre i18n helper, ou même l’ajouter à tous nos éléments Polymer avec :
Polymer.Base._addFeature({
router: {
home: function() {
// returns url for homepage
return page.url('/home');
},
document: function(id) {
// returns url for a document page
return page.url('/document/' + id);
}
}
});
Pour chaque chemin défini dans l’application, nous devons implémenter la fonction (stockée dans l’objet routeur) responsable de la génération de l’URL pour ce chemin : pas de magie ici. Mais ça ne devrait pas être trop compliqué et ça va s’avérer très utile sur le long terme si vous avez besoin de modifier sensiblement certaines des URL de votre application.
Et c’est tout ! Nous laissons le fichier page.js gérer le routing dans l’application, et grâce à notre comportement, nous pouvons ajouter des liens dans nos éléments de manière découplée.
Consultez notre catalogue d’élements pour en apprendre plus sur les différents éléments et dites-nous ce que vous en pensez !