Episode 86 - Real World Blazor With Steve Peirce
Embedded Player
The .NET Core Podcast
Episode 86 - Real World Blazor With Steve Peirce
Supporting The Show
If this episode was interesting or useful to you, please consider supporting the show with one of the above options.
Episode Transcription
Hello everyone and welcome to THE .NET Core Podcast. An award-winning podcast where we reach into the core of the .NET technology stack and, with the help of the .NET community, present you with the information that you need in order to grok the many moving parts of one of the biggest cross-platform, multi-application frameworks on the planet.
I am your host, Jamie “GaProgMan” Taylor. In this episode, I talked with Steve Peirce about Blazor, how he has used it to build real world application, and what he’s excited about in the .NET 6 release time for Blazor. Steve is one of the two developers behind Powered 4 TV, which is a streaming service for pro-wrestling content, and an app which uses Blazor and a large number of functions and Azure services in a rather innovative way.
Along the way, Steve gives us a quick catch-up of what Blazor is, the different ways to host and run Blazor apps, and a little on what WebAssembly is - pro tip: it’s not a Silverlight replacement.
So let’s sit back, open up a terminal, type in dotnet new podcast and let the show begin.
The following is a machine transcription, as such there may be subtle errors. If you would like to help to fix this transcription, please see this GitHub repository
Jamie
So first thing I’d like to do, Steve is thank you ever so much for being on the show. Because, you know, we’re all really busy people. And I really am always really appreciative of people who are going to take some time out of their day to actually talk to me about, you know, what gets them excited in the in the .NET space. So thank you very much for that.
Steve
You’re very welcome.
Jamie
Would you mind maybe starting off by giving us a brief introduction, you know, a little bit of like, who you are, and the kind of work that you really enjoy doing? Maybe how you got into .NET?? If you don’t mind divulging that. So do you. After that we’ve got here the topic of Blazor to talk about which I’m really excited about
Steve
Perfect. Yeah, absolutely. I’m Steve Peirce. I’m currently a principal software engineer, leading a full vertical team to design and develop distributed systems in Azure. How I got here? Well, I finished school and I didn’t go to uni. I actually went straight into work, I went and worked in retail in a shop. And I enjoyed the money, but I think talking to my dad, actually, he kind of said, “either you need to work your way, like up and have a good career, or you want to pivot and do something else.” So I decided that I wanted to pivot in go towards, like computers and programming and things. So I actually did degree with the Open University for five years, whilst working full time, and that kind of got me that initial experience.
And then I wanted a job. But I was struggling to get a job. So I actually decided to build a web app. And that kind of got me - I had a Windows Phone at the time, one of the very few. So I built an app for Windows Phone, which was a, it was a game where like targets would pop up and you’d have to shoot the targets and you build the score. And all in all, it had about 100,000 downloads, and it was number one on the target shooting Windows Store. And most people joke that they didn’t know that there were 100,000 Windows phone users.
Yeah, that got me some experience in .NET?. And then I went into my first job interview that was successful. And they spent most of the time playing the game rather than interviewing me and gave me the job. So that was kind of my start. And from there I just carried on in the .NET C# world and had various experience in different different places. So that was a very good company to start at. worked at some companies which were quite cowboy-ish the complete opposite, but then had built experience bringing good practice into those companies. So that kind of helps round me as a person.
More recently, mostly working in distributed systems. So a lot of message based, many people would call them microservices, but we’re careful with the language because we try and design our systems around a specific domain focus scope, rather than putting the “micro” and just making things small. So that’s kind of my day job. And I’m leading a team there. But then, by evenings and weekends, I’d now a co founder of Powered4.TV. So that is a independent wrestling video on demand service in the UK. And we’ve built that in Blazor, which is kind of why I’m here today.
Jamie
There was something you’d said they’re about, you went straight from school into, you know, full time work, and, and how that, you know, you decided to pivot a little bit. And I love that. I love that when someone has, you know, is able to sort of look at where they are and go, i"s this where I want to be? How do I get to where I can be?" and takes that big, dangerous first scary step of sort of pivoting away.
We did have a conversation on a different show - Tabs and Spaces - about whether University actually prepares you for, you know, the real world of development. And I think there’s something that you hit on then there because the degree I mean, I’m I’m going to change your words, right? So these this is me interpreting what you’ve said, this isn’t actually what you’ve said, right? You said, because the degree was in Java, and you had a little trouble finding work in Java. Right? You took that as a, “why don’t I build something for the device that I have sat in front of me?” and I think that that again is a wonderful example of pivoting. You’ve gone, “hey, I have this experience in this language that at the moment in time right now, no one seems to be hiring for. So why don’t I take what I already know in this language, learn a brand new tool chain, a brand new language, and build a game with it?” And I think I think that’s something that a lot of developers when they first start, I’m worried about the word “evangelical”, but I’m going to use it, they go, “hey, I’ve been trained to use this particular language or this particular framework, and that’s all I will ever use.” And as as good as that attitude can be, I think there are limits you somewhat in both your career prospects, and also just your knowledge of development, right? Because if all you have is a hammer, everything looks like a nail. Right?
Steve
Exactly. And I think there were Java interviews that I had at the time. But I also learned, I messed up a lot of interviews through that inexperience, I think so there were jobs around. And kind of touching your point that to kind of build more experience in the Java base to get a job, I wasn’t really that passionate. But the idea of, “I’ve got my phone, I want to make a game for my phone.” That was the motivation to spend like evenings and weekends, like learning that. Whereas maybe if I had an Android phone, maybe the Java, I would have pursued more. But I didn’t I had a Windows Phone and Silverlight. So…
Jamie
I think that’s the key point that you’ve raised there about when people come to me and say, “hey, I want to learn programming. What should I do?” or, “hey, I want to learn this language. How do I learn to do this and this language?” I’ll say, “don’t worry about learning to do X, Y or Z. Worry about how you can build something that either enhances your life or build the thing that you want to build, right?” Because if it’s something that you are passionate about, and I guess we’ll get onto that in a moment with the Powered4.TV stuff, but if it’s something that you’re passionate about, like you said there, “I’ve got a I’ve got a phone, I want to make a game for it.” Well, that’s going to drive you through those difficult times when it’s you staring down the barrel of, “hy is this not working? I’m learning,” like I said earlier, “a brand new toolchain, brand new language. Why is this not working? And I can’t find the answer.” Well, the thing that will carry you through that, I think is the fact that you have the passion for the thing that you are doing, right?
Steve
Yeah. 100% agree. And I’m sure yeah, like you say, it’s easy to lose focus. So if you haven’t got the passion on that thing that you’re building, you just give up? Possibly.
Jamie
Yeah, totally. I’m not trying to say that passion is required for development. But what I’m getting at is, let’s say I decided tomorrow, that I want to learn how to do machine learning, well “doing machine learning” to wrap the bunny quotes around it is a huge topic, right? But actually, if I want to utilise a machine learning algorithm to do some kind of data mining on a data set that I’m really interested in, well guess what I’m going to learn how to do that one particular problem that gets me over the hump of learning how to instal Python, if I need to instal it, learning how to get the machine learning tools up and running, learning how to sanitise my data inputs, it gets we pass all of that, because those are pretty non trivial tasks to solve before you can actually get around to the actual learning of something, right?
Steve
Yeah, absolutely. No, I agree with you.
Jamie
So with that said, let’s talk Blazor. You hinted at Silverlight earlier on, because that’s what was being used by your phone. Let me just start by saying this, my entire experience with Blazor was the 0.30 public preview - the first sort of public beta that they released. I read about it over the lunch period that I had whilst they were releasing it. And I was like, “does anybody want to stay around after work? I’ll get some pizza. And we could just build some stuff in Blazor if you want. Don’t have to.” And there was like five or six people that were like, “yeah, let’s build something in Blazor.” Yeah, I think it was more, “yeah, let’s sit around any pizza,” but I’ll take that as a win. I don’t mind. I don’t mind buying friends - no.
What I’m getting at is that I know that when Blazor first started, there was a lot of pushback from a lot of long in the tooth developers saying, “this is just Silverlight all over again. Be prepared for them to drop support for it.”
Steve
This is it. So I think the difference with Blazor and Silverlight is Silverlight was a plugin whereas Blazor is built on top of these web standards. So it’s safe and secure. In that respect is not, like it will work on any modern browser, any device, no plugins. required.
Jamie
Yeah, I think a lot of the maybe more junior developers, or just the people who weren’t there for Silverlight and similar thing, don’t realise that you would hit a website, and you’d get a modal dialogue pop up that says, hey, you need to instal this system level software to be able to view this website. And you click OK. And it will take a few moments to instal something. And then you’d find Alright, so it’s just HTML then, but they’re doing something clever that requires me to instal a driver. Was it really worth it? Yeah, a lot of people, I guess, don’t realise just the amount of effort that was required to get over that, especially if you were dealing with a security person, and they were going, you want to what now? I’m sorry, what?
Steve
Exactly. It’s, it’s just more barriers to using your app, which ultimately, if they drop it, you’re dead in the water. With latest web standards, you’ve at least got a leg to stand on.
Jamie
Absolutely. So like, if Microsoft decided tomorrow, they’re not going to I’m sure. I don’t work for Microsoft. I’m sure Steve doesn’t work for Microsoft. We’re not speaking for Microsoft. But if Microsoft decided tomorrow, hey, Blazor doesn’t matter anymore walking away, then it would still work in the browser, because like you’re saying it’s built on those open web standards, right? It’s standards supported by Google and Mozilla and all of the different browser vendors. They’ve all sort of come together and say, yes, this is how it should work. Right?
Steve
Yeah, absolutely. And it’s all open source. So we can forget, I mean, you Jamie, we can create our own flavour of Blazor,
Jamie
elegant flavour.
Steve
Perfect.
Jamie
So for the folks who may not have thought about Blazor, or the one or two episodes we’ve we’ve done on Blazor in the past? What is it? I know that it’s something something .NET in my browser, but the do some things there mean magic, right?
Steve
Yeah, exactly. So I think everybody’s now probably heard of a single page application. So that’s a website where I can like click on links, or take actions inside the web page. And rather than doing a full browser page refresh for every link, like click, or every action that I take inside, that single page app will just sort of do a partial rent, like it will just change the bits that need changing, rather than doing that full page refresh. So a lot of the common examples that everyone’s gonna have heard of things like Angular view, react, they’re all examples of single page app libraries or frameworks in the JavaScript ecosystem. And so Blazor is like that, but it within the .NET ecosystem. It’s like the Microsoft’s single page application solution. What’s different about it compared to those like Angular views, reacts and all of the others is that we’re actually writing C#, that’s our application code rather than JavaScript. And that means that we can use all of those familiar tools like Visual Studio, writer VS code, whatever it might be, we can use all those same tools and the same like nougat packages, and all of that ecosystem, we can use and share our C# classes between the front end and the back end as well, which we haven’t really been able to do. Until recently. The question of how can it work? Because obviously, the browser, it can’t run C#, it can’t run DLLs. So how does this this magic work? There’s a few answers to that. So there’s a few different hosting models. So there’s server side hosting, which was the very first model to come out. So fat is where the server serves up some basic HTML. And that has a little bit of JavaScript inside of it. And that JavaScript will open up a signal our socket to the server. And all of your C# application code that would otherwise be JavaScript, if it was a react app, for example, is running on site on the browser, and then working out what needs to be shown and then sends that data back down to the browser via the signal architecture. And that JavaScript looks to me like I need to show hi Jamie as a h1 tag in the page. And then when you take your actions Inside the page, it then sends those back up to the server, which then calculates what the next thing needs to show what the delta is sends that back down the wire. And it’s updated. So we create a circuit between the client and the server, which is good, but does have a couple of drawbacks that you’ve inherently got that latency through the traffic of having to go from your browser to the server each time. But the payloads very small. But it’s still that latency. Also, the server needs to maintain that state. So it needs to know like the state of your app. So there are some questions around the scalability. And what happens if you lose your connection via there’s solutions to help you with these problems. But there you are adding in that complexity. So then there is Blazor wasum or webassembly. I think webassembly is often shortened to wasum, which is like the W ASM. So that is doing pretty much the same thing as the server hosting, except, rather than the application code running inside the server, it’s running inside the browser. But we’ve already talked about the C# and .NET code can’t run inside the browser. So like how’s it working? Well, the team have actually compiled a .NET interpreter to webassembly. So web assembly is it’s a bit like JavaScript, like all modern browsers know how to run it. So it can be used as a target for other languages to compile to webassembly. And then the browser’s know how to run that. So they’ve compiled a .NET interpreter that thinks based off mano. And that will effectively run your application code by loading in actual .NET DLL files, interpreting loads, and then telling the JavaScript to update the DOM. And so then the JavaScript will update what you’re seeing. So that will show that h1 Hi, JV.
Jamie
So server side Blazor sounds a little bit like your standard kind of MVC style web application, it just has that sort of constant connection. So that to me sounds like going from MVC and say, ASP. NET framework to Blazor with .NET?. Five, seems like a bit of an easier step to take. It’s not a code you’re writing is being transpiled, and stuff like that. You don’t have to worry about that too much. Right? Yeah. But the client side stuff. So first comment I’m going to make about the client side stuff is you want to run What am I browser? Great, because he said there is loading actual DLL is, you know, that the I’m guessing the DLL is that we would normally find like on your system, right? You do a .NET new is going to craft some guard, you do .NET build is gonna create a DLL. And it’s basically that DLL, right?
Steve
Yeah, that’s it. The web assembly is actually more locked down than JavaScript is. So web assembly doesn’t have direct access to the DOM. But anything that you can’t do in JavaScript in the browser, you also can’t do in web assembly. So I can’t send down a DLL to write some malicious files to your hard disk.
Jamie
That totally makes sense. To be fair, I felt like that was a bit of a leading question. Again, I knew that when anyway. But you know, for a lot of people who are new to this kind of thing, they’re like, you’re running what in what but yet webassembly it sandbox, right? So you don’t have to worry about it. And like you said, If you can’t do it in JavaScript, you definitely can’t do it in webassembly.
Steve
This is a thing you mentioned that server Blazor is a bit it’s close to MVC, and for a lot of MVC apps, people will be accessing Entity Framework directly. So the next question is, well, will people be calling Entity Framework from my client side app with a Blazor client? No, you’re safe. Generally, you would kind of switch more to the what happens in other spars and you’d make API calls to access data. You wouldn’t try and access your SQL Server database directly from the blades that was around
Jamie
me you say that? never dare a fool is what I’ll say to you, Steve.
Steve
I mean, you could try but also you would have to do it on purpose, and I don’t, I don’t know how well that would work. You’re not gonna do it by mistake.
Jamie
You know, I was just being sort of facetious and selling you. But yeah, it’s kinda like any other technology, right? You use the bits that work and use other bits of technology for the bits that don’t really fit the problem domain. Right. So you said that yourself, you know, if you need some data, you put in an API request, and it’ll go to the API API will talk to the database, transform that data and send it back to you. Right?
Steve
Yeah, this is that, and I think most people are pretty comfortable with that is, it’s not new, it’s not gonna blow anyone away.
Jamie
Okay, so we’ve talked a little bit about Blazor. But let’s talk about the reason for you sort of reaching out wanting to be on the show, right? There’s this real world Blazor app that you did earlier on, you and some colleagues have built that actually uses Blazor in the wild, right? When I first started playing around with Blazor, the big argument from my then boss was You bet, why we can still do it as a spa, we can still do it as MVC, we still do with API calls. So why don’t end the browser? So you’ve built this app? Right? And it is Blazor in the wild as a real world application? Right?
Steve
Yeah, as you say, because it’s his new as a new, it’s, we’re talking years, I think it was like September 2019, the the first version of Blazor server came out. So was it two years? And obviously, it was maturing a lot through development before then in lots of previous. So it’s new, that you go to touch them that why why did we choose Blazor, we didn’t choose it at first, just to come up with this as a side project. So my brother in law a few years ago, he was taking his son to a lot of wrestling shows. And they missed some shows. And I think his son, like he just wanted to catch up, he enjoyed them. So my girlfriend, though, had this great idea. We should build the Netflix of wrestling. And we’ll get all of the like UK independent wrestling, which actually, there’s a lot of I had no idea. But there’s hundreds, let’s build a platform for them. So everyone can catch up on all their favourite shows. And we’ll build a community around it. And it’s like, Yeah, awesome, let’s do it. That sounds like a fun little side hustle. So actually started building it in react js. So had a bit of experience around that from work. But I would probably suggest I’m a fairly typical .NET developer when it comes to front end stuff. Like I’ve historically done some web forms some MVC, jQuery, that knock out all these sort of older things, which people don’t tend to start with new. And I will say, use a bit of AngularJS, and a bit of react JS in the past. So I started out building it in react JS because that was my most recent experience. Not super deep experience. Like I just changed some existing apps I didn’t create from the scratch. So in a spend the weekend, get a basic search site up and running. I want to use TypeScript, I miss the static typing. So you spend the next weekend setting up Babel web pack and whatever else just to get get it in your lap perfect. Actually, we want to render on the server side, that’s going to be quite important for us on, on SEO. So again, is spending maybe another weekend to get that working. And because was using react JS that’s a library and not a framework. There’s many ways and many blog posts doing different things at different ways. So you’re kind of trying your best to sort of get everything working together. I wasn’t enjoying it, I needed a bit more structure and opinion, especially if there’s something that I didn’t do a lot. I moved on to try next j s, which is a react framework. So they are much more opinionated, using react. And that’s good, but it’s still fairly like I don’t do it day to day. So it’s still quite a big learning curve. And then you do all this and then you do an NPM or a yarn instal. And you’ve just got hundreds of deprecated packages. And it’s it’s tiring. And I’m doing all this work. But I’m not actually spending enough time on the value add like the business value. I’m spending all this time on learning and understanding the ecosystem. And as someone who’s more .NET I haven’t spent huge time in this. So everything is a learning curve or re learning. It’s around that time that Blazor webassembly came out in NET Core 3.1 a thing, or at least some of the previews. So it’s like that, let’s give this a try. So creating a .NET?, new wasum project, all of a sudden, like you hit Run, it just works like a bunch of the React components that we built in react, it’s more or less a copy and paste over in just like a slight tweak of the syntax. And they just worked. And before you know it, you’ve been really super productive with all of the tooling that you know, you’re not having to learn all new things. If you want to make an HTTP call, you’re using HTTP client, you haven’t got to figure out what the JavaScript equivalent is. Yes, you’re just super productive. So we actually really built a lot of what I’ve done in react previously, very, very quickly in Blazor. In my experience, it’s just a joy to use, and just really like it. And it’s around that time as well that I bought Josh shoes, the other developer working on powered for TV. So he had a similar experience of sort of coming in from a .NET background. And then just quickly understanding and getting up to speed. There are a few not issues but learnings that we still had to have, for example, we using OAuth zero for our authentication and authorization. And there wasn’t at the time, any tutorials of how to use Office era, most were focused around identity server or Azure AD b2c. So it’s some learnings and like, still a lot to figure out that actually, it’s it’s all within that ecosystem. So we are we are a much better time and much more productive. Then what are some of the drawbacks of using Blazor? Well, when we started, it was missing some functionality. For example, I mentioned server side rendering before, Blazor didn’t support any server side rendering or pre rendering. But actually, there was a bit of a fight that we could do to get it in at the time, which was kind of good enough. The the you could like kind of render the content as a static content and sort of the air that sort of farther. But then in newer versions, like .NET?, five, the officially supported pre rendering on the server for for Blazor was an app that again, had a problem, the it didn’t maintain the state. So when you went to the site, all of the HTML is that all of your beautiful content showing, and you’re like, great, and then there’d be this flash or a flicker. And what was happening is that the app was then like initialising. And being like, I need to render this content. So I will make my HTTP call out. And maybe I’ll show the little loading swirly there, and then re draw it on the page. Say that it was good enough, but a bit annoying. That actually we jumped on to the .NET?, six preview builds early, I think preview two because they fixed that, or they added functionality for that. So you could preserve the state on the server side and then effectively hydrate the state within the Blazor app. And you would eliminate that flash. And is for there the actually for the past. I don’t know, seven, eight months, we’ve been upgrading our app to the latest .NET six preview with every every release, which is always very exciting. It feels like Christmas each time. Yeah, so we’ve been using the latest and greatest preview features, as well as suffering any of the pain that comes with using the most recent freebies. But overall we’ve had a really positive experience.
Jamie
That’s also I do want to point out though, as someone who is known to his family, for being a computer programmer, a type ID person, you actually answered the call to let’s make the Netflix have and actually built it. That’s the thing that I get told all Hey Jamie, why don’t you go and build the Facebook of truck drivers or the Netflix for fishermen and I’m like, because a it’s initially a stupid idea and B you want me to put all the effort in for you to swoop in at the end and take all the credit. My hat is off T is the for actually taking risk,
Steve
I’ve still got my full time job. So we haven’t gone full. All in. Yeah. But I think what helps for me with that is having other people as well. For example, wrestling isn’t my passion, I’ve now been to quite a few wrestling shows that I really like it, but it’s not my passion. But actually, part of what has kept me interested in this is using Blaze, it’s been quite fun, especially because it’s new and for learning, and having people who are super passionate about wrestling, and like their passion almost comes through and helps my passion. Like, I’m not so passionate, but I’m passionate about the tech and I’m like, yeah, this, this made this awesome thing. And when you then add the feature and see them, like the delight that it brings them and the customers is it’s awesome.
Jamie
So you talked about earlier, and you said that there are mainly two different ways to host Blazor, right, the server side and client side. And you talked a little bit about how you got some server side pre rendering. So does that mean that parallel for TV is server side? Or is it client side? like ours? It’s got a hybrid, what’s was how does it work?
Steve
Yes, good, good point. So we have a server side project that is hosting our client side project. So that is just like an ASP. NET Web API project effectively, but it’s serving up flat HTML and all of the Blazor stuff. By default, you can do that. And it will just send the HTML index page down. And you’ll see a nice little loading screen, whilst the app initialises, just just for a second thought. So you can actually still do that. But render the content on the server. So rather than sending down at like an empty index page with a loading screen, and then it initialising the app and showing everything, it will render that HTML content on the server, and then serve that rendered HTML content. So use that initial loading that you might have seen on some pages.
Jamie
So the app uses the server server side Blazor, or is it both?
Steve
Okay, so yeah, we are pre rendered on the server, but the actual app is a Blazor client side web assembly app. Okay, if that makes sense. So effectively, the server is rendering that Blazor was an app, like the static HTML, serving that to the client. And then, like, that’s it like that sort of server does that initial render, we’re not doing any of that signal, our connection or anything like that,
Jamie
right. So it kind of fits a little more along the lines of what you what a traditional spa sort of service would be, I guess, you’ve got a server, which pre renders your page, sends that down the pipe with some JavaScript and some stuff to say, here’s the next bit, you go ahead and do your thing. And I’ll be over here with the API. If you need me sort of thing, right? Yeah. Okay. For a lot of people who are sort of new to this idea of Blazor, you get told, there’s two ways to do it. You don’t get told you can mix and match. Until someone then asks, operating on, you know, incredibly sensitive data, which point someone immediately then goes, we leave that on the server, he just sort of poke at an API, and then it’s almost like it then goes, Oh, right. So I don’t have to do both. I genuinely honestly feel like that’s something that was initially missing from a lot of the conversations that were happening around that time, whether whether it was expected by Microsoft, and the the folks who were really excited about Blazor that you would just go, Oh, well, of course, I’ll have an API, or whether it was expected that people would ask, it didn’t seem to me like there was much thought about, we need to let the people know that you can do either of these. And you can even I read somewhere that you can, you know, you can include jQuery in your pages as well, if you really want to, or you can have extra parts of your website or your web app that are in other languages and frameworks, right? You don’t have to go all in.
Steve
Yeah, and I think actually, you can sort of embed Blazor into existing MVC apps. So I think you can render them as a component C, if you just have a specific part that you want to be Blazor within your wider app, you can then I think you sort of mentioned having simulate jQuery or something else inside of Blazor. You can see that they’ve got a nice model for inter operating with JavaScript C, you can talk to JavaScript. And JavaScript can also talk back to .NET?. And they use now JavaScript modules as well. So it’s quite nice. The thing to be careful of there is, you kind of mentioned jQuery. And I think that’s traditionally used for a lot of DOM manipulation. And so if you’re either adding rows to a table in jQuery, Blazor is not going to know about it. So next time Blazor does a render, you might lose what you’ve got that what you’ve added. So DB careful when you’re mixing and matching, probably Blazor where possible, and then JavaScript as a necessity.
Jamie
That makes sense, right? Because like, my understanding, now, this will be off because I haven’t really looked at Blazor since those other previous but my understanding is that Blazor has almost like how react has like a shadow DOM, it does something similar, from my very old understanding of old knowledge. And it has this idea of this is a copy of what’s being displayed on screen. And that way, like you say, when I get the new dome, the new data from the server, I can then do that delta and figure out Oh, I need to do is add two rows to this table, or all I need to do is insert this picture.
Steve
Yeah, exactly that I think it re renders the sharing Dom effectively. And then does the delta between the last is like, oh, everything’s the same. I don’t need to update anything, or this has been added or removed, I need to update those bits.
Jamie
I work mostly in enterprise level, business line apps and stuff. And if I ship something that doesn’t have tests, I feel a bit weird and a bit worried. I know that there are testing frameworks for Angular and react and Vue and things like that. I know that because you’ve said it. Blazor uses C#. So can I just use x unit, or is there a different paradigm for testing Blazor stuff.
Steve
So we’ve got a B unit that can be used with x unit and the other test frameworks. So b units, the library that’s created by a guy called Eagle Hansen, who’s a very nice person, he chatted with me on Twitter, you can use that to render a component in isolation, and then make assertions against that component. So if you were to render a button, and you were going to pass in a text that should be displayed on that button, you can render that, and then assert that the expected HTML marks or you can pick out properties of that and say, like, I expect there to be attribute, which is this, all the buttons, do whatever. And then because you render that button, you want something to happen when that button is clicked. So you can also pass in the action of what you’re expecting to happen when the button clicks, and then assert that that happens as well. And because I don’t think we touch them, at that Blazors very much a component model very much like react. So we, we’ve got a choice on what we test. So you might create some like very low fundamental building blocks, or I think some people might call them atoms in atomic design and test those. But then you can kind of take a step back and then build some larger components. And then in Blazor page is just a component as well. You’re then thinking about what scope do I want to test and like what is appropriate to test here. And so I’m sure there’s there’s lots of opinions around that. But you’ve you’ve got all of the same testing that you’ve got. So if you’re already using something like react, and you’re used to testing with that, it’s the same paradigm of how we’re doing testing. So we’ve tested like a lot of our base components, we didn’t test from the beginning, which is actually caused us more pain. So then probably my advice would be to, to write tests as you go along, rather than trying to backfill them later if you are doing a serious for direct. But yeah, so we’re testing like the small components that work because they’re the building blocks for larger and then we’re picking scoping other components to like a meaningful bit of functionality and testing around that. We also use at play right, which is like a Selenium competitor. So you that actually can run load off a browser and run against it. So we’ve used that more for almost like some smoked Tests of like when you go to the page does the page render. And that’s quite useful for making sure like we do a deploy to our development environment, and then run the smoke tests. And that makes sure that we don’t have that it just runs on my machine. And they give as well, obviously, a bit like selenium, you can do anything like you can click buttons, click links, verify whatever. So we’ve been looking at some of our core flows of using that to just double check the some of our flows, like being able to sign up actually works in reality, and it’s a lot easier to test something like that as a flow it with play, right, in my opinion, than trying to test it violet component testing. Because I think it’s thinking about what you’re going to test at what level to give you that confidence.
There is also verify which I think you’ll probably come across if you’ve looked at Blazor testing, and that’s more around the snapshot testing. So I think with that, effectively, you’ll have a component or a page, and that will get rendered, and then that will output the HTML markup to a file. And then the next time you run that test, it will do exactly the same, and then compare the HTML, then you can look at it and if there is a difference, it will flag it. And you can say, Yes, I’m happy with this change, or No, I’m not. But it kind of gives you that ability to see what’s actually rendered. So it’s an option. I think people again, in the JavaScript world are probably quite familiar with that style of testing. We don’t use it. I think it’s one of those things where, like, we might use it in conjunction with the other testing, but I don’t see it as a replacement for that other testing. Because I worked in an environments with react where there was a lot of that, and then all of a sudden, you’ve just got HTML diffs for everything in a pull request. And you’re like, Yeah, looks kind of fine. There’s there’s like 20 HTML files that say, say I think like anything using the right tool for the right job.
Jamie
Sure, that’s good to good to hear that there’s a lot of testing that can be you can be done, because like I say, if I’m building something for an enterprise, or you know, I’m building something for someone, my vision would be to hand over God that I know does what it should do. And that’s what I use tests for. I mean, other people use them for other things. But for me, it’s a belt and braces, I know that anyone else can run these tests, and the code is doing what it should do. Because you know, I’m asserting that it’s doing it. So that’s that’s good to know that there’s testing frameworks and lots of different ways to test things with like playwright and things like that.
Steve
I’m a big fan of test driven development as well, in so I’ve tried to, like write some of these components more in a TDD style, rather than bashing out loads of HTML markup, and then testing. Actually, it worked quite well. And so I started sort of writing more kind of fluent assertions, because that works to the to the TDD style quite nicely. So I have created a project on GitHub, which I haven’t yet set up the CI CD pipeline for the hoping that like a Blazor B unit fluid assertions type library might be useful for people so I’ll share that or see if anyone else finds it. The Creator Eagle, he saw it in the Blazor community stand up, and he told me to create it as a library say, I’m doing it for him.
Jamie
Excellent. And we’ll be sure to send that link through to us before this episode goes out. And I’ll make sure it’s in the in the show notes. But yeah, definitely check the shownotes folks and go check that sounds like it would be really great useful if you’re getting into Blazor and you’re a fan of TDD I’m a fan of TDD. I’m also you know, all of the different letter DD you know, the behaviour driven and all that kind of spectrum and all that kind of stuff. Because then, you know, if you’ve got all of these constraints on you, it feels to me like I build software that fits those constraints. But that’s, that’s no talk about that, because some people get a little bit upset about that. And we’re not trying to start a flame war here, folks. We’re just talking about Blazor, right?
Steve
Yeah, I mean, so long as it works, so we’re gonna done it.
Jamie
Absolutely right. There’s a time for testing and there’s a time not to test and I’m not here to say about either of those. But let’s talk about the app then. So you said it’s go powered for TV. And it’s all Blazor is it? So like, it’s it’s the smoke test for Blazor?
Steve
Yeah, this is it so as to say is pre rendered on the server, but it’s it’s all Blazor. So yeah, have a look, check it out. Obviously, this is a weekend and evening project. So there’s lots of improvements that we know we want to make him will eventually get to, for example, we don’t have a good search solution at the moment, which being a site full of content that’s high up on the list of things to do, making sure that every all our customers have a good experience can find what they’re looking for.
Jamie
I mean, searching is hard. For other people don’t actually think about how difficult it is to provide a user with a free text input, and to be able to search that text on everything, and then display it in a way that makes sense. Like, everybody just assumes, oh, I’ve used Bing. And I’ve used Google. And if I’ve been around long enough, I’ve used Yahoo. And they just assume I just type it in. And it just they just got it back. Right? There’s easy searching is easy, it’s really not folks, it’s really not
Steve
as thinking about having a look at the Azure cognitive search and seeing how far we can get on there free to because I think that’s effectively Microsoft’s implementation of Elastic Search. So they do have a free tier so might give that a go and see, see how we get on.
Jamie
See, that’s that’s the thing that I was thinking about the other day, I was talking to someone the other day about how you could effectively build a large scale, make me loads of money application, on the free tiers of stuff, or the very low cost tiers of stuff. If you engineer it really well, like the serverless stuff as your abs or Google or whoever, right? You could probably get away with building the majority of an app using serverless stuff for free, right, because you want to get charged after so many compute seconds or minutes, or whatever it is, right? Seeing how far you can get away with with with using a service that already exists. And if it already exists, that means it’s a solved problem, right.
Steve
And I think as well, like when you’re looking at this, like we we are using Azure Functions, but not for our API’s. So but what we do have is Azure CDN over the top, and we cache. So when you go on the website, we’ve got a fairly short cache, but it does mean if someone’s there hits refresh on the browser, 100 times our servers, and you’re going to get one API call as it will be cached in the CDN, and it will have the cache on the user’s browser. And so actually, that means we can keep our like all of the public, like the show details, the channels, because we’ve got, I think it’s we’ve got like a five or 10 minute cache. So it just means we get maybe an API call to every five or 10 minutes. Rather than if we have a load of 10,000 people coming on the site at once. We’ve still only had that one or two API calls, thanks to the CDN. So we can probably try and leverage that same of putting the CDN on top of the search, just to at least reduce some of the traffic. And again, that helps keep keep some of these costs down. And performance of
Jamie
Yeah, and that’s what I mean by sort of engineering as long as you’re rather than just sort of hacking it together. I’m not I’m not trying to say in any way that you are in the function of working on this or hacking. I’m just sort of speaking into the either, if you’re willing to put their time into figuring out how are you going to engineer something to put it together, you probably find that you can do it cheaper than you thought you could, we can get away with cool little tricks like you’re saying, you know, there’s a CDN and the users cache inside the browser. And if you can leverage both of those, then why bother pulling another half a megabyte of images, which doesn’t sound like a lot when you’re pulling it down to your phone or whatever. But when you’re serving it from your server, and there’s, like you said 100,000 people or 10,000 people or whatever, that’s quite a lot of data. And you’ve got to pay for that data.
Steve
Add like you mentioned images like we are resizing the images. So like we store like an original full sized image. But then we looked at some of the like the image CDN that will do some of the resizing and things for you, but they’re quite expensive, at least for for our scale. So we’ve got an Azure function which we’ll use which will effectively resize the image based on like a whitelist of parameters, and then again, that’s stored, and then the CD ends in front of that. So we don’t resize the image every time. And we’ve got the whitelist as well to stop people abusing us, that you like, if you imagine that we have a 10, new shows came on and loads of people all came on the site at once. That image processing is expensive. So that could easily lead to a bad customer experience. Whereas Actually, it’s not not so bad.
Jamie
That’s cool. What’s exciting in the future for Blazor than once was the thing that’s making you go, oh, my goodness, can they just ship it now, and I can use it now.
Steve
So what I’m super excited about which we could look at now, but we haven’t had a chance for that is Maui, project Maui. So I think that is the next evolution of Xamarin Forms. So the cross on is it multi application user interface, so that you can create your applet apps that run on iOS, Android, TV OS window that ever, you know, all of those good things that they’ve actually added in a WebView. So you can effectively embed your Blazor application inside a native app, which will give us that was, again, one of the reasons we actually went with Blazor, because we were like, like that, that could work nicely for our long, mid to long term plan. So the Maui app will actually run your Blazor code, but with that native performance, so you’re not just embedding chrome inside a window into the app, it’s actually smart enough that CNI will run that .NET code. And you’ll get all of those benefits of jetting and all that good stuff. And it also means you can add in some native components and do notifications. So where I think Josh, the other developer, he’s started to have a bit of a look at that, and a bit of a spike. But that’s where we think it’s quite a strategic move that we can then take what we’ve got as a site, which we’ve able to iterate really quickly on, and then apify it if that’s a real word.
Jamie
Totally, yeah, I’m really interested to see what Maui becomes, because I remember, I remember watching a talk, one of the .NET cons, it must have been two or three years ago now. And there was Miguel de icaza, showing off. I think he called it Terminator at that point in time. And it was like, Hey, here’s my Xamarin app. But hey, look, here it is running on the desktop on a boon to, and now it is push a button it recompiles. And here it is on Mac OS, but it’s a Xamarin app, right? I think and then he went out, but hey, guess what, I push a button and there it is on my phone. And I think, you know, it’s this wonderful evolution of, let’s just make it easier for people that do stuff, right, because that’s what I love about about programming in general, regardless of the technology used is all about making it easier for people to do stuff. And I absolutely love that. So I honestly can’t wait for for like the first set of public releases. I know there are a couple of preview belts, but I can’t. And that’s going to be that comment is going to be way out of date by the time this episode releases. But at the time of recording, I know there’s some like public previews. And I know that there’s talk of supporting different formats and supporting different operating systems and things like that for different things. But I love this idea of like you say, I don’t have to embed Chrome. There’s nothing wrong with Chrome. But if your app is showing a chart, right, and it’s just I need to be interactive with this chart. You don’t need to pull down chrome and, or rather electron, which is, you know, Chrome light. You don’t need it to immediately have this 70 megabyte dependency. No.
Steve
Yeah, exactly. We’re super excited about that. And I think that that would be a nice possible strategic thing, especially if it’s made really, really easy like that. You watch some demos, and it looks easy. I think at the moment with the previews is the getting all of the tooling installed. But I think once that’s in hopefully we’ll be super productive and that and have an app in the stores bidness the other app store stuff to work out. But technically, it should be fun. and easy.
Jamie
So tell us a little bit more about the whole site that you have thrown together. And then let us know about how folks can get in contact with you. If they have. Maybe they’ve got a question that we didn’t cover. Or maybe they just want to get in touch and say, Holy moly, this is awesome. Like, how do they do that?
Steve
Yep. So the site is powerful TV. Jamie, if you have it, I can give you a promotion code for a free month trial for anyone that wants to have a play.
Jamie
You heard it here first. You want a free month of wrestling content? Do it. I don’t mind. I mean, I’ll happily hold my hands up in the air and say, Oh, I’m a pro wrestling fan. It’s loads of fun to watch. Yeah, yeah, there’s the whole the outcome is brilliant. You get right, you living in the moment, the same with an action scene, and the outcome is predetermined. So let’s get past that. Right. It’s loads of fun to watch for me. So Totally, yeah, if you’re into pro wrestling, Steve is about to read out a promo code if he if if you want a free month, why not? Right?
Steve
There we go. We’ll go dotnet and that can be the promo code for a one month free trial.
Jamie
Also, I will put that in the show notes too, obviously, in case you’re driving or whatever.
Steve
Perfect. And like you say, when you when you see these, like these are athletes. So you might not appreciate the storylines that they have. But when you see them, like doing these, like triple somersaults off the ropes onto a bike, like they’re really actually doing these things. It’s not it’s not pretend like they do. They do feel the pain as well of a lot of these things. So awesome. And yet to get in touch with me, I am on Twitter, at msrps, which I will spell which is at s are p IRC.
Jamie
And any other ways to get in touch with you or like if if folks have a question about how it’s all put together without giving away the secret sauce? Are you willing to answer questions if somebody wants to say, Hey, Steve, I’m interested in Blazor, can you point me in the right direction? Are you open to that?
Steve
Yep, absolutely. So I was on the ASP. NET Core Blazor community stand up a while back where we talked about powerful TV, and how we built it and answer questions. I was super happy to do that. Again, I’ll talk to anyone about anything, say, Yeah, you can. If you want me to do any talking or q&a, happy to come along and do that, or reach out to me on Twitter.
Jamie
There’s also as well, Steve has been very kind enough to send over like a 10,000 foot view architecture diagram of how the whole system was put together. I will put that into the show notes. So if you are listening, you know you didn’t hear it, but I just asked you for permission. So if you are listening, click through to the show notes. And there’ll be an image embedded in the show notes that shows you like all of the different components and how they all fit together. And you can really see that it is Blazor and lots of as your functions and stuff like that.
An architecture diagram for the powered4.tv website
Jamie
So I can imagine that it’s been quite an engineering tests that are together.
Steve
Yeah, and a lot of fun. It’s always good to have some learnings on side projects. That’s what I’ll say.
Jamie
I guess all it really remains to say, Steve is: thank you ever so much for coming on the show talking to us a little bit about Blazor giving me a refresher on Blazor because there’s lots of gaps in my knowledge, I haven’t really had a chance to play around with it; and it is know about the world to give us that free promo code for a month of of wrestling content, if you’re interested in it. And obviously, please do go check out the website, even if you’re not interested in pro wrestling, because this could be maybe you’re on the fence as to whether to build a Blazor app or maybe your technical director or your boss is saying, “no, we’re not going to use Blazor,“and you can point them at this thing and say, “hey, look, here’s a real world app. Yeah, you know, the content may not sit well with you. You’re not you may not be interested in it. But look, this is in Blazor, and we could do something, too.” It can act as almost like a killer app. Just go check it out.
Steve
Thank you very much. It’s been a lot of fun.
Jamie
Yeah, thank you very much, Steve. Thank you ever so much.
The above is a machine transcription, as such there may be subtle errors. If you would like to help to fix this transcription, please see this GitHub repository
Wrapping Up
That was my interview with Steve Peirce about Blazor and Powered4.TV. Be sure to check out the show notes for a bunch of links to some of the stuff that we covered, and full transcription of the interview. The show notes, as always, can be found at dotnetcore.show, and there will be a link directly to them in your podcatcher.
And don’t forget to spread the word, leave a rating or review on your podcatcher of choice - head over to dotnetcore.show/subscribe for ways to do that - reach out via out contact page, and to come back next time for more .NET goodness.
I will see you again real soon. See you later folks.