SPEAKER_00: 0:06

Hello, welcome to another episode of Microsoft Community Insights Podcast where we share insights from community experts. Just to stay up to date in Microsoft. I'm Nicholas and I'll be host today. In this episode, we'll dive into Blazor. And just before we get started, remind you to follow us on social media so we never miss this episode. Today we have a special guest called Jimmy Henstrom. Could you please introduce yourself?

SPEAKER_02: 0:32

Yeah, absolutely. My name is Jimmy. I work as a lead developer for a company called CAB Group here in Sweden. And I've been a Microsoft MVP for 11 years now. And I am a podcaster just like you. I have uh a podcast called Coding of the Work Podcast, where we do some YouTube stuff. We're doing some audio podcasting and all of that goodness. So yeah, that's basically me.

SPEAKER_00: 1:04

Okay, so what's your you say you've been an MVP for 11 years or so? 11, 15 years? What are you what category are you in?

SPEAKER_02: 1:14

So I started off uh for in uh I believe it was called Windows Development back then. And now I am in DevTech. So uh more transition from Windows development to more uh well, Blazor basically is uh my special speciality.

SPEAKER_00: 1:32

Okay, so since today theme is all about Blazor, can you give us like a background what is Blazor? Because I've not heard about it, and why how did you get into it?

SPEAKER_02: 1:47

So Blazor is a web UI framework from Microsoft, and it is very similar to React or Angular or whatever all of these different frame uh front-end frameworks you can you can think of. But what makes this special is that it is C sharp, so I can do front-end development using my already existing knowledge in C sharp. And for me, it started with um a demo that I saw, I think it was at MVP Summit. Uh must must have been 2017, 18 maybe. Uh, and I thought, hmm, that would be kind of cool doing some front-end development, making our sites and all the things that we're working with interactive, and still not have to go to TypeScript, TypeScript or or JavaScript. And we were just a week or so before we were launching something new, our our new, I think it was the CRM system, the new version of the CRM system. And I talked to my colleague and I said, you know what? Um, I saw this really cool thing. Uh this was uh a year or so after MVP summit. Uh so at this point, Blazor was just releasing. It was uh must have been what was I think it the first version was in.NET 3. Don't quote me on that. Uh so it was just released. We were we were using.NET, whatever version that was. And I thought say said to my colleague, you know what? I'm just gonna show you this, uh, check it out. Maybe we'll use it someday. Maybe. So I showed him this was just a very simple select box or something like that. Very, very simple. And I showed him, take a look at this. I'm using this, I'm showing uh I'm I'm getting all of this stuff happening, and I basically didn't write much code at all. And my colleague was like, Huh, but how does it huh? I wanna hmm. We really couldn't figure out how it knew that things are going to update just because we changed a couple of things. And he he just said, Well, this is what we're doing from now on. This is what we're we we're gonna rewrite everything, this is the platform we're gonna do it with. So seven days later, we actually went into production with that drop down, just that drop down. We had a lot of stuff. We had an MVC, we had Razor Pages, we didn't touch anything of that. We just introduced that single drop down, that page, I believe, or component. And honestly, it changed our world. It was just so easy to get really into cool interactive stuff out there and doing it fast.

SPEAKER_00: 5:14

Because you say there's less code in React. Does it mean that you don't really need to be into programming, but you still need to know the fundamentals, then you can get started in React? Uh in Blame series. Yeah, in blends and stuff. Because it's use you said you use Java, right?

SPEAKER_02: 5:33

Is that uh JavaScript.

SPEAKER_00: 5:35

Oh JavaScript.

SPEAKER_02: 5:36

Um I mean, compared to just to back up a little bit, we were doing MVC, we were doing Razor Pages, we didn't do React Angular, or I think I think those were the two that were popular at that point. Uh we started adding React in one of our pages, and it was a uphill battle because we didn't know TypeScript, we didn't know what how to get everything hooked up. So it was a lot of things that we needed to learn to even get there. But with Blazor, I mean, I I wouldn't say there's less code, but there's a lot of things, all the boilerplate stuff is just there, it just works. When when it comes to Angular and React, well, you need to know a bunch of things about that that we didn't know, we didn't know that. So it was a very long uphill battle for us to to figure all of these things out, and that's why Blazor just was the perfect solution for us.

SPEAKER_00: 6:48

Yeah, when you mention bullet plate, you mean like templates do you use to like create new like classes just things?

SPEAKER_02: 6:56

Yeah, I'm I'm thinking about more more setting everything up because with with React and Angular, you need to have these JavaScript um dependencies, yeah, and and uh you you need to pack the the um uh JavaScript. Um you usually uh distribute it into smaller files, and there's a lot of stuff that you need to understand, get in there, and kind of get this whole ecosystem around it up and running. But when it comes to Blazor, the ecosystem is.NET. There's nothing else you need to drag in there, there's no mpm, there not no no things around it, it's uh it's NuGet packages, it's the same workflow, it's in Visual Studio, you have all these workflows. If you can deploy an ASP.NET site, you can deploy a Blazor site as well.

SPEAKER_00: 7:57

Okay, so if someone knows.NET, they can easily get to know Blazor. Yes. It's it's very similar, similar X-Framework.

SPEAKER_02: 8:08

It is very similar. I actually did a video not that long ago talking about do we need to know React or or Angular to become Blazor developers? And some people think so. Uh they they say that knowing I'm I'm gonna paraphrase um I'm I'm just gonna mention Angular in this case. I mean it's Angular, React, or View, or whatever framework, but is it is it necessary to know Angular to become a Blazor developer? I didn't know it. I think I can manage pretty good. Uh so no, you don't need to. Uh, there are some people that think that it is an upside. You uh you do get some benefits of knowing Angular just to understand how things are hooked up and how they work in the background. Basically, Angular, React, and Blazor work very similar. They have a um shadow DOM in in the JavaScript world. In Blazor world, it's called a render tree, but it's the same thing. It's a DOM that has all the all the stuff you are supposed to show on the web page, and then you have the DOM, the the uh page that you're actually showing up. Yeah, and what Blazor, Angler, and React does, they're checking the shadow DOM or the render tree, they're checking the DOM. Do we have any differences between these two? Yes, okay, let's update it. No, okay, good. We don't have to do anything. So they they're basically done the same way.

SPEAKER_00: 10:00

Okay, so you just compare it if there's any differences, then you just work on that. Yeah. Okay, so from your experience, how would you go ahead to substitute an issue with Blazor?

SPEAKER_02: 10:16

First of all, the the really nice thing with Blazor is uh now I mean I come from the.NET world. Yeah, so it might not make sense for a a JavaScript developer to go the Blazor route. I don't know, it might, but uh, I can tell you a story later on as well. But when it comes to troubleshooting, the errors that you get are.NET errors. Okay, you're not getting JavaScript errors, you're not getting WebAssembly errors or whatever it may be, you're getting.NET errors. That is not 100% true, but in 99% of the cases, you're actually getting.NET errors. So if you if you get that, yeah, well, then you can just Google for it or or uh chat GPT for it, whatever your flavor is.

SPEAKER_00: 11:15

I guess it's probably harder, it's hard to find Blazor error, specific to Blazor, because you say.NET is is one of the framework in Blazor.

SPEAKER_02: 11:25

Yeah, there is there are of course some very blazer-specific stuff, but the Blazor community is it's large. It's not huge compared to uh, I mean Angular React and Orview or whatever it may be, but it is definitely growing and is growing fast.

SPEAKER_00: 11:49

Okay. And you said the way you you you got you you fell into Blazor by producing that demo in MVP Summit. And then you did you try other like languages like.NET as well, or you just chose Blazor and then you just pursue it?

SPEAKER_02: 12:09

Well well, we did do a a little bit of React and Angular and stuff like that before that, but we we just felt that it was too much to learn, and just seeing how well this worked with everything else was it was a no-brainer. Now, fast forward a couple of years, and and we we were doing a very large project. We were basically ripping out our whole backend. Uh, I was working at a bank at that point, and the back the the back end that we were using was shutting down, they were no longer gonna have that service. So there was a lot of banks in Stockholm in in Sweden that were doing this move at the same time, and we were six developers at that point, so um, the whole team was six developers, and there were other banks, as I mentioned, doing the same move, and that me, I mean, there were 60 developers, were 10 times more developers than we were. Uh, and I'm not saying that this was because of Blazor, but for us, it was definitely uh because we chose to do something that we already knew. So we were the first bank out of that. That were we we were finished first, we were um, we didn't have a lot of of uh problems or issues. Uh it was not zero issues, but it was very few. And I would say that for that project, Blazor saved us because if we were going with Reactor Angular being the dot net team that we were, we would not have made it in time.

SPEAKER_00: 14:15

Okay. I so I guess one a sec. What are some of the one sec. Uh so that's one of the way you fell into Blazor. In order to produce like high-level uh program in Blazor, like production ready program, do you need to know JavaScript? Do you need to put use JavaScript into Blazor application or just write it in Blazor itself?

SPEAKER_02: 14:43

So in the beginning of Blazor, there were some things that we had to use JavaScript for. The kind of simple things like changing the title of a page, for example. You had to do that in JavaScript, which was very weird. Nowadays, most things are um there are APIs inside of Blazor, or there are ways of doing it from inside of Blazor. So nowadays I would say for a production ready app, let's say a line of business app, yeah, I would argue that there is um zero to very, very little JavaScript involved. Sometimes we need to do something that is a little bit uh strange, if you will. Let's say that we have a oh I only can come up with bad examples here, but let's say that we have a um we need to click something, and when we do something is going to show up. This is pretty easy to do with Blazor as well, but some people prefer doing JavaScript calls to do that, for example. Uh but for the most part, I would say no JavaScript. There is also component libraries, so all major component library vendors has a blazer library as well. Um I'm I'm talking about um Progress Teleric, Sync Fusion, um DevExpress, all of these major players do have uh or offer a Blazor library. Same thing goes, there's a lot of open source libraries as well. And why I'm mentioning that is because I would say all of them is using JavaScript in some way or form, but I don't have to write that. The people that knows how to make components have written that for me. Oh yeah.

SPEAKER_00: 17:01

So in a Blaze it, you can use that component like a library or something or API.

SPEAKER_02: 17:07

Yeah. So uh depending on how you see it, in a production line of business app that are using a component vendor library. Yes, in that case, JavaScript is involved, but I don't have to use write JavaScript. There's also like, okay, let's let's think about um let's compare the frameworks. I mean Angular React, well, they are basically only JavaScript or TypeScript. Blazer is almost only C sharp, and then there are some some other um there are some other things that you might want to do that you might need to go the JavaScript route. One typical it would be um okay, so I have this um really cool JavaScript library and I want to continue using that library. Well, then you have to go with JavaScript, of course. I would say that if you have a library that you're really fond of and you really want to use it, you should may um you should grab that one and then build a blazer component out of that. Still using the JavaScript stuff and and stuff like that, but abstract it away from the end user or or the end developer, I guess. So that the developers don't have to think about that.

SPEAKER_00: 18:41

Yeah, I guess you have to think of which one of the libraries or APIs is more up to date, whether it's Blazor is more up to date in the community, or it's like updating, then you'll be using Blazor over JavaScript. So I guess you'll add resources as well. Documentation.

SPEAKER_02: 19:01

Um yeah, uh, and I mean uh documentation is uh there there's a lot of documentation out there. Uh and when it comes to these, um I mean I mean if you if we're choosing a uh a um third-party vendor, yeah, in that case, there's a lot of free stuff out there. There is a lot of of non-free stuff out there, and I mean you just have to think about where you want to spend your money, basically, because the free stuff, well, it comes at a price as well, because you need to think if there's something broken, you need to fix it, or you can rely on the community. On the other hand, we have these major component vendors, which is if you're paying them, they are going to help you solving your problem. So there is a a yeah, 50-50.

SPEAKER_00: 20:00

Yeah, I mean, uh, there is no open source, or you want to pay something to get more value from it, or to get up to date, get like you get more support or something if you want to pay with libraries.

SPEAKER_02: 20:14

I mean, there there is a saying there's nothing uh like a free lunch, and I think that it's true even for open source libraries, that there is a cost of using them as well. Uh now I would argue that the ones uh I've been using in the Blazor um in the Blazor community is is pretty pretty good, to be honest. So I for most developers, I think they're gonna be fine using uh any third-party vendor, really, because they they have a lot of stuff out there. When it comes to picking the right one, I would argue try to figure out what kind of components you need that you want to use, and then choose the vendor depending on that. Because either vendor you choose, you're gonna get the you're gonna get the great component, but it also depends on do they have what you need. Uh almost every single third-party vendor that I've used has had something that annoys me.

SPEAKER_00: 21:31

So oh, they're doing it this way, okay. Ah yeah, it could be like the support agreement is different, those things as well. So it could be various different things.

SPEAKER_02: 21:41

Um, but um my my absolute tip here would be if you're using a third-party vendor, uh either paid or or free, always add an abstraction layer. So let's say that we have a text box component, add your own layer on top of that, because there's almost always going to be things that you do over and over again. So let's say that you have a text box component and you always want to um you always want to set a style, or maybe you want to set a um mud blazer, for example, has different kinds of kinds of styles on the component, uh, material, uh, and a couple of different other styles that I can't remember from the top of my head. Uh, but you always want to set that on all your components. Well, if you abstract that away and you create your own abstraction on top of that, you can just set it once. And every time you're using your abstraction, that value is going to be set.

SPEAKER_00: 22:57

Oh, it's like a theme. If you set a theme set in style, a background, it seems it happens with every other application as well.

SPEAKER_02: 23:07

Yeah, for in every uh component. And you can do that. Uh that style is just one of them. There can be other stuff as well. Uh, Mudblazer has a very weird way of um let me see how I should put this. Um when it comes to Blazor, there are three things that change a value in a component. Uh it's expression. Let me see if I can remember all of them. Uh it's expression, it's I can't remember all of them.

SPEAKER_00: 23:51

Yeah, it it's it's okay. It's just we would know that it's three things.

SPEAKER_02: 23:57

Yeah, it's three three things. Um, I'm totally blanking on the names right now. No worries. But uh they're using one of them, they're they're calling it four, but if the naming of that thing would be uh value expression instead, that would just work. We wouldn't have to set that manually. So that that's also one of the things that you can fix by using this your own abstraction on top of it. You can uh I don't like how they do this. Hey, let's fix it. There's also I I told a friend about this um uh a week ago or so, and he was like, Oh my god, that's a great idea, because that means that at any point, if I want to change from Mudblazer to Progress Teleric or whatever it may be, I can just do that. And that is not the point. It's a it's true you could, but that is not why you do it. You do it because you want to do it with the um with a um smart default values, and also lock it down because these third-party vendors uh components are made for all use cases, not just your use case. And by just exposing the things that you want us to use, you want the team to use. In that case, the team is going to do everything the same way. You're not gonna have a developer on the team going, oh, this is a cool uh property, let's use that one. Well, oh yeah, not gonna be able to do that.

SPEAKER_00: 25:44

You need to standardize the the theme or thing components. Exactly. Well, it's like a module, really, is just like keep reusing it or something, like a template, really. Yep. So speaking of the presenter, do you do I take it you work with Blazor every day at your at your workplace? So do you use other if other programming languages well, or you just use Blazor itself to develop application or for our um for our company, we are using Angular and Blazor.

SPEAKER_02: 26:22

That's the two front-end framework that uh are is approved uh in the office. Uh for me or for my for my team, we uh we're working on a Blazor application mostly. We also have WPF applications that we're working with. Uh I've been, I mean, I'm coming in as a uh I've been working with Blazor for so long. So putting me on these other technologies would be basically a waste of time. Because again, the the uphill battle, I need to learn Angular, I don't know Angular. I would probably be able to do it in in a reasonable amount of time, but I mean putting me in the Blazor project would make more sense. So for me, I'm working with Blazor full-time, basically.

SPEAKER_00: 27:17

Okay, so what's a typical day look like for you, Jamie? Is it just like pick up uh like an issue and work in on a project for for me?

SPEAKER_02: 27:30

Uh it's um I basically have two roles. I'm the lead developer 50, and then I'm a developer 50. So I have 50 where I'm kind of trying to figure out well, I'm I'm 100% lead developer, but 50% of my time should be focused on lead stuff. Yeah, so there I'm trying to listen, I'm trying to figure out where the team is moving, that we're moving the team in the right direction, that we're using the right technologies. I've spent uh parts of the weekend uh actually to look into open telemetry with Blazor because I think that is the way that we all should use um handle our logging, and we are doing some work with the logging. So I'm um let's put some time into that and figure that time uh that thing out. So that's part of of the workday, and then we have the other part where it is exactly as you mentioned. Uh, you we we're using um uh Azure DevOps. There is an um a um product backlog item. I pick it up, I I solve it, solve it, or uh I um pick it up and then spend some time refining it, asking the stakeholders, finding out what do you need, do you need this, do you need that? Uh and I mean I've been working in the industry for so long, so I I know that a a product backlog item isn't always what they want or need. So kind of challenging the the product backlog item a little bit is is very beneficial, I think. So kind of okay. I have an example. Uh this was um way back when uh and we were building a uh this was a previous company altogether. We were building a uh WPF app, I think, uh, and the the item said we need to be able to export the data to Excel. Okay, we could have done that. But we kind of go went okay, so why why do you need Excel? Why is what is the system not supporting you with? And they say, well, we wanna wanna be able to uh uh kind of see how many rows there are. So basically we we had a system, there were there were a lot of of uh things in that system, and they wanted to know how many uh things there were, yeah, and we were like, we can just add a counter for that. Oh, you can! That would be amazing. So we added a counter for that. Then the uh the um the item uh um surfaced again. Oh, we need to be able to export it to Excel. And we were like, we we just closed that one, we didn't have to. Well, now we do. Okay, so what do you need? Well, we want to be able to count how many of these items has a certain status, and again, we were like, we can just add a counter for that. Oh, you can, that would be awesome, and it the this continued over and over again. So kind of challenging the the need um really helps.

SPEAKER_00: 31:17

Now, yeah, it's it's unless someone write the uh the is like issuing agile that users want it exported in Excel, then you can't complain with that, but uh unless they tell you why you need it.

SPEAKER_02: 31:33

Exactly. And that is such an important thing uh when it comes to everything in life, really. If you tell me the why, I can tell you the how.

SPEAKER_00: 31:47

Yeah, the best reason. Okay, so from your experience from your experience of creating an application or creating product using reactor, what are some of the best challenging things that you have to overcome during your time and then so that people can learn from it?

SPEAKER_02: 32:09

Okay, mm-hmm.

SPEAKER_00: 32:10

Great question. It could be like challenging things of like maybe writing components, writing something that people can reuse, maybe standardized within your team.

SPEAKER_02: 32:18

It could be the the thing that that has been uh the most challenging and and most fun is one of my side projects. And uh when I was uh seven years old, my mom and dad got me my first computer. Uh I think I have it. I do here. It says ZX Spectrum. That's quite old. It is old, and so am I. This is from 1982. Okay. Uh, and um, so I got my first computer.

SPEAKER_00: 32:56

Does it still work?

SPEAKER_02: 32:57

Uh I assume so. I haven't fired it up, but uh the last time I checked it, it did work. Uh so I got that, and I remember I sat down, I wrote 10 print Jimmy, 20 go to 10. So it was just uh writing Jimmy over and over and over again. And that was also the moment when I realized that I wanted to become a developer. Now, fast forward a million years, it seems, yeah. Uh I I became a C sharp developer, and I thought, wouldn't it be kind of cool to kind of build an emulator for the ZX Spectrum? So I uh picked up a book uh containing all the assembler instructions, and I went through page, page, next page, next page until I went through the whole book, and then I was okay, great. This is working. So I have this um this uh emulator running in basically all the different dotnet technologies that I've found uh over the years. Okay, uh, I've been running it on HoloLens, I've been running it on Blazor, I had it running on um what was that called? Not nano framework, dot net microframework, uh and all of these different platforms I have it running on. And when Blazer came out, that was no exception. So I thought it would be kind of cool to get it working inside of Blazor. Now, when it comes to Blazor, uh, we do have a couple of different ways of running Blazor. One of them is WebAssembly. So WebAssembly is typically used when you do a lot of updates and you're doing it fast, it's running inside of the web browser on your machine. So it's the best way of doing many things fast. And the ZX Spectrum, it was um it was using the frame rate of your TV. So it was 50 frames per second in Sweden. Um so 50 times per second it needed to do something and produce a frame. So that means that approximately 10,000, that is not it differs depending on the instruction, but approximately 10,000 instructions per 20 milliseconds. So every frame update it you did 10,000 instructions and generated sound and generated an image. So there's a lot of stuff happening there. So this became kind of my I wanted to see if I can push Blazor to work with that. So I needed I needed it to be fast, I needed it to paint the the canvas, I needed it to send audio to the web browser and play the audio, and I didn't want to have uh any lag if possible, and all of this within 20 milliseconds. So Blazor has something called ahead of time compile, which is basically taking all the.NET code and converting it to WebAssembly, and WebAssembly is fast, it's almost near native speeds, they call it.

SPEAKER_00: 36:53

So I take it WebAssembly is another library of uh Blazor.

SPEAKER_02: 36:59

WebAssembly is one way of running Blazor. Uh we can come back to that uh uh in just a minute. So basically, what what all of this is, uh I had to I had to do um canvas painting, and I did that using a WebAssembly library called Skiya or Scia Sharp. Uh I'm uh sending raw bytes to the web browser using JavaScript to play the sound. I have connected it using um what is that called? Gamepad, I think gamepad um web APIs in the web browser so that I can use a gamepad and play games and stuff like that. And also on top of that, I needed to capture the keyboard and send that to the emulator. So there was a a lot of things, moving parts that I needed to get up and running. And pushing Blazor really to its limits, to be honest, because there's I mean 10,000 instructions every 20 milliseconds all the time. If any if it takes 21 milliseconds at any point in time, the sound is going to sound very, very weird. So it needs to be perfect. So that has definitely been my my biggest challenge. But uh let's back up then. Uh let's go come back to your question here. Um, so Blazor has a couple of different ways of of running hosting models. They used to be called hosting models, I think they're calling it render modes now.

SPEAKER_01: 38:48

Yeah.

SPEAKER_02: 38:49

So on the far end, uh we have SSR, so server-side rendered. And there are two flavors of that. It's static server-side rendering and it's streaming server-side rendering. So these two are rendering on the server, just taking these blazer component eraser components, rendering the HTML, sending it to the web browser. Disconnecting, nothing else is going to happen. If I click the buttons, nothing is going to happen. It's just static server-side rendering. The second one is streaming server-side rendering. And in that case, the server generates some data. But let's say that at some point during that rendering, we go to the database. We do an async call.

SPEAKER_00: 39:43

Yeah.

SPEAKER_02: 39:44

The service then going to send what it has right now. So it, okay, I have this stuff. Uh, I'm waiting for some more stuff, but you can get that. So it's streaming the content. We're getting some content. Once the database is done, it's then going to do another fetch call and send more stuff over to the web browser. And more and more, as much as it needs, because I mean it's streaming the data.

SPEAKER_01: 40:15

Yeah. Yeah.

SPEAKER_02: 40:17

Which which is a really cool thing because you get that interactive feeling, the things happening on the screen, but there's nothing really um there's nothing really interactive about it. Same thing here. If I click the button, nothing happens because it's server-side rendered, but in this case, it's streaming from the server, nothing is going the other way around. So those are are the the far end uh there. Now, if you go a little bit further, we can talk about um there's also um something called Blazor server or interactive server. So in this case, we got interactivity. The server or the web browser is connected to the server via signal R. So this means that we have to have a connection and we need to have that connection always running. So if we have some problem with the internet, the connection is going to go down and the page is not going to work. Uh, the state is also kept on the server. So say that you have 10,000 users, not gonna be a problem. If you have a million users, you might suddenly need to bump up the server just a little bit because all that stuff is going to be kept in memory on the server. Because, as I mentioned, with the shadow DOM and all of that stuff, that is kept on the server.

SPEAKER_00: 41:56

But that might be more expensive, right? If you do do something that is your but if you do like async method, do so put a data somewhere else, uh, it's probably cheaper in a way because you do another action or another call.

SPEAKER_02: 42:09

Yeah, yeah, uh, absolutely. Uh and then we have the the even further away, we have the WebAssembly one. So in this case, uh what um what Steve Sanderson did back in 2017, I believe, he took a an um uh open source project of the.NET runtime, and he compiled that. That was written in C. So he compiled that to WebAssembly. And so the runtime is running in WebAssembly.

SPEAKER_01: 42:50

Okay.

SPEAKER_02: 42:50

Then it's running the.NET libraries, it's the same NuGet package that same NuGet packages that you can get from NuGet, it's the same C sharp that you're running on on your desktop machine. Yeah, it's the same DLLs, nothing fancy about these DLLs. So the runtime WebAssembly, and then it's running your.NET DLLs.

SPEAKER_00: 43:16

Does that mean for test application, you need WebAssembly package locally to test it? What do you mean with testing? You know, like if you were to test something in like locally to see if it's running a circle application, would you need the WebAssembly package or something?

SPEAKER_02: 43:36

Uh you you need the um so every everything with WebAssembly stuff, uh, Blazor is going to provide you with it out of the box. So you don't you don't need to think about that at all. And here's the really cool part because in.NET 8 uh they introduce something called a web app template. So this is a template file new template, web app temp, blazer web app template, and it will give you the ability to just switch between all of this. So you can you can basically say, okay, now I'm running this project, it's going to pre-render the content. So we're gonna use the SSR that I mentioned in the beginning to kind of send over a finished version of the page. So we're gonna get snappy loading, it's gonna load very, very fast on to the to the web browser. Then either SignalR can hook up and we can get that server, uh blazer server rendering. Or we can say, you know what, I don't want Blazor Server, I want to use WebAssembly at this point. Then it's going to take a little bit of time because it needs to download all the WebAssembly parts, it needs to download the DLLs, the framework DLLs, and then Blazor WebAssembly is gonna kick in. Um and there, then there are the auto mode. So that's a combination of the two, or the three, actually. So it's first gonna pre-render the stuff. So quick onto this uh on the screen stuff happening. Then the first time you visit the site, it's going to hook up Signal R. So you're gonna get fast response time, you're gonna get fast interactivity. Then in the in the background, it's downloading all the WebAssembly, all the DLLs, everything that it needs. So the next time you visit a site, it's going to have all that stuff downloaded already and boot up WebAssembly.

SPEAKER_00: 45:46

So it's similar to cache thing, cache thing, right? It's save it or something.

SPEAKER_02: 45:51

Yeah, yeah, exactly. It's it's it's not using the web browser's cache because that is too unreliable. It's using its own cache uh mechanism and making sure that that uh all the things are are um uh fingerprinted and stuff like that, so that it knows that okay, this file is I can grab this from the cache, but this file I need to download again. So all of these different ways of running Blazor. And then on top of that, we have the I don't even know how many uh we talked about the last one. Uh the Blazor hybrid. So Blazor hybrid is the ability to run Blazor projects from.NET Maui. So that means that we can reach desktop, we can reach uh Mac OS, Tyson, we can reach the web using well Blazor Server or Blazor WebAssembly, yeah, and we can reach Windows, we can reach uh iOS, Android devices, all of these different devices. If uh if dot and Maui can reach it, so can we using Blazor? So now we can build one component, run it, server-side rendered, server-side streaming, Blazor um server side as um Blazor server rendered, so with Signal R, Blazor WebAssembly with with well WebAssembly, or inside of.NET Maui. Same component, exactly the same DLLs, can run on all of these platforms, which is kind of mind-blowing to me. Wow, quite powerful in that way. It's a it's a really great time to be a blazer developer, to be honest.

SPEAKER_00: 47:55

Yeah. So aside from you want to just dive into some of the community work that you've done in Blazor. So I saw that you've done you wrote some book, and you did probably speak in as well. Do you want to dive into that?

SPEAKER_02: 48:10

Yeah, sure. Uh so I've written a book, Web Development with Blazor. Uh it's actually uh behind me here, somewhere there.

SPEAKER_01: 48:18

Yeah.

SPEAKER_02: 48:19

Uh it is the uh so I've written three books at this point in time. Nice one. Uh it's three uh three editions, so it's the same book, but it's three different uh editions. Uh these are also the only Blazer books with a raccoon on the cover, which is obviously the most important part.

SPEAKER_00: 48:40

Does anyone listening? If you go to Amazon and search for raccoon blazer, you can probably find the one Jimmy's talking about.

SPEAKER_02: 48:46

I wonder if that actually we should definitely get that search uh search keywords in there. I'm not sure that raccoon is one of them, but it definitely should. Uh so though those three books is out there. Or well, you should probably grab the latest one because well it's it's uh things happen between them. Uh I just signed a contract to do a fourth book, which is going to be.NET 10. Uh, and it is uh scheduled to come out. I would say okay, so there is a there is a schedule and there's a reality. The schedule says March. Reality is probably a little bit later.

SPEAKER_01: 49:31

Yeah, yeah, for then.

SPEAKER_02: 49:32

But but March is the goal. Uh so we're basically waiting for.NET to drop. Because until November, we don't know if things going to change along the way. So until that that Microsoft really signs off on the delivery, I'm not gonna start changing stuff.

SPEAKER_00: 49:54

Okay, so is it just about.NET and Blazor? Like if how you get started, uh little would it be have any labs for people to test on, like do their own exercise as well?

SPEAKER_02: 50:06

Yeah, so so the book itself is is built up in well, into chapters, as books are uh but for each chapter we're talking about the technology and we're implementing it. So let's say uh there is a chapter on JavaScript interops, for example, and in that chapter we are starting to delete things in the database. And when we click the delete button, it's going to show up a um a JavaScript dialogue saying, Okay, are you sure you want to delete this? So we are building a blog engine, at least in in the first three books. I'm not sure about the fourth. Probably gonna have the same project, but we'll see. Uh so we're building a blog engine. So every single chapter introduces a new technology, and we are adding it to this blog engine. Uh then I also have a um well, three courses now on dome train. So getting started, deep dive, and uh authentication. So is that like training course like PluriSight? Or yes, uh, but this is Nick Shapsa's platform, so he's uh he's concentrating on on um there there are some differences between Plurasite, it's just not a new Plural site, it's it's a little bit better if I if if I may say so myself. Yeah, so there there's um I got those out there as well.

SPEAKER_01: 51:43

Yeah, nice.

SPEAKER_02: 51:45

And I'm trying to share uh knowledge as best as I can. So our YouTube channel, Coding After Work, got some videos there. I'm trying to get a video out per week. That is not gonna be true for this week, though, or next week, because uh well things have been a little bit hectic, but otherwise trying to push one video a week.

SPEAKER_00: 52:08

So is the YouTube all about the podcast where we went to talk about, mentioned before, or is it just talk about uh uh blazer and.NET?

SPEAKER_02: 52:17

Uh both actually. Uh so the the YouTube channel, uh coding of the work, that's mostly Blazor or.NET content. We uh we've done some stream previously, it's we haven't done that in a while, but we're gonna start that up uh at any point now. Uh so we're doing streams where we code and we um videos where I show some some basic concepts. Then we have the podcast, and the podcast is not a video podcast, it's it's actually it's an audio podcast. So that part you can you can find out well where podcasts are, so that's called counting off the work as well. So we're doing it under the same umbrella basically. So it's me and my wife, we're doing the podcasting and the videos together.

SPEAKER_00: 53:04

So nice. So it's simple more to get started in a programming line like Blazor. Do you think they should know JavaScript or.NET first, or just go straight into Blazor?

SPEAKER_02: 53:19

It it is definitely better to know.NET. Yeah, uh, you don't have to know JavaScript because for 99% of the applications, you don't need JavaScript. If you find yourself that okay, so this this problem, I need to use JavaScript. You might be wrong. There there is there is very um when I talk to a lot of people, they often go down the JavaScript route very quickly. Well, I needed I needed to do this, so JavaScript. And I'm like, wait, wait, wait, wait. What why why are you doing that particular thing? Um we we talked about that earlier with the button and you need to show something up, right? Yeah, uh that I've seen JavaScript solutions so many times, but that's an if statement in Blazor. So if I click the button, we we change the bull to true, yes, it it's going to show it. You have an if statement around that, you're gonna show the content. So there's a lot of things that you think you might need JavaScript for, but you really don't. There is a Blazor solution for that as well, or you can go CSS, pure CSS solutions, or whatever it may be. There are almost always a way around it. So, no, no, you don't need to know JavaScript.NET is definitely uh good to know because this is ASP.net in the end, right? You might want to build um some uh APIs, for example. Well that that is not part of Blazor, that part of ASP.net. You might want to add um uh oh my my fantasy is going here. Um, whatever you want to add, yeah, it's it might be an ASP.net thing and not a Blazor thing. So knowing ASP.net is definitely plus, and I think that it's it's a good way to start. I've I've talked to some developers, and they are struggling if they just go in with to Blazor directly because they don't know the ecosystem at all. So these are very new developers that just want to dive in into Blazor. But I think C sharp step one, C sharp, step two, ASB.net, step three, Blazor.

SPEAKER_00: 55:59

Yeah, but I guess it's like which language, like the specific uh uh program is under, like if it's already developed using Blazor, you might as well continue like use Blazor for it, but if it's already you started with JavaScript, you just want to fix an issue, you might as well use JavaScript for it, it just depends on the fundamental of the team, how they use uh how is it created.

SPEAKER_02: 56:26

Absolutely. I mean, if your team is uh proficient in in JavaScript, don't switch. But uh I can share a story. So this happened to a colleague of mine. Uh we were um we were moving some data between two companies, and uh our company was packaging all the data and sending it to the the other company, and they sat in a meeting, and um uh the the uh developer from the other company is he was like, Well, I just uh whipped a blazer site together to kind of um uh handle the the data that you send us. And my my colleague was oh awesome, a another a fellow Blazor developer. Uh so tell me, do you use Blazor a lot? And he was like, No, no, no, no, no, I don't. I'm I'm a re React developer. My colleague was like, What? So why are you using Blazor then? And he was like, Well, uh, for this project, I needed to get something up and running fast. So a seasoned React developer that was doing React development every single day of the week felt that it would be faster for them to just spin up a Blazor site. That was mind-blowing to me. So it doesn't need to be that your team is is uh a dotnet only team or React team or Angular team. Yeah, you might actually get a benefit from using Blazor even if you're based in another language like TypeScript or JavaScript or Angular or React.

SPEAKER_00: 58:19

Okay. So as this episode is coming to an end, we always love to get to know our guests. So the first question I'm gonna ask is what's that red light behind you if you light?

SPEAKER_02: 58:34

Let me see.

SPEAKER_00: 58:37

Is it like Philip Hughes or something? Oh is it Philips Hugh? Captain America thing you got it's in.

SPEAKER_02: 58:44

You got it is the uh is the Philips Hue, what is that called? Um the um oh I don't remember the name. It it looked like a round ball.

SPEAKER_01: 58:56

Yeah.

SPEAKER_02: 58:57

So that that's the uh it's battery um powered as well. It it's powered and and uh battery powered as well. But do you have to turn it off or is it always on? Uh it is uh so um we we uh I don't know if I can still say just moved into a new house because it's been uh one and a half years or something like that, but we still have boxes that are not packed, uh unpacked. So I guess as long as they still there, but when we moved into our new house, I made it my mission that every single light in here should be controlled by technology. I should not have to go up and turn on or off a light. So everything not entirely true, but most things so far are controlled by a home assistant. So If there is a light, if we bring in a new light into the home, it's definitely going to be controlled by some kind of uh nice smart device. We still have some spotlights and stuff in the kitchen that we haven't switched out uh yet, but we're working on it.

SPEAKER_00: 1:00:20

Yep, and I take it you're like uh you're uh you're an action figure and stuff, like you like adventures and stuff.

SPEAKER_02: 1:00:30

I do, I do, yeah. Uh we we have a a segment on our show, uh our podcast, where we ask um Marvel or DC? So my wife really enjoys Marvel and I really enjoy DC. We both enjoy Marvel and DC, but I'm more a Batman guy, and Jessica, my wife, is more Marvel uh centric. But as you can see behind me here, I mean uh Captain America's shield, that's Marvel. Uh a little bit further down. Let's see if I can show that as well. Uh I have Iron Man there.

SPEAKER_00: 1:01:09

Oh, nice.

SPEAKER_02: 1:01:10

Um, so uh it it's it's kind of weird uh that um uh and and uh Jessica's uh office setup actually has uh Harley Quinn in the background. So it's kind of weird. But yes, I do enjoy superhero movies, definitely.

SPEAKER_00: 1:01:30

Okay, so what I think it what do you normally do in your spare time?

SPEAKER_02: 1:01:37

So my spare time usually I end up programming in one way or another, because that's the thing that I enjoy the most. Now, since we moved, there are things that I should be doing, like cutting the lawn and stuff like that. So there's there is um one part of my spare time is like just keeping the house standing. It is a very nice house, but still there's a lot of stuff that goes into having a house. And then on the other side, well, I'm doing I'm doing development, I'm um uh teaching, I'm doing uh these dumb dome train courses, the book, all of these different things. That's that's on my spare time.

SPEAKER_00: 1:02:28

Nice. I guess you get quite busy, but you still love it, so you try to be active. Do what you do.

SPEAKER_02: 1:02:35

That is definitely the the problem with everything that I do, that I really, really enjoy it. And I I just love sharing in sharing content because somewhere out there there is a developer getting that content and kind of getting that epiphany. Perhaps it's the the um oh I want to become a developer, or maybe it's oh Blazer looks fantastic that it's going to solve so many problems. So I really, really love sharing knowledge because well, somewhere out there, someone is getting that epiphany. I hope at least. Okay.

SPEAKER_00: 1:03:22

Uh so thanks for joining this episode. It's amazing to get to know some blaze get to know Blazor and what you do and bit of like WebAssembly, because my first time hearing about it. So hope other people en enjoy learn something from Jimmy. So any question, you can just drop him a message or search for his books or any inquiry.

unknown: 1:03:44

Yep.

SPEAKER_00: 1:03:45

Okay, thanks a lot. Bye.