Quel est le meilleur framework front pour ASP.NET Core ?

J'ai envie de passer un peu de temps à me poser cette question, je suis adepte d'Angular mais pourquoi pas autre chose et qu'est ce que cela impliquerait pour mon application développée avec ASP.NET Core en C# ?

La question est vite entendue avec une autre question, un peu équivalente posée par l'excellent site Développez.com qui a posé cette question sous la forme suivante : Quels sont les frameworks que vous aimeriez apprendre en 2019 ? Et quelles sont vos motivations ?

En effet cette question consiste à demander aux développeurs dans quel Frameworks seriez vous prêt à investir votre temps ? Le temps, c'est le nerf de la guerre en cette matière, pour ma part je déteste investir du temps pour prendre en main une technologie qui sera en suite abandonnée rapidement (cf. Silverlight).

C'est bien aussi pour cette raison que je souhaite être le plus certain possible de faire le bon choix. Vous pouvez voter sur le site de Développez.com pour répondre à ce sondage que voici :



Développez.com - Quels sont les frameworks que vous aimeriez apprendre en 2019 ?

Concernant Angular le site précise :

Angular est un framework coté client open source développé par Google et basé sur TypeScript. Il s'agit d'une réécriture complète du framework JavaScript AngularJS, construit par la même équipe.
On peut déjà verser une larme pour ceux qui ont investi massivement sur AngularJS encore qu'ils ont certainement pu s'adapter rapidement ...

C'est une bonne chose lire cela : "la même équipe". Ce n'est pas donné souvent cette opportunité de réécrire une stack en améliorant et en corrigeant la précédente. Ca dénote un vrai respect pour le travail de l'équipe de dev.

En suite, c'est donc le choix de Google basé sur un langage TypeScript créé par Microsoft, c'est donc le bon combo à mon humble avis.


Angular CLI

Et puis Angular, entre nous cela permet de faire l'impasse sur le Razor et entre Razor et Razoir, il n'y a qu'une lettre, vous ne trouvez pas !

Mise à jour en 2020

Et surtout pour le choix d'un framework javascript il y a ce fameux document :

The Ultimate Guide to JavaScript Frameworks

Et pour étayer il y a ce post où je découvrais les frameworks JavaScripts proposés avec Visual Studio

Que penser de React pour ASP.NET Core ?

Si vous tombez sur ce post :

https://2018.stateofjs.com/front-end-frameworks/angular/

Attention les chiffres sont trompeurs. C'est le seul article qui donne React en tête, je suis circonspect ... Sinon souvenons-nous que React est le framework de Facebook et que Angular est soutenu par Google qui a adopté le TypeScript langage créé par Microsoft.

Pour moi Angular est donc le bon choix, CQFD !

Universal Dashboard - ASP.NET Core & React + PowerShell

Concernant le Dashboard Universel, nous étions resté en rade sur la piste du Dashboard RubyOnRails mais en cherchant une nouvelle piste voici le Dashboard Universel by Ironmansoftware et cette fois nous avons une piste proche des technologies recherchées : ASP.NET Core & React + PowerShell,

Cela semble très puissant pour contrôler votre système d'information, de quoi s'agit-il ?



Dashboard Universel

Découvrons le projet Open Sources d'Ironmansoftware sur GitHub :

GitHub - ironmansoftware / universal-Dashboard


ironmansoftware/universal-dashboard

Avec 28,2 % de C#, le JavaScript c'est du React.

Je tente l'installation de la version "community" pour faire quelques essais.

PS C:\Users\mabyre>Install-Module UniversalDashboard.Community -Scope CurrentUser -Force


Install-Module UniversalDashboard.Community -Scope CurrentUser -Force

Au passage, j'installe Nuget provider pourquoi pas.

Et je créé un nouveau fichier PowerShell avec Visual Studio Code, grâce à la commande suivante :

code .\mydashboard.ps1

Au moment de lancer l'exécution de mon script :


Install des modules manquants

Et donc j'installe, Kubernates, Docker et Develop PowerShell et puis je peux lancer l'exécution de mon script de création d'un Dashboard Universel :

Exécution du Script Dashboard.ps1

Par la suite, je relance par erreur l'exécution de ce script, tout est rouge mais il me donne quelques explications supplémentaires qui vont me permettre d'aller au bout :

Exécution du Script Dashboard.ps1

Je remplace 0.0.0.0 par localhost dans l'expression et voici que l'exécution de mon Dashboard se lance "un peu plus" :


Exécution de mon premier Dashboard ASP.NET Core & React

Après avoir corrigé deux trois erreurs dans mon script powershell, voici l'exécution de mon script mydashboard :

$Dashboard = New-UDDashboard -Title "Process" -Content {
    New-UDChart -Title "Process Memory" -Endpoint {
        Get-Process | Sort-Object WorkingSet -Descending | Select-Object -First 5 | Out-UDChartData -DataProperty "WorkingSet" -LabelProperty "Name"
    }
}
Start-UDDashboard -Dashboard $Dashboard -Port 10000 -AutoReload

Et le résultat de son exécution dans mon navigateur :


Affichage dans le navigateur de mon premier Dashboard avec Universal Dashboard

Les trois processus qui prennent le plus de mémoire sur ma machine sont donc :

devenv, sqlservr, ServiceHub.RoslynCodeAnalysisService32

Pour aller plus loin, voici un peu plus de doc là :

Universal Dashboard - Getting Started

Ce module UniversalDashboard reste extrêmement programmatique d'utilisation, il s'agit d'écrire un script PowerShell ce qui n'est pas donner à tout le monde.

Je vous propose de me suivre sur les réseaux pour découvrir demain un projet de Dashboard Universel. Cette fois une plateforme web vous permettant de créer vos propres Dashboard afin de mieux contrôler, de mieux exploiter, votre système d'information.

ASP.NET Core & Entity Framework & Angular

CQFD !


A quoi sert le framework JavaScript React avec ASP.NET MVC ?

C'est vrai ça, je ne me suis pas encore posé la question, parmi tous ces Frameworks JavaScripts à quoi servent-ils ? En fait elle est trop dure cette question, trop vaste, je vais plutôt me poser la question de savoir à Quoi sert React ?

Et tout de suite la vraie question c'est à quoi sert un framework fron-end ? Et une partie de la réponse, c'est à nous isoler des différences techniques entre les navigateurs. Tient mais je connais cette problématique depuis le début du développement des applications web.

Merde ! Tout ça pour ça. Plus j'étudie les Applications Web et plus j'ai l'impression de tourner en rond et parfois même de retourner en arrière.

En ce qui concerne React il faut se colter avec JSX bon encore un intermédiaire et on dit qu'il utilise virtual.DOM au lieu de DOM ...

React c'est le framework de Facebook pour créer des interfaces utilisateurs "stateful".

Concept d'Amélioration Progressive : Progressive Enhancement

ASP.NET - Amélioration progressive avec ASP.NET et React
Qui nous parle du projet TodoMVC qui est un "total délire", ce projet c'est l'implémentation d'une Todo List avec tous les types de framework JavaScripts possibles :


TodoMVC

Pour choisir son framework JavaScript ... incroyable, il y a toutes les implémentations de tous les framework JavaScript connus ... je suis dubitatif ...

Advantages of using React as view layer in ASP.NET MVC applications
Franchement pas convainquant

Beaucoup de blabla, on dirait que tout le monde veut une réponse à la question à quoi sert le framework JavaScript React mais personne n'a vraiment de réponse.

Par l'exemple :

ASP.NET Core: CRUD With React.js and Entity Framework Core
Ici on créé des fichiers .tsx qui n'existent pas dans mon Template, probablement supprimé au profit de fichiers .js en SPA (Single Page Application).

Si je prends mon Visual Studio 2017 Community que je créé une application ASP.NET Core avec React.js je n'obtiens pas ce Template d'application.



Application ASP.NET Core with React.js

Et la structure de mon projet diffère de la façon suivante :

FetchData.js au lieu de FetchData.tsx

Ce n'est peut être pas aussi abouti que cela, finalement le développement d'applications Web avec ASP.NET Core et l'intégration de React se fait ... au petit bonheur la chance. Je n'aime pas trop ça.

Non seulement je ne trouve aucune raison d'utiliser React franchement, en plus les façons de faire sont si différentes à chacun sa sauce, c'est une vraie galère ! Pour rester poli ...

Je poursuis mes recherches :

ReactJS.NET - Tutorial (ASP.NET Core)
Ici on est avec Visual Studio 2015 et le gars commence par supprimer des parties du Template Visual Studio, on connait bien cette façon de faire Pfff !

Delete the following files:
• Controllers\HomeController.cs
• Views\Home and Views\Shared folders
• bundleconfig.json
• Project_Readme.html

Pour installer par dessus ReactJS donc c'est ancien, très ancien ! Je le note quand même car vous verrez souvent ce genre de technique en ASP.NET MVC + JS.

Ca sent le gars qui développe un framework complet en parallèle et qui s'est fait absorber par le Main Stream, on y trouve quand même une release en mars 2019 donc le gars n'en à pas fini d'en baver.

DEV - Setting up a React Environment for ASP.NET MVC
Encore un bel exemple d'installation de React par dessus ASP.NET MVC une prise de tête, je ne vous raconte pas mais on voit ce qu'il fallait faire et l'intégration du template dans Visual Studio 2017 Community avec MVC et React et c'est une vraie galère.

Voilà, on est en Octobre 2018, on se rapproche mais on n'a toujours pas répondu à la question "à quoi ça sert React dans tout ça".

Et sinon il y aurait bien une question plus large c'est à quoi sert un framework JavaScript et la réponse serait dans le Guide :

The Ultimate Guide to JavaScript Frameworks
C'est en anglais mais très complet donc entre Angular et React ...

à vous de choisir MDR!

Que penser de ASP.NET Core et React ?

Parmi tous les Framework JavaScript lequel choisir ? C'est la question à un millions d'euros car elle implique un fort investissement par la suite dans le maitrise et l'appropriation de ce framework alors lequel choisir entre AngularJS, Angular 6, React, on me parle de VueJS, Ember, Meteor mais pas seulement.


Foisonnement des Frameworks JavaScripts

alsaCréations - Les frameworks JavaScript en 2018
Voilà une très belle comparaison des Frameworks JavaScript, une chose est sûr, je peux m'investir dans React ... un des plus plébiscité par la communauté.

Le Blog Inteam - TOP 5 des Frameworks JavaScript 2017
D'autres Frameworks évoqués Meteor, Ember, leurs avantages, leurs inconvénients.

Mais bon, ces articles datent un peu déjà.

J'en ai trouvé un autre :

https://2017.stateofjs.com/2017/front-end/results/

Concernant les critères de choix d'un framework JavaSCript :

IPPON - Aide au choix d’un framework JavaScript
L'énoncé des critères de choix d'un Framework oui la courbe d'apprentissage est importante c'est un des défaut d'Angular qui est très difficile au début.

Une très bonne idée de ce site c'est d'aller voir la communauté GitHub, leur nombre et leurs activités.

Ainsi pour React nous obtenons :

Communauté open source React sous GitHub

Et aller voir dans les Insights, les Pulses ce qui donne une idée si la communauté est importante et active.

Et pour Angular nous obtenons :

Communauté open source Angular sous GitHub

Le leader de la communauté Angular Pete Bacon Darwing semble plus actif que pour React. Vous pouvez aller visiter toute la communauté pour vous faire une idée assez précise de ses activités.

Et je me rends compte que Ember ou Vue sont bien plus modeste voir inexistant à côté.

Je trouve aussi plein d'informations techniques sur les différents frameworks ici :

codeur mag - React, Angular, Vue : quel framework JavaScript choisir ?
Il faut savoir que ReactJs ne gère que l’interface d’une application web, et peut donc être utilisée avec un framework MVC tel qu’Angular.

Vous en voulez encore, encore plus de Javascripts, vous avez ceci mais c'est en anglais :

Raygun - 9 Popular JavaScript Frameworks for 2019

C'est amusant mais tous utilisent Github pour comparer la popularité et l'acceptation par les communautés de ces différents framework JavaScript. Aux vues de tout ceci React est en très bonne position voir le premier.

On ne parle plus de NodeJS de Knockout ! Donc maintenant essayons de bosser avec ASP.NET et le framework JavaScript React.

Intégration de ASP.NET Core et de React

On vient de lire que React ne gère que l'interface ça tombe bien j'aimerais utilisé React au dessus d'ASP.NET MVC alors ASP.NET Core MVC ?

Il me semble que la meilleur page pour ça c'est celle ci :

Microsoft ASP.NET Core - Utiliser le modèle de projet React avec ASP.NET Core

Quand il est écrit "console" il s'agit en fait bien sûr de la "console du gestionnaire de packages". Je tape la commande suivante :

PM>dotnet --info


Qu'elle version du ASP.NET Core est installée ?

Puisque l'on me demande de savoir qu'elle version est installée :

SDK .NET Core (reflétant tous les global.json) :
 Version:   2.1.505

et que pour pouvoir taper la commande :

PM>dotnet new react -o my-new-app
cd my-new-app


il faut que ASP.NET Core 2.1 soit installé. Ici c'est Ok je peut y aller. Oups petit souci nous sommes dans la partie "Applications monopages".

Création d'une application ASP.NET Core et React

Après l'exécution de la commande PM>dir je suis dans Users/UserName je créé un Répertoire VisualStudio je fais PM>cd VisualStudio puis :



Visual Studio création d'une application ASP.NET Core et React

Je vais voir dans le répertoire D:\Users\Braby\VisualStudio\my-react-app une application est bien là ... Je prends mon Visual Studio et je vais ouvrir le fichier projet my-react-app.csproj

Au moment de l'ouverture :

Ouverture de mon application ASP.NET Core et React

PowerShell version 2.0 is not supported. Upgrade to PowerShell 3.0

Solution à ce problème Ici

Alors que je viens d'installer Visual Studio Community il y a seulement quelques jours, c'est infernal c'est mise à jour incessantes.

Sinon, on a bien sous les yeux une application ASP.NET Core et si on regarde dans le fichier : \\ClientApp\package.json



my-react-app\ClientApp\package.json

le version de React est 16.0.0.

Exécution de l'application ASP.NET Core & React

D'abord un petit build, npm se charge de tout pour restaurer les dépendance du projet :

Application ASP.NET Core React - Build

Ca prend du temps en effet quelques minutes mais à la fin : Génération Réussie.

Exécution avec IIS Express :


Application ASP.NET Core 2.1 avec React

Je suis bluffé on est quand même avec la version community de Visual Studio et ça fonctionne j'ai même un exemple sympathique de bouton compteur que je peux incrémenter et même des données.

Je peux débuter le développement de ma nouvelle application SPA ASP.NET Core MVC avec React.

Conclusion

Il semble que l'on arrive à une certaine maturité, l'emploi des scripts dans la console package manager simplifie des tâches complexes d'installation et de configuration des frameworks. On arrive assez vite à une application qui fonctionne.

Have fun!