Blazer is a client web UI framework based on net and c-sharp instead of javascript. Now previously, the browser was a black box that you couldn’t get your dotnet code into now with blazer. You can use dotnet for your client web development needs. But what if you need to take your app to other native platforms like mobile, desktop and other devices? It could be really expensive to have to build native experiences for all those platforms and you might not have the developer resources or the developer.
Skill sets one common strategy is to use the ubiquity of the web and your existing web developers to build apps with native like capabilities in the future. We want to evolve blazer so that you can use it to build apps that have those native like capabilities, so we’re going to walk this spectrum from the web to native applications. Now, we’ve already seen blazer server apps in dotnet core 3. Oh it’s available this week.
Download and install it try it out. Blazer server apps enable you to get ad rich client side interactivity to your existing dotnet web applications. Now they run on the server, but they allow you to have that client interactive feel like a single page web application. They also enable you to leverage the capabilities of the browser using JavaScript Interop. Let me hop over here to visual studio, here’s the blazer weather application that we saw earlier this week.
This is a blazer server, app I’ve already refactored it again to move all of its components into this razor class library. This blazer web weather core. We expand some of these folders, we’ll see all the the Razr files in there there. They are that’s so that I can reuse these components in the future demos when the blaze their server app. We’ve we’ve seen what this looks like: it has a UI for showing the current weather, and one of the things that we already saw is that we do have client side interactivity.
We can click on and change the current temperature unit. We can also use the capabilities of the browser to get the users current location by clicking here that should use the geolocation API is to give us where we’re currently at all right. One other thing that I’ve added to this application that also leverages an additional an additional capability is the browser’s local storage. I used it’s. Actually a community project was a github comm blaze word.
This is a project by Chris st. II and he’s done a whole bunch of really good stuff. He has a package that uses JavaScript Interop to enable local storage and blazer applications. I use that so that if we go back to the app we can store our pinned locations locally in the browser. So, let’s like go to Chicago and we’ll pin that one there it is, and now we can cycle through our pin locations. So we have Seattle and Chicago if I grab this URL and just going to close that tab and then we’ll open up a new one browse back, we still have Seattle and Chicago as our pinned locations using the browser’s local storage to store those things.
So we get to leverage browser caching, this yes, yes, oh yeah, this this makes me ready now for the Deaf. Thank you mr. Prez, all right, all right, we’re going to blaze on now: okay, whoo, yeah, okay. So, what’s the next step on adding more native-like capabilities to our blazer application? Well, the next step is blazer. Webassembly blazer web assembly apps run in the browser on a web assembly base hot net runtime.
Sorry so, with a blazer web assembly app, the files can your app is just a bunch of static files and they can be downloaded. They are downloaded into the browser and then executed, and they can then leverage the capabilities of the browser. Well, so I’ve taken the same application. This is the the server version. Let’s close, that, let’s now go to a different project, and this is a web assembly version of the same project.
It’s actually using exactly the same components. This is kind of cool a lot of customers that I talked to are starting out with Blaser server. With the plan to win one sweet blazer web assembly is available in May of next year that they can then shift their app to actually run full on and in the client. But let’s go ahead and run the web assembly. Version of this app looks pretty much. The same does the same things like we can get the I gets our current location here.
We should should be in Redmond yep there. We are all right and then, if we f12 and look at what was downloaded to this application, it looks a little bit different. Yeah, so there you see down at the bottom, there’s that mono dot wasum file, that is our web assembly based at runtime. So this app is actually running a client side directly in the browser now to show that that’s really occurring, we can even debug when I f12 again.
If we look in the console, you can see there’s a debugging hot key gesture that we can do. I’r not debugging this in Visual Studio, I’m actually going to use the browser dev tools to debug it. We don’t support debugging in Visual Studio yet for blaze or webassembly apps, but we will in the future for now don’t run it with debugger in Visual Studio. And then you can do use do this trick. So I’m going to hit shift alt D and that’s going to try and bring up the browser dev tools to connect to the tab that I want to debug through a debugging proxy that we set up for you now for that to work.
We actually have to run the browser with remote debugging enabled, which I don’t have it doing currently, and it’s telling me how I can restart it. So it does do that. So I’m going to close down the browser completely and I’m going to run the command that it just told me to do to restart the browser with remote, debugging enabled and we’ll hit that gesture again shift alt D, and now I should get the browser dev tools That can connect to my tab.
There we go alright. So let’s put this side-by-side with the tab, I want to debug and we’ve already got some files open. Let’s go ahead and close those in the in the sources tab we can see down here. Alright, we can actually take a look at all of our give myself a little more space, all the files that are in our application, so there’s blazer weather core. What do we want to look at? Let’s look at let’s look at the temperature unit: picker we’ll open that file up.
We can set a breakpoint right here on the click handler when the temperature has changed. Let’s go ahead and get the current location back up on the screen, so we can change the current of the temperature unit. Well, click and there we just hit a breakpoint in c-sharp in the browser running on top of a web assembly based at runtime. We can even expand down here and take a look at some of the local fields in our component.
So currently the temperature was was Fahrenheit, let’s hop out of here, and let that the app continue. If we clip the temperature unit picker again, it should say that it’s changed and has it yeah. It looks like we’re good. So now the temperature is Celsius, so there we’re just debugged our blazer web assembly, app directly clients eyes. So that’s pretty cool, oh, go ahead and let that run all right.
So that’s blazer web assembly. Now we can use some of the more modern web standards in our blazer web assembly, app to make it even more native-like and apps like this are typically called progressive, web, apps or pwace. What is a PWA? Well, a PWA is just a web app, but it uses modern web standards to enable things like offline support. You add a serviceworker so that the files can be cached and used even when the browser is not connected.
Support for push notifications, pwace tend to are fast and responsive, so they have that native app like feel on some platforms. They can even be OS installable, like you, can pin them to your home screen on your phone or on Windows 10. You can install them so that it can be, they can be run from your Start menu. So we can take our blazer webassembly app and turn it into a PWA all right. Let’s do that.
So actually, we’ve already got it running and if you we look at the top with our blazer webassembly app, you can see there’s a couple of icons up there and this one here is says: install install blazer, whether as PWA, that’s because the browser and Windows 10 Is detecting that this is a progressive web app if I go ahead and click that yeah, let’s go ahead and install, and now we see our blazer web assembly app, but it’s in like a native shell, with all the same functionality still works like I don’t know, Saying this, so we can find new locations, we can get the location by by geolocation and we can see that on the Start screen of my Windows – 10 box, there is my blazer weather app and it has a nice little icon.
So that shows up in the Start menu. So that’s pretty cool. So that’s that’s a blazer PWA. How did we enable this? If we go back to the code and look at how this was implemented in the www root folder, we can see there’s a serviceworker that was added to this application. This is a piece of JavaScript that enables caching and then there’s also this manifest file which specifies like icons that can be used when this app is either pinned to a home screen or or to the the Start menu and the windows device.
That is that blazer PWA, starting to look a little bit more native. It’s got a native shelves, it’s runnable from the Start, menu. Let’s go ahead and close that all right, hybrid apps are native apps that run natively on the device they have access to all the native capabilities of the of the device, but they use web technologies for rendering their UI. So, for example, you might have a mobile application, that’s running natively, but it’s using a webview for rendering all of its user interface or you can have an electron application and an electron application is using an embedded chromium shell to handle all of it.
So, let’s your user interface, let’s see if we can build blazer, hybrid apps as well, we’ve been doing some experiments in this space when we go back to visual studio. Alright. So here in my third project, we have a blazer weather electron app, so I’m going to set this as the startup project and we’re going to ahead and run it again. It’s using the same components as before, but now, instead of running as a web application, this blazer electron app is going to run in an electron shell.
It’s a native shell, like we have all the access to all the native capabilities of electron. The same functionality still works, let’s see what the weather is like in New York, then it goes. We can get the the current location and so forth. We have all of our pin sites, and this HAP is interesting because it’s not actually using webassembly the blazer webassembly app and the progressive web app. Those were both webassembly based.
They were running in or inside the browser using the web assembly based runtime and, as a result, they were also limited by the browser security sandbox. A lot of people ask me about blazer webassembly apps when they see the dll’s being downloaded into the browser and asked. Is that is that safe? Is that okay, like? Is there any security issue there? The answer is no, because the code that’s being executed is being executed using that dotnet webassembly runtime running in the browser security sandbox.
So it can’t do anything more than what normal JavaScript could do in a browser. Application can’t do anything more and I can’t do anything less either. It has all the capabilities of what JavaScript can do, but no more so it is safe. In this case, though, we’re running on electron, an electron app the.Net code is running in a normal dotnet core process. Nak dotnet core process does actually have full access to the native capabilities of the machine.
So if you want to touch the file system or open arbitrary network connections with this application, that’s stuff that you can do in this application. So basically, what we have here is a native desktop app with the UI built using web technologies built using dotnet and it’s cross-platform. This will run on Windows, Mac and Linux. So that’s an example of a what a blazar hybrid app. What might look like, at least for desktop scenarios? This is something that we’re exploring and investigating.
If you want to play around with blazer electron, I think I have this you’re all set up. You should go to HBS whack whack, blazer, electron, akms, blazer electron is the euro and let’s see if this is not alive. I think I set this up this morning. Yeah there we go. This will take you to our HP, Labs repo and we have an experimental project that we’re working on that integrates blazer with with electron and there’s a sample there that you can try out all right now.
The last stop on our spectrum from web to native is going well. The first ones get passed. The hybrid screen is going full native actually having a native app, but instead of using web UI. What are web technologies to render the the UI Wow we use native controls so that we can leverage the native controls of the device? This is an area also that we’re investigating and experimenting with. I don’t have a live demo for for this area, but Blaser was architected from the beginning so that its renderer was extensible.
The default renderer in Blaser renders HTML and that’s why you used laser to build web applications, not too surprising there, but the renderer can be replaced. In fact, you can replace it with a different renderer that renders to whatever you want, like you might render. Instead to native controls, there’s a really cool demo, that is just a tech demo, an experiment. It’s not anything that so we have any plans to ship, but that seefs anderson did at NDC oslo earlier this year and what he did is he took the blazer renderer.
He replaced it with a renderer that could render to native flutter controls, so he was able to build a flutter app using Blaser writing his code in c-sharp. Normally flutter apps would be written with dart. U it’s pretty pretty cool demo. You can take a look at it at the link below a kms blutter, so Blaser plus flutter. It gets you blutter. I guess where you can see, see senator sanderson a demo that capability of blazer again.
This is not something that we actually plan to ship, but it just shows you what is possible with the the blazer model. This is very um, similar in nature to what you typically write with applications that are using technologies like xamarin or react native. These are applications that run natively on the device and then also a render to native controls in a cross-platform way. We’re looking at. Could we do something similar with blazer like have a blazer native? That does a very similar thing, nothing to share yet there, but it is an area that that we are currently looking at all right.
So this is what the roadmap now looks like for for blazer blazer server is available. Today, it is supported in dotnet core 3 o. If you want to build a blazer server app and deploy it into production, you can do that right now. Go ahead and download it install it. It’s great. You can start adding some rich interactivity to your existing done at web applications blaze. Our web assembly we announced earlier this week will ship next year.
We’re targeting May of next year will start to see more progress on that in the in the months ahead. We’re also starting work on blaze or hybrid apps and blazer progressive web apps. You should expect to start to see previews of that functionality in some of the dotnet 5 previews that will be coming up shortly. Dotnet 5 is expected to ship in November of next year, but hopefully we’ll have previews at PD, PWA support and electron sooner than that, if you want to play around with blazer webassembly apps as pwace, there are actors, some really nice community projects out there that you Can download and install and those those are really great to try out blaze.
Our native is not something that we have any concrete roadmap for, but it’s an area that we are experiment experimenting with and we hope to learn more about and talk to talk to. Folks, like you to see what we should should should do there, so that is the future of blazer on the client. I hope you enjoyed the things that you see that you saw, I hope, you’re excited about them, give them a try, try out blazer an electron with a sample, try out blazer webassembly, give us feedback and, of course, make sure you download dotnet core 3.
Oh today, there is no time like the present so make sure you’re using the the bits that are already ready available. This is a bunch of useful resources that you can go look at to get started with. Blazer get go to blazer net to get the bits and find the documentation you can get the dotnet core 3o bits at the dotnet. Slash get core 3 go make sure you get Visual Studio if you’re on on Windows you’re going to want to get the latest release of Visual Studio 16.
3. We have a wonderful blazer workshop if you want to learn how to program with blazer and participate in the blazer community. They have a lot of great folks, like Chris dainty, who did the blizzard project and and others that are building wonderful, JavaScript, Interop libraries and component libraries, and with that I’m going to turn the remainder of the time over to questions yeah. Thank you check this out.
Yeah yeah, so thank you so much. We have a little special surprise. What so I want everybody. That’s reading to know that this is actually Dan’s 15-year anniversary of Microsoft. It is blazer, probably wouldn’t exist without Dan with a lot of people. So a lot of people work on placing the blazer thing, and so I want to give you this gift. This is a blazer pillow, what’s even better about this blazer pillow, if you swipe up on the blazer pillow, that is that spectacular.
Are these place fabricated at large, like a one-of-a-kind thing? I don’t know this this this. That is congratulations, 15 years to the next 15 years. Yes, thank you right. Let me borrow that pillow for a couple of weeks I mean just just. Maybe we probably have a ton of questions. Oh there’s lots of people tweeted you in your brand new jacket sweet. Do you want to yeah? Let’s do it. So, let’s start from the left here and we’re going to get this question here.
Well, blazer be a good choice for enterprise level, web apps that need high availability, scalability and fine grained services on the cloud. While this is really good yeah, you know I I mean. That’s what the it’s built for and blaze our server in particular that’s what’s shipping today, that’s what’s supported absolutely supported for large enterprise applications, so I think we we think of Blazers being particularly well suited to enterprise apps for line of business applications yeah.
It would be absolutely yes, it is ready. So yes, yes, yes all right. What else do we have here? So what about this one? How do you users, how do you have users update new build versions and a blazer pw8 updates? How do you do that updates to new versions in a PWA, so I believe, that’s all managed by your Service Worker policy like the so I think the inherent question is there is when you download a PWA, you can often set up a serviceworker so that it’s Available offline, which is effectively that caches the files when you set up a serviceworker, I believe that’s where you put policy about like when does the app go back to get the new files and I’m sure, there’s also a way where you can just enforce the aptitude? Fresh, but I think that’s how you would do it I’ll have to I’ll double check on that, but that’s my current understanding.
We haven’t done a lot of Investigations and blazer and PWA, yet we’ve just done some early. You know proof of concepts like you saw today. This is an area that I expect that you’ll see us looking more into in the.Net 5 wave all right next question: any updates about supporting G RPC web for blazer, also blazer native on mobile yeah ER PC web. That’s that’s! That’s really interesting. So we support grq, see now in tot nick horror, 3.
Oh, how ever it doesn’t work from a browser? You can’t speak the G RPC protocol from the browser to to your front end servers. There is a variant of G RPC that you can use called G RPC web. We don’t currently support it today and we don’t have concrete plans to support it yet, but we are talking about it as a potential area to to invest so don’t know yet. But let us know if you think that would be interesting and useful for blaze are native well, we just talked a whole bunch about what we’re thinking for for blazer native.
We are right now in the prototyping and investigating stage. Blazer was architected from the beginning to support non web native scenarios where you replace its render, with some other render that can go to native controls. It’s very similar to what like react, did react, started out as a web framework and then move to support native apps with react. Native laser can absolutely do the the same thing.
What the roadmap for that is. Yet we don’t know it’s still TBD TBD. Okay, we have another question here: APW a using blazer, that’s something really attractive, but for now my question is which server off integration is preferred like Windows or DB. Chrome has problems with Windows off so which off mechanism should you use with a blazer application, so that will impart depend on your hosting model like if you’re hosted on the server or, if you’re running on web assembly in the client and really the type of author.
You then use will depend on your app and will tomato it depend on your environment if you’re running in the client on webassembly, that’s like a spa, so you use spa style, authentication patterns. Typically, that means using like an open ID, connects a row off like flows where you acquire a jot token and use that with all of your HTTP client requests. You can also use cookie based off from from a spa.
That is that it’s possible blaze, our server apps. You have the whole set of auth options available to you, based on what you’re trying to do. If you’re, if you’re providing a line of business application – and you have Windows users, you want to let them log in Windows off, it would be a great option if you’re writing an app where you need users to be able to register their own user profiles and Have their own passwords that you want to manage, then using a spirit, core identity for your authentication support, it’s a great option for the webassembly apps using identity servers, support for open ID connect with probably probably what you want to do fantastic.
So just a couple of pictures like this one to me is what it feels like: I’m there and another one of course, looking sharp. If you follow him, you’ll find he did another picture of me, but not as flattering as this Jeremy. You got to get my good side. Buddy now for sure lays a jacket for more important questions. Obviously, can this be integrated with an existing Donette framework project? If so, how via new get that’s? That’s the you know, that’s a it’s a great question: could you, whose blazer, with a dotnet framework out, let me blaze our server? Obviously, not because blazer server is is is running on asp.
Net core, like it’s using the signal, our support in asp.Net core, so no with with dotnet choreo. You can’t run that on a dotnet framework. App blazer web assembly is just static files, so it doesn’t really care what is on the the server it could be actually PHP or whatever on the server. So technically I guess you could use dotnet framework on the server with a blazer webassembly app, but it’s really been optimized and integrated with dotnet core, like the full stack experience that we imagined for blaze, our web assembly is you have dotnet core on the server blazer Web assembly on the client – and we provide you all the nice integration points there.
That’s that’s Wemo how we mostly imagine it being used but technically should be doable and here’s like a super awesome question mica. What does it say yeah? Is that Blazers future of web development is blazer the future not try to put it on a spot again where in the jacket – and you have a pillow with your face on it, you say it’s super authoritative comes to the future of web dome. Yeah absolutely is for many many web developers.
Is it going to be the only way that people write web apps going forward like some some people ask like? Does this mean I that no one will ever write JavaScript again like no? That’s not what blazer is going to do. There will be lots of people still running JavaScript there’ll, be lots of people writing in all sorts of different technologies. What web assembly did is it actually opened up the door for really any platform? You want to be used in the browser, so I imagine there’ll, be people using Python and go and rust in the browser as well, but we are working really hard to make sure we have a great dotnet full stack web development story.
Alright, so here is another one, and this is interesting to me because I remember when this was introduced. I saw Sanderson demo it to me. It was me it was Damion, Edwards and Fowler, and we just sat there were like holy cow. This is ridiculous, and the first thing I thought was perf is this: is this going to be the same as the other, so any stats that show performance comparison between asp.Net MVC, web and blazer yeah? So so there’s a couple different comparisons that you could do that.
First of all, it’s not really an apples-to-apples, of course Harrison, and the reason is like I we talked about yesterday. Blazer is for your client web development needs, it doesn’t replace MVC, it doesn’t even do the same things that NBC and razor pages do. Those are server. Render technologies that use on the server Blazers meant to be used in the browser for a client web UI? So you don’t even do that when you want to do a server rendering you do that with MVC.
You don’t do that with laser at all, but there is some interesting, perfect characteristics of blazer that are worth mentioning: the Blazers, based on a differing algorithm. Where you render your components, it calculates a DIF and it applies it to the Dom that diffing algorithm has been highly optimized to be very, very efficient when you run it in web assembly. There are some known performance issues with any CPU intensive loads on our existing web assembly runtime right now.
That’s because, right now our dotnet webassembly runtime is doing ILO interpretation and it doesn’t have a jitter. It’s just interpreting the il on the fly and that can be slower, we’re working on that we’re working on supporting ahead of time competent compilation to assembly, which does give you back that, like native like performance, we haven’t had a preview of that yet. But we hope to have one as soon as we can shortly so that will hopefully address the performance problems of running an op laser web assembly in the browser when you’re running on the server you’re running on dotnet core, it’s superfast no performance problems at all.
All right, I think we have one more question. Yeah we have time for one more yeah. We do all right. Well, blazer support a per razer component, server-side web assembly configuration in one spot. I don’t know if I could parse that oh yeah write a Perl radius component, server-side, slash, there’s like so many pieces here. That’s why it’s such a good question. Ah, I think I like the way I choose to interpret this question.
You are wearing the jacket. You can do whatever you want. I think what this is asking is, you could imagine, maybe having a mixture of hosting models in the same app where this component is going to run on web assembly, but that component is going to run on the server, maybe for whatever reason it makes sense to Do that we don’t a first-class way of doing that today. It is something that people have asked us about right now, you either you pick one or the other you’re doing place or webassembly you’re doing blazer server.
It doesn’t seem like there should be anything blocking it, though, because, like I said laser weapon, sembly is just a bunch of static files. You could have a blaze of server app, you throw a bunch of blazer webassembly files into its dub-dub-dub root folder, and you can download those and use those, so it seems like you could get it to work. I haven’t actually done it yet, though, and it’s not an area we’ve really played around with, maybe that’s something that will we’ll look at going going forward.
Well, this has been amazing. We have coming up a short commercial break and afterwards
Jimmy's Internet Marketing Business Blog 