Building omni-channel experience with Sitecore Experience Edge & Mobile Blazor Bindings

A few months ago, I read about a new release from Microsoft called Mobile Blazor Bindings and it sounded really interesting, a way to embed a Blazor application inside of a Xamarin Forms application, meaning you could leverage web tech in building out your mobile experiences, how cool is that! I recently released a video covering my learnings which you can see below, this is a post summarising what I was working on.

Omni-channel experiences

Earlier this year we released Sitecore Experience Edge, designed to power omni-channel experiences. In our department at Sitecore we worked on a project to leverage Sitecore Experience Edge in building out a new Edge Portal. This has been a really interesting project and I’ve got to learn some new technologies in the process, like Nextjs, Material UI, & Vercel to name a few. One of the main benefits to using Sitecore Experience Edge is how it can be used to power content for multiple channels, we had proved out the web channel as part of this project, but I wanted to add another channel. This gave me a great idea, why not replicate our portal site in app form using Mobile Blazor Bindings? What a great way to test out this new product we released and also get to play with some cool new tech. So, I fired up Visual Studio and dived straight in…

Version 1 – Building for the mobile channel

Building out the mobile channel turned out to be very easy to do. As I could now build using web tech, it was a simple matter of lifting the markup & static assets that we’d used on the Edge Portal and re-using them in my mobile app. This worked like a charm and using standard GraphQL.NET made it super simple to pull my dynamic data from Content Hub using Sitecore Experience Edge. The beauty of working with Mobile Blazor Bindings in this way is that I could now publish this application to Android, iOS, MacOS and Windows. This got me thinking though, how much more powerful would this use case have been if we had also built the web channel in Blazor? So that’s what I did next…

Version 2 – Adding in the web channel

I started by splitting out any components & services that I would want to share between the different channels. I moved them into a couple of new projects, a Razor Component Library to hold the components and a Class Library to hold the services used to pull data from my Experience Edge instance. I then introduced a new Blazor WASM project that was going to hold my web application. What I now had was a true code sharing between all of the different channels that I was working with, a really powerful way of working.

Conclusion

You can check out the video linked above to get a more detailed overview of this work, and also checkout the code in GitHub. All in all, I really enjoyed working with Mobile Blazor Bindings and found it really simple to create cross channel experiences with large amounts of code sharing between them, I would recommend giving it a try!