Choisir entre des applications web traditionnelles et des applications monopagesChoose Between Traditional Web Apps and Single Page Apps (SPAs)

« Loi d’Atwood : Toute application pouvant être écrite en JavaScript sera au bout du compte écrite en JavaScript. »"Atwood's Law: Any application that can be written in JavaScript, will eventually be written in JavaScript."
- Jeff Atwood- Jeff Atwood

Aujourd’hui, vous avez le choix entre deux approches pour créer des applications web : les applications web traditionnelles qui effectuent la plupart de la logique d’application sur le serveur, et les applications monopages qui effectuent la plupart de la logique d’interface utilisateur dans un navigateur web en communiquant avec le serveur web principalement à l’aide d’API web.There are two general approaches to building web applications today: traditional web applications that perform most of the application logic on the server, and single page applications (SPAs) that perform most of the user interface logic in a web browser, communicating with the web server primarily using web APIs. Une approche hybride est également possible, la plus simple étant d’héberger une ou plusieurs sous-applications de type monopage au sein d’une application web classique plus grande.A hybrid approach is also possible, the simplest being host one or more rich SPA-like sub-applications within a larger traditional web application.

Vous devez utiliser des applications web traditionnelles quand :You should use traditional web applications when:

  • Les exigences côté client de votre application sont simples (voire même lecture seule).Your application's client-side requirements are simple or even read-only.

  • Votre application doit fonctionner dans les navigateurs sans prise en charge de JavaScript.Your application needs to function in browsers without JavaScript support.

  • Votre équipe ne connaît pas très bien les techniques de développement JavaScript ou TypeScript.Your team is unfamiliar with JavaScript or TypeScript development techniques.

Vous devez utiliser une application monopage (SPA, Single-Page Application) quand :You should use a SPA when:

  • Votre application doit exposer une interface utilisateur élaborée offrant de nombreuses fonctionnalités.Your application must expose a rich user interface with many features.

  • Votre équipe connaît bien les techniques de développement JavaScript et/ou TypeScript.Your team is familiar with JavaScript and/or TypeScript development.

  • Votre application doit déjà exposer une API pour d’autres clients (internes ou publics).Your application must already expose an API for other (internal or public) clients.

De plus, les frameworks SPA demandent de plus grandes connaissances en architecture et en sécurité.Additionally, SPA frameworks require greater architectural and security expertise. Elles subissent davantage de modifications que les applications web traditionnelles en raison des mises à jour fréquentes et des nouveaux frameworks.They experience greater churn due to frequent updates and new frameworks than traditional web applications. La configuration de processus de déploiement et de génération automatisés et l’utilisation d’options de déploiement telles que des conteneurs sont plus difficiles avec les applications SPA qu’avec les applications web traditionnelles.Configuring automated build and deployment processes and utilizing deployment options like containers are more difficult with SPA applications than traditional web apps.

Les améliorations de l’expérience utilisateur rendues possibles avec le modèle SPA doivent être comparées à ces considérations.Improvements in user experience made possible by SPA model must be weighed against these considerations.

BlazorBlazor

ASP.NET Core 3.0 introduit un nouveau modèle permettant de créer une interface utilisateur riche, interactive et composable, appelée Blazor.ASP.NET Core 3.0 introduces a new model for building rich, interactive, and composable UI called Blazor. Blazor côté serveur permet aux développeurs de générer une interface utilisateur avec Razor sur le serveur. Il permet aussi de fournir ce code au navigateur et de l’exécuter côté client à l’aide d’une bibliothèque JavaScript appelée WebAssembly.Blazor server-side allows developers to build UI with Razor on the server and for this code to be delivered to the browser and executed client-side using a JavaScript library called WebAssembly. ASP.NET Core 3.0 est toujours en développement, mais vous verrez plus d’informations sur cette technologie dans la mise à jour 3.0 de ce livre électronique.ASP.NET Core 3.0 is still under development, but you should expect to see more on this technology in the 3.0 update to this e-book. Pour plus d’informations sur Blazor, consultez Bien démarrer avec Blazor.For more information about Blazor, see Get started with Blazor.

Quand choisir les applications web traditionnellesWhen to choose traditional web apps

Voici une explication plus détaillée des raisons indiquées précédemment justifiant le choix des applications web traditionnelles.The following is a more detailed explanation of the previously stated reasons for picking traditional web applications.

Votre application présente des exigences côté client simples, éventuellement de lecture seuleYour application has simple, possibly read-only, client-side requirements

De nombreuses applications web sont consommées principalement en lecture seule par la grande majorité de leurs utilisateurs.Many web applications are primarily consumed in a read-only fashion by the vast majority of their users. Les applications en lecture seule (ou principalement) ont tendance à être beaucoup plus simples que celles qui tiennent à jour et manipulent de nombreuses données d’état.Read-only (or read-mostly) applications tend to be much simpler than those that maintain and manipulate a great deal of state. Par exemple, un moteur de recherche peut être constitué d’un seul point d’entrée avec une zone de texte et d’une deuxième page pour afficher les résultats de recherche.For example, a search engine might consist of a single entry point with a textbox and a second page for displaying search results. Les utilisateurs anonymes peuvent facilement effectuer des requêtes, et peu de logique côté client est nécessaire.Anonymous users can easily make requests, and there is little need for client-side logic. De même, une application publique de blog ou de système de gestion de contenu est généralement surtout constituée de contenu avec peu de comportement côté client.Likewise, a blog or content management system's public-facing application usually consists mainly of content with little client-side behavior. Il est facile de créer ce genre d’application en tant qu’application web traditionnelle basée sur serveur, qui exécute la logique sur le serveur web et restitue le code HTML à afficher dans le navigateur.Such applications are easily built as traditional server-based web applications which perform logic on the web server and render HTML to be displayed in the browser. Le fait que chaque page unique du site ait sa propre URL qui peut être ajoutée aux Favoris et indexée par des moteurs de recherche (par défaut, sans avoir à l’ajouter comme fonction distincte de l’application) est également un avantage évident dans de tels scénarios.The fact that each unique page of the site has its own URL that can be bookmarked and indexed by search engines (by default, without having to add this as a separate feature of the application) is also a clear benefit in such scenarios.

Votre application doit fonctionner dans les navigateurs sans prise en charge de JavaScriptYour application needs to function in browsers without JavaScript support

Les applications web qui doivent fonctionner dans les navigateurs avec peu ou aucune prise en charge de JavaScript doivent être écrites à l’aide de workflows d’applications web traditionnelles (ou au moins être en mesure de revenir à un comportement de ce type).Web applications that need to function in browsers with limited or no JavaScript support should be written using traditional web app workflows (or at least be able to fall back to such behavior). Les applications SPA nécessitent JavaScript côté client pour pouvoir fonctionner. S’il n’est pas disponible, elles ne constituent pas un bon choix.SPAs require client-side JavaScript in order to function; if it's not available, SPAs are not a good choice.

Votre équipe ne connaît pas très bien les techniques de développement JavaScript ou TypeScriptYour team is unfamiliar with JavaScript or TypeScript development techniques

Si votre équipe ne connaît pas bien JavaScript ou TypeScript, mais sait comment développer des applications web côté serveur, elle pourra probablement générer une application web traditionnelle plus rapidement qu’une application SPA.If your team is unfamiliar with JavaScript or TypeScript, but is familiar with server-side web application development, then they will probably be able to deliver a traditional web app more quickly than a SPA. Les applications web traditionnelles sont un choix plus productif pour les équipes qui ont l’habitude de créer ce genre d’application, à moins que l’apprentissage de la programmation d’applications SPA soit un objectif ou que l’expérience utilisateur offerte par une application SPA soit absolument nécessaire.Unless learning to program SPAs is a goal, or the user experience afforded by a SPA is required, traditional web apps are a more productive choice for teams who are already familiar with building them.

Quand choisir des applications SPAWhen to choose SPAs

Voici une explication plus détaillée précisant quand il est préférable de choisir un style de développement d’application monopage pour votre application web.The following is a more detailed explanation of when to choose a Single Page Applications style of development for your web app.

Votre application doit exposer une interface utilisateur élaborée offrant de nombreuses fonctionnalitésYour application must expose a rich user interface with many features

Les applications SPA peuvent prendre en charge des fonctionnalités avancées côté client qui ne nécessitent pas le rechargement de la page quand les utilisateurs effectuent des actions ou naviguent parmi les zones de l’application.SPAs can support rich client-side functionality that doesn't require reloading the page as users take actions or navigate between areas of the app. Les applications SPA peuvent se charger plus rapidement et récupérer des données en arrière-plan, et les différentes actions utilisateur sont plus réactives car les rechargements de page complète sont rares.SPAs can load more quickly, fetching data in the background, and individual user actions are more responsive since full page reloads are rare. Les applications SPA peuvent prendre en charge les mises à jour incrémentielles, l’enregistrement de formulaires ou de documents partiellement remplis sans que l’utilisateur ne doive cliquer sur un bouton pour envoyer un formulaire.SPAs can support incremental updates, saving partially completed forms or documents without the user having to click a button to submit a form. Les applications SPA peuvent prendre en charge des comportements avancés côté client, tels que le glisser-déplacer, beaucoup plus facilement que les applications traditionnelles.SPAs can support rich client-side behaviors, such as drag-and-drop, much more readily than traditional applications. Les applications SPA peuvent être conçues pour s’exécuter en mode déconnecté afin d’effectuer des mises à jour d’un modèle côté client qui sont par la suite synchronisées sur le serveur une fois qu’une connexion a été rétablie.SPAs can be designed to run in a disconnected mode, making updates to a client-side model that are eventually synchronized back to the server once a connection is re-established. Vous devez choisir une application de style SPA si les exigences de votre application incluent des fonctionnalités avancées qui vont au-delà de celles offertes par les formulaires HTML classiques.You should choose a SPA style application if your app's requirements include rich functionality that goes beyond what typical HTML forms offer.

Notez que souvent les applications SPA doivent implémenter des fonctionnalités qui sont intégrées aux applications web traditionnelles, comme l’affichage d’une URL significative dans la barre d’adresse reflétant l’opération en cours (et permettant aux utilisateurs de créer un Favori ou un lien ciblé afin de pouvoir revenir à cette URL).Note that frequently SPAs need to implement features that are built-in to traditional web apps, such as displaying a meaningful URL in the address bar reflecting the current operation (and allowing users to bookmark or deep link to this URL to return to it). Les applications SPA doivent aussi permettre aux utilisateurs de cliquer sur les boutons Précédent et Suivant du navigateur avec des résultats auxquels ils doivent s’attendre.SPAs also should allow users to use the browser's back and forward buttons with results that won't surprise them.

Votre équipe connaît bien les techniques de développement JavaScript et/ou TypeScriptYour team is familiar with JavaScript and/or TypeScript development

L’écriture d’applications SPA nécessite une bonne connaissance des bibliothèques et des techniques de programmation côté client et JavaScript et/ou TypeScript.Writing SPAs requires familiarity with JavaScript and/or TypeScript and client-side programming techniques and libraries. Votre équipe doit savoir écrire du code JavaScript moderne à l’aide d’un framework SPA comme Angular.Your team should be competent in writing modern JavaScript using a SPA framework like Angular.

Références – Frameworks de SPAReferences – SPA Frameworks

Votre application doit déjà exposer une API pour d’autres clients (internes ou publics)Your application must already expose an API for other (internal or public) clients

Si vous prenez déjà en charge une API web pour une utilisation par d’autres clients, il peut être plus facile de créer une implémentation de SPA qui tire parti de ces API, plutôt que de reproduire la logique côté serveur.If you're already supporting a web API for use by other clients, it may require less effort to create a SPA implementation that leverages these APIs rather than reproducing the logic in server-side form. Les applications SPA utilisent beaucoup les API web pour interroger et mettre à jour des données quand les utilisateurs interagissent avec l’application.SPAs make extensive use of web APIs to query and update data as users interact with the application.

Tableau de décision – Application web traditionnelle ou SPADecision table – Traditional Web or SPA

Le tableau de décision ci-dessous récapitule certains facteurs à prendre en compte lors du choix entre une application web traditionnelle et une application monopage.The following decision table summarizes some of the basic factors to consider when choosing between a traditional web application and a SPA.

FacteurFactor Application web traditionnelleTraditional Web App Application à une seule pageSingle Page Application
Connaissances de l’équipe de JavaScript/TypeScriptRequired Team Familiarity with JavaScript/TypeScript MinimaleMinimal ObligatoireRequired
Prise en charge des navigateurs sans scriptSupport Browsers without Scripting Prise en chargeSupported Pas de prise en chargeNot Supported
Comportement d’application côté client minimalMinimal Client-Side Application Behavior AdaptéWell-Suited Non adaptéOverkill
Exigences d’une interface utilisateur riche et complexeRich, Complex User Interface Requirements LimitéLimited AdaptéWell-Suited