Applications monopages vs applications multipages : la bataille des applications Web

Les applications Web à page unique existent depuis près de vingt ans déjà, mais leur popularité est relativement nouvelle. La raison en est le développement technologique : la technologie actuelle permet aux développeurs de transformer ce qui était auparavant des inconvénients majeurs en solutions réalisables ou même en avantages. Dans cet article, nous parlerons des différences entre les applications à page unique et les applications à pages multiples et lesquelles choisir pour votre entreprise.

La bataille entre l'application monopage (SPA) et l'application multipage (MPA) est plus complexe qu'il n'y paraît. Examinons de près tous les avantages et inconvénients de chaque type d'application Web .

Contenu:

1. Qu'est-ce qu'un SPA ?
2. Comment sont construits les SPA ?
3. Avantages du SPA
4. Inconvénients du SPA
5. Qu'est-ce qu'une AMP ?
6. Avantages de l'AMP
7. Inconvénients des applications Web multipages
8. SPA vs MPA — Lequel choisir ?
9. Applications Web progressives
10. Combien cela coûte-t-il de développer une SPA et une AMP ?

Qu'est-ce qu'un SPA ?

En termes simples, une application à page unique est une application Web dans laquelle le contenu est chargé dynamiquement sans qu'il soit nécessaire de recharger la page . Par exemple, lorsque vous consultez votre flux sur Facebook ou Twitter ou votre courrier électronique dans l'application Web Gmail, vous ne voyez pas d'écran de chargement de page aggravant. Vous faites défiler et basculez entre les onglets et le contenu est chargé instantanément.

Dans une application Web d'une seule page, tout le HTML et le CSS sont chargés une fois, lorsque vous ouvrez la page. Après cela, lorsque vous vous déplacez sur le site, seules les nouvelles données sont chargées ; la page elle-même ne se recharge pas. Cela rend l'expérience utilisateur plus fluide - il y a peu ou pas de temps d'attente, d'une part, et les pages semblent se charger instantanément. Dans un monde où un décalage de 100 millisecondes peut entraîner des pertes de ventes de plus de 1,6 million de dollars, c'est un problème que les propriétaires d'entreprise ne peuvent se permettre d'ignorer.

Comment sont construits les SPA ?

Les applications à page unique sont construites avec des frameworks JavaScript, et les développeurs choisissent le framework en fonction d'un certain nombre de facteurs, y compris les préférences personnelles. Voici les trois grands frameworks JavaScript aujourd'hui selon nos développeurs chez Mind Studios :

La plupart des bons développeurs frontend connaissent plus d'un framework. Beaucoup connaissent React, Angular, Vue, et puis certains.

Avantages des applications d'une seule page

Les avantages des applications d'une seule page sont nombreux, c'est pourquoi elles sont devenues si populaires malgré plusieurs inconvénients. En fait, avec la technologie actuelle, ces inconvénients peuvent être traités dans une certaine mesure, faisant des SPA le choix de plus en plus de propriétaires de sites Web. Nous allons commencer par les avantages des SPA , puis couvrir les inconvénients.

1. Chargement rapide des pages

La commutation rapide et fluide entre les pages, sans avoir besoin de recharger activement, est devenue la plus grande arme dans la bataille SPA vs MPA. Le chargement dynamique (chargement du contenu par petites parties au lieu de tout à la fois) raccourcit considérablement les temps de réponse, améliorant ainsi l'expérience utilisateur.

Les SPA déplacent partiellement le traitement du contenu des serveurs vers le navigateur. De cette façon, le navigateur a moins besoin d'envoyer des requêtes aux serveurs et d'attendre des réponses. Grâce à cela, les SPA peuvent même fonctionner hors ligne dans une certaine mesure.

2. Séparez l'extrémité avant et l'extrémité arrière

L'un des autres avantages des SPA est que contrairement aux MPA, dans lesquels le front-end et le back-end sont étroitement connectés, dans un SPA, vous pouvez réécrire le front-end seul, avec un effet minimum sur le back-end. Cela rend la mise à jour des SPA plus facile, plus rapide et moins chère . Mais un avantage plus important des frontaux et des backends séparés est que vous pouvez utiliser un backend SPA pour une application mobile si/quand vous décidez d'en créer un. Avec un MPA, vous devrez reconstruire le back-end d'une application mobile - pas à partir de zéro, mais de manière significative.

3. Développement et maintenance

La construction d'une SPA prend moins de temps que la construction d'une AMP. Ce n'est pas nécessairement plus facile - la pile technique pour un SPA est légèrement plus grande que pour un MPA - mais cela prend moins de temps, car il n'est pas nécessaire d'écrire du code et de créer des conceptions UI/UX distinctes pour chaque page.

En plus de cela, les avantages des SPA incluent un débogage Chrome grandement simplifié grâce à des outils de développement natifs pour les trois frameworks JavaScript les plus populaires.

Passons maintenant aux inconvénients.

Inconvénients des applications Web à page unique (et comment les surmonter)

Selon une étude réalisée en 2018 par Unbound, près de 70 % des utilisateurs affirment que la vitesse de chargement des pages affecte leur décision d'acheter ou de ne pas acheter sur un site. Cependant, la plupart des places de marché sont conçues comme des MPA plus lentes, car les inconvénients des SPA sont particulièrement gênants pour les grands magasins en ligne. Les développeurs ont poussé le développement de SPA pour résoudre les problèmes qui empêchent les propriétaires de boutiques en ligne de créer leurs sites Web en tant que SPA. Voici les inconvénients des applications d'une seule page et comment ils peuvent être surmontés avec la technologie d'aujourd'hui.

1. JavaScript désactivé

Les applications à page unique sont développées à l'aide de frameworks JavaScript - React, Vue, Angular et parfois d'autres. Par conséquent, si les utilisateurs ont désactivé JavaScript dans leurs navigateurs, ils verront une page vide. Ce problème peut être partiellement résolu à l'aide du rendu côté serveur (SSR), auquel cas l'application est traitée sur le serveur plutôt que dans le navigateur. Ce n'est pas une solution parfaite, mais cela fonctionne dans une certaine mesure. Heureusement, peu d'utilisateurs désactivent JavaScript dans leurs navigateurs en premier lieu.

2. Optimisation des moteurs de recherche

Étant donné que les applications Web à page unique chargent le contenu via AJAX , ce qu'un bot de recherche obtient, essentiellement, est un élément DOM (Document Object Model) - une structure d'application Web sans contenu. Cela signifie qu'il n'y a pas de mots-clés à acquérir tout de suite.

Ceci, par conséquent, conduit à un faible classement des moteurs de recherche pour les SPA. Et lorsqu'il est vital qu'un site soit bien classé pour être trouvé par les utilisateurs, un bon référencement est indispensable . Par conséquent, pour de tels sites Web, les développeurs recommandent généralement des applications multipages.

Cependant, le problème du référencement en est un autre qui peut être résolu avec le rendu côté serveur . Le rendu côté serveur envoie (sur demande) une page entièrement chargée telle qu'elle est affichée sur le serveur au lieu de charger le contenu lorsque l'utilisateur parcourt la page. Cela permet aux robots d'exploration de mieux fonctionner avec les SPA.

Une autre façon d'améliorer le jeu de référencement de votre application Web consiste pour vos développeurs à coder le site avec des balises appropriées pour la navigation entre les pages Web afin d'aider les robots de recherche à couvrir l'ensemble du site Web.

3. Évolutivité

Les SPA ne sont pas très évolutifs en termes d'ajout de nouvelles fonctionnalités et de fonctionnalités complètement nouvelles. En effet, avec tout ce qui est écrit sur une seule page, l'insertion de nouvelles fonctionnalités peut perturber le code, les développeurs doivent donc être prudents. En outre, trop de code supplémentaire peut ralentir le chargement de votre seule page, car toute la base de code est chargée immédiatement.

Heureusement , les frameworks JavaScript ont des routeurs dits de fractionnement de code , également connus pour certains sous le nom de packs de chargement paresseux en morceaux. Ceux-ci permettent de charger le code par morceaux (d'où le nom) pour accélérer le chargement d'un site.

4. Problèmes de sécurité

Les applications d'une seule page sont susceptibles d'être attaquées par des scripts intersites (XSS). Il s'agit d'une vulnérabilité qui permet aux pirates d'injecter du code malveillant dans une application Web basée sur JavaScript. Cependant, React.js dispose d'une protection XSS intégrée, et il existe d'autres moyens pour un développeur Web expérimenté de protéger une application Web contre tout type d'attaque.

5. Naviguer

Une application Web d'une seule page est exactement cela - une seule page. Cela signifie qu'il n'y a qu'une seule URL pour l'ensemble du site. Cela rend la navigation difficile – les boutons avant et arrière ne fonctionnent généralement pas et il est impossible de créer un lien vers une partie spécifique du contenu.

Ce problème peut être résolu avec une API. Il existe des API qui ajoutent des préfixes de chemin aux valeurs dynamiques, ce qui permet de créer des liens vers des parties spécifiques de la page, généralement des en-têtes.

Qu'est-ce qu'une AMP ?

Une application Web de plusieurs pages est ce que nous considérons comme un site Web traditionnel : lorsque vous passez d'une page à une autre, le site se recharge complètement. Avec ce genre de site Web, le chargement peut parfois être gênant, surtout si votre vitesse de connexion est lente et que vous devez visiter plusieurs pages avec des médias.

Sans y regarder de trop près, il peut sembler que les AMP sont une relique du passé et seront bientôt presque éteintes. Certes, un chargement de page plus rapide est toujours meilleur pour les ventes. Cependant, ce n'est pas si simple, et il y a des cas où une AMP est le meilleur choix .

Avantages des applications multipages

1. Naviguer

Le plus grand avantage des applications Web multipages est qu'elles permettent une navigation traditionnelle. Par cela, nous entendons que chaque page d'une AMP a sa propre URL que les utilisateurs peuvent copier et coller, ajouter aux signets, partager, etc. Les boutons arrière et avant des navigateurs fonctionnent également sans problème. Dans un SPA, pour créer des URL distinctes et permettre aux utilisateurs de passer d'une page à l'autre via des boutons, vos développeurs devront utiliser une API.

2. Évolutivité

Voici un avantage indéniable des applications Web multi-pages : avec un MPA, votre site Web est aussi évolutif que vous le souhaitez. Vous pouvez créer des dizaines sur des dizaines de pages, en divisant le contenu pour une navigation plus facile et un chargement plus rapide. Étant donné que les SPA chargent généralement toute la structure du site Web - le DOM - une fois, si votre site Web contient beaucoup de code (si vous avez une boutique en ligne, par exemple), sa construction en tant que SPA nécessitera des technologies supplémentaires dans votre pile. C'est pourquoi il n'est pas rare que les développeurs Web suggèrent plutôt des AMP pour les magasins en ligne.

3. Référencement

Si votre entreprise dépend fortement des résultats des moteurs de recherche, envisagez une application Web multipages, car elles se classent généralement mieux. Le chargement de contenu dynamique d'un SPA gêne les robots des moteurs de recherche, un problème auquel les MPA ne sont pas confrontés. Alors que les SPA exigent à nouveau que vos développeurs utilisent une technologie de référencement supplémentaire, un MPA est naturellement en bons termes avec les moteurs de recherche.

4. Pile technologique

Étant le plus ancien des deux types d'applications Web, les AMP disposent d'une pile technologique plus développée et d'une communauté de développeurs un peu plus importante. De plus, bien qu'elles prennent plus de temps à se développer en raison des nombreuses pages, les applications Web multipages sont construites avec une pile technologique plus simple et plus petite que les SPA.

Inconvénients des applications Web multipages

1. Le problème avec la vitesse de chargement n'est pas noir et blanc

Tout d'abord, les AMP ne sont pas exactement plus lentes que les SPA. Par rapport aux SPA, ils sont plus lents à passer d'une page à l'autre. En effet, avec un MPA, à chaque fois qu'un utilisateur essaie de changer de page (aller sur son profil ou passer à la caisse, par exemple), le site envoie une requête au serveur pour le code de la nouvelle page. La requête elle-même et la réponse prennent du temps à traiter, d'où le temps de chargement.

Le temps nécessaire au chargement d'une nouvelle page dépend de plusieurs facteurs :

• La vitesse de connexion Internet de l'utilisateur
• La quantité et le type de contenu chargé
• Combien d'utilisateurs visitent le site simultanément
• Quelle est la puissance des serveurs du site
• La technologie sur laquelle le site est construit
• Les compétences et l'expérience de vos développeurs frontend

D'autre part, les SPA chargent l'intégralité du code au moment où un utilisateur ouvre le site. Après cela, il suffit de basculer entre les « onglets » internes sur la même page, affichant dynamiquement le contenu demandé à partir du cache entièrement chargé. Et quand il y a beaucoup de code, ce chargement initial peut prendre beaucoup plus de temps avec un SPA qu'avec un MPA. Alors quand il faut choisir entre une AMP et un SPA, comme dit le proverbe, tout dépend.

2. Développement

La création d'une application Web de plusieurs pages prend plus de temps que la création d'une application d'une seule page. En effet, chaque page de votre application Web aura besoin d'un code et d'une conception distincts. Selon le nombre et la complexité des fonctionnalités, le temps peut également affecter le coût, car la plupart des entreprises et des indépendants facturent en fonction des heures consacrées au travail.

3. Adaptabilité

Les AMP sont principalement conçues pour les navigateurs de bureau, et alors qu'aujourd'hui tout le monde rend les interfaces de leur site Web flexibles pour les navigateurs mobiles, une adaptabilité totale est plus difficile pour les AMP que pour les SPA. Les applications d'une seule page ressemblent même beaucoup aux applications mobiles natives, tandis que les applications multipages sur les appareils mobiles ressemblent à des sites Web en mode portrait.

Et il n'y a pas que l'interface utilisateur. Si, à un moment donné, vous décidez de créer une application mobile native basée sur votre site Web multipage, vous devrez créer l'interface utilisateur/UX, les visuels et le back-end à partir de zéro. Les SPA, à leur tour, vous permettent de réutiliser le back-end et ont souvent un front-end similaire à celui d'une interface d'application mobile.

SPA vs MPA — Lequel choisir ?

Pour résumer tout ce que nous avons présenté ci-dessus, consultez le tableau suivant décrivant les principales différences entre une application Web à une seule page et une application Web à plusieurs pages.

Comme vous pouvez le voir, les deux types d'applications Web ont leurs forces et leurs faiblesses. Et tandis que la technologie des applications monopages progresse rapidement et que les SPA pourraient bientôt prendre le pas sur les sites Web traditionnels, vous devez encore aujourd'hui peser le pour et le contre avant de décider du type de site Web à créer pour votre entreprise : un SPA ou une MPA.

Le petit plus : les applications web progressives

Les applications Web progressives, ou PWA, ont été une tendance de développement Web ces dernières années. En bref, une PWA est un mix entre une application web et une application native. À la base, ce sont des applications Web - généralement des applications à page unique - car elles utilisent JavaScript, HTML et CSS. Mais ils peuvent être ancrés à l'écran d'accueil d'un smartphone et, dans une certaine mesure, fonctionner hors ligne, comme une application native.

Vous savez comment créer des raccourcis vers des applications et des dossiers sur le bureau de votre ordinateur ? Les PWA fonctionnent de la même manière, mais elles créent des liens ressemblant à des applications vers des pages Web sur l'écran d'accueil de votre smartphone. Avec la dernière pile technologique et les dernières API, ils chargent une certaine quantité de données dans le cache du smartphone afin que l'application puisse fonctionner hors ligne si nécessaire.

Les PWA ne sont pas encore aussi riches en fonctionnalités que les applications natives - elles ne peuvent pas utiliser les fonctionnalités NFC, Bluetooth ou smartphone qui nécessitent certaines autorisations. Ils n'offrent pas non plus de fonctionnalités hors ligne complètes. Mais ils sont flexibles, faciles à créer, peu coûteux à développer et placent un rappel constant de votre site Web sur les téléphones des utilisateurs .

Combien cela coûte-t-il de développer une SPA et une AMP ?

Les applications d'une seule page gagnent en popularité pour une raison. Comme vous pouvez le constater, la plupart des problèmes rencontrés par les SPA peuvent être atténués et ne sont donc pas la mort de votre application Web. C'est-à-dire que vous aurez toujours besoin d'utiliser des technologies supplémentaires pour ces solutions, ce qui peut affecter le temps et le coût de développement d'une application d'une seule page. Vous devrez évaluer tous les aspects de votre idée et prendre en compte l'expérience de votre société de développement Web avant de décider de développer un SPA ou une MPA.

Voici quelques-uns des paramètres qui peuvent être ajoutés à l'équation :

• Type de votre entreprise
• Taille du site Web
• Exigences d'évolutivité
• L'importance du référencement pour votre site

Si vous décidez d'utiliser une application d'une seule page, vous devrez engager une société de développement qui dispose des spécialistes suivants :

• Chef de projet
• Webdesigner UI/UX
• Développeur frontend spécialisé en JavaScript et ses frameworks
• Développeur back-end
• ingénieur qualité

Bien entendu, le coût de création d'un site Web SPA dépendra de la taille et du type du site, de son ensemble de fonctionnalités et de la pile technologique nécessaire, nous ne pouvons donc l'estimer qu'approximativement.

Une application simple d'une seule page (une page de destination , par exemple) peut être créée en deux à quatre semaines et coûte aussi peu que 4 200 $ . Une plate-forme SaaS plus complexe peut prendre trois ou quatre mois pour rechercher, créer et lancer. Le coût de développement d'un tel SPA sera d'environ 29 000 $ et plus . L'expérience des développeurs peut également affecter le temps nécessaire pour créer une application Web d'une seule page, car la pile technologique d'un SPA est plus importante que celle d'un MPA.

D'un autre côté, l' application multipage la plus simple avec plus d'une page (sinon, quelle est la signification, non ?) prendra environ quatre à cinq mois à coder, coûtant entre 35 000 et 42 000 $ selon la complexité et la conception . Plus vous avez besoin de fonctionnalités, plus le prix est élevé et plus le temps de développement est long.

Conclusion : SPA vs AMP

Les applications d'une seule page conquièrent le monde en ce moment. Et s'il est trop tôt pour mettre de côté les AMP, nous sommes d'avis que vous ne pouvez pas – et ne devriez pas – arrêter les progrès. C'est-à-dire que chez Mind Studios , nous gardons les yeux tournés vers l'avenir et suivons les technologies les plus récentes, qui sont principalement destinées au développement de SPA. Nos développeurs connaissent bien à la fois les méthodes traditionnelles de développement de sites Web et les frameworks JavaScript, nous pouvons donc créer votre application Web comme vous le souhaitez.

Si vous souhaitez en savoir plus sur la façon de développer un SPA ou si vous souhaitez une consultation, contactez-nous.

Écrit par Artem Chervichnik et Svitlana Varaksina.