Une application web hybride basée sur une page / une seule page (Angularjs, Ember.js) avec amélioration progressive?

Je me demande si quelqu'un a trouvé une solution à ce problème. Est-il un moyen d'obtenir le meilleur des deux mondes:

  • construisez un site basé sur la page, avec des liens permanents, l'accessibilité, le référencement et une amélioration progressive / de secours gracieuse (essentiellement toutes les meilleures pratiques de développement web )
  • et, pour ceux qui ont javascript, une expérience frontale réactive avec le chargement ajax du contenu, aucune page n'est actualisée lors de la navigation sur les pages du site sous-jacent, minimale téléchargement redondant de scripts/content / CSS / etc. (tous les avantages d'un framework côté client comme AngularJs ou Ember.js)

Je vois que quelques sites majeurs sont capables de gérer cela (gmail, stackoverflow), et je vois que Le nouveau site de Jeff construit une version bare-bones du site dans une balise noscript.

  1. est la solution à l'application hybride basée sur une page/une seule page pour construire deux versions du site, envoyer les deux, et laisser le client décider ce qu'il peut montrer? (est-ce que gmail n'?)
  2. ou est le problème que AngularJS et al. ne sont tout simplement pas conçus pour permettre une dégradation gracieuse?

Ça fait mal à mon cerveau sec de penser que #1 est la réponse.

(la raison pour laquelle je me concentre sur AngularJs est que j'aime son support pour les modèles html, le style déclaratif et ses tentatives pour corriger la portée de js. Ember et d'autres frameworks sont excellents aussi; peut-être que l'un d'entre eux serait un meilleur ajustement pour un site hybride?)

23
demandé sur Community 2013-04-17 19:27:34

2 réponses

Cette question est un peu nuancée, car la réponse est "ça dépend". Par exemple, vous avez mentionné Gmail, il n'y a aucune raison qu'une application comme Gmail devrait être indexée pour le référencement, bien que selon ce que vous voulez ou devez vous soutenir Peut vouloir vous assurer que vous pouvez prendre en charge ne pas avoir Javascript.

Cependant, même l'argument " no-javascript "devient fatigué et faible ces jours-ci, au moins pour la classe des"applications web". Si je veux utiliser un Application Windows j'ai besoin de Windows, si je veux utiliser une application web alimentée par javascript, il n'est pas déraisonnable de supposer que je vais avoir besoin d'un navigateur qui n'est pas paralysé pour l'utiliser.

Cependant, revenons à votre question, Je ne peux parler Qu'à AngularJS parce que je suis le plus familier avec elle. Pour la plupart, il vous permet de soutenir une approche d'amélioration progressive, mais ne vous attendez pas à utiliser des choses comme le routage D'URL si c'est ce que vous voulez soutenir. Ce que vous pouvez faire est d'utiliser Contrôleurs AngularJS, liaisons et directives similaires à la façon dont vous pouvez utiliser jQuery comme un moyen d'améliorer les interactions et les comportements de la page.

Gardez simplement à l'esprit que cette approche limitera sérieusement ce que vous pouvez faire avec Angular (ou Ember d'ailleurs) et il peut commencer à être discutable ce que vous obtenez de cette approche que vous ne pourriez pas facilement faire avec jQuery seul.

L'alternative de nos jours est de faire ce que les sites comme Twitter font. C'est essentiellement servir HTML entièrement rendu à partir du serveur pour n'importe quelle vue sur le chargement initial, puis utilisez Javascript pour le chargement ultérieur et le comportement amélioré de L'interface utilisateur. Ceci est très efficace (bien que peut-être assez difficile à implémenter) si vous avez vraiment besoin de prendre en charge la navigation avec et sans Javascript et a l'avantage supplémentaire d'améliorer les temps de rendu/chargement pour la première requête. Encore une fois "cela dépend" parce que cela dépend beaucoup de la façon dont votre site fonctionne réellement s'il est possible de l'utiliser. Vous devez concevoir pour il, et il ne va pas être trivial ou facile.

Mise à jour:

Pour ce que ça vaut, nous prenons l'approche Year of Moo et rendons les pages qui ont besoin de SEO en utilisant PhantomJS et en collant l'état initial mis en cache quelque part pour les servir. Nous avons une tâche de rake que nous exécutons sur les déploiements pour mettre à jour cela. Encore une fois, ce n'est que l'état initial, mais cela aide à contourner le problème pour l'instant.

Les choses changent toujours et je suis sûr que j'aurai changé mon l'esprit de cette approche dans un an ou deux.

14
répondu Chris Nicola 2013-10-23 22:57:48

Avez-vous Lu de Google rendant les Applications AJAX Crawlables. Vous pouvez avoir une application JavaScript à une seule page et un contenu explorable.

Si vous vous en tenez à angular, il y a un article intéressant: Il S'avère qu'il est possible d'avoir votre application AngularJS indexée

2
répondu TheHippo 2013-05-02 23:38:34