Déployer une application Blazor sur Azure Static Web App avec DevOps

Depuis quelques mois, il est maintenant possible de déployer des applications Blazor sur Azure Static Web App, un environnement beaucoup plus léger que les App Service. Dans ce blogue complémentaire au vidéo publié récemment sur notre chaîne, on regarde comment faire ces déploiements via DevOps.

Continuer la lecture de « Déployer une application Blazor sur Azure Static Web App avec DevOps »

Color Scheme Preference Detector

Le Color Scheme Preference Detector est une librairie Nuget que j’ai récemment développé pour permettre de facilement savoir si un utilisateur préfère les thèmes sombres ou clairs, que je voyais pouvant être utilisé avec Blazor. Voici donc un petit article pour en expliquer l’origine et le fonctionnement.

Continuer la lecture de « Color Scheme Preference Detector »

Faire du SASS avec Blazor

Avec l’isolation du CSS qui est disponible depuis .NET5, appliquer des styles à nos composantes Blazor n’a jamais été aussi simple. Saviez-vous qu’on peut facilement le faire en SASS, profiter de la puissance de ce préprocesseur, et ne pas avoir à se soucier de faire nous-même la compilation vers le CSS? Voici le petit truc bien simple pour vous permettre de le faire.

Continuer la lecture de « Faire du SASS avec Blazor »

Tester un Blazored Modal avec bUnit

J’ai récemment eu besoin d’ajouter des tests unitaires sur une fenêtre modale qui utilise la librairie Blazored.Modal. Comme c’est une composante, j’ai utilisé la librairie bUnit pour mes tests. J’ai par contre rencontré quelques soucis lors de la mise en place des tests, j’ai donc cru bon vous partager ce que j’ai fait pour me simplifier la vie.

Continuer la lecture de « Tester un Blazored Modal avec bUnit »

Blazor et .NET 5 – Partie 2

Voici la deuxième partie de mon article couvrant les nouvelles fonctionnalités de .NET 5 pour Blazor, maintenant que .NET 5 est officiellement publié. Si vous n’avez pas eu la chance de lire la première partie, vous pouvez la consulter ici. Comme dans l’article précédant, ceci se veut un survol des fonctionnalités, plusieurs articles et/ou vidéos suivront pour voir le tout plus en détails.

Component InputFile

Un composant InputFile est maintenant disponible pour permettre de téléverser un fichier. Il peut aussi permettre multiples fichiers avec l’attribut multiple. Grâce à l’événement onchange, on peut ensuite facilement aller lire les fichiers téléversés grâce aux objets de System.IO. Évidemment, certaines mesures sont à prendre à la lecture de fichiers pour ne pas impacter la performance de l’application.

InputRadio et InputRadioGroup

Avant .NET 5, la gestion des boutons radio avec Blazor devait être faite manuellement. Maintenant, deux composantes sont disponibles pour faciliter la tâche. InputRadioGroup nous permet de définir un groupe de boutons radio. Sur ce groupe, on peut utiliser l’attribut bind-Value pour associer la sélection à l’intérieur du groupe à une valeur de modèle. Au niveau du InputRadio, il suffit de spécifier une valeur dans l’attribut Value. Cette valeur sera celle utilisée sur notre modèle, lorsque le bouton sera sélectionné.

Événement ontoggle

La balise details permet d’avoir un contenu qu’on peut ouvrir et fermer. En autant qu’on spécifie une balise summary à l’intérieur, tout autre contenu sera affiché ou caché. Malheureusement, l’événement ontoggle n’était pas supporté nativement par Blazor avant .NET 5. Maintenant, il est possible d’ajouter une méthode à cet événement pour faire cette gestion d’affichage de contenu.

FocusAsync

J’ai la chance de travailler sur un projet Blazor depuis quelques mois. À un moment, j’ai eu besoin de forcer le focus sur un élément suite à une action, chose que j’ai réalisé n’était pas possible avec Blazor. Il a donc fallu se tourner vers une classe TypeScript qui permettait d’envoyer un sélecteur CSS sur lequel il fallait faire le focus. Avec .NET 5, on peut maintenant le faire nativement. Il faut tout d’abord ajouter une référence sur l’élément sur lequl on veut faire le focus. Par la suite, via le code, nous pouvons appeler la méthode FocusAsync sur cet élément. Pas de JavaScript, ni de TypeScript, grâce à ce petit ajout que je trouve génial!

Attributs de classe de validation personnalités

En utilisant des frameworks CSS comme Bootstrap, il peut être utile de spécifier des classes sur des éléments lorsqu’ils sont valide ou invalide. En créant une classe dérivée de FieldCssClassProvider, il est possible de surcharger la méthode GetFieldCssClass pour y ajouter cette définition. Une fois la classe créée, il suffit de l’ajouter sur le EditContext de notre modèle avec la méthode SetFieldCssClassProvider pour que ce soit pris en charge.

Support pour IAsyncDisposable

Il est parfois nécessaire de relâcher des ressources en ne voulant pas bloquer la thread du UI. Avant .NET 5, l’interface IAsyncDisposable n’était pas disponible pour les composants Blazor. Grâce à .NET 5, on peut maintenant implémenter cet interface au niveau de nos composantes pour relâcher des ressources sans bloquer l’affichage de notre application.

Conclusion

Malgré toutes les fonctionnalités expliquées dans cet article et le précédant, il reste encore certains points que je n’ai pas détaillé. Par exemple, les routes de type catch-all, le Protected Browser Storage pour Blazor Server ou encore le prerendering pour Blazor WebAssembly. Comme ce sont des sujets qui ne se résumeraient pas nécessairement en quelques lignes, je préfère les garder pour des prochains articles. Pour connaître la liste de tous les changements de Blazor avec .NET 5, vous pouvez consulter cette page de documentation. Et évidemment, suivez-nous sur notre chaîne Youtube, notre page Facebook et ce blog pour de futurs vidéos et blogues sur toutes ces fonctionnalités!

Blazor et .NET 5 – Partie 1

Avec .NET 5 qui est à notre porte, plusieurs nouvelles fonctionnalités seront bientôt disponibles pour Blazor et tous les utilisateurs de l’écosystème .NET. Dans cet article, j’avais envie de faire un survol de quelques possibilités qui s’ouvrent à nous en ce qui concerne Blazor. D’autres suivront dans une deuxième partie à paraître très bientôt.

Continuer la lecture de « Blazor et .NET 5 – Partie 1 »

Blazor et Typescript – Les Tests

Dans mon dernier article, je vous expliquais comment faire du Typescript avec Blazor. Grâce à ceci, nous n’écrivons plus de JavaScript. Je parlais aussi d’un manque à cette solution, que je vais vous expliquer dans cet article. Maintenant que nous faisons du Blazor avec un peu de TypeScript, l’élément à ne pas oublier est le suivant: Les tests.

Continuer la lecture de « Blazor et Typescript – Les Tests »

Blazor et Typescript

Blazor nous permet une des choses les plus agréables au monde; écrire beaucoup moins de JavaScript. Ce qui est encore mieux, c’est de ne plus en écrire du tout! Grâce à Typescript, il est possible d’éliminer complètement l’utilisation de JavaScript de nos projets Blazor. Continuez à lire pour voir comment!

Continuer la lecture de « Blazor et Typescript »

Blazor Day 18 juin 2020

Cela fait quelques temps que je n’ai pas eu l’opportunité d’écrire ici, la vie et les occupations étant ce qu’elles sont. Je n’ai pas eu la chance d’écrire sur tout pleins de belles annonces comme le lancement officiel de Blazor WebAssembly! J’ai donc cru bon vous informer d’une belle nouvelle concernant le Blazor Day qui aura le 18 juin prochain.

Continuer la lecture de « Blazor Day 18 juin 2020 »