Un aspect très important du développement des applications web comme avec ASP.NET Core, ce sont les contrôles utilisateurs. Il est important de faire, au départ, le bon choix de contrôles utilisateurs sinon cela peut être catastrophique. Démarrer avec une mauvaise librairie de contrôles utilisateurs peut vous faire perdre un temps précieux.
Alors aujourd'hui, je m'en vais explorer Fluent UI for Blazor.
Si vous faites cette recherche dans votre moteur favoris, vous allez sans doute trouver des choses un peu vieilles, allons à l'essentiel :
En suite vous trouvez le Nuget Package Officiel à installer dans votre projet Blazor :
Nuget - Microsoft.Fast.Components.FluentUI Cette page est importante pour mettre en oeuvre FluentUI au sein de votre projet Blazor, des instructions importantes sont en bas de la page. Il y a bien une "Note" à propos d'escape du caractère @ mais les explications données : Razor Pages syntax documentation ne suffisent pas !
\\Visual Studio 2022\Samples\ASP.NET Core Blazor\BlazorServerFluentUIApp\Pages\_Layout.cshtml
Le sujet c'est un escape caractère pour que le @ ne soit pas interprété mais lu comme un caractère autorisé dans une url.
Alors je vous laisse cherche un peu ...
Ajouter $ ou \ ou / ou bien encore @ voir doubler @@ ou tout autre %40 ne fonctionnera pas ... avec les navigateurs actuels, là encore de nombreuses vieilles choses traînent sur Internet c'est dommage et cela vous fait perdre votre temps.
Solution à l'erreur : /@fluentui c'est @Html.Raw("@") comme dans :
Il est dit dans la doc que des Templates d'application peuvent être installés par la commande :
>dotnet new install {path to package}\Microsoft.Fast.Templates.FluentUI.{version}.nupkg
Pour moi, le résultat fut le suivant :
Microsoft.Fast.Templates.FluentUI.{version}.nupkg
J'ai trouvé ce Template à installer dans la gestion des packages de la Solution mais là encore impossible de l'installer.
GravitéCodeDescriptionProjetFichierLigneÉtat de la suppression
ErreurLe package 'Microsoft.Fast.Templates.FluentUI 2.0.3' a un type de package 'Template' non pris en charge par le projet 'BlazorWebAssemblyFluentUIApp1'.
Grrr, dommage !
Du coup j'installe le NuGet en passant par : Bouton droit sur le projet -> Gérer les packages NuGet :
Je ne parviens pas encore à afficher les icônes, non ce n'est pas une question d'install, j'ai une application Blazor qui fonctionne :
FluentUI for Blazor
Mais quand j'essaye d'activer l'Accordion avec le code suivant :
<FluentAccordion ActiveId="@activeId" OnAccordionItemChange="HandleOnAccordionItemChange"> <FluentAccordionItem Heading="Panel one"> <FluentIcon Slot="start" Name="@FluentIcons.Globe" Size="@IconSize.Size20" Color="@Color.Neutral" /> Panel one content, using the 'start' slot for extra header content (in this case an icon) </FluentAccordionItem> ...
Et bien, c'est une erreur :
requested Icon Globe Size20 Regular is not available in the collection
Comme si l'icône Globe n'existait pas dans la solution.
Je n'ai pas plus de temps à perdre avec cette histoire d'icône FluentUI, je verrai cela plus tard !
Je recherche la meilleure documentation pour bien démarrer avec Blazor. Je me méfie de la documentation MS qui est bien trop souvent pléthorique. Donc je me fais un post rapide avec les concepts et les liens utiles pour bien démarrer votre développement avec Blazor.
Type d'authentification : il n'y a pas de Windows parce que Docker n'est pas une option
Configuration HTTPS
ASP.NET core Hosted
Application Web Progressive (PWA pour une utilisation hors connexion)
Une option : N'utilisez pas d'instruction de niveau supérieur (de méthode Main ou d'instructions supérieures)
Formation avec Blazor
J'ai trouvée quelques vidéos :
HTS Learning - Acheter le cours "Développement web avec Blazor" Dans "Les bases de Blazor" comment séparer la Vue et le Code ... C'est intéressant de la séparer la Vue du Code et la technique démontrée ici est permise par Blazor alors pourquoi s'en priver ?
Comme avec toute technologie, les contrôles utilisateur sont le nerf du développement d'applications. Il faut les choisir correctement dès le début du projet.
Composants intégrés
La page la plus importante pour comprendre le comportement des contrôles utilisateurs, c'est le cycle de vie des composants ASP.NET Core Blazor Razor :
On retrouve Telerik, Infragistic, DevExpress pour les composants payants. Je ne suis pas contre le fait de payer des composants contrôles utilisateur mais les stratégies de ces fournisseurs sont un peu agressives, le prix, il devient difficile de les comparer et de faire son choix.
Je vous laisse faire le votre ou trouver des comparatifs, je crois qu'on peut les départager avec un critère comme l'utilisabilité des composants les plus complexes comme les DatasGrid.
Microsoft.Fast.Components.FluentUI
Microsoft Learn - Fluent UI Web Components Overview Microsoft.Fast.Components.FluentUI Dans la doc il est fait mention de la commande d'install : >npm install --save @fluentui/web-components Mais npm n'est plus pris en charge on le trouve dans les nugets ...
Blazorise - Templates Guide Très intéressant car on définit les couleurs du Thème que l'on souhaite utiliser pour une UI dédiée, pour un client qui souhaiterait avoir des couleurs spécifiques c'est certainement intéressant.
Radzen
A set of 70+ free and open source native Blazor UI controls.
Radzen Blazor Studio Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Fast.
Comparaison des Blazor Tooling (contrôles utilisateurs ++)
Comment comparer ces différents ensembles de contrôles utilisateurs, autrement qu'en passant des jours à les installer, à les utiliser et découvrir leurs fonctionnalités ?
Visual Studio Magazine - What's New in Third-Party Blazor Tooling Voici une page de comparaison les fonctionnalités des différents intervenants, je n'ai pas encore découvert Syncfusion mais il semble qu'il y a une licence "community" ... pas de Blazorise dans cette comparaison.
Je cherche des exemples d'application de développements avec Blazor, au plus proche de la communauté officielle. Il est légitime qu'une technologie soit démontrée par un nombre conséquent d'exemples.
On trouve Ici :
GitHub - dotnet/blazor-samples Samples to accompany the official Microsoft Blazor documentation Blazor Server with EF Core Sample App
Tout un tas d'exemples avec Blazor dans les catégories suivantes :
Créer des Pages Razor (Blazor) avec du Code Séparé
Depuis le début, je m'escrime à créer des composants Blazor avec la directive @code puis à créer une class avec le nom MyComponent.razor.cs puis à déplacer le code dedans.
J'ai même regardé une vidéo où le formateur blazor passe dix minutes à vous décrire comment faire quelle perte de temps !
Et puis je découvre dans Bouton droit sur le Projet -> Ajouter -> En ligne -> Blazor Component CodeBehind Templates (VS2022) pour ajouter des Templates :
Créer des Page Razor avec le code séparé ou code behind
Ce qui veut sans doute dire qu'il faut attendre Visual Studio 2022 pour pouvoir l'installer mais je clique sur l'install et me voilà avec les deux Templates suivants :
Empty Razor Page Component with Code Behind
Ce n'est pas exceptionnel, le Template Empty n'a pas le code html c'est tout mais c'est déjà ça !
Bon, il manque la directive @inherit MaPageBase, mais bon ...
Bon la class est partial alors que pour mettre protected comme on a appris qu'il ne faut pas faire ça, mais bon ...
C'est déjà ça !
Si vous utilisez l'héritage depuis ComponentBase et @inherit, n'oubliez pas de mettre les propriétés à protected pour qu'elles soient accessible depuis la page ...
Se méfier de la directive @page "/" car elle crée une erreur d'un autre monde !?
J'ai assez peu développé avec Razor mais j'ai beaucoup utilisé ASP.NET MVC, j'ai écris ici même quelques posts et développé quelques Samples d'applications avec Razor par la suite j'ai plutôt orienté mes développements vers ASP.NET Core & Angular. Aujourd'hui j'entends parler de Blazor comme une technologie mature.
Blazor est un framework open source de Microsoft en C# utilisant .NET. La technologie WebAssembly permet d'exécuter du code C# dans les navigateurs Web et permet de se passer de JavaScript, HTML et CSS !
Balzor
Blazor est basé sur ASP.NET Core on peut donc utiliser LINQ et la programmation asynchrone, la sécurité et la gestion des erreurs.
Thanks to ChatGPT que j'ai raccourcis pour les initiés.
Je tape "Blazor" dans la barre de recherche de Microsoft Learn :
Je ne résiste pas à poser la question à ChatGPT, voici sa réponse :
"Pas de support natif pour les interfaces utilisateur : WebAssembly n'inclut pas de support natif pour la création d'interfaces utilisateur telles que les formulaires, les boutons et les menus. Pour créer des interfaces utilisateur avec WebAssembly, vous devez utiliser des technologies web telles que HTML, CSS et JavaScript.
Pas de prise en charge native des API web : WebAssembly ne prend pas en charge nativement les API web telles que le DOM, le XMLHttpRequest et l'API Web Audio. Pour utiliser ces API, vous devez utiliser JavaScript ou une bibliothèque tierce qui fournit des liens vers ces API.
Taille de téléchargement plus grande : Bien que WebAssembly soit conçu pour être compact et rapide, les fichiers binaires WebAssembly peuvent être plus grands que les fichiers JavaScript équivalents. Cela peut entraîner des temps de chargement plus longs pour les applications WebAssembly.
Limitations de sécurité : Comme pour toute technologie, WebAssembly peut être vulnérable à des failles de sécurité. Les développeurs doivent prendre des mesures pour sécuriser leur code et protéger les utilisateurs contre les attaques.
Limitations de compatibilité du navigateur : Bien que la plupart des navigateurs modernes prennent en charge WebAssembly, certaines versions plus anciennes des navigateurs peuvent ne pas être compatibles. Les développeurs doivent tenir compte de ces limites de compatibilité lorsqu'ils décident d'utiliser WebAssembly.
En résumé, bien que WebAssembly soit une technologie prometteuse pour le développement web, il y a certaines contraintes à prendre en compte, notamment l'absence de support natif pour les interfaces utilisateur et les API web, la taille de téléchargement plus grande, les limitations de sécurité et les limitations de compatibilité du navigateur."
Whaou...
Mais bon, finalement, dans les avantages de Blazor on trouve que l'on a plus besoin de HTML, CSS, et JavaScript et dans les contraintes on retrouve qu'il va falloir utiliser JavaScript ... C'est toujours la même histoire.
A méditer.
Puis j'ai eu envie de poser à nouveau une question à ChatGpt :
Est ce que le futur de Blazor n'est pas de terminer comme Silverlight ou Flashplayer qui ont été abandonnés ?
"C'est une question importante et légitime. Alors que Blazor est une technologie relativement nouvelle, il est important de considérer les risques associés à l'adoption de toute nouvelle technologie.
Cependant, il y a plusieurs raisons de croire que Blazor a un avenir prometteur. Tout d'abord, Blazor repose sur .NET et WebAssembly, deux technologies bien établies qui sont utilisées depuis plusieurs années et qui ont une grande communauté de développeurs. De plus, Blazor est soutenu et développé par Microsoft, une entreprise de technologie bien établie avec une longue histoire de développement de logiciels pour les entreprises.
De plus, la popularité croissante de WebAssembly dans l'industrie du développement web est un signe que Blazor pourrait continuer à gagner en popularité à l'avenir. De plus en plus de développeurs choisissent d'utiliser WebAssembly pour des applications web hautement performantes, et cela pourrait aider Blazor à devenir une option plus courante pour le développement web.
En fin de compte, le succès de Blazor dépendra de nombreux facteurs, notamment l'adoption de la communauté des développeurs et des entreprises, la qualité et la maturité de l'implémentation de la technologie, et la capacité de la technologie à répondre aux besoins des développeurs et des utilisateurs. Cependant, il semble que Blazor ait le potentiel de devenir une technologie de développement web populaire et durable."
Wahou... du coup ...
Quels sont les navigateurs compatibles avec WebAssembly ?
"La prise en charge de WebAssembly a considérablement augmenté ces dernières années. La plupart des navigateurs modernes prennent désormais en charge WebAssembly. Voici une liste des principaux navigateurs compatibles avec WebAssembly :
Google Chrome (depuis la version 57)
Mozilla Firefox (depuis la version 52)
Microsoft Edge (depuis la version 16)
Apple Safari (depuis la version 11)
Opera (depuis la version 44)
UC Browser (depuis la version 12.13)
Samsung Internet (depuis la version 6.2)
Il est important de noter que certains navigateurs plus anciens peuvent ne pas être compatibles avec WebAssembly, ou peuvent nécessiter une configuration spéciale pour activer cette fonctionnalité. Les développeurs doivent tenir compte de ces limites de compatibilité lorsqu'ils choisissent d'utiliser WebAssembly pour leurs applications web."
Et bien me voilà renseigné ! Je peux démarrer mes futures développement d'applications Web avec Blazor avec une certaine sérénité.
