Nous sommes tellement habitués à être en ligne et avec un téléphone portable avec nos mains que souvent nous ne vous arrêtez même pas pour penser au type de technologie qui nous aide à exécuter telle ou telle application. Habituellement, ce n’est pas un problème – nous ne pensons pas à l’électricité lorsque nous allumons les lumières., Cependant, lorsque vous faites face à la décision de créer une application pour votre entreprise, il est propice à comprendre ce que signifie SPA (single page application) et en quoi est-il différent des Applications multi-pages (MPA).

dans cet article, nous allons parler de ce qu’est une application de Page unique (SPA), Quels avantages SPA apporte aux utilisateurs et aux entreprises, comment fonctionne-t-il avec le référencement, quels sont ses avantages et ses inconvénients, et enfin, comment SPA fonctionne avec des technologies telles que Blazor, Angular, React.js, et de la Vue.js.,

======================

Dans ce numéro:

• une Seule Page de Définition d’Application
• une Seule Page Avantages de l’Application
• une Seule Page de l’Application des Inconvénients
• une Seule Page de l’Application des Questions de Migration
• des Prestations de SPA pour les Utilisateurs
• des Prestations de SPA pour les Entreprises
• une Seule Page l’Architecture de l’Application
• SPA et Anguleuses, de Réagir.js, Vue.js, et .,NET

======================

Qu’est-Single Page Application Signifie et Pourquoi avons-Nous Besoin d’une Seule Page de l’Application

Une seule page de l’application est une application qui n’a pas besoin de recharger la page lors de son utilisation et fonctionne dans un navigateur. Pensez aux applications que vous utilisez quotidiennement: Facebook, Google Maps, Gmail, Twitter, Google Drive ou même GitHub. Ce sont tous des exemples de SPA.

l’Un des meilleurs avantages de l’correctement configuré SPA est l’expérience utilisateur (UX), où l’utilisateur bénéficie d’un environnement naturel de l’application sans avoir à attendre que la page se recharge et d’autres choses., Vous restez sur la même page, qui est alimenté par le langage de programmation JavaScript.

avant d’aller plus loin, il y a trois abréviations que vous verrez dans cet article:

• SPA – single-page application (comme nous l’avons mentionné ci – dessus)
• MPa-multi-page application (une application traditionnelle qui charge de nouvelles pages lorsque vous cliquez sur un lien)
• PWA – progressive web application (un site web qui est construit,, vous pouvez, par exemple, l’ajouter à la page d’accueil de votre téléphone mobile en tant qu’application)

avantages de L’Application D’une seule Page: Pourquoi utiliser L’Application D’une seule Page?

le principal avantage des applications mono-page est sa rapidité. La plupart des ressources nécessaires au SPA (HTML + CSS + Scripts) sont chargées au lancement de l’application et n’ont pas besoin d’être rechargées pendant l’utilisation. La seule chose qui change, c’est les données qui sont transmises vers et depuis le serveur. En conséquence, l’application est très sensible aux requêtes de l’utilisateur et n’a pas à attendre la communication client-serveur tout le temps.,

de nombreuses études de Google et des résultats clés d’entreprises telles Qu’Amazon et Wal*Mart montrent que si une page prend plus de 200 millisecondes à charger, elle risque de ruiner votre entreprise ou, à tout le moins, de vous coûter beaucoup d’argent. Par exemple, Amazon dit que 1 seconde de retard supplémentaire dans le chargement de la page leur coûte 1% des ventes (ce qui, compte tenu du montant des ventes D’Amazon, est de 1,6 milliard de dollars par an.)

D’un point de vue du développeur, la création d’une telle application est simplifiée et optimisée., Vous n’avez pas besoin d’écrire du code pour rendre les pages sur le serveur. Vous n’avez même pas vraiment besoin d’un serveur pour commencer le processus de développement. Vous pouvez démarrer à partir d’un fichier pour commencer. En outre, le développeur peut réutiliser complètement le même code côté serveur backend et API efficace pour l’application web et une application mobile native.

Les applications D’une seule page sont excellentes lorsque vous avez une équipe de développeurs travaillant ensemble., Il permet aux développeurs backend de se concentrer sur L’API, tandis que les développeurs frontend peuvent accorder plus d’attention à la création de la meilleure expérience utilisateur basée sur l’API backend et à la mise en œuvre d’une belle interface utilisateur.

Le Débogage d’une application d’une seule page est également facile à l’aide du navigateur Chrome car il dispose d’outils spéciaux pour Angular Batarang et React (les technologies utilisées pour les SPAs.) À l’aide d’une console, vous pouvez surveiller les opérations réseau ainsi que rechercher divers éléments de page et les données associées.,

le processus de mise en cache est également très efficace – l’application n’envoie qu’une seule requête, stocke toutes les données transmises et peut utiliser ces données. Ceci est particulièrement important lorsque l’utilisateur peut avoir une mauvaise connectivité-il peut toujours utiliser votre application car elle est synchronisée avec le serveur lorsque la connexion s’améliore.

nous avons mentionné les applications Web progressives (PWA) ci-dessus, et les SPAs peuvent facilement être transformés en PWA. À son tour, cela permet aux développeurs de fournir une mise en cache locale et d’offrir une expérience hors ligne aux clients et aux utilisateurs.,

application D’une seule Page inconvénients: pourquoi pas une Application D’une seule Page?

malgré tous les avantages des applications d’une seule page, rien n’est jamais parfait. Voyons les moments où le SPA peut ne pas être une solution idéale.

qu’entendons-nous par inconvénients d’application d’une seule page?

Les applications D’une seule page mettent une charge plus importante sur le navigateur. Par exemple, si vos utilisateurs ont des appareils de faible puissance, ils auront une mauvaise expérience de l’application en termes de vitesse.

D’autres problèmes avec JavaScript surviennent car vous devez vous assurer qu’il n’y a pas de fuites de mémoire., Étant donné que l’application peut fonctionner pendant une longue période – heures à la fois (par opposition à la MPA, où la durée de vie d’une page a été comptée en minutes), vous devez vous assurer que votre SPA ne consomme pas plus de mémoire qu’il n’en a besoin. Sinon, le plaisir du chargement rapide des pages sera détruit par la lenteur de la mémoire indisponible sur l’appareil de l’utilisateur.

un autre inconvénient de JavaScript est que les utilisateurs peuvent simplement le désactiver sur leurs appareils, et vous devez alors penser à d’autres moyens d’accéder aux informations sur votre site web ou votre application sans JavaScript.,

Une autre chose essentielle à retenir sur l’utilisation ou la construction d’un SPA est la sécurité. En raison du Cross-site scripting (XSS) et du fait qu’aucune nouvelle page n’est chargée, les pirates peuvent accéder à votre site web et injecter de nouveaux scripts côté client.

Par conséquent, si vous envisagez de créer une application d’une seule page pour votre entreprise, assurez-vous de prendre les précautions nécessaires pour ne pas laisser cela se produire.

un Autre problème de sécurité est la confidentialité des données sensibles. Le chargement initial de la page ne doit pas contenir d’informations qui ne devraient pas être disponibles pour tous les utilisateurs., Puisque les charges entières de station thermale immédiatement au périphérique de l’utilisateur, vous pourriez accidentellement donner des données qui devraient être derrière une connexion ou pas disponibles du tout.

Optimisation SEO pour les Applications D’une seule Page

l’optimisation SEO est délicate lorsque vous avez une application d’une seule page, c’est pourquoi nous avons décidé d’y consacrer une section distincte dans les inconvénients SPA.

Il est plus sûr d’utiliser les SPAs lorsque vous ne comptez pas autant sur l’optimisation des moteurs de recherche (SEO), par exemple, si votre application n’est accessible que via une connexion.,

Si vous avez un blog, en revanche, il est plus difficile pour les moteurs de recherche d’indexer votre site web SPA par opposition aux pages traditionnelles rendues par le serveur. En effet, l’URL ne change pas vraiment et les différentes pages n’ont généralement pas leurs adresses URL.

par conséquent, notre conseil pour vous: si vous ne voulez pas vous soucier des paramètres D’URL, choisissez un framework qui prend en charge le rendu côté serveur (SSR). De plus, n’utilisez pas les fenêtres iframe, n’utilisez pas D’URL statiques et n’optimisez pas les scripts de votre page pour les accélérer., Enfin, assurez-vous que vos pages ont HTML5 pour Google crawler pour pouvoir y accéder.

Vous devez également porter une attention particulière aux messages du serveur, en particulier les erreurs 200 et 404.

problèmes de Migration D’applications D’une Page

Les applications D’une page semblent avoir été envoyées du ciel pour simplifier l’expérience des utilisateurs avec le site web. C’est rapide et pratique; c’est presque parfait. Est-il vraiment ainsi?,

lorsque vous envisagez de migrer vers l’application d’une seule page à partir d’un MPA, vous devez vous arrêter et considérer les avantages et les inconvénients (que nous avons mentionnés ci-dessus.)

quand utiliser un SPA

vous demandez peut-être: « Quand dois-je utiliser une application à une seule page? »Lorsque vous avez une entreprise ou un site web personnel qui a besoin d’une plate-forme dynamique et d’un petit volume de données, l’application d’une seule page est une bonne idée. Il est également une excellente option si vous envisagez de développer une application mobile dans l’avenir, puisque, comme nous l’avons mentionné ci-dessus, l’API principale peut être utilisée pour les applications web et mobiles.,

le principal inconvénient est le référencement, mais l’architecture convient aux plates-formes SaaS (Software-as-a-Service), aux communautés fermées et aux réseaux sociaux (C’est pourquoi Facebook l’utilise). La raison en est que ces sites n’ont pas besoin d’optimisation pour la recherche sur Google.

quand utiliser une AMP

Les grandes entreprises disposant d’une large gamme de services et de produits bénéficieraient d’une application plus traditionnelle de plusieurs pages. Ces entreprises comprennent les magasins en ligne, les sites d’entreprise, les catalogues et les marchés., La gestion d’une telle application serait également beaucoup plus facile car il est possible de la connecter à plusieurs bases de données utilisateur.

enfin, ces types d’entreprises auraient besoin d’options d’optimisation des moteurs de recherche, car beaucoup d’entre elles voudraient être trouvées dans Google, Bing et d’autres moteurs de recherche (pour vendre les produits ou services qu’elles offrent.

avantages de SPA pour les utilisateurs

le principal avantage des applications d’une seule page pour les utilisateurs finaux est, bien sûr, la vitesse à laquelle l’application se charge ainsi que la possibilité de travailler hors ligne.,

SPA offre une expérience utilisateur linéaire, ce qui signifie qu’il est facile de naviguer sur le site web et de comprendre où trouver telle ou telle chose. Par exemple, le SPA Saucony a un début, un milieu et une fin clairs. En utilisant la conception UI/UX, les développeurs de L’application Saucony ont utilisé le défilement parallaxe et les transitions pour rendre le parcours client agréable.

Les applications D’une seule page sont également excellentes sur les appareils mobiles, car la plupart du temps, tout ce dont les utilisateurs ont besoin est de faire défiler (pensez au mur Facebook sans fin). Vous n’avez pas besoin de cliquer sur des liens, et vous profitez simplement du défilement.,

avantages de SPA pour les entreprises

en ce qui concerne les entreprises, le développement d’applications d’une seule page prend généralement moins de temps car la même API backend peut être utilisée à la fois pour le web et le mobile. En conséquence, le flux d’informations est rationalisé et il devient beaucoup plus facile de créer une application mobile native autonome.

compte tenu des avantages de l’optimisation de la vitesse du SPA, les entreprises peuvent également en bénéficier car les utilisateurs seraient plus intéressés à utiliser une application rapide (ergo, acheter quelque chose ou simplement utiliser l’application plus souvent.,)

Architecture D’Application D’une seule Page et comment fonctionne L’Application D’une seule Page

Comment fonctionnent les applications d’une seule page? L’architecture d’application d’une seule page est assez simple-elle se compose des technologies côté client (chez HUSPI, nous comptons sur React.js, Angular, et de la Vue.js) et les technologies côté serveur (pour lesquelles nous utilisons habituellement Node.js)

en termes de rendu du site tel qu’il est présenté à l’utilisateur, il y a trois options à choisir.,

rendu côté Client (CSR)

1. le navigateur envoie une demande de fichier HTML depuis le serveur
2. le serveur répond rapidement avec un simple fichier HTML avec des styles et des scripts liés
3. l’utilisateur voit une page vide ou une image de chargeur pendant l’exécution du js
4. L’application récupère soyez une option pour les sites web simples, mais gardez à l’esprit que le rendu des informations côté client nécessite beaucoup de ressources de l’appareil et peut surcharger le navigateur., Par conséquent, cette option pourrait être la plus lente des trois. En même temps, si vous avez un site web à fort trafic, CSR serait mieux car il présenterait les informations à l’utilisateur sans avoir à trop parler au serveur.

   de plus, si vous avez besoin d’options de partage social, gardez à l’esprit que toutes les pages de CSR ont généralement les mêmes valeurs open graph (og:), vous devez donc utiliser SSR ou SSG.,ng (SSR)

   1. le navigateur envoie une demande de fichier HTML à partir du serveur
   2. le serveur récupère toutes les données nécessaires, rend l’application et génère le fichier HTML de l’application à la volée
   3. L’utilisateur voit le contenu disponible
   4. Le cadre d’application d’une seule page est ce option sur laquelle nous comptons chez huspi, car elle combine à la fois la vitesse de l’application D’une seule page et ne surcharge pas le navigateur de l’utilisateur, ce qui rend l’application rapide.,
      

      Static site Generators (SSG)

      1. le navigateur envoie une demande de fichier HTML depuis le serveur
      2. le serveur répond rapidement avec un fichier HTML déjà préparé
      3. L’utilisateur voit la page
      4. L’application récupère les données, génère des vues et injecte dans DOM
      5. L’Application est prête à être utilisée

      bonne option rapide, mais n’oubliez pas que si vous avez du contenu dynamique sur votre site web, les générateurs de sites statiques ne seraient pas vos meilleurs amis car ils sont davantage orientés vers les pages statiques (comme vous l’avez déjà deviné d’après le nom.,)

      Comment faire une Application D’une seule Page en utilisant Angular, React.js, et de la Vue.js

      alors que j’écrivais cet article, j’ai consulté nos développeurs pour comprendre quelles sont les meilleures pratiques mondiales en termes de création d’applications sur une seule page qui sont utilisées ici chez HUSPI.

      Les développeurs HUSPI ont essayé et testé de nombreux frameworks et ont des antécédents de travail différents, mais ils s’unissent pour dire qu’il existe trois frameworks principaux pour le frontend-Angular, React et Vue – et qu’il y a un principal (leur favori) pour le backend – Node.js., Il existe une poignée d’autres frameworks disponibles sur le marché (comme Ember ou Knockout), mais nous ne les utilisons pas autant.

      

      pour créer une application d’une seule page, vous avez besoin D’AJAX et de HTML5 pour créer des pages réactives tandis Qu’Angular, React et Vue sont responsables de la gestion du « gros travail” côté client d’un SPA.

      

      Que choisir – Réagir, Angulaire, ou la Vue?

      Nous avons écrit plusieurs articles sur le sujet de la comparaison entre ces cadres., Cependant, comparons-les à nouveau pour voir s’ils ont des avantages en termes de création d’applications sur une seule page.

      Angulaire et une Seule Page Applications

      Angulaire est un framework JavaScript qui a été présenté par Google en 2010. Parmi les trois options que nous comparons, Angular est la plus ancienne, et elle est basée sur TypeScript. En raison de TypeScript, Angular est une excellente option à utiliser par de grandes équipes de développeurs et d’entreprises qui utilisent déjà cette technologie dans leurs autres produits.

      C’est le plus mature parmi les frameworks et a un nombre décent de contributeurs sur GitHub., Cela pourrait être plus difficile en termes de courbe d’apprentissage, mais en même temps, cela en vaut la peine.

      parmi les clients qui utilisent Angular pour leurs Applications D’une seule Page figurent Google (et leurs produits tels que Gmail et Google Drive) et Wix, donc si vous décidez de créer une application d’une seule page en utilisant Angular, vous serez en bonne compagnie.

      # Contributors on GitHub: 997 (as of September 2019)
      # Library size: 500+ KB

      Angular community est sur le point de sortir Angular 9.0.0 – à quoi s’attendre dans la nouvelle version D’Angular?

      Réagir.JS et applications D’une seule Page

      React.js est une bibliothèque JavaScript créée en 2013 par Facebook., Facebook Instagram et WhatsApp l’utilisent largement dans toute leur gamme de produits, y compris des applications d’une seule page bien connues telles que Facebook lui-même, Instagram et WhatsApp. Outre Facebook, Uber utilise également React.bibliothèque js pour leurs produits.

      parmi les trois concurrents, React a le plus grand nombre de contributeurs sur GitHub – plus d’un millier – ce qui permet de rester à jour avec les différents défis auxquels les développeurs sont confrontés chaque jour.

      nos développeurs ici chez HUSPI préfèrent également React pour les projets que nous développons (sauf s’il y a des exigences pour un autre framework)., Il est à la fois léger et assez mature pour être testé et essayé et être trouvé digne.

      React est le bon choix pour ceux qui commencent tout juste à utiliser les frameworks JavaScript frontend ainsi que les startups et les développeurs qui aiment être flexibles. React offre de bonnes options d’intégration avec diverses autres technologies et frameworks, ce qui est très utile lorsque vous travaillez sur un projet avec un grand écosystème.

      # Contributors on GitHub: 1,336 (as of September 2019)
      # Library size: 100KB

      Vue.js and Single-Page Applications

      Vue est le plus jeune des trois, créé en 2014 par un ancien employé de Google Yuxi (Evan) You., Même si aucune grande entreprise ne soutient son développement, Vue a réussi à gagner en popularité. Actuellement, des sociétés telles que GitLab, Baidu et Alibaba utilisent Vue.js pour leurs besoins.

      Si vous préférez la simplicité et la flexibilité dans vos frameworks frontaux, Vue est une bonne option. De plus, c’est le plus léger de tous.

      # Contributors on GitHub: 281 (as of September 2019)
      # Library size: 80KB

      Récemment, nous avons écrit un article à propos de Réagir.js contre Vue.js

      Applications D’une seule Page et ASP.NET (Blazor)

      Nous avons décidé d’ajouter le ASP.NET option à la liste des cadres et des technologies pour les applications d’une seule page., Il y a un petit nouveau qui s’appelle Blazor. C’est un.NET framework qui utilise C#/Razor et HTML qui s’exécute dans le navigateur avec WebAssembly, selon le référentiel GitHub.

      Microsoft a annoncé la sortie de ce framework plus tôt dans 2019 et actuellement, il semble que la version 1.0 soit prête. Ce soutien sérieux d’une grande entreprise est un grand avantage de Blazor car il fait immédiatement de cet instrument open source une partie de la communauté de plus de 60 000 contributeurs OSS avec plus de 3 700 contributeurs OSS company.,

      Blazor est un outil pratique car il n’y a pas besoin de TypeScript ou JavaScript, vous pouvez écrire toute la logique en C#. Cela dit, Blazor offre une interopérabilité avec les API et les bibliothèques JavaScript, donc si votre écosystème est vaste et se compose de bibliothèques JS, vous n’êtes pas perdu dans la transition.

      . net Blazor offre également deux options différentes: Blazor uniquement client et Blazor côté serveur. Ce dernier devrait être livré avec le. net Core 3.0.

      cela signifie-t-il que Blazor va tuer Angular, React ou Vue? Nous ne le pensons pas. Cependant, il est quelque chose à garder un oeil sur.

      Pour le SPA à l’aide .,NET, vous pouvez également utiliser ASP.NET noyau et ASP.NET MVC. Comment créer une application d’une seule page dans ASP.NET MVC? Vous le configurez sur le backend pour servir le HTML sur le frontend.

      # Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+

      Conclusion

      compte tenu de la montée en puissance des appareils mobiles et d’un mode de vie en déplacement, les applications d’une seule page sont excellentes. Que votre entreprise opte pour un SPA ou une AMP – c’est plus une question pour vos analystes d’affaires et vos exigences.,

      chez HUSPI, nous avons des analystes commerciaux dans l’équipe qui peuvent aider à comprendre et à définir les besoins techniques du projet (et des développeurs qui peuvent construire l’architecture et le projet lui-même à partir de zéro).