dans cet article, nous allons couvrir les principaux avantages de l’adoption d’une Architecture de SPA tout en construisant nos Applications angulaires, et répondre à certaines questions très courantes concernant les SPAs en général.

Cet article fait partie de la série Angular for Beginners en cours, voici la série complète:

• Angular For Beginners Guide – Getting Started (Setup Environment)

• Angular For Beginners Guide: pourquoi Angular?, Les Prestations Haut

• Angulaire Pour les Débutants Guide – Composants vs Directives

• Pourquoi une Seule Page de l’Application, Quels sont les Avantages? Qu’est-ce que d’un SPA?

pourquoi L’Architecture SPA?

commençons par la première question: pourquoi les Applications mono-Page (SPAs)? Ce type d’applications existe depuis des années, mais elles ne se sont pas encore répandues sur L’Internet public.

Et pourquoi est-ce?

Il y a à la fois une bonne raison à cela et une raison encore meilleure pour expliquer pourquoi cela pourrait changer dans un proche avenir.,

Les SPAs ont été beaucoup adoptés au cours des dernières années pour créer la partie tableau de bord privé des plates-formes SaaS (Software as a Service) ou des services Internet en général, ainsi que pour créer des applications d’entreprise axées sur les données et gourmandes en forme.

Mais Angular applique-t-il alors la construction de nos applications en tant que SPAs?

la réponse est non, ce n’est pas le cas, mais c’est une possibilité intéressante qu’il apporte, étant donné les nombreux avantages de construire une application de cette façon. Ce qui nous amène à une question clé:

pourquoi voudriez-vous construire une Application en tant que SPA?,

C’est quelque chose qui est souvent pris pour acquis. Tout le monde construit des applications de cette façon, mais quel est le gros avantage de cela? Il doit y avoir au moins quelques caractéristiques tueuses, Non?

commençons par une fonctionnalité qui n’est pas mentionnée très souvent: le déploiement de Production.

comprendre les avantages de L’utilisation du SPA en production répondra également à la question clé:

Qu’est-ce qu’une Application à une seule Page?

parfois, les noms dans le développement de logiciels ne sont pas bien choisis, ce qui peut entraîner beaucoup de confusion., Ce n’est certainement pas le cas avec le terme SPA: une application d’une seule page n’a littéralement qu’une seule page !! If

Si vous voulez voir une Application D’une seule Page en action, je vous invite à vous diriger vers AngularUnivhttps://angular-university.io et commencer à cliquer sur la page d’accueil sur la liste des derniers cours, et sur le menu du haut.

Si vous commencez à naviguer, vous verrez que la page ne se recharge pas complètement – seules les nouvelles données sont envoyées sur le fil lorsque l’utilisateur navigue dans l’application – c’est un exemple d’application à une seule page.,

Permettez-moi de vous expliquer quel est l’avantage de construire une application comme celle-ci et comment cela fonctionne-t-il même.

en utilisant les outils de développement Chrome, inspectons l’index.html du site Web AngularUniv qui est téléchargé sur la page d’accueil (ou toute autre page, si vous naviguez et appuyez sur Actualiser).

la page qui est téléchargée est la toute première demande que vous verrez dans le Panneau de L’onglet Réseau Chrome – c’est littéralement la seule Page de notre Application.

remarquons une chose: cette page est presque vide! Sauf pour le tag, il ne se passe pas grand-chose ici.,

remarque: sur le site Web actuel, la page téléchargée a également du HTML qui a été pré-rendu sur le serveur en utilisant Angular Universal

notez les noms des bundles CSS et Javascript: tout le CSS et même tout le Javascript de l’application 1503b35524″> – cela vient d’un serveur statique complètement différent:

dans ce cas, les deux bundles proviennent en fait d’un seau Amazon S3!,

notez également que le nom des bundles est versionné: il contient l’horodatage auquel la génération de déploiement a été exécutée qui a déployé cette version particulière de l’application.

les avantages du déploiement en Production des Applications mono-Page

Le scénario que nous avons vu ci-dessus est en fait un avantage assez cool des applications mono-page:

Les Applications mono-Page sont super faciles à déployer en Production, et même à,

Une application d’une seule page est très simple à déployer par rapport aux applications de rendu côté serveur plus traditionnelles: c’est vraiment un seul fichierindex.html, avec un bundle CSS et un bundle Javascript.

Ces 3 fichiers statiques peuvent être téléchargés sur n’importe quel serveur de contenu statique comme Apache, Nginx, Amazon S3 ou Firebase Hosting.

bien sûr, l’application devra faire des appels au backend pour obtenir ses données, mais c’est un serveur séparé qui peut être construit si nécessaire avec une technologie complètement différente: comme Node, Java ou PHP.,

en fait, si nous construirions notre API REST ou un autre type de backend dans Node, nous pourrions même le construire également en Typescript, et ainsi pouvoir utiliser le même langage sur le serveur et le client, et même partager du code entre eux.

gestion des versions D’Application D’une seule Page en Production

un autre avantage du déploiement de notre interface en tant qu’application d’une seule page est le contrôle des versions et la restauration. Tout ce que nous avons à faire est de version Notre sortie de build (qui produit les bundles CSS et JS surlignés en jaune ci-dessus).,

nous pouvons configurer le serveur qui dessert notre SPA avec un paramètre qui spécifie la version de l’application frontend à construire: c’est aussi simple que ça!

Ce type de déploiement évolue très bien: les serveurs de contenu statiques comme Nginx peuvent évoluer pour un très grand nombre d’utilisateurs.

bien entendu, ce type de déploiement et de versioning n’est valable que pour la partie frontend de notre application, cela ne s’applique pas au serveur backend. Mais encore, c’est un avantage important à avoir.

mais le déploiement en production est-il le seul avantage des applications à page unique?, Certainement pas, voici un autre avantage important:

Single Page Applications And User Experience

Si vous avez déjà utilisé une application web qui recharge constamment tout du serveur sur presque chaque interaction utilisateur, vous saurez que ce type d’application donne une mauvaise expérience utilisateur en raison de:

• Les recharges constantes de pleine page

• également en raison des allers-retours du réseau vers le serveur pour récupérer tout ce HTML.,

dans une application à une seule page, nous avons résolu ce problème en utilisant une approche architecturale fondamentalement différente:

sur un SPA, après le chargement initial de la page, plus de HTML n’est envoyé sur le réseau. Au lieu de cela, seules les données sont demandées au serveur (ou envoyées au serveur).

ainsi, lorsqu’un SPA est en cours d’exécution, seules les données sont envoyées sur le fil, ce qui prend beaucoup moins de temps et de bande passante que l’envoi constant de HTML. Jetons un coup d’oeil au type de charge utile qui passe sur le fil généralement dans un SPA.,

Par exemple, dans le spa AngularUniv, si vous cliquez sur un cours, Aucun code HTML ne sera envoyé sur le fil. Au lieu de cela, nous obtenons une requête Ajax qui reçoit une charge utile JSON avec toutes les données du cours:

Comme nous pouvons le voir, la version HTML d’un cours serait beaucoup plus grande par rapport à un objet JSON ordinaire en raison de toutes les balises d’ouverture et de fermeture, mais il y a aussi beaucoup de

par exemple, des éléments tels que les en-têtes et les pieds de page d’une page sont constamment envoyés au navigateur mais ils n’ont pas vraiment changé.,

donc, avec cela, nous avons ici un deuxième grand avantage d’une application à une seule page: une expérience utilisateur beaucoup améliorée grâce à moins de rechargements de page complète et une meilleure performance globale car moins de bande passante est nécessaire.

alors pourquoi ne pas utiliser les SPAs partout alors?

Si les SPAs ont tant d’avantages, pourquoi n’ont-ils pas été adoptés à plus grande échelle sur l’internet public? Il y a une bonne raison à cela.

Jusqu’à relativement récemment, les moteurs de recherche comme Google avaient du mal à indexer correctement une application d’une seule page. Mais qu’en est aujourd’hui?,

dans le passé, il y avait quelques recommandations pour utiliser un schéma D’exploration Ajax spécial qui a été entre-temps obsolète. Google est-il maintenant capable de rendre complètement Ajax?

dans une annonce officielle, nous avons l’information que Google search est maintenant généralement capable D’explorer Ajax, mais il y a des rapports qu’il n’est pas encore complètement capable de le faire.

Et la recommandation est d’utiliser l’amélioration Progressive, à la place. Alors, qu’est-ce que cela signifie, à ce stade, est-il possible d’utiliser des SPAs sur l’internet public ou pas encore?

SPAs adaptés aux moteurs de recherche?,

Il est possible d’avoir les performances et l’expérience utilisateur d’un SPA avec de bonnes propriétés SEO: l’utilisation du moteur de pré-rendu universel Angular nous permet de:

• pré-rendu d’une application sur le backend
• expédier le HTML au navigateur avec Angular
• et avoir Angular bootstrap côté client et reprendre la page un SPA

les SPAs deviendront-ils plus fréquents à l’avenir?,

Imaginez une version SEO friendly D’Amazon qui ne se rafraîchirait pas à chaque rechargement de page et avec une performance et une expérience utilisateur nettement améliorées: cela aurait probablement un impact positif énorme sur le temps que les clients passent sur le site!

Les avantages techniques des SPAs SEO-friendly sont donc importants et encore plus sur mobile, et nous nous attendrions à ce que ce type d’applications SEO-friendly SPA devienne plus fréquent à l’avenir également sur internet public.

mais cela laisse la dernière question de cette section encore sans réponse., Vous devez penser à ce stade après avoir lu les dernières sections:

Si seulement un minimum de HTML est chargé à partir du serveur au démarrage, alors comment la page continue-t-elle à changer au fil du temps?

ce qui nous amène à la dernière question de cette section, et peut-être la plus importante:

Comment fonctionne même une application D’une seule Page?

En effet, comment peuvent-ils fonctionner car nous n’avons chargé que très peu de HTML à partir du serveur? Une fois l’application démarrée, seules les données passent par le fil. Alors, comment fonctionne le nouveau code HTML viennent?,

parce qu’il doit y avoir un nouveau HTML généré quelque part, car c’est la seule façon pour le navigateur de changer ce qu’il affiche, non?

la réponse est simple, et cela a à voir avec la façon dont les applications à page unique fonctionnent réellement par rapport aux applications traditionnelles basées sur un serveur.

sur une application traditionnelle (qui comprend la grande majorité de l’Internet public d’aujourd’hui), la transformation (ou le rendu) des données en HTML se fait Côté Serveur.,

d’autre part, les applications à page unique le font d’une manière très différente:

dans un SPA après le démarrage de l’application, le processus de transformation des données en HTML a été déplacé du serveur vers le client – les SPAs ont l’équivalent d’un moteur de template

et donc avec ces informations en main, terminons cette section en résumant les points clés sur les applications d’une seule page.,– Avantages des SPAs et le Concept clé sur la façon dont ils fonctionnent

construire notre application comme un SPA nous donnera un nombre important d’avantages:

• Nous serons en mesure d’apporter une expérience beaucoup améliorée à l’utilisateur

• l’application se sentira plus rapide parce que moins de bande passante est utilisée, et déployer en production, du moins certainement la partie Client: Tout ce dont nous avons besoin est un serveur statique pour servir un minimum de 3 fichiers: notre index de page unique.,html, un bundle CSS et un bundle Javascript.

• Nous pouvons également diviser les bundles en plusieurs parties si nécessaire en utilisant le fractionnement de code.

• la partie frontend de l’application est très simple à la version en production, ce qui permet un déploiement simplifié et des rollbacks à la version précédente du frontend si nécessaire

et ce seul scénario de déploiement possible de SPAs en production.,

autres scénarios de Production

d’autres scénarios incluent le pré-rendu de grandes parties de l’application et le téléchargement de tout sur un serveur d’hébergement statique, la mise en cache en mémoire sur le serveur de certaines pages uniquement, le versioning à L’aide de DNS, etc.

Il est aujourd’hui plus simple que jamais de créer des SPAs SEO-friendly, ils auront donc probablement une adoption accrue à l’avenir, dans des scénarios où les SPAs n’ont pas été fréquemment utilisés.,

le fonctionnement des SPAs

la façon dont les applications à page unique apportent ces avantages est liée à la façon dont elles fonctionnent en interne:

• après le démarrage, seules les données sont envoyées sur le fil sous forme de charge utile JSON ou d’un autre format. Mais aucun HTML ou CSS n’est envoyé plus sur le fil après l’exécution de l’application.,

le point clé pour comprendre le fonctionnement des applications d’une seule page est le suivant:

Au lieu de convertir les données en HTML sur le serveur et de les envoyer sur le fil, dans un SPA, nous avons maintenant déplacé ce processus de conversion du serveur vers le client.

la conversion se produit à la dernière seconde du côté client, ce qui nous permet de donner une expérience utilisateur beaucoup améliorée à l’utilisateur.

j’espère que cela vous convaincra des avantages des SPAs., Si pas, s’il vous plaît laissez-moi savoir et pourquoi ce n’est pas le cas donc je peux mieux développer certains points.

aussi, à ce stade, je veux vous montrer du code tout de suite. Construisons un petit SPA Hello World à Angular, et prenons-le à partir de là. Nous allons voir comment les concepts que nous avons introduits cartographient la petite application que nous sommes sur le point de construire.

j’espère que ce post a aidé à comprendre les principaux avantages de SPAs, et que vous l’avez apprécié!,

Cet article fait partie de la série Angular for Beginners en cours, voici la série complète:

• Angular For Beginners Guide – Getting Started (Setup Environment)

• Angular For Beginners Guide: pourquoi Angular? Les Prestations Haut

• Angulaire Pour les Débutants Guide – Composants vs Directives

• Pourquoi une Seule Page de l’Application, Quels sont les Avantages? Qu’est-ce que d’un SPA?,

je vous invite à vous abonner à notre newsletter pour être averti lorsque d’autres chapitres sortent:

Si vous commencez tout juste à apprendre Angular, jetez un œil au cours Angular for Beginners:

autres articles sur Angular

jetez également un œil à d’autres articles mise en route avec Angular – les meilleures pratiques de l’environnement de développement avec yarn, la CLI Angular, configurer une

pourquoi une application d’une seule page, quels sont les avantages ? Qu’est-ce que d’un SPA ?,

composants intelligents angulaires vs composants de présentation: Quelle est la différence, quand utiliser chacun et pourquoi?

Angular Router – Comment Construire Un Menu de Navigation avec Bootstrap 4 et des itinéraires imbriqués

Angular Router-visite guidée étendue, éviter les pièges courants

composants Angular-les fondamentaux

Comment construire des applications Angular en utilisant des services de données observables – pièges à éviter

Introduction aux formes angulaires – modèle conduit vs modèle conduit

Angular ngFor – Apprenez toutes les fonctionnalités, y compris trackBy, pourquoi,

Angular Universal dans la pratique-comment créer des applications D’une seule Page conviviales pour le référencement avec Angular

Comment fonctionne vraiment la détection des changements angulaires ?