web-dev-qa-db-fra.com

Solution de routage côté client préférée?

Je conçois une application Web basée sur un navigateur Web.

JQuery est déjà utilisé dans mon application. Je prévois actuellement d'utiliser KnockoutJS pour la liaison de données et la gestion de l'interface utilisateur. Cependant, j'ai utilisé Backbone.js dans le passé, et j'ai été très impressionné par les fonctionnalités de routage fournies par la couche contrôleur.

J'ai également examiné une solution basée sur JQuery comme pathjs pour le routage côté client.

Ce serait formidable si quelqu'un pouvait offrir des suggestions et des directives pour choisir un système de routage approprié.

Je ne souhaite pas utiliser Backbone.js au lieu de KnockoutJS en raison des excellentes fonctionnalités de liaison de données de KnockoutJS.

50
lorefnon

Après avoir traversé un peu d'exploration, j'ai trouvé la solution. Les installations de routage de @Eisenhauer Backbone sont impressionnantes, mais que se passe-t-il si je n'utilise pas Backbone. Comme je l'ai souligné dans ma question, j'utilise déjà KnockoutJS qui me fournit un modèle MVVM côté client et ce n'est donc pas vraiment une bonne idée de mettre une implémentation MVC supplémentaire sur la même page.

Pour les personnes à la recherche d'une solution de routage autonome, pathjs est une solution simple et élégante.

Une solution de routage plus flexible, puissante et autonome est Crossroads.js disponible sur http://millermedeiros.github.com/crossroads.js/ . Il est très bien documenté et très puissant, il peut donc être adapté à n'importe quel ensemble d'exigences.

34
lorefnon

Vous pourriez utiliser l'API Historique plutôt qu'une approche hashbang?

  • Il vous permet de manipuler l'URL affichée à l'utilisateur.
  • Cela signifie que le travail en arrière/en avant fonctionne sensiblement.
  • La mise en signet de la page fonctionne sensiblement.
  • C'est mieux en termes de performances, car si l'utilisateur actualise une page (ou frappe un lien vers la page à partir d'une source externe), le contenu correct est chargé la première fois plutôt que d'avoir à charger une page vierge puis à récupérer le contenu correct via AJAX .

L'inconvénient est que les navigateurs plus anciens ne le prendront pas en charge. Vous pouvez vous rabattre sur une approche hashbang (si vous en avez vraiment besoin). Je ne connais aucun cadre existant qui le fasse cependant. Je préférerais ne pas charger dynamiquement le contenu (c'est-à-dire recharger la page entière lorsque l'utilisateur clique sur un lien). L'API d'historique deviendra de plus en plus largement prise en charge, ce "problème" diminuera donc avec le temps.

Voici un exemple de travail avec de la documentation. Dans la barre d'adresse, il semble que les pages se chargent "à l'ancienne" (actualisation de la page complète) mais si vous jetez un œil à la console (Firebug, Chrome dev tools), vous pouvez voir que le contenu est récupéré via une demande AJAX.

Mozilla en a docs à ce sujet.

14
Spycho

Il y a aussi un excellent Directeur

12
Shekhar

Crossroads.js semble être l'un des meilleurs du marché. Un avantage majeur étant qu'il ne dépend pas de window.location pour le routage. Il est léger car il se limite au routage et au routage seul.

D'autres que vous voudrez peut-être essayer: finch.js , davisjs (basé sur pushState afin que vous puissiez utiliser les liens existants comme solution de rechange en cas d'échec de JS)

Ajout d'une mise à jour: 30 mars 2015 - J'étais passé à AngularJS à la fin de l'année dernière. De loin le meilleur commutateur sous forme de JQ, a beaucoup de modules comme le routage intégré.

4
Deepak Thomas