Simplifiez le développement de votre prochaine application Web grâce aux routers

Dans ma quête des bons outils pour créer une application web en Javascript, j'ai déjà abordé la vue (Liez votre HTML et vos données grâce au data-binding et Rivets JS !), le storage (Découvrez une nouvelle façon de gérer vos données en Javascript), c'est donc tout naturellement que je poursuis sur ma lancée avec les routers !

Qu'est-ce qu'un router ?

Dans une application sans rechargement, un des soucis est le changement de vue et d’état. En effet, comment permettre à nos vues d'envoyer des messages à notre application sans induire un couplage trop fort entre ces deux entités ?

Les routers sont un moyen de répondre à cette problématique. Ils fonctionnent en reproduisant un système d'URL auxquels ils permettent de lier des actions. Les vues n'ont plus qu'à "appeler" une certaine URL sur le router, et l'action associée s’exécutera.

la mise en place d'un router ressemblera toujours plus où moins à cet exemple :

  function index(){
    console.log('index !');
  }

  function show(e) {
    console.log(e.params.user);
  }

  page('/', index);
  page('/user/:user', show);

Il ne reste plus qu'à appeler l'URL choisi depuis ses vues :

  page.show('/user/18');

Le router prend seul le relais à partir de là en lançant le callback concerné, ici la fonction show.

Un autre point que les routers fournissent est ce qu'on appelle le deep linking : la possibilité de pouvoir créer des URLs pointant sur une vue particulière de notre application. En reflétant la "page" virtuelle de notre application dans la barre d'URL, et en capturant l’état d'origine et les changements de cette URL, il est possible de savoir quel vu/état de notre application est affiché, et donc de profiter de fonctionnalités comme l'historique du navigateur et les signets.

Une liste de ressources pour bien démarrer

Page.js

Page.js est la library que j'utilise personnellement dans cette liste. Sa structure est une des plus simples (c'est celle que j'ai utilisée pour l'exemple), son poids est négligeable, et il s’intègre à merveille dans n'importe quel environnement. Bref, un bon outil, très souvent mis à jour, que je recommande.

Router.js

Router.js est l'outil qu'a choisi le framework Ember.js . Toujours très simple, il se différencie de page.js par une syntaxe un peu moins agréable à mes yeux et des performances un peu plus rapides.

Microlibrary oblige, Router.js ne prend en compte le deep-linking par défaut. Il est néanmoins très simple de l'y ajouter avec la fonction router.updateUrl, qui s’exécute à chaque changement d'URL.

CrossRoad.js

Crossroad est un router Javascript agnostique qui a pour but de rester très simple et de limiter le poids ainsi que les dépendances au maximum. Sa seule dépendance est js-signal, qui est un système pub/sub très simple.

Si vous partez sur cette solution, la documentation vous indique comment intégrer en 5 lignes le support de Hasher, qui vous offrira le support du deep-linking

Son seul inconvénient est qu'il n'a pas reçu de commit depuis plus de deux ans, ce qui est malheureusement vrai aussi pour js-signal. La source reste néanmoins très simple à comprendre et maintenir.

Bonus : Comment l'intégrer à mon application ?

Si vous utilisez jQuery, je vous propose cette option pour que toutes vos urls commençant par autre chose que http execurent le router plutôt que recharger la page (L'exemple est pour page.js, mais il peut se traduire sans soucis pour n'importe quel router).

  $("a:not([href^='http'])").click(function(e){
    page($(e).attr('href'));
    e.preventDefault();
  });