Fermer

février 17, 2021

Blazor sur le bureau


Nous explorons comment faire fonctionner les applications Web Blazor sur le bureau.

Blazor est l'une des technologies les plus intéressantes pour les développeurs Web sur la pile .NET et permet de créer des applications Web côté client / serveur entièrement en C #. Blazor n'est pas seulement pour les applications Web et a des implications claires pour les ordinateurs de bureau / mobiles.

Il s'avère qu'il existe de multiples façons de créer des applications de bureau modernes avec Blazor. Les techniques ne sont plus rien maintenant – ce qu'il faut, c'est un shell qui héberge un bac à sable de navigateur de bureau, qui exécute des applications Blazor normales, comme si elles fonctionnaient sur le Web. Cependant, la clé du succès des applications de bureau hybrides réside dans la mise en œuvre et la gestion du gonflement des ressources. Et comme on peut le voir avec le premier aperçu .NET 6 Blazor sur ordinateur devient bientôt une réalité. L'attrait est simple: utilisez la syntaxe Razor et le modèle de composant Blazor bien connu pour créer des applications de bureau natives.

Examinons de plus près les applications de bureau propulsées par Blazor – nous allons explorer deux méthodes populaires pour plus de clarté et voir les coques de bureau en action.

The Electron Way

Le désir de voir des applications Web s'exécuter sur bureau a été longtemps en cours d'exécution. Et étant donné à quel point Blazor a été passionnant pour les développeurs Web .NET, il y a eu beaucoup de zèle pour faire des applications Blazor des solutions de bureau. Entrez la solution la plus omniprésente pour de tels besoins – Electron . ElectronJS est un projet open source pour créer des applications multiplateformes avec des technologies Web et peut cibler n'importe quel poste de travail: Windows, Mac OS et Linux. La plupart des applications de bureau les plus utilisées sont essentiellement des applications Web intégrées au shell Electron, telles que Visual Studio Code, Microsoft Teams, Slack et Figma. Electron existe depuis un certain temps et gagne en crédibilité grâce à une communauté / écosystème de développeurs solide.

Les applications Web Blazor peuvent-elles être enveloppées dans le shell Electron pour les transformer en applications de bureau? Tu paries.

Tout d'abord, nous commençons un projet Web côté serveur Blazor fonctionnant sur .NET Core 3.1. Ensuite, nous ajoutons le package NuGet ElectronNET.API qui permettra à l'application Blazor d'être amorcée dans Electron.

 BlazorInElectronProjectDeps "title =" BlazorInElectronProjectDeps "data-methodTguments =" ResizeFitronProjectDeps "data-method "data-customsizemethodproperties =" {"MaxWidth": "", "MaxHeight": "450", "ScaleUp": false, "Quality": "High"} "data-openoriginalimageonclick =" true "/> </a data-recalc-dims= [19659004] Dans notre Program.cs nous autorisons l'utilisation d'Electron avec la fonction UseElectron () dans la méthode CreateHostBuilder () .

Ensuite, nous nous dirigeons vers le fichier Startup.cs et faisons en sorte que l'application Blazor soit amorcée dans le shell Electron. Remarquez comment nous configurons une fenêtre de bureau avec des dimensions et un titre, et que nous la déclenchons.

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
en utilisant Microsoft.AspNetCore.Builder;
en utilisant Microsoft.AspNetCore.Components;
en utilisant Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
en utilisant Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
en utilisant Microsoft.Extensions.Hosting;
using BlazorInShell.Data;
en utilisant ElectronNET.API;
utilisant ElectronNET.API.Entities;

espace de noms BlazorInShell
{
    Démarrage de classe publique
    {
        Démarrage public (configuration IConfiguration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration {get; }

        public void ConfigureServices (services IServiceCollection)
        {
            services.AddRazorPages ();
            services.AddServerSideBlazor ();
            services.AddSingleton  ();
        }

        public void Configure (application IApplicationBuilder, IWebHostEnvironment env)
        {
            si (env.IsDevelopment ())
            {
                app.UseDeveloperExceptionPage ();
            }
            autre
            {
                app.UseExceptionHandler ("/ Erreur");
                app.UseHsts ();
            }

            app.UseHttpsRedirection ();
            app.UseStaticFiles ();

            app.UseRouting ();

            app.UseEndpoints (points de terminaison =>
            {
                endpoints.MapBlazorHub ();
                endpoints.MapFallbackToPage ("/ _ Host");
            });

            if (HybridSupport.IsElectronActive)
            {
                ElectronBootstrap ();
            }

        }

        public async void ElectronBootstrap ()
        {
            var browserWindow = await Electron.WindowManager.CreateWindowAsync (nouveau BrowserWindowOptions
            {
                Largeur = 1920,
                Hauteur = 1080,
                Afficher = faux
            });

            attendre browserWindow.WebContents.Session.ClearCacheAsync ();

            browserWindow.OnReadyToShow + = () => browserWindow.Show ();
            browserWindow.SetTitle ("Blazor dans Shell");
        }
    }
} 

Pour initialiser notre application Blazor dans Electron, nous devons installer l'outil CLI Electron.NET . Cela se fait bien sûr à partir du terminal / de l'invite de commande.

Bien que nous puissions installer la CLI Electron.NET globalement, il faut sauter dans le projet Blazor et initialiser l'application Electron. un fichier electron.manifest.json au sein du projet

La dernière étape devrait créer quelques configurations; mais sinon, le fichier launchSettings.json peut être mis à jour manuellement.

 {
  "iisSettings": {
    "windowsAuthentication": faux,
    "anonymousAuthentication": vrai,
    "iisExpress": {
      "applicationUrl": "http: // localhost: 37307",
      "sslPort": 44311
    }
  },
  "profiles": {
    "Application Electron.NET": {
      "commandName": "Exécutable",
      "executablePath": "électroniser",
      "commandLineArgs": "démarrer",
      "directeur de travail": "."
    },

    "IIS Express":
    {
      "commandName": "IISExpress",
      "launchBrowser": vrai,
      "Variables d'environnement": {
        "ASPNETCORE_ENVIRONMENT": "Développement"
      }
    },

    "Électron":
    {
      "commandName": "Exécutable",
      "executablePath": "dotnet",
      "commandLineArgs": "Electronize start",
      "workingDirectory": "$ (ProjectDir)"
    },
    «BlazorInShell»:
    {
      "commandName": "Projet",
      "launchBrowser": vrai,
      "applicationUrl": "https: // localhost: 5001; http: // localhost: 5000",
      "Variables d'environnement": {
        "ASPNETCORE_ENVIRONMENT": "Développement"
      }
    }
    }
} 

Nous sommes maintenant prêts à exécuter notre application Blazor dans le shell Electron. Temps pour les trois petits mots, depuis le répertoire du projet:

Si tout est bien configuré, la commande CLI affichera l'application Blazor en cours d'exécution sur le port Localhost spécifié – et quelques autres choses. [19659004]  ElectronCLI "title =" ElectronCLI "/></p data-recalc-dims=

Voila. Electron lance la fenêtre du bureau avec des dimensions données et héberge l'application Blazor à l'intérieur. Juste magique.

 BlazorInElectron" title = "BlazorInElectron "/></p data-recalc-dims=

Oui, vous obtenez une application Blazor entièrement fonctionnelle, simplement hébergée en tant qu'application de bureau, exécutant du code Web. Et grâce à Electron, cela fonctionnerait sous Windows, Mac OS et Linux. Allelujah!

 BlazorWeatherInElectron "title =" BlazorWeatherInElectron "/></p data-recalc-dims=

Modern Consciousness

Electron est assez génial. Cependant, il y a une petite hésitation. Et cela découle de la conscience d'aujourd'hui qu'une majorité de gens dirigent un navigateur moderne à feuilles persistantes sur leurs ordinateurs. L'un des principaux arguments de vente d'Electron peut désormais semer le doute dans l'esprit d'un développeur. L'idée d'un environnement stable et prévisible est au cœur des avantages d'Electron en tant que shell pour héberger des applications Web .

À cette fin, chaque application Electron est livrée avec deux éléments qui assurent la fiabilité:

  1. Electron fournit sa propre copie du moteur Chromium pour un rendu cohérent.
  2. Electron inclut Node .JS runtime, qui assure la stabilité du sandbox du navigateur et offre des intégrations OS.

Et si aujourd'hui, nous supposions un environnement informatique stable et la présence d'un navigateur moderne? Un shell comme E lectron en finir avec le regroupement de Chromium et Node.JS? Ce n'est pas une question à laquelle il est facile de répondre, car nous négocions essentiellement la stabilité pour une plus petite empreinte.

Steve Sanderson de l'équipe Blazor a rédigé un article détaillé avec des comparaisons de la taille de l'application et de l'impact de la mémoire lorsque Chromium et Node.JS ne sont pas regroupés. Cela soulève la question de savoir si des shells Web plus légers pourraient faire le travail d'héberger des applications Blazor modernes avec un niveau de cohérence. Le temps nous le dira, mais heureusement, il existe des alternatives avec lesquelles jouer.

The WebView Way

Comment les développeurs Web de Blazor atteignent-ils le mobile ou le bureau? Une solution expérimentale élégante est Blazor Mobile Bindings permettant aux développeurs de créer des applications natives / hybrides multiplateformes avec la syntaxe Razor et le modèle de composant Blazor. Prévu pour faire partie de l'évolution proposée de .NET MAUI avec LTS .NET 6 les liaisons mobiles Blazor se trouvent au-dessus de la pile technologique Xamarin.Forms et peuvent facilement atteindre le bureau : Windows via les moteurs de rendu WPF et MacOS via les moteurs de rendu Mac pour Xamarin.Forms.

Ayant un moyen d'atteindre le bureau tout en écrivant du code Blazor, Blazor Mobile Bindings ouvre l'hébergement de vues hybrides – essentiellement un shell Web à l'intérieur de l'application amorcée qui peut exécuter un code Web. Semble familier? Cette fois cependant, nous utiliserons le nouveau BlazorWebView – une alternative légère qui n'inclut pas Chromium ou Node.JS.

La première étape consiste à obtenir le modèle CLI et à lancer un nouveau projet hybride Blazor Mobile Bindings "Hello World".

 dotnet new blazorhybrid -o BlazorHybridHW 

Cet échafaudage d'une solution avec plusieurs projets spécifiques à la plateforme – a. Bibliothèque et projets NET Standard pour iOS, Android, Windows et MacOS. Voici une version allégée mettant en évidence le projet MacOS:

 BlazorHybridProject "title =" BlazorHybridProject "data-method =" ResizeFitToAreaArguments "data-customsizemethodproperties =" {"MaxWidth": "450", "MaxHight ":" "," ScaleUp ": false," Quality ":" High "}" data-openoriginalimageonclick = "true" /> </a data-recalc-dims=

Les dépendances de projet partagées montrent une dépendance sur Xamarin et Mobile Blazor Bindings, pas beaucoup else.

 BlazorHybridDeps "title =" BlazorHybridDeps "data-method =" ResizeFitToAreaArguments "data-customsizemethodproperties =" {"MaxWidth": "", "MaxHeight": "450", "ScaleUp false, "Quality": "High"} "data-openoriginalimageonclick =" true "/> </a data-recalc-dims=

Ce projet est essentiellement une combinaison de solutions d'éclairage natives et d'interface utilisateur Web pour diverses plates-formes mobiles / de bureau. Dans le dossier racine du projet partagé, App.cs fournit le point d'entrée principal de l'interface utilisateur et les choses démarrent comme elles le font pour chaque application Xamarin.Forms via Mobile Blazor Bindings. CounterState fournit un composant / service qui serait utilisé pour garder une trace des compteurs de clics dans le code natif / hybride.

À l'intérieur du projet partagé se trouve un dossier nommé WebUI – il est destiné à héberger l'application Blazor, avec tout le code et les composants attendus d'un projet Web Blazor. Il existe également un dossier wwwroot servant du contenu statique, comme on le fait pour une application Web Blazor classique.

 BlazorHybridWebProject "title =" BlazorHybridWebProject "/></p data-recalc-dims=

Nous en arrivons maintenant à la meilleure partie: Main.razor . Il s'agit de l'interface utilisateur principale rendue via Blazor, mais est une combinaison de Interface utilisateur native et hybride.

Le code ci-dessus se lit presque comme XAML, mais avec quelques rebondissements. Le conteneur est natif via Xamarin.Forms, tout comme le premier StackLayout contenant le libellé et le bouton. Mais vient ensuite BlazorWebView – la vue Web moderne destinée à héberger une application Blazor complète ou toute autre application Web à l'intérieur. Et où pouvons-nous héberger l'application Blazor? Le dossier WebUI bien sûr. Vous pouvez voir à quel point il est intéressant d'avoir une application Blazor complète dans le projet et de l'intégrer dans l'interface utilisateur native, ainsi que d'héberger une interface utilisateur Web hybride via BlazorWebView.

La dernière pièce du puzzle se trouve dans les projets spécifiques au bureau pour Windows ou MacOS, en utilisant les moteurs de rendu correspondants. Pour MacOS, cela ne diffère pas de la façon dont les moteurs de rendu Xamarin.Forms pour MacOS amorcent une application de bureau: définissez un NSWindow avec les paramètres appropriés, initialisez Xamarin.Forms et autorisez Forms à peindre l'interface utilisateur dans la fenêtre.

 utilisant AppKit;
en utilisant Foundation;

espace de noms BlazorHybridHW.macOS
{
    [Register("AppDelegate")]
    classe publique AppDelegate: Xamarin.Forms.Platform.MacOS.FormsApplicationDelegate
    {
        public AppDelegate ()
        {
            var style = NSWindowStyle.Closable | NSWindowStyle.Resizable | NSWindowStyle.Titled;
            var rect = nouveau CoreGraphics.CGRect (200, 1000, 1024, 768);
            MainWindow = new NSWindow (rect, style, NSBackingStore.Buffered, false)
            {
                Title = "Ma candidature",
                TitleVisibility = NSWindowTitleVisibility.Visible,
            };
        }

        public override NSWindow MainWindow {get; }

        public override void DidFinishLaunching (notification NSNotification)
        {
            // Options de menu pour faciliter la pression sur cmd + q pour quitter l'application
            NSApplication.SharedApplication.MainMenu = MakeMainMenu ();

            Xamarin.Forms.Forms.Init ();
            LoadApplication (nouvelle application ());
            base.DidFinishLaunching (notification);
        }

        public override void WillTerminate (notification NSNotification)
        {
            // Insérez le code ici pour démolir votre application
        }

        NSMenu privé MakeMainMenu ()
        {
            // menu de l'application de la barre supérieure
            var menubar = nouveau NSMenu ();
            var appMenuItem = nouveau NSMenuItem ();
            menubar.AddItem (appMenuItem);

            var appMenu = nouveau NSMenu ();
            appMenuItem.Submenu = appMenu;

            // ajouter un séparateur
            var separator = NSMenuItem.SeparatorItem;
            appMenu.AddItem (séparateur);

            // ajouter un élément de menu quitter
            var quitTitle = string.Format ("Quitter {0}", "BlazorHybridHW.macOS");
            var quitMenuItem = new NSMenuItem (quitTitle, "q", délégué
            {
                NSApplication.SharedApplication.Terminate (barre de menus);
            });
            appMenu.AddItem (quitMenuItem);

            retour de la barre de menus;
        }
    }
} 

C'est tout. Il est temps de configurer les projets Windows / MacOS de bureau comme démarrage et de lancer les choses. Il en ressort une application de bureau brillante montrant le mélange d'interface utilisateur native et hybride. Alléluia!

 BlazorHybrid "title =" BlazorHybrid "/></p data-recalc-dims=

Remarquez comment le composant Counter est partagé entre l'interface utilisateur native de Xamarin.Forms et le composant Blazor correspondant – ils restent synchronisés via les deux interfaces.

 BlazorHybridCounter "title =" BlazorHybridCounter "/></p data-recalc-dims=

Vous disposez donc d'une véritable application de bureau dans un shell Web qui héberge une application Web Blazor complète. La technologie est magnifique.

Conclusion

Blazor est passionnant et permet aux développeurs Web .NET de créer des applications Web modernes avec C #. Cependant, Blazor n'a pas besoin d'être uniquement pour les applications Web et peut jouer facilement dans l'espace de bureau.

Les applications Blazor peuvent être facilement intégrées dans Electron pour créer des solutions de bureau convaincantes et cohérentes. Cependant, les vues Web modernes offrent une alternative légère à Electron, minimisant ainsi l'empreinte des applications Blazor exécutées sur le bureau. Blazor Mobile Bindings fournit un moyen expérimental d'écrire des applications multiplateformes natives / hybrides en utilisant la syntaxe Razor et le modèle de composant Blazor. Le nouveau composant BlazorWebView permet un hébergement facile de tout contenu Web, en particulier des applications Blazor complètes prévues pour le Web. Les piles de technologies modernes permettent aux développeurs de mélanger et de faire correspondre les paradigmes de codage et les barrières entre plates-formes d'applications pour une portabilité accrue.

Vers le haut et en avant vers ce que l'avenir nous réserve.






Source link