Il y a peu de temps j’ai eu besoin de mettre en place un système de routing super light dans une petit app que je développais.
Normalement dans ce genre de situation j’ai mes petites habitudes avec crossroads.js, ou d’autres outils du même acabit mais là j’ai eu envie de m’amuser à créer mon propre système pour le fun.
De mon point de vue un système de routing web en JS ça : Analyse l’url, extraits les paramètres, et en fonction de ceux-ci, déclenche des actions. J’ai également joué avec les pushstate qui permettent, en gros, de manipuler l’historique du navigateur car c’est plus classe.
RomaJS est dispo sur ce repo git.
Son utilisation est très simple. La première étape est de faire en sorte que votre web serveur redirige toujours l’utilisateur vers le fichier de votre app. Le index.html par exemple. Pour cela vous pouvez utiliser (si vous êtes sous Apache) le .htaccess présent dans le repo.
La seconde étape consiste juste à ajouter Roma.js via un tag script dans votre DOM.
Pour terminer, dans un fichier JS, instanciez Roma, ajoutez les routes que vous désirez ainsi que les callbacks à executer quand la route est matchée :
myRoma = new Roma();
myRoma.addRoute('/', function(){
console.log("Homepage");
document.getElementById("currentPage").textContent = "Homepage";
});
myRoma.addRoute('/works', function(){
console.log("Works");
document.getElementById("currentPage").textContent = "Works";
});
myRoma.addRoute('/about', function(){
console.log("About");
document.getElementById("currentPage").textContent = "About";
});
myRoma.addRoute('/work/:id', function(params){
console.log("Work " + params.id);
document.getElementById("currentPage").textContent = "Work " + params.id;
});
myRoma.addRoute('/contact', function(){
console.log("Contact");
document.getElementById("currentPage").textContent = "Contact";
});
myRoma.init();Important, n’oubliez pas après avoir instancié Roma et créé vos routes d’appeler la méthode .init() de Roma afin que l’url courante soit parsée et vos callbacks executées.
Plutôt simple d’utilisation non ? Si vous avez des questions, des commentaires, ou envie de faire de grosse PR sur cette micro librairie faites vous plaisir. 🙂
