Les applications Web sont involontairement en remplacement de l’ancienne applications de bureau. Ils sont plus pratiques à utiliser, ils sont faciles à mettre à jour, et ils ne sont pas liés à un seul appareil. Et même si les utilisateurs passent doucement des applications Web basées sur un navigateur aux applications mobiles, la demande d’applications complexes et raffinées est déjà énorme et continue de croître., Si vous envisagez de créer votre propre application, vous avez probablement entendu dire qu’il existe deux modèles de conception principaux pour les applications web: Application multipage (MPA) et application monopage (SPA). Et bien sûr, les deux modèles ont leurs avantages et leurs inconvénients.

avant de commencer à transformer votre idée en application réelle, vous devez répondre à un tas de questions importantes. Pour décider quel modèle d’application vous convient le mieux, vous devez suivre une approche axée sur le contenu, qui met l’accent sur l’importance de placer le contenu de votre application avant tout le reste., En effet, le contenu est la principale raison pour laquelle les utilisateurs utiliseront ou non l’application. Et cela nous amène aux questions les plus importantes: quel contenu voulez-vous présenter et quel contenu vos utilisateurs se soucieront le plus.

Il y a beaucoup d’avantages et d’inconvénients de SPA ainsi que de MPA. J’espère que les lignes ci-dessous effaceront les différences entre ces deux modèles de conception et vous rapprocheront du point où vous saurez quel type d’application correspond le plus à votre idée. Et réalisez votre idée de votre propre application.,

Une application d’une seule page est une application qui fonctionne dans un navigateur et ne nécessite pas de rechargement de page pendant son utilisation. Vous utilisez ce type d’applications tous les jours. Ce sont, par exemple: Gmail, Google Maps, Facebook ou GitHub.
SPAs sont tout au sujet de servir une UX exceptionnelle en essayant d’imiter un environnement « naturel” dans le navigateur — pas de rechargements de page, Pas de temps d’attente supplémentaire. Il ne s’agit que d’une page web que vous visitez et qui charge ensuite tous les autres contenus à l’aide de JavaScript — dont ils dépendent fortement.,

SPA demande le balisage et les données indépendamment et rend les pages directement dans le navigateur. Nous pouvons le faire grâce aux frameworks JavaScript avancés comme AngularJS, Ember.js, Meteor.js, knock-out.js .
Les sites D’une seule page aident à garder l’utilisateur dans un, espace web confortable où le contenu est présenté à l’utilisateur d’une manière simple, facile et réalisable.

avantages de l’Application D’une seule Page:

  • SPA est rapide, car la plupart des ressources (HTML+CSS+Scripts) ne sont chargées qu’une seule fois tout au long de la durée de vie de l’application. Seules les données sont transmises d’avant en arrière.,
  • Le développement est simplifié et rationalisé. Il n’est pas nécessaire d’écrire du code pour rendre les pages sur le serveur. Il est beaucoup plus facile de commencer car vous pouvez généralement lancer le développement à partir d’un fichier file://URI, sans utiliser de serveur du tout.
  • Les SPAs sont faciles à déboguer avec Chrome, car vous pouvez surveiller les opérations réseau, étudier les éléments de page et les données qui y sont associées.
  • Il est plus facile de créer une application mobile car le développeur peut réutiliser le même code backend pour une application web et une application mobile native.
  • SPA peut mettre en cache n’importe quel stockage local efficacement., Une application envoie une seule demande, stocke toutes les données, puis elle peut utiliser ces données et fonctionne même hors ligne.

inconvénients de l’Application D’une seule Page:

  • Il est très délicat et pas facile de faire l’optimisation SEO d’une Application D’une seule Page. Son contenu est chargé par AJAX (JavaScript asynchrone et XML) — une méthode d’échange de données et de mise à jour dans l’application sans actualiser la page.
    mise à jour 27.09.2017: dans son commentaire, Iris Shaffer a correctement souligné que cela peut également être fait Côté Serveur. En effet, il est plus facile aujourd’hui qu’elle ne l’habitude d’être.,
  • le téléchargement est lent car les frameworks clients lourds doivent être chargés sur le client.
  • Il nécessite JavaScript pour être présent et activé. Si un utilisateur désactive JavaScript dans son navigateur, il ne sera pas possible de présenter l’application et ses actions de manière correcte.
    mise à jour 27.09.2017: dans son commentaire, Iris Shaffer a remarqué qu’avec le rendu isomorphe / rendu côté serveur, vous pouvez déjà rendre la page sur le serveur. Lorsque le rendu initial est sur le serveur et peut être mis en cache, la désactivation de JS ne serait pas un problème pour obtenir une page rendue., Théoriquement, c’est le droit. Évidemment, vous pouvez rendre côté serveur. Mais le manque de JS peut être une préoccupation pour d’autres fonctionnalités. Beaucoup de choses peuvent être faites en HTML & CSS mais d’après mon expérience, ce serait l’enfer de le faire de cette façon au lieu d’utiliser JavaScript.
  • comparé à l’application « traditionnelle”, le SPA est moins sécurisé. En raison de Cross-Site Scripting (XSS), il permet aux attaquants d’injecter des scripts côté client dans l’application web par d’autres utilisateurs.,
  • Une fuite de mémoire en JavaScript peut même ralentir un système puissant
  • dans ce modèle, les boutons Précédent et suivant deviennent dysfonctionnels.
    mise à jour 27.09.2017: de nos jours, ce n’est plus un problème.

application multi-pages

Les applications multi-pages fonctionnent de manière « traditionnelle”. Chaque changement, par exemple. affichez les données ou renvoyez les données aux requêtes du serveur en affichant une nouvelle page à partir du serveur dans le navigateur. Ces applications sont grandes, plus grandes que les SPAs parce qu’elles doivent l’être. En raison de la quantité de contenu, ces applications ont de nombreux niveaux d’interface utilisateur., Heureusement, il n’est plus un problème. Grâce à AJAX, nous n’avons pas à nous inquiéter du fait que les applications grandes et complexes doivent transférer beaucoup de données entre le serveur et le navigateur. Cette solution s’améliore et ne permet d’actualiser que des parties particulières de l’application. D’autre part, il ajoute plus de complexité et il est plus difficile à développer qu’une seule page de l’application.

les Pros de la Page de Demande:

  • C’est l’approche parfaite pour les utilisateurs qui ont besoin d’une carte visuelle de l’endroit où aller dans l’application., Solide, peu de navigation de menu de niveau est une partie essentielle de l’Application Multi-Page traditionnelle.
  • très bon et facile pour une bonne gestion SEO. Il donne de meilleures chances de classement pour différents mots clés car une application peut être optimisée pour un mot clé par page.

inconvénients de l’application à plusieurs pages:

  • Il n’y a pas d’option pour utiliser le même backend avec les applications mobiles.
    mise à jour 27.09.2017: à l’époque, quand j’écrivais cet article, je n’avais pas beaucoup d’expérience avec le backend et les applications mobiles., Il est évident pour moi maintenant que vous pouvez utiliser la même interface pour les deux. Et je tiens à remercier tous les lecteurs qui l’ont souligné.
  • Le développement Frontend et backend sont étroitement couplés.
  • Le développement devient très complexe. Le développeur doit utiliser des frameworks côté client et Côté Serveur. Il en résulte un temps plus long de développement d’applications.

SPA ou MPA?

avant de déployer une application web, vous devez tenir compte de son objectif., Si vous savez que vous avez besoin de plusieurs catégories (parce que, par exemple, vous gérez une boutique en ligne ou publiez beaucoup d’autres contenus), utilisez un site de plusieurs pages. Si vous êtes sûr que votre site est approprié pour une expérience d’une seule page pure-allez-y. Et si vous aimez SPA mais que vous pouvez à peine tout intégrer dans une seule page, envisagez plutôt le site hybride. C’est une autre façon que je n’ai pas mentionnée auparavant. Une application hybride prend ce qui est le meilleur dans les deux approches et essayer de minimiser les inconvénients., Il est, en fait, une application de page unique qui utilise des ancres D’URL comme des pages synthétiques permettant plus dans la navigation du navigateur de construction et la fonctionnalité de préférence. Mais c’est le sujet pour un autre article.

peut-être qu’à l’avenir, tout le monde utilisera un modèle D’Application à Page Unique (y compris une application hybride), car il semble apporter beaucoup d’avantages. De nombreuses applications sur le marché migrent vers ce modèle. Cependant, comme certains projets ne peuvent tout simplement pas s’intégrer dans SPA, le modèle de MPA est toujours vivant.

initialement publié par Paweł Skólski à neoteric.eu/blog le 1er décembre 2016.