5 projets open source pour augmenter votre productivité dans Blazor

Dans cet article, je vais vous montrer des projets open-source que vous pouvez intégrer dans votre développement basé sur un blazor ou utiliser comme point de départ pour accélérer le développement.

Travailler avec les dimensions d’écran à l’aide de BlazorSize

Blazorsize est un projet open source qui facilite la vie des développeurs de Blazor en leur permettant d’obtenir la taille du navigateur, en détectant des changements, ainsi qu’à tester les requêtes multimédias. Pour intégrer cet utilitaire dans votre solution, vous devez installer le package NuGet BlazorPro.BlazorSize.

Une fois cela fait, ajoutez ces deux lignes à votre Program.cs déposer:

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddMediaQueryService();
builder.Services.AddScoped<IResizeListener, ResizeListener>();

var app = builder.Build();

Ensuite, allez au composant où vous souhaitez utiliser l’utilitaire, en ajoutant une injection de type IResizeListener. Il est également recommandé de mettre en œuvre le IDisposable Interface pour éviter les fuites de mémoire, comme suit:

@page "/counter"
@using BlazorPro.BlazorSize
@rendermode InteractiveServer

@inject IResizeListener listener
@implements IDisposable

L’étape suivante consiste à définir une variable de type BrowserWindowSizequi permet d’obtenir des informations telles que la largeur et la hauteur du navigateur.

De même, nous définissons une méthode appelée WindowResized où nous spécifions des actions telles que la mise à jour du browser objet et attribuer une valeur booléenne au IsSmallMedia variable, selon que un SmallDown Requête médiatique avec un max-width de 767.98px a été trouvé sur la page.

Enfin, nous souscrivons et se désinscrivons au OnResized événement au moment approprié, comme dans l’exemple suivant:

@code {
    private int currentCount = 0;
    BrowserWindowSize browser = new BrowserWindowSize();
    bool IsSmallMedia = false;

    private async Task IncrementCount()
    {
        currentCount++;        
    }

    protected override void OnAfterRender(bool firstRender)
    {              
        if (firstRender)
        {            
            listener.OnResized += WindowResized;
        }
    }

    void IDisposable.Dispose()
    {        
        listener.OnResized -= WindowResized;
    }

    async void WindowResized(object _, BrowserWindowSize window)
    {        
        browser = window;        
        IsSmallMedia = await listener.MatchMedia(Breakpoints.SmallDown);        
        StateHasChanged();
    }
}

Avec le code ci-dessus implémenté, nous pouvons utiliser les objets pour afficher la taille du navigateur et même afficher différentes dispositions en fonction de la taille détectée:

<p>This component demonstrates adaptive rendering of a Blazor UI.</p>

<h3>Height: @browser.Height</h3>
<h3>Width: @browser.Width</h3>
<h3>MQ: @IsSmallMedia</h3>

@if (IsSmallMedia)
{
    <p>Small Media</p>
}
else
{
    <p>Large Media</p>
}

L’exécution de l’application nous permettra d’obtenir des modifications de taille du navigateur comme indiqué ci-dessous:

Si vous recherchez une solution plus simple pour travailler avec des tailles de navigateur, vous pouvez utiliser le Blazor Mediaquery Composant du progrès Telerik UI pour Blazorqui offre beaucoup plus de fonctions, est plus facile à gérer et est constamment mis à jour pour vous aider à être plus productif.

Maintenir l’état de votre application à l’aide de Fluxor

Flux est un modèle architectural qui permet de gérer les données dans les applications Web. Parmi ses avantages, il y a un flux de données unidirectionnel, un seul magasin où les données d’état d’objet sont gérées, un type de changement d’état déterministe et la capacité de naviguer dans l’historique des versions de changement d’objet.

Plusieurs bibliothèques aident à la mise en œuvre de ce modèle, l’un des projets les plus connus pour Blazor étant Fluxor. Certains concepts fondamentaux que vous devez savoir pour utiliser cette bibliothèque comprennent:

• État: Représente la source unique de vérité de l’application – c’est-à-dire le magasin d’état d’objet. Cet état est immuable, ce qui signifie que l’objet ne peut être remplacé que par une nouvelle version de l’objet avec de nouvelles données lorsqu’il y a un changement. Cela nous permet de naviguer à travers l’historique des versions d’objets.
• Actes: Ce sont des événements qui représentent des changements qui doivent se produire dans l’État. Il est important de savoir qu’ils n’implémentent pas la logique métier mais contiennent des données qui pourraient servir le changement d’état.
• Réducteurs: Ce sont des méthodes qui reçoivent l’état actuel et une action. Ils génèrent et renvoient un nouvel état. Comme mentionné précédemment, l’état actuel n’est pas modifié; Au lieu de cela, une copie avec les modifications est créée.

Une fois que vous comprenez les concepts de base, intégrons la bibliothèque dans un projet Blazor en utilisant le Application Web Blazor modèle avec un Mode de rendu interactif se mettre à Serveur et un Emplacement d’interactivité se mettre à Par page / composantmodifiant le Counter Composant d’une série d’étapes:

1. Installer le package Fluxor.Blazor.Web.
2. Enregistrer le service dans Program.cs comme suit:

var builder = WebApplication.CreateBuilder(args);
...
var currentAssembly = typeof(Program).Assembly;
builder.Services.AddFluxor(options => options.ScanAssemblies(currentAssembly));

var app = builder.Build();

Le AddFluxor La méthode permet à Fluxor de numériser automatiquement tous les composants associés dans l’assemblage actuel afin que le motif fonctionne correctement, ce qui signifie qu’il recherche les magasins, les réducteurs et autres composants, en évitant la nécessité de les enregistrer manuellement.

3. Initialiser le magasin en ajoutant le StoreInitializer composant dans le MainLayout.razor déposer.

@inherits LayoutComponentBase

<Fluxor.Blazor.Web.StoreInitializer @rendermode=InteractiveServer/>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

Le StoreInitializer Le composant initialise l’état d’application avant que les pages et les composants ne soient rendus.

4. Créer un dossier nommé Store Et à l’intérieur, créez une nouvelle classe appelée CounterState:

[FeatureState]
public class CounterState
{
    public int ClickCount { get; }

    private CounterState() { }

    public CounterState(int clickCount)
    {
        ClickCount = clickCount;
    }
}

Dans le code précédent, le FeatureState l’attribut permet à l’état d’être découvert par le AddFluxor méthode. De plus, vous pouvez voir que l’État est immuable car la propriété est définie avec seulement un getteur. Enfin, un constructeur sans paramètre doit être créé pour déterminer l’état initial.

5. Pour afficher l’état, allez au Counter composant et modifiez-le comme suit:

@page "/counter"
@using BlazorFluxorTests.Store
@using Fluxor
@rendermode InteractiveServer
@inject IState<CounterState> CounterState
@inherits Fluxor.Blazor.Web.Components.FluxorComponent

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @CounterState.Value.ClickCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Dans le code précédent, nous pouvons voir plusieurs modifications:

• Les espaces de noms nécessaires sont ajoutés pour fonctionner avec nos classes Fluxor et le framework Fluxor.
• Le global CounterState L’état géré par Fluxor est injecté afin que notre composant puisse y accéder.
• Il hérite de FluxorComponentqui facilite l’intégration des composants du blazor avec l’État mondial géré par Fluxor. Certains avantages incluent le réinstallation automatique du composant lorsque l’état modifie et simplifié l’abonnement à l’état.

Lors de l’exécution de l’application, vous verrez que la page de compteur affiche une valeur de 0, qui est la valeur d’état par défaut. Cependant, lorsque vous appuyez sur le bouton pour incrémenter le compteur, rien ne se passe. Fixons ceci ensuite.

6. Dans le Store dossier, créez une nouvelle classe appelée IncrementCounterAction. Cette classe représente une action, c’est pourquoi elle restera vide:

public class IncrementCounterAction{}

7. Retour au Counter composant et injecter une référence à IDispatcher. Ensuite, exécutez le Dispatch Méthode pour expédier une instance de l’action. Cela permet à l’interface utilisateur d’indiquer une intention d’incrémenter le compteur, bien que cette fonctionnalité ne soit pas encore mise en œuvre:

@page "/counter"
...
@inject IDispatcher Dispatcher
...
@code {    
    private void IncrementCount()
    {        
        var action = new IncrementCounterAction();
        Dispatcher.Dispatch(action);
    }
}

Comme vous pouvez le voir, toutes les variables d’état initiales du composant ont été supprimées à cette étape.

8. À l’intérieur Store dossier, créez une nouvelle classe appelée Reducersqui devrait être statique et regarder comme suit:

public static class Reducers
{
    [ReducerMethod]
    public static CounterState ReduceIncrementCounterAction(CounterState state, IncrementCounterAction action) =>
        new CounterState(clickCount: state.ClickCount + 1);
}

Vous pouvez voir que le réducteur crée une nouvelle instance de CounterState avec l’état actuel modifié.

Lors de l’exécution de l’application, vous verrez que l’état se met à jour correctement. De plus, si vous configurez l’extension chromée appelée redux devtools, vous pouvez déboguer l’état du composant et naviguer dans l’historique de l’État:

Sans aucun doute, le modèle de flux nous oblige à penser différemment lors du développement avec Blazor, mais il offre de nombreux avantages en maintenant un seul état pour l’application.

Construire rapidement les CMSE en utilisant OQTANE

Oqtane est un projet open source qui a gagné en popularité sur GitHub, permettant l’installation d’un CMS basé sur un blazor sur votre propre serveur ou avec un fournisseur externe comme Azure. Vous pouvez même l’utiliser sur vos appareils mobiles grâce à la puissance de Blazor Hybrid. L’objectif du projet est de vous permettre de vous concentrer sur le développement de la logique commerciale sans vous soucier des problèmes généraux d’infrastructure. Il convient de mentionner que le projet est soutenu par la Fondation .NET, qui met en évidence son importance.

Les mainteneurs de projet fournissent un Modèle de bras Pour installer facilement Oqtane sur Azure en un seul clic. Si vous préférez essayer Oqtane localement, suivez ces étapes:

1. Clone le projet du référentiel officiel.
2. Reconstruire toute la solution.
3. Ensemble Oqtane.Server comme le projet de démarrage.
4. Commencez à exécuter l’application.

Après avoir démarré l’application, vous verrez un écran vous permettant de spécifier les informations sur la base de données et les détails de l’administrateur système:

Une fois l’application installée, vous verrez le site principal rendu. Vous pouvez également cliquer sur le Se connecter bouton pour accéder à l’administration du site. Pour vous donner une idée de ce que vous pouvez faire avec Oqtane, voici une capture d’écran montrant toutes les options de gestion disponibles:

Ce projet vous aidera certainement à éviter de partir de zéro ou d’apprendre les principes fondamentaux d’un projet bien structuré et complexe. Si vous souhaitez développer vos propres modules, vous pouvez suivre leurs tutoriels.

Utiliser facilement des icônes avec des blazorocticons

Les icônes sont une partie fondamentale de toute page Web. C’est pourquoi le Blazorocticons Le projet nous permet d’utiliser des octocons dans nos projets – un ensemble d’icônes open source développé par GitHub au format SVG. L’avantage de ce projet est qu’il nous permet de les utiliser comme composants Blazor.

Pour les utiliser, installez le BlazorOcticons Package dans votre projet Blazor. Ensuite, allez au _Imports.razor fichier et ajouter la directive suivante:

@using System.Net.Http
...
@using BlazorOcticons.Octicons

C’est tout ce dont vous avez besoin pour intégrer ce projet. L’étape suivante consiste à commencer à utiliser les composants du rasoir qui ont été ajoutés, qui ont des noms très descriptifs. De plus, vous pouvez modifier la couleur et la taille de l’icône. Voici un exemple de la façon d’ajouter un octocon:

<CodeOfConduct16 Color="#333" Size="32"/>

L’exécution de l’application affichera l’icône:

Ce projet facilite l’ajout d’icônes d’une manière adaptée à un blazor à l’aide de composants.

Générer des méthodes C # fortement typées à partir des fonctions JS

Blazor est une technologie merveilleuse qui permet de combiner C #, HTML et CSS. Cependant, il y a des moments où vous devrez peut-être exécuter le code JavaScript. Si vous avez travaillé avec Blazor, vous devez savoir qu’il existe des méthodes comme InvokeVoidAsync et InvokeAsync qui permettent d’interagir avec les fonctions JS à travers IJSRuntime. Cependant, l’utilisation de ces fonctions n’est pas fortement tapée, ce qui peut entraîner des erreurs d’exécution.

Pour résoudre ce problème, nous pouvons utiliser le projet BlazorInteropGeneratorqui permet de générer des méthodes d’interopérations fortement typées en analysant les fonctions JS et en les convertissant en méthodes d’extension C # pour IJSRuntime.

Pour intégrer ce projet dans vos projets Blazor, suivez ces étapes:

1. Installer le package Nuget GoLive.Generator.BlazorInterop.
2. Dans la racine du projet, ajoutez un nouveau fichier nommé BlazorInterop.json et attribuez-le un Construire une action égal à C # Analyzer Fichier supplémentaire.
3. Modifier le BlazorInterop.json Fichier comme suit:

{
  "Files": [
    {
      "Output": "JSInterop.cs",
      "Source": "wwwroot\blazorinterop.js",
      "Namespace": "BlazorInteropGeneratorTest",
      "ObjectToInterop": "window.blazorInterop",
      "Init": [ "window={}" ]
    }
  ],
  "InvokeVoidString": "await JSRuntime.InvokeVoidAsync("{0}", {1});",
  "InvokeString": "return await JSRuntime.InvokeAsync<T>("{0}",{1});"
}

Vous devez configurer le fichier en fonction de votre projet comme suit:

• Sortir: Spécifie le nom du fichier C # généré
• Source: Définit le chemin du fichier JS utilisé pour générer les méthodes d’interopr
• Espace de noms: L’espace de noms utilisé dans le fichier C # généré
• ObjectToInterop: L’objet JavaScript utilisé pour l’interop
• Init: Un tableau de scripts d’initialisation exécutés avant d’interopr

4. Puisque nous avons spécifié que le Source est le blazorinterop.js déposer wwwrootnous le créerons dans ce chemin avec quelques exemples de méthodes comme suit:

window.blazorInterop = {
    printPage: function () {
        window.print();
    },

    setPageTitle: function (title) {
        document.title = title;
    },    
};

5. Dans App.razormodifiez le body Section comme suit:

<body>
    <Routes />
    <script src="blazorinterop.js"></script>
    <script src="_framework/blazor.web.js"></script>    
</body>

Assurez-vous de placer la référence au blazorinterop.js dossier avant blazor.web.js. Sinon, l’exécution lancera des exceptions.

6. Si vous compilez le projet maintenant, vous verrez qu’une nouvelle classe est générée avec le nom attribué, dans notre exemple JSInterop.cs. Vous pouvez ouvrir le fichier et examiner son contenu.

7. Modifier le Counter Composant afin qu’au lieu d’augmenter le nombre, il affiche la boîte de dialogue d’impression comme suit:

@page "/counter"
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        await JSRuntime.printPageVoidAsync();
    }
}

Si vous exécutez le projet maintenant, vous verrez qu’appuyé sur le bouton ouvre la boîte de dialogue d’impression:

Nous l’avons réalisé en utilisant une méthode fortement dactylographiée, grâce au projet BlazorInteropGenerator.

Conclusion

Il existe de nombreux projets open source qui peuvent nous aider dans notre développement quotidien.

Nous avons examiné certains qui peuvent aider à accélérer nos développements basés sur le blazor: BlazorSize pour obtenir des dimensions du navigateur, Fluxor pour intégrer le motif de flux dans Blazor, Oqtane pour accélérer la création de CMS, les blazorocticons pour convertir JS fonctionne en tant que méthodes C #. Il est temps de les intégrer dans vos développements de blazor ou de découvrir de nouveaux projets.