How to get the user GPS coordinates with Blazor using BrowserInterop? I already said it, Blazor is awesome. But it got downside. One of these downside comes from the fact that it relies on WebAssembly. WebAssembly doesn’t provide browser API like the Geolocation API. For getting a user GPS coordinates (with his/her approval of course), we need to use JSinterop so we can call the Geolocation API. Because integrating these methods can be tedious I created a package called BrowserInterop which implements JSInterop call for many browser API. You can have a look at the repo WIKI to see the implemen ..read more

SOLID are not rules but guidelines This article expose my opinion that I got from my own experience and taste please, do not feel offended if you do not agree with it. Off course I might be wrong, it happens everyday. What is SOLID ? SOLID are a set of principles for Object Oriented programing that are supposed to help you build great software. By great I mean maintainable, bug free, fast … SOLID is an acronym where every letter is one principle. From my experience, you shouldn’t follow them blindly but think about it, understand it and find where the added value can be. In this article we’ll ..read more

How to have realtime update in your app with Blazor WASM, SignalR and MediatR One of the big problem with web app is real time update : most of the traffic is from the client to the server, so the server cannot say anything to the client like “there is a new message for you”. Fortunately, there is many technical solution for this : server-send events, long polling, web socket … In the .net world we are very lucky because there is one project that helps abstracting over which solution to choose (some of them are available only in some web browser or only in some web server) : SignalR. I will ex ..read more

How to keep Javascript object reference in Blazor on .NET side ? You can’t do everything in Blazor with .NET alone. If you want to use a JS lib or get information from the browser, you need to use JSInterop. When you need to communicate between 2 system or subsystem, you often need to “keep” a reference of something from the other side. For example when you call a “create payment” API, there is a lot of chance that it’ll send you a “paymentId” so you can call other API with this ID and do action like “refund” or “cancel”. For in-memory application it’s a bit cumbersome to do it with ID by han ..read more

How to send callback method to JSInterop in Blazor ? Blazor client-side or server side can handle only CPU bound calculation. For every interaction with the browser you need to use JSInterop. Even on Blazor itself the team uses JSInterop for using browser API like XHR request or DOM update. Currently in the JS Interop API, you can do only one thing : call a given method connected to the “window” object with 3 kind of parameter : C# object serialized via System.Text.Json and deserialized via JSON.parse Html element (ElementReference in C# side) Reference to C# object on which you can then ..read more

How to profile a production Blazor client-side app ? Performance optimization is one of the programming task that I prefer. It’s really rewarding and requires knowledge, practice, creativity … The first thing you need to learn when optimizing performance is that you should always profile before optimizing. And always, when possible, favor production profiling instead of developer or staging profiling. Why ? Well you optimize for your production environment and this environment has different CPU, disk, memory, OS … specification than the other environment. So If you want your work to be useful ..read more

Test your JSInterop code with cypress.io Cypress.io is a game changer in the world of web E2E test. So far it was dominated by WebDriver based framework but it has the following advantages : It’s easy to setup It’s easy to integrate into a CI pipeline The API are fine (I still don’t like the assertion methods) The debug information it provides are golden and makes your tests easy to fix There is a lot of methods for making your tests less flaky (you do’nt have to add random wait every 2 lines) The only disadvantage being the maturity of the tool so there is some missing pieces like bu ..read more

Should I peek Blazor ? ALL THIS BLOG POST CONTENT IS MY OPINION. IF YOU HAVE A DIFFERENT ONE PLEASE POST A COMMENT On Twitter or Reddit I often see question about whether Blazor is a good choice. In this blog post I will try to ask questions that might help you making this decision. Quick presentation What is Blazor ? You will get a good description of Blazor from the official website : https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor. It belongs to the family of the SPA framework like Angular, react or vue. Blazor is a framework for building web UI using C#. It has 2 ways of wor ..read more

How to improve your development experience with Blazor At first Blazor development can be a bit slow. When doing a change on a razor file you need to do the following steps : rebuild your front end project rebuild the backend restart your backend refresh the browser go back to your work In this article I’ll explore a few things for improving life of Blazor developers. Improve build time by disabling Illinker The Illinker is a great tool as it removes all the unused things from the dll files produced for your project. The second advantage being that it will find diamond dependency pr ..read more

How to test a Blazor app with Cypress using docker-compose On my Toss project, I chose to have some end-to-end (e2e). End-to-end test on web project are tests that automate a browsing session on a web browser. Most of the time it works by using API provided by an existing browser (like chrome). Those kind of tests have many drawbacks : Force you to add ids everywhere on your html code so you can find element on your test code Are often flaky because some load time might vary between two test run or you can change your front-end code without thinking about the changes needed in the test Are ..read more