The DroidDevCast

An Introduction to Blazor: A C# Based Client-Side Web App Framework

Episode Summary

On this episode of The DroidDevCast podcast, Esper Platform Evangelist Rin Oliver spoke with Deployed Principal Software Developer and Manning Publications author of Blazor in Action Chris Sainty to learn more about Blazor, a C# based front-end framework from Microsoft. Blazor blends HTML markup and C# components for use in front end web development, giving developers the the ability to also run C# in the browser.

Episode Notes

On this episode of The DroidDevCast podcast, Esper Platform Evangelist Rin Oliver spoke with Deployed Principal Software Developer and Manning Publications author of Blazor in Action Chris Sainty to learn more about Blazor, a C# based front-end framework created by the ASP.NET development team at Microsoft. Blazor blends HTML markup and C# components for use in front end web development, giving developers the the ability to also run C# in the browser.

In this Episode of The DroidDevCast: 

00:55 - How did you get started with Blazor?
04:43 - What are some of the key benefits to working with Blazor for developers?
08:39 - What are ways that Android developers can benefit from using the Blazor framework?
10:46 - How can developers build and work with APIs using Blazor?
11:55 - What are some of the other ways that Blazor helps developers leverage the power of API-based solutions?
14:03 - What’s your favorite thing you’ve built with Blazor? 
16:48 - What’s a piece of advice that you would give to someone that was interested in getting started with Blazor?

Episode Transcription

Rin Oliver (00:07):

Welcome to the DroidDevCast, a podcast brought to you by the team at Esper, bringing you the latest news, thoughtful discussion, and insights into all things Android, Android DevOps, and open source software development. I'm your host, Rin Oliver, platform evangelist to Esper, and today I'm joined by Chris Sainty, author of Manning Publications book, Blazor In Action. Chris, thank you so much for joining me today.

 

Chris Sainty (00:24):

Thanks for having me, Rin.

 

Rin Oliver (00:26):

You're very welcome. And we're here this week to discuss Blazor. For those of our listeners that may not be aware of it, Blazor is C# based front-end framework from Microsoft, which makes it really easy to create web applications without the limitations of typical JavaScript based tools. Blazor components blend C# and standard HTML markup so that you can build front ends using the same technology as a shorter cycle. With Blazor Web Assembly, you can also run C# code natively on your browser, which is really awesome. So Chris, to start off, can you tell our listeners a bit about yourself? How'd you get started with Blazor and once you did, what made you decide to write a book about it?

 

Chris Sainty (00:59):

Yeah, cool. So I've been a software developer now for a very, very long time, I'm getting quite old. 15, 16 years plus I think, and I've always worked with the .NET stack. I've always been quite front-end focused. I've always liked the front-end side of things sort of lesser than the backend as such. So the Blazor framework for me was the bit I was missing from the .NET ecosystem, I guess. We've always been able to build great server-side applications using ASP.NET, whether that's Web APIs, or Blazor Pages, or MVC, but we missed a true client-side UI framework. And that's exactly what Blazor is. And that's what really peaked my attention with it. So what happened was a few years ago, I came across a video on YouTube of Steve Sanderson, who's a member of the ASP.NET dev team, giving a presentation. And in it, he showed the first early prototype of Blazor and, yeah, it was just amazing. Seeing real C# code run in a browser was just absolutely insane to me.

 

Chris Sainty (02:20):

And I was still on Google trying to find out how I could go about it and stuff, and I found his repo that he had in his personal Github when he was developing the prototype. And then they had a prototype repo in the ASP.NET experimental repository, so I got my hands on that. And so they were trying to develop it and as an experiment to see where it went. And so I downloaded and cloned the repo and tried to run it and start playing with it and stuff like that. At the time, weirdly enough, I was looking for something to start blogging about because I wanted to get into blogging. Everyone had told me how good it was for you as a developer, you learn more and you can obviously give back as well to the community, which was so one of the key things I wanted to do, but I was really struggling for a topic. And then I found Blazor and it was like the stars aligned as it were, and I was like, "Okay, this is my thing."

 

Chris Sainty (03:16):

So I started writing about it. I think the day or two days, I think after the very first experimental preview came out, I published my first blog post on Blazor. And now I've written, I think 60 plus I think blog posts on my blog about it, and I've guest posted for several other blogs. So I've written quite a few articles for Progress Telerik, I've written for Stack Overflow, and Visual Studio Magazine as well. So that was quite good. And then I'd still been doing that for a while and I'd also started to write some open source packages and things to go with Blazor. And then one day I got an email from someone's always saying, would I be interested in writing a book? So then I spent in touch with Manning and yeah I spoke to her acquisition editor there and we worked on a proposal and I put a proposal in and then to my absolute astonishment, they accepted it. And yeah, and now we're here and I'm writing a book, which a little bit surreal to be honest, but yeah.

 

Rin Oliver (04:27):

That was wonderful. That's really great to see that you took it from blogging to writing a book. That's great. I wish more people would do that, take your blog to write a book. And if you really love something, you can write a book about it.

 

Chris Sainty (04:41):

Definitely.

 

Rin Oliver (04:42):

Yeah. So in your opinion, what are some of the key benefits to developers working with the Blazor programming language? What can they use it for and why should they?

 

Chris Sainty (04:51):

I'll just clarify Blazor being a framework rather than a programming language. The Blazor framework, I think for me is very, very productive. Now I know that very much depends I guess, on your background and what you do to how productive you will be in something. But C#, I think is a very productive language yet. It's something that I think you can learn pretty quickly and you can be productive in pretty quickly. Because Blazor is heavily based on using C#, it sort of makes that whole process very sort of quick to learn. And if you're someone who's got any kind of background with using .NET and C#, Blazor kind of just makes sense. It's kind of that thing where if you know how to do it in C#, you can probably just do it in Blazor.

 

Chris Sainty (05:40):

Like if you want to write a for each loop in Blazor, it basically is exactly the same as you would write in C#, except instead of more C# code in the middle you've probably got some HTML mixed in there. But it's exactly the same syntax, it does exactly the same thing. So I think if you're coming from that kind of background, the learning curve is quite shallow to be able to produce something, which I think is a massive benefit nowadays, because we live in a time where there's lots of frameworks, there's lots of different ways that you can do things. And sometimes that involves changing your stack, you have to jump from one language to another. That's context switching. Context switching takes away productivity because you have to kind of run down from one and ramp up onto the other.

 

Chris Sainty (06:28):

And with Blazor, if you're running .NET everywhere, then it just works and you can just get on with things. I think if you're a non-.NET developer and you're someone who's maybe looking to get into .NET development, and you're coming from maybe a JavaScript background or something like that, then again, I'll say the same sort of things, really. I think C# is a good language to learn. I think it's a fairly quick language to learn. And I think again, you'll still be quite productive in it quite fast because the HTML aspect, CSS, that kind of thing, that all just obviously is all exactly the same with Blazor. Blazor is a web standards based framework. It doesn't have anything proprietary in it at all.

 

Chris Sainty (07:12):

So that stuff you already know. You can even interrupt directly with JavaScript from Blazor. You could even ramp up onto Blazor from a JavaScript background by actually writing JavaScript code and then interrupting with the C# side of things, and then slowly move more of your code over to C# as you get more familiar with it. So I think depending on which way you're coming from, you can really kind of get to grips with it quite quickly. And then once you're there, Blazor has just got kind of so many great features in. And people often already forgetting that Blazor is a very, very young framework.

 

Chris Sainty (07:50):

It hasn't even been out officially for a year yet, but we have things coming in .NET five, which is our in November, so this month. We're getting things like scope CSS, we can load JavaScript using JavaScript modules dynamically from C#, for a running application we've got lazy loading. So you've got a lot of the key things that are present in other front-end frameworks. And for a framework this young sort of having all of these bells and whistle features so early on, I think is a huge benefit as well.

 

Rin Oliver (08:27):

I agree completely. I think that that's absolutely correct. And I think that Blazor can be really beneficial. And I think it's a really interesting framework. And to that extent, C# is one of the most powerful languages that's used in programming today. What are some ways that you feel developers maybe switching to working with an Android based operating system can benefit from using the Blazor framework?

 

Chris Sainty (08:48):

So that's an interesting question, I guess, an Android based operating system, I suppose it doesn't make a huge of difference to Blazor as such. So I guess that's actually a good benefit to highlight is that I know when I sort of speak to people who are outside of the .NET ecosystem as well, a lot of people don't realize that .NET core is a cross-platform framework now, .NET is no longer just for windows. So when it comes to Blazor, if you're on an Android based operating system, any Linux based operating system too, you can write Blazor applications absolutely fine. Blazor is deployed in VS Code, which is probably one of the most popular editors out there now, especially on non-Windows operating systems.

 

Chris Sainty (09:37):

So you can write Blazor applications using VS Code. Say .NET core is running cross-platform now on all operating systems, Windows, Mac-OS, Linux, that will work on all of those. And obviously C# runs on top of that framework, so that works everywhere. You can basically do whatever you want, really. And it doesn't really matter about the operating system. So if you're an Android-based operating system, then all of this is for you. You can work with Blazor, you can work with .NET, you can work with C#, all the tools are there for you. And Microsoft's really committed now to this cross-platform model and exposing these products across all of the different operating systems for everybody to use. So I think that's probably the key thing to highlight, really, is that if you're an Android-based operating system, then there's no limitations.

 

Rin Oliver (10:35):

I agree completely. That makes a lot of sense. The no limitations is actually really great because here at Esper, we work a lot with APIs. For example, we built a custom portal for Esper for internal use using our own REST API. So how can developers achieve something like this to use at their own company by using the Blazor framework?

 

Chris Sainty (10:51):

Yeah, cool. The great thing about Blazor is that while it works really well where you have a .NET backend, so if you've got a .NET API then it fits really well with that, but you don't need .NET anywhere else in your stack to use Blazor. So Blazor is, as I mentioned earlier on, it is a client-side framework and it's a standalone client-side framework. You can write Blazor apps and you can call any backend API you want. So you can call PHP backends, node backends, it doesn't matter. Blazor will just use normal HTTP calls and you can just interrupt using HTTP without any problems at all. So the great thing is if you've got an existing REST API and you're interested in building a UI for it and visualize some of that data, make some of those tasks a bit easier to do through a nice UI, then Blazor is a tool that can help you do that. And let's say you can build that agnostic of whatever your backend technology is.

 

Rin Oliver (11:55):

That makes a lot of sense. That's actually great to hear. And what are some of the other ways that Blazor helps developers leverage the power of API-based solutions?

 

Chris Sainty (12:03):

Yeah. So another great thing about Blazor is, because it is .NET at the end of the day, a lot of .NET stuff works on it. And one of the cool things that's being played around with it at the moment is GRPC. So if you've got GRPC-based APIs and things like that, you can still use Blazor for those. So that's quite a cool thing, but I think one of the most powerful things with Blazor is where you do have a .NET backend, because you can actually share code between your backend and your front-end, because it's C# through the entire stack. You can actually take models like, people call them different things, but DTOs, or models, or whatever that you would normally use to transmit data back and forth between the client and the API. You can take those and put them in a shared project, and you can reference that project from your Blazor app and from your API. And now if you want to update a model, you can do it in one place, and instantly both applications are using that new updated model.

 

Chris Sainty (13:08):

Historically, I've built apps using angular and .NET backends, and we were using JavaScript initially, and then we use TypeScript, and you end up in the scenario where it always happens at some point, something gets out of sync. So you change a model in the backend and you forget to update that property on the TypeScript model in the front-end, and then you run it, and then something doesn't quite work or you get some weird behavior, like what's going on here. And it's because you missed a property, or you forgot to add one, or whatever. So you sort of always have to juggle that and make sure you can keep everything in sync, whereas with Blazor, if you're running full stack .NET, that problem entirely goes away by just sharing those classes through a shared library. And I think that's a huge powerful aspect of Blazor.

 

Rin Oliver (14:00):

That's amazing. That's really, really cool. And what's your favorite thing that you've built with Blazor?

 

Chris Sainty (14:07):

Oh, that's really interesting. What is my favorite thing I've built with Blazor. It's typical, of course. I've gone completely blank now on everything I've ever written in Blazor. I'll tell you what one of the things that I've most enjoyed is I've got an open source package that I wrote, which is a type head component. Again, people call them differently, type head or a complete... So you can type in a box, it's going to go off to a server or some local data source and give you some suggestions in a drop down. As you type they'll fill it down, you can select them. And it's all customizable so you've got customizable templates for this search suggestions for the selected answer and all this kind of thing. And it does allows you to select multi answers and all this kind of... so all the bells and whistles stuff that you'd expect from that kind of control.

 

Chris Sainty (15:03):

And yeah, I've written that from the ground up and never ran a control of that before. It's pretty much all C#, I think I've got one piece of JavaScript in there, I think. Although I think I might have actually removed that now. And that to me is probably been the most interesting thing for me to build so far, because I've just never built those types of controls from scratch before. Because when you're doing Angular, or React, or whatever you want dealing with a framework, those controls already exist and there's just no point reinventing the wheel. Whereas the Blazor ecosystem is so new, especially when I started, none of these controls existed.

 

Chris Sainty (15:44):

So it was an opportunity to actually think about how to build a control like that, how that should work, understand sort of some nuances of it. And that was my sort of first real go into open source work as well. So I've got quite a few packages now, about six or seven, that I have in my Blazor organizational Github, and I think we've got about half a million plus downloads now of those. So it's been a really interesting experience doing all of that. So I think that's probably the most intriguing thing I've built so far.

 

Rin Oliver (16:15):

That sounds amazing. I love everything about it. That's really cool. That must've been a really, really interesting undertaking, and that's really awesome that you saw that through to completion. That's wonderful.

 

Chris Sainty (16:28):

Yeah. We are done about complete, there's definitely still a lot of open issues on that repo. That's the problem with open source, if you build something and people like it, they just want more.

 

Rin Oliver (16:37):

They sure do. That is very true. You're always like, Oh, there's more open issues. Maybe I should triage these.

 

Chris Sainty (16:44):

Yeah, definitely. And it's like, Oh, I didn't realize that could be a feature. Okay.

 

Rin Oliver (16:48):

Exactly. Lastly, really quick here, what's a piece of advice that you'd give to someone that was interested in getting started with Blazor. And is there anything you'd recommend they'd pick up, of course, in addition to your book?

 

Chris Sainty (17:00):

Yeah. So the Blazor ecosystem is quite new, but it's flourishing, it's vibrant. The .NET community have really embraced Blazor, and there's a lot of interest around it. So there is loads and loads of great blog posts. But in terms of getting started, the standpoint I'd say was go to blazor.net, that's the official site. From there you can get to the official doc site, and the Microsoft doc site now is an amazing resource. It's really rich, really well thought out, really good examples. So that's a great place to get started and you can understand the framework from there. Then outside of that, there's a couple of other things that I'd really suggest. There's a community-run repo called Awesome Blazor, which is kind of following on from the various awesome repos that are out there for lots of different technologies, and it's absolutely jam-packed with blog posts, articles, YouTube videos, talks, code samples, example apps, libraries, anything Blazor related that anyone's built is in that repository as a reference.

 

Chris Sainty (18:08):

So that's a great place to go to, to sort of see what people are doing with it and get lots of good information about Blazor. And then the other thing I'd really suggest to anyone new with Blazor to kind of really understand it is the Blazor team themselves actually created a workshop, which is hosted on Github. So there's a Blazor workshop, which I think you can get to through a link, which is aka.ms/blazorworkshop, and that will take you there. And basically it's a two day workshop, or it's a bit quick than that if you're doing it on your own. But it was originally designed for in-person conferences, I think we can all barely remember those now. Originally it was done over these two days conference like a pre-conference course thing, but you can do it self-guided as well.

 

Chris Sainty (19:05):

So they've included all the notes and the instructions to go with it. So you can go to that repo, clone it, and then you can basically follow along the instructions, and it guides you through building a fully kind of functional pizza ordering app, like a Domino's clone or something. So you can go on there, you see loads of pizzas, you can add one to a basket, you can customize it, set what size you want, you can then order it, and you can sort of watch it being delivered to you on an interactive map as the delivery driver comes closer to you. And I think that is a fantastic thing to execute, especially if you're like me, I learned by being hands-on. So being able to build something and understand the different features of the framework by building something with them, I think is really valuable. So those are the kind of the three things I would really recommend people look at if they want to get into Blazor.

 

Rin Oliver (20:01):

That's a great starting point for anyone. Those are wonderful resources. Chris, thank you so much for joining me. I really appreciate it. This was great.

 

Chris Sainty (20:08):

Absolutely, my pleasure. And thanks very much for having me.

 

Rin Oliver (20:12):

Thank you so much for joining us on this episode of the DroidDevCast. We'll be back next week with another exciting show for you. Please remember to like, subscribe, and share this episode on social media. You can also follow us on Twitter at @esperdev, and subscribe to our YouTube channel to keep up with all the latest happenings here at asper. If you'd like to save 35% off any Manning Publications product in any format you can do so by entering the code poddroiddev20, no spaces, all lowercase, and checkout on manning.com. We also have five free ebook copies of Chris's book, Blazor in Action, to give away to five lucky listeners. Please email me at rin@esper.io to claim your copy. And remember, as there's only five copies, it's first come first serve. You can listen to the DroidDevCast on Apple Podcasts, Spotify, Simplecast, or wherever you get your podcasts from. Thank you again for listening.