Les SPA sont-ils adaptés aux sites?
Je prévois de créer un site Web avec environ 20 différentes vues/pages principales pour les téléphones mobiles.
Si je souhaite me concentrer sur une expérience utilisateur très réactive (comme en rapide) lors du basculement entre les pages, la création du site en tant qu'application à page unique est-elle une bonne idée?
Je sais qu'il existe de nombreux conseils pour augmenter les performances globales d'un site Web mobile:
http://www.slideshare.net/blazeio/mobile-web-performance-optimization-tips-and-tricks
Mais ma principale préoccupation est que le code JavaScript côté client (tel que AngularJS) diminue réellement les performances, lorsqu'il doit faire des requêtes AJAX, puis afficher/masquer/créer des éléments de manière dynamique, par rapport à la création d'une requête HTTP traditionnelle pour obtenir la page. et son contenu et montrant que directement.
Des ressources ou des commentaires qui pourraient m'aider à comprendre quelle architecture conviendrait le mieux aux sites mobiles?
TL; DR: les applications d’une page nécessitent plus d’attention de la part de leur architecture, en particulier si vous migrez les fonctionnalités d’un site Web existant (les projets relatifs aux sites contaminés sont difficiles).
Un argument commun pro-SPA se concentre sur contenu moins téléchargé . Bien que techniquement correct, il est moins pertinent sur une connexion cellulaire avec une latence élevée. Alerte spoiler: toutes les connexions cellulaires sont à latence élevée .
La différence entre le téléchargement de 10 Ko et de 15 Ko est négligeable, c’est la surcharge liée à l’établissement de la connexion qui draine toute joie d’une expérience mobile.
Vous pouvez rarement influencer latence (bien que l’utilisation d’un CDN et de l’hébergement dans le cloud puisse le faire), mais vous pouvez compenser son impact. La ressource le groupement et la minification est efficace et les concepts sous-jacents sont applicables quel que soit l'environnement utilisé.
De toute façon, vous devriez gzipper votre contenu, et la façon dont cela fonctionne dégonfle davantage (haha) l’argument de taille. Fondamentalement, il se concentre sur la répétition de séquences de caractères et est plus efficace pour des choses comme ballonné balise HTML plutôt que lean JSON. Cela devient ridicule pour le javascript compilé par clojure.
Toujours un bon conseil, mais assurez-vous que votre contenu est servi avec des en-têtes
Content-Lengthvalides pour autoriser les connexions persistantes .
D’un autre côté, un argument anti-SPA commun est le suivant: ZOMG tellement javascript . Bien sûr, vous ne pouvez plus vous permettre d’avoir des fuites de mémoire comme vous le pouvez "sur un site Web traditionnel (la plupart sont réparées dès que vous accédez à une page différente), mais écrivez bien en javascript et vous serez récompensé.
Utiliser jQuery sur un site mobile est parfois un mal nécessaire. Autant l'utiliser correctement .
Plus vous avez de javascript, plus l'incitation relative à le faire not est ré-exécutée à chaque "chargement de page". Tout framework que vous incluez sur une page doit être initialisé avant de pouvoir être utilisé, ce qui nécessite l'analyse et l'exécution de son code ... sur chaque page utilisée . SPA ne doit exécuter cette étape qu’une seule fois (ce n’est pas une excuse pour la gestion des dépendances pauvres/manquantes).
Ceci s'applique également aux CSS. Lorsqu'un nouveau contenu est ajouté à DOM suite à une interaction utilisateur, il y aura moins de re-flux et de nouvelles peintures qu'une nouvelle charge. De plus, le navigateur n'a pas besoin d'analyser à nouveau les feuilles de style.
La force réelle d'une application d'une seule page réside dans son performance perçue . Vous et moi savons tous deux que taper sur un lien n'est pas résolu instantanément, mais que l'utilisateur n'est pas obligé de le faire. Rendre le site réactif aux interactions des utilisateurs en ajoutant des états tactiles et une throbber au bon moment améliorerait considérablement l'expérience utilisateur. Bien sûr, vous pouvez toujours faire un effort supplémentaire et pré-récupérer certains contenus. Peut-être serait-il judicieux de charger la page/l'élément/la photo suivante à l'arrière-plan juste après que celle-ci soit prête?
Ne négligez pas le fait que les SPA sont chauds et à la mode, plus le facteur de motivation pour pouvoir jouer avec des cadres fascinants. Bien sûr, les utilisateurs finaux ne s’intéresseraient pas à ce genre de choses, mais vous devez apprendre quelque chose de nouveau et un framework MVVM mature pourrait vous décourager de faire fonctionner ce foutu ajax et vous permettre de vous concentrer sur d’autres aspects de l’application.
Le parcours du SPA vous offre deux possibilités majeures d'améliorer l'expérience utilisateur:
Contenu moins téléchargé
Si vous avez différentes pages HTML pour chaque page de votre application, vous devrez télécharger chacune d'elles dans leur intégralité. Si votre site partage des balises communes entre les pages, il sera téléchargé à nouveau pour chaque page. Comparez cela avec un SPA où au moins vous ne téléchargez que les modifications nécessaires pour passer de la page en cours à la suivante. Dans certains cas, il y aura peu d'amélioration, dans d'autres ce sera assez important.
SPA peut également être plus efficace si vous séparez la logique de création du balisage de vos données. Prenons l'exemple d'une liste de 100 noms et scores:
Traditionnel:
<ul id="myList">
<li><strong>Name 1</strong> score 1</li>
<li><strong>Name 2</strong> score 2</li>
<li><strong>Name 3</strong> score 3</li>
...
<li><strong>Name 100</strong> score 100</li>
<ul>
SPA:
<ul id="myList"></ul>
var myData = {
"Name 1" : "score 1",
"Name 2" : "score 2",
"Name 3" : "score 3",
...
"Name 100" : "score 100"
}
var html = '';
for (var name in myData) {
var html += '<li><strong>' + name + '</strong> ' + myData[name] + '</li>';
}
document.getElementById('myList').innerHTML = html;
Le modèle SPA peut économiser des octets même lors de la construction du DOM. En outre, la logique est réutilisable. Par conséquent, si vous devez reconstruire la liste avec plus de contenu, il vous suffit d'ajouter des éléments à un objet et d'appeler une méthode.
Trouver le juste équilibre entre la taille du téléchargement et le traitement requis est un problème très difficile, qui dépend de nombreux problèmes, notamment des particularités de l'application, du périphérique, d'autres astuces pouvant être réalisées, etc. Heureusement, une approche sensée donne des résultats assez satisfaisants. la plupart du temps.
Transitions
Hormis quelques expériences IE, vous ne pouvez modifier les transitions entre les différentes pages du navigateur. C’est un argument de vente important pour SPA, car avec des transitions intelligentes, vous pouvez donner l’apparence de la rapidité même lorsque le site n’est pas aussi rapide. Même sans transitions, un SPA est beaucoup mieux à même de donner un retour à l'utilisateur lors du chargement qu'un site classique.
Une chose à noter est que vous devriez vous concentrer sur le chargement initial de la page pour qu'il soit le plus fluide possible (en ne chargeant que le strict minimum) et ensuite autant que possible de demandes de lot. Un gros problème avec la latence mobile est que si l'appareil n'a pas besoin d'utiliser la radio pendant un moment, il sera éteint. Le réactiver entraîne une surcharge importante. Les demandes doivent donc être mises en lot autant que possible.
Mon conseil personnel est que si vous pouvez aller au SPA, vous devriez le faire. Il y a très peu de choses qui peuvent être faites pour améliorer l'efficacité des sites HTML classiques, alors que je soupçonne que les SPA continueront à être améliorés constamment à l'avenir. À tout le moins, vous pouvez vous attendre à des performances similaires d'un SPA soigneusement construit, comme vous obtenez avec du HTML classique, et les opportunités potentielles peuvent donner de grandes récompenses.
TL; DR: Oui, c'est faisable mais il faut être discipliné et l'avantage est sur la perception de la performance.
J'ai travaillé sur la transition d'une application Web "de bureau" traditionnelle centrée sur le serveur vers un SPA réactif au cours des derniers mois. Plus précisément, nous avons choisi une conception MV * prise en charge par un routeur médiateur et une extraction découplée avec AMD. Nous étudions la possibilité de déplacer ceci vers RVP .
J'ai inclus certains de nos principes de conception ci-dessous:
- Décidez à l'avance de la mesure dans laquelle votre plate-forme prendra en charge l'amélioration progressive. Moins de scripts sont nécessaires, mieux c'est. Nous nous appuyons sur notre processus de construction pour nous assurer de pouvoir prendre en charge du contenu HTML et d'autres contenus générés dynamiquement mais servis de manière statique
- Construisez tôt votre chaîne d’outils (minification, correction d’image, etc.)
- Découplez autant que possible l'extraction des actions des utilisateurs, en utilisant le stockage local et des techniques telles que l'extraction préalable ou l'extraction prédictive.
- Assurez-vous de mesurer ce que vos utilisateurs font afin de pouvoir (si cela se justifie), extraire progressivement le contenu ou la logique d'application
- Soyez vraiment pointilleux sur les frameworks qui supportent le reste de votre architecture (plutôt que de le dicter).
- Soyez vraiment précis quant aux composants et utilitaires tiers que vous utilisez. Évitez les frameworks dans lesquels vous n'utilisez pas une proportion significative de l'ensemble des fonctionnalités (tout ce que vous n'utilisez pas entraîne des coûts supplémentaires en poids, en latence, en traitement sur périphérique, etc.).
Vous pouvez trouver ceci framework comparision utile
Rester simple -
Oui Les applications à page unique conviennent parfaitement au développement mobile. Les frameworks SPA tels que Durandal, Angular, Backbone, Ember, etc. n’ont besoin que d’un moteur JavaScript pour fonctionner efficacement. Ils sont compatibles avec plusieurs navigateurs et n'exigent rien de spécial pour fonctionner sur chaque taille d'écran, résolution ou appareil, et tirent parti des puissants moteurs de l'appareil mobile.
Qu'est-ce qui les rend si bien adaptés?
Avec une application d'une seule page, vous pouvez mettre en place tous les crochets pour la liaison de données déclarative avec des bibliothèques telles que Knockout, Handlebars ou Angular qui remplaceront toutes les manipulations DOM jQuery que vous feriez utiliser dans un site Web traditionnel. Cela favorisera les composants réutilisables tels que les directives et les gestionnaires de liaisons personnalisées, ce qui réduira la quantité de code nécessaire et facilitera les tests, car les liaisons seront réutilisées dans votre application.
Qu'est-ce qui les rend moins bons pour le mobile?
Les applications à une seule page peuvent souvent déboucher sur une conception médiocre sur laquelle il sera difficile de récupérer (comme pour tout autre développement). La différence est qu’il est difficile de trouver un chemin excellent pour créer une application évolutive et souvent. les premiers développeurs de SPA font des hypothèses. Cela peut être atténué en tirant parti des ressources (telles que le support technique payant, StackOverflow, etc.) ou en effectuant une lourde révision du code dès la fondation de votre SPA.
Qu'en est-il de la performance?
Les applications d'une seule page sont rapides comme l'éclair dans la plupart des cas. L'idée de base consiste à utiliser l'injection de dépendance et les bibliothèques telles que Require.js pour charger des modules AMD permettent au développeur de demander aux clients de télécharger les fichiers HTML et JavaScript rarement lorsque des modifications sont apportées. En chargeant à partir du cache, vous réduisez vos appels au serveur en appels de données. Ceci suit les techniques de développement Web RESTful.
La réponse courte est oui.
Chaque seconde compte , les gens commencent à abandonner votre service si le temps de chargement est inférieur à une seconde. Alors chargez seulement ce dont vous avez besoin.
En outre, Google a aimablement fourni cet ensemble fantastique de consignes pour vous aider à optimiser votre système mobile.
J'ai eu beaucoup de succès en utilisant des outils tels que RequireJS pour charger les éléments dont j'ai besoin (et l'organisation!). Cela peut être jumelé avec le cadre de votre choix comme BackboneJS , AngularJS , EmberJS ... il y en a beaucoup qui sont excellents.
Le cadre le plus intéressant que j'ai jamais vu est Famo.us , ils revendiquent une vitesse de 40 à 60 ips sur les téléphones, les PC et les téléviseurs. Et leurs démos fonctionnent parfaitement sur mobile.
SPA est un bon choix pour les sites mobiles. Le modèle suivant semble bien fonctionner sur les sites de SPA mobiles
Avec un temps de réponse réduit, vous pouvez obtenir d'excellentes performances. J'ai essayé le modèle ci-dessus pour créer un site Web prenant en charge les navigateurs mobiles et les navigateurs Web.
- Utilisez le jQuery pour rendre le processus dynamique
- Utilisez l'appel ajax pour effectuer les appels rapides aux données selon vos besoins
- L'architecture MV vous donnera une image claire pour mettre en œuvre vos concepts
- HTML5 sera le meilleur choix pour le front-end
- Utilisez une API distincte pour gérer les processus de données, ce qui augmentera vos performances
La réponse acceptée est très bonne et je suis d’accord avec elle, les dernières applications que j’ai développées ont été principalement réalisées avec SPA.
Mais j’ajouterais que SPA n’est pas la solution magique pour toutes les applications, surtout quand on parle de "Rendu du chemin critique" .
Une histoire brève
Pour traiter rapidement " time to first Tweet ", le traitement de tout un framework tel que AngularJS peut poser problème.
Nous avons réalisé qu'il serait plus difficile d'obtenir ce que le client souhaite en utilisant Angular. Nous avons donc construit l'application sans elle. L'application utilisait largement les AJAX requêtes et autres pratiques d'optimisation. En fin de compte, le temps de rendu de la page principale a été réduit de presque 1 seconde. Deux mois après le déploiement, le client affichait une augmentation de 30% de ses ventes! Ok, c’était une application avec des fonctionnalités simples et n’avait pas toute la richesse d’un SPA.
Le point tournant de cette décision est la complexité du développement. Les applications standard basées sur un serveur Web sont plus faciles à développer car il y a beaucoup plus de développeurs qui connaissent tous les trucs pour créer une telle application avec une efficacité maximale. Les SPAs, quant à eux, peuvent améliorer les performances dans tous les domaines 1) un transfert de données plus rapide, 2) des opérations de GUI (DOM) plus rapides, 3) une UX plus intelligente, mais toutes nécessitent des développeurs plus expérimentés fiable. Ces devs sont moins nombreux. Si vous prévoyez de tout faire vous-même, cela signifie une courbe d'apprentissage plus longue et beaucoup d'essais/erreurs. Ceci est principalement dû au fait que les SPA sont nouveaux par rapport au WWW classique.
Pour créer un SPA efficace, vous devez connaître très bien la partie connexion/socket, connaître les goulots d'étranglement, savoir comment choisir les protocoles, quelles plates-formes (appareils) prennent en charge quels protocoles de connexion. Il n’est pas facile de choisir votre solution préférée: Engine, IO, Socket.IO, SockJS et d’autres.
Vous aurez besoin de très bien connaître la manipulation DOM en termes de performances dynamiques pour pouvoir choisir judicieusement entre divs/tables/canvas.
Vous devrez utiliser efficacement les capacités du navigateur pour stocker des données, à savoir les cookies, le cache et les installations de stockage de données locales (fichiers/base de données) afin de stocker des données pendant la session et entre les sessions.
De nos jours, JavaScript est très rapide sur iOS/Android, la vitesse du langage ne devrait donc pas poser de problème. Le grand avantage est d’utiliser Node.js pour pouvoir programmer dans la même langue les deux côtés du client et du serveur. Pas besoin de synchroniser les fonctions hashThisPassword() entre deux langues (ou plus).