Les nouveautés de ASP.NET Core Preview -

Partie 4 : les nouveaux templates SPA, par Hinault Romaric

Dans les trois premières parties de cette série de billets sur les nouveautés de ASP.NET Core 2.0, la prochaine version majeure de la plateforme de développement Web open source, j’ai présenté le nouveau metapackage Microsoft.AspNetCore.All, le Runtime Store, les modifications apportées au fichier Program.cs et Startup, le nouveau Razor Pages, et bien plus.


Pour en savoir plus sur les nouveautés qui ont été présentées ci-dessus, vous pouvez consulter les billets de blog suivants :

• Les nouveautés de ASP.NET Core 2.0 Preview – Partie 1 : découverte du metapackage Microsoft.AspNetCore.All ;
• Les nouveautés de ASP.NET Core 2.0 Preview – Partie 2 : Program.cs et CreateDefaultBuilder ;
• Les nouveautés de ASP.NET Core 2.0 Preview – Partie 3 : Introduction à Razor Pages.
  

Dans ce nouveau billet, je vais présenter quelques nouveautés intéressantes qui ont été introduites avec la deuxième préversion de ASP.NET Core 2.0. Pour tester ces nouveautés, vous pouvez télécharger ASP.NET Core 2.0 Preview 2 et la préversion de Visual Studio 2017 15.3.

Nouveaux modèles de projet

JavaScript est devenu un langage quasi incontournable pour le développement d’applications Web. Il existe de nombreux Frameworks et des implémentations permettant de combler certaines faiblesses de JavaScript et qui rendent le langage encore plus attrayant. Ceux qui jouissent d’une grosse popularité sont à ce jour :

• TypeScript : un surensemble typé de JavaScript développé par Microsoft. Il apporte entre autres, un typage statique et optionnel, un système de classes et d'interfaces, une division en modules, la gestion de l'importation de fichiers, la prise en charge des génériques et bien plus ;
• AngularJS : développé par Google, AngularJS est un Framework de développement Web basé sur TypeScript. Sa particularité est qu’il offre un modèle de programmation fondé sur de bonnes pratiques, dont l’architecture MVC, le DataBinding, ou encore l’injection des dépendances. AngularJS est actuellement l’un des Frameworks JavaScript les plus prometteurs ;
• ReactJS : il s’agit d’une bibliothèque JavaScript open source maintenue par le géant des réseaux sociaux Facebook. La particularité de ReactJS est qu’il permet « la création d'applications web monopages, via la création de composants dépendant d'un état et générant une page (ou portion) HTML à chaque changement d'état ».
  

Pour séduire encore plus de développeurs, ASP.NET Core 2.0 introduit de nouveaux modèles de projet pour Angular et ReactJS. Ces nouveaux modèles permettent de créer rapidement une application basique ASP.NET Core, avec ces librairies directement intégrées.

Si vous disposez de la préversion de Visual Studio 2017 15.3, dans la fenêtre de création d’une nouvelle application ASP.NET Core 2.0, vous verrez, les nouveaux modèles de projet :


Ces nouveaux modèles de projet vont permettre de créer des applications SPA (Single Page Application) avec :

• ASP.NET Core et AngularJS ;
• ASP.NET Core et ReactJS ;
• ASP.NET Core, ReactJS et Redux.
  

Les applications SPA ont comme particularité l’affichage de l’ensemble du contenu de l’application sans nécessiter le chargement d’une page à chaque action. C’est pourquoi elles s’appuient grandement sur les librairies JavaScript comme Angular et React.

Les nouveaux modèles d’applications ASP.NET Core combinent plusieurs éléments permettant au développeur de gagner en performance et d’améliorer la réactivité de l’application.

Intégration de Webpack

Tous ces modèles utilisent Webpack comme système de Build front-end. Les développeurs de ASP.NET Core ont opté pour ce dernier parce qu’il s’agit du système de build le plus populaire chez les développeurs Angular et React.

Webpack rend la vie plus facile aux développeurs front-end, en offrant un système de bundler pour les ressources statistiques (fichiers JavaScript, CSS, SVG, PNG, etc.). Celles-ci sont transformées par Webpack et consommées dans votre application comme des modules. Pendant le développement de votre application, Webpack s’exécute en continu en arrière-plan. Lorsqu’un fichier est modifié, ce dernier procède automatiquement à la recompilation et rend immédiatement les modifications disponibles au navigateur. Vous n’avez donc pas besoin d’exécuter manuellement une quelconque commande pour builder votre code TypeScript ou Angular après modification.

Ces nouveaux modèles de projet sont configurés de telle sorte qu’en environnement de développement, Webpack build les différents Assets en intégrant les source maps pour faciliter le débogage. Lorsque vous serez prêt à générer votre application pour la production, il vous suffira de switcher en mode Production, pour que Webpack build et génère du code minifié sans inclure les sources maps.

Implémentation du Hot Module Replacement

Le Hot Module Replacement (HMR) rend Webpack encore plus intéressant. En effet, à chaque modification de code JavaScript, par exemple, Webpack compile et rend la modification disponible via une mise à jour incrémentale. Toutefois, il faut recharger la page complètement pour que la mise à jour soit prise en compte. Avec HMR, les modifications sont directement transférées au navigateur. Vous verrez celles-ci dans votre page, sans que cette dernière ne soit réactualisée dans le navigateur. En effet, juste la portion de la page affectée par le module qui a été modifié est rechargée dans le navigateur.

Cette fonctionnalité permet donc au développeur d’être plus productif et déboguer son application un peu plus rapidement. Pour voir cette fonctionnalité en action, il vous suffit de modifier un fichier dans le dossier ClientApp, pendant que votre application est en cours de débogage/exécution, pour visualiser instantanément les modifications.

Server-side prerendering

Le prérendu côté serveur a pour but de rendre plus rapide le rendu de l’interface utilisateur côté client. En effet, lors du premier chargement de l’application, le navigateur doit télécharger et exécuter les scripts JavaScript avant le rendu initial de la page. La présence des bibliothèques JavaScript comme Angular, qui sont costaudes, rallonge encore un peu plus ce temps de chargement et de rendu des pages. Il s’agit même de l’un des plus gros défauts de ces bibliothèques.

Avec le prérendu côté serveur, les composants Angular, par exemple, sont directement exécutés côté serveur. Il est intéressant de noter qu’avec cette fonctionnalité, une application SPA ASP.NET Core peut s’exécuter correctement, même si l’exécution du JavaScript est désactivée dans le navigateur. De plus, l’application est directement optimisée pour les utilisateurs ayant des connexions lentes.


Structure d’une application SPA ASP.NET Core

Les applications SPA ASP.NET Core ont quasiment la même structure que les applications ASP.NET Core traditionnelles, à l’exception de l’ajout d’un dossier ClientApp. C’est ce dossier qui doit contenir l’ensemble de votre code Angular/React et dans lequel, vous devez créer vos components et services. À la compilation, le code de ce dossier est regroupé dans le fichier main.js du dossier wwwroot/dist.

Il existe également des fichiers de configuration supplémentaires comme le fichier webpack.config.js pour la configuration du comportement de webpack.

Comme dans une application ASP.NET Core MVC traditionnelle, vous avez le dossier Controllers pour vos contrôleurs et le dossier Views pour vos fichiers .cshtml.



Il faut noter que ces modèles de projet ne sont pas uniquement disponibles avec Visual Studio. ASP.NET Core a été conçu pour être indépendant de tout environnement de développement. De ce fait, les modèles de projet sont directement intégrés dans le SDK.

En ligne de commande, si vous exécutez la commande dotnet new -all, vous verrez les nouveaux modèles de projet avec le Tag Web/MVC/SPA.


Si vous n’êtes pas fan d’Angular ou React, et vous préférez des librairies comme Aurelia ou Knockout.js, il existe également des modèles de projet ASP.NET Core pour ces librairies. Ils ne sont pas juste intégrés par défaut au SDK de ASP.NET Core.

Pour utiliser ces modèles, vous devez simplement installer le package Microsoft.AspNetCore.SpaTemplates, via la commande suivante :


Avec ces nouveaux modèles de projet, ASP.NET Core pourra séduire encore un plus grand nombre de développeurs. Ces derniers n’auront plus besoin de se lancer dans des configurations ardues pour intégrer les bibliothèques JavaScript et les composants nécessaires à la mise en place d’une application SPA.