Let's Learn .NET - Blazor Hybrid

[MUSIC]. >> Hello. Thank you-all for joining us here today. Good morning. Good evening. Good afternoon. Wherever you are joining us from in the world, we're so happy you're here with us today for our Let's Learn.NET: Blazor Hybrid event. I'm very excited about this. I have some great experts on, and we're going to walk through a brand new Learn module that we created just for this event. Without further ado, let me bring on my first speaker. >> Hey Jayme, how are you? >> I'm very well. How are you Matt? >> I'm doing great. Yes. Nickname Mathias. Now, doing super good, super excited to be here, to not only talk about what Blazor Hybrid is, but how it works with.NET MAUI and even what.NET MAUI is. I'm not going to be the only person, Jayme. We have another amazing guest host that's dropping off his kids currently. >> Correct. Yes. We will be joined by Eilon Lipton who works directly on the Blazor Hybrid product with all of the team and will be joining us shortly. But yes, had a few children that needed to be dropped off at school. They'll be joining us shortly. Love seeing all these people joining in from all of the world. Hello. I'm actually calling in from Italy myself. James is calling in from Oregon. >> Yeah. >> Great. So excited to get started. James, I think you have some slide decks for us, correct? >> Yeah, totally. What we want to do today in the Let's Learn.NET series is that I got multiple monitors and laptops here to monitor questions as they're coming in live. What we're going to do is two things today. We're going to first start with a short presentation that I have that's going to walk through like, what is this thing? Why would I use it? What are the basic building blocks of what Blazor Hybrid is and what.NET MAUI is. Then, like Jayme said, we're going to walk together through our very first learn module. That being said, I will say that if you want to get started today and you want to build your first Blazor Hybrid application, I need to install Visual Studio, and specifically, you'll need to install Visual Studio 2022, the 17.3 preview, and John, who is our MC behind the scenes, will drop a link into the chat for both Visual Studio for Mac and Visual Studio on Windows, and I'm going to be using that today. All you need to do is check the.NET MAUI workload and that'll give you everything that you need. But let me go ahead and I'm going to share my screen. >> While James gets that set up, just for a quick agenda for those folks who have not joined this event before, it's a really fun event. We walked through Learn module together. First, we'll start off with some slides to give you a rundown and an overview of what Blazor Hybrid means and what it really is and how it's useful. Then we'll dive right into the workshop. Don't worry, we'll pause for questions, so feel free to load in that chat all the questions that you have. We'll get through as many as possible, but we also have experts in the chat who can answer those for you as well. Then we'll get through a bunch of questions, actually continue on with the workshop and hopefully complete the whole workshop in this event. So you will have completed your Learn module. Again, we'll fix [inaudible] time for questions. Feel free to ask as many questions as you want, and we'll get to as many as we can. >> Awesome. Cool. I'm ready over here if you want to bring up my screen. >> Yeah. Let's add that. >> Sure. Yes, John, great question. John is asking me in a private chat visualstudio.Microsoft.com/preview. That's how you get it. >> Thank you. >> Always. Awesome. Good question. >> We will throw that up and I'll let you take it away. >> Awesome. Perfect. We're here to learn about Blazor Hybrid and what Blazor Hybrid is, and specifically how it works with other.NET frameworks such as.NET MAUI, but also with WPF and wind farms as well. The first thing I do want to talk about actually is that there is an entire.NET Conf focus on.NET MAUI coming up on August 9th. You can go to focus.dotnetconf.net. That specifically will have the full agenda, speakers and all sorts of fun swag. There's going to be events happening around the globe all the time with.NET MAUI and for Blazor Hybrid. Definitely check that out. There's going to be not only a lot of.NET MAUI content there, but also some Blazor Hybrid stuff as well. Definitely, you want to check that out. It's in 12 days and probably at this point, zero hours and zero minutes. I think it's started to write around 08:00 or 08:30 in the morning pacific. Definitely head over there for a dotnetconf focus on.NET MAUI. Let's talk about.NET. Now, this event has always been setup and for anyone that's may be new to.NET, new to the topic that we're covering, and I always like to talk about specifically what.NET is. I said I have this slide. You've probably seen it a million times if you've watched.NET stuff. But if you haven't, then this is going to be new to you. You can think of.NET as the underlying system that helps you build applications for any different operating system or device that you want. Whether you want to build web apps, desktop apps, mobile apps, games, IoT, AI, do machine-learning, deploy to the Cloud;. NET is going to run everywhere, and.NET 6 is the latest release that is a unified platform across these different operating systems with UI frameworks on top of it. So is common infrastructure, common compilers common languages like C-sharp, F-sharp and VB. Of course, is an amazing ecosystem on GitHub and NuGet, which is our package management system, and great tools with Visual Studio, Visual Studio for Mac, Visual Studio code and of course, always the command line interface too. Now we're going to be focusing in on this area here, which is web, desktop and mobile. Because with Blazor Hybrid, which Blazor itself traditionally being a web framework, Blazor Hybrid lets you go to more operating systems with the frameworks listed here for desktop and mobile. Like I said, Blazor, it solves what I'll focus on first, and Blazor is our component-based UI framework to build web apps in C-sharp, which enables you to not only build great web apps, progressive web apps for any browser, any server, anywhere you want to deploy. It runs in multiple modes that I'll talk about. But it's going to enable you to use C-Sharp in a component-based modern framework. One of the big benefits of Blazor, is that you're able to write all of your logic and all of your interactions with your components in C-Sharp. What's nice is that you don't have to necessarily write JavaScript whenever a button is clicked and you want to increment a counter, you can just write that logic in C-sharp and Blazor will handle all of it for you. Blazor is built on top of ASP.NET Core. That has been around for a long time and powers hundreds of thousands of millions of websites on the Internet, and Blazor sits on top of it. It uses the same razor component model to do that, which is really nice. On the other side, we have.NET MAUI, and.NET MAUI Is our native UI framework that enables developers to build cross-platform apps for iOS, Android, MacOS and Windows. We did get some questions in the chat about what.NET MAUI is. I'll talk about that in a little bit. But if you have been in the.NET Ecosystem for a while, you may have known about Xamarin and Xamarin Forms, and.NET MAUI Is the evolution of Xamarin and Xamarin Forms. IOS, Android and Mac are the base underlying systems there that work on.NET and has been integrated into.NET 6 with common tooling and common infrastructure, and.NET MAUI is the UI framework and tooling and other things on top of it, helping you to build and deploy to these different frameworks as well. If you were building in Xamarin and Xamarin Forms, you can easily upgrade. The cool part here is that you maybe as a web developer as a Blazor developer, may not know anything about.NET MAUI, and that's totally cool. Some of the stuff I'll talk about today, I'll talk about merging those two pieces of things together. Now, you might be saying, "Well, James, I'm brand new to Blazor." Let me just knock this out of the park first of what exactly Blazor is. Like I said, it's a full stack for building web apps with.NET, and it's built on top of ASP.NET Core. Now traditionally though, with ASP.NET Core and building web apps with MVC or with Razor Pages, you're normally running the ASP.NET Core components on the server, and on the front end, you're using either JavaScript or other web frameworks like Angular, React or Vue to build out your components. >> Obviously, the thing here is that while you can leverage and use C# and.NET on the backend, your front end here is so primarily in those web technologies. Blazor looks to change how you build your front ends with.NET, and it enables you to run.NET directly in the browser or via on the server and handle everything as a developer in C# with.NET, which is great. You don't have to use other web technologies that are out there to build your front end. You can use.NET everywhere, which is the dream. There are two models to Blazor. There's a server model and a WebAssembly model. Actually, there's a third one which is called Blazor Hybrid. There's a third model that Blazor itself works in the fashion that Blazor Server runs everything on the server. Your Razor components, your done at logic, everything is over on the server running so you get full power, full speed, full execution, and what's Blazor Server does it handles everything via a signal or real-time connection to handle DOM manipulation. That means when a user clicks a button that basically notifies Blazor to run logic and then updates the DOM that is displayed to the users. On the right-hand side is something called Blazor WebAssembly or you might hear it called wasm. WebAssembly is an industry-standard that is supported by every browser technology mobile and desktop, and what's great about that is it enables other languages and runtimes to run directly in the browser. Here, for example, Blazor.NET and your Razor components and the.NET WebAssembly runtime, which is very small, runs directly in to the browser itself. You're running that logic locally which is very cool. What that means is that you can have a fully disconnected application that runs there. Now,.NET MAUI on the other hand like I said, is our open source platform for building modern and performant multi-platform apps for iOS, Android, Mac, and Windows from C# and.NET from a single shared code base. What is great about that is that if you want to build for these native platforms, iPads and iPhones and Android devices, TVs and Mac and Windows desktop apps, you have the capability to do that as a.NET C# developer. What's great is that you have a big bulk of shared code. Things like your business logic, which would be your models, your view models, your RESTful service calls, databases, Azure integrations, other backend integrations, those would all be shared across the different applications. It also blends in, of course, cross-platform native user interface so you can create a button or a label, or an image, or a textbox, and it will display and render the native controls, but you're using a shared cross-platform API to do that. It also bundles in a bunch of great native capabilities that we're going to talk about today. But also enables you to access a bunch of different native features from a cross-platform APIs. Things like geolocation or connectivity, sensors, those are all handled cross-platform and of course, resources like fonts and splash screens and images, and icons and raw assets and all things that are in there. Now the important part is that you can see up top here, right there's still C# for iOS, Android, Mac, and Windows, and that is because.NET MAUI is built upon those native platforms. iOS for.NET, Android for.NET, and MacOS for.NET, which were previously Xamarin.IOS, Xamarin.Android, Xamarin.Mac. They have been all upgraded to.NET 6, and they are built on top of that native capability, which gives you access to the native APIs in C#. If you want to do something we got questions in the chat about, I want to access a voice recorder or sound system or want to playback audio, there may be an API built into.NET MAUI to handle that like I was talking about. If there's no, there's either a community plug-in out there for it, or you can just access the iOS, Android, Mac, or Windows APIs directly so you have full access to the capabilities of the devices. Now, for.NET MAUI use the latest technologies for each operating system. For iOS and Android, it's the core operating system that's there. For MacOS,.NET MAUI applications are Mac catalyst applications, which is the route that Apple is going to deploy Mac applications, and it's a optimized bundled iOS app with MacOS features. Then on Windows, it is a WinUI 3 application powered by the Windows app SDK. It's the latest and greatest in Windows technology..NET MAUI is a bunch of things. I mentioned that it's a bunch of pages and layouts and controls as a binding system, navigation, an animation API, dependency injection service, the same one as ASP.NET Core. Continuous integration support, hybrid developments support which we'll talk about today. Default themes and a bunch more right built into the box. But as of today, I've only really talked about these two things separately. I've talked about Blazor over here and I've talked about.NET MAUI over here. But what we're here today to talk about is combining these two pieces of technology together. Bringing Blazor into.NET MAUI to build and share components across web and build native hybrid applications for iOS, Android, Mac, and Windows, powered by.NET MAUI, and that is Blazor Hybrid. Blazor Hybrid is that third option for Blazor that works across not only.NET MAUI but also WPF and WinForms that enables you to bring those components into other.NET frameworks. What that means is that if you are coming from the web world and you are looking to build applications already have applications built with Blazor and.NET, you can now bring over a bulk of that logic and that WebUI into.NET MAUI. I'm going to talk about today exactly how this works, and we're going to go ahead and build an application together so we can see it in real-time. You might be thinking, well, James is this Blazor Server is his Blazor WebAssembly. No. It's Blazor Hybrid, it's completely different. The cool part here is that there is no server, there is no WebAssembly. I'll make that very clear. No server, no WebAssembly. Neither of those because called Blazor Hybrid. The cool part here is when you think about it is.NET MAUI, WinForms, WPF, they already have a.NET runtime that is bundled and compiled into the native application. What happens here is Blazor Hybrid has a Blazor web view component that each of those frameworks can use. In.NET MAUI it's a Blazor web view that you can use as a control and load Blazor content. Then when Blazor in that instance wants to execute C# logic or.NET logic, it uses the.NET runtime on that native application for.NET MAUI or for WinForms or for WPF, and then what it does is it uses the native web view controls to render that HTML and all those different assets and CSS and anything else that you're doing. On iOS and Android and Mac, it uses the native web view controls there, and on Windows, it uses web view too, so the latest and greatest there. You get all that good stuff that is there. All good stuff. What this means is that in this hybrid architecture, you have access to now bring in as much or as little shared Blazor components as you want. We'll talk about that today is you can build a 100 percent fully hybrid application and never worry about.NET MAUI UI at all. You can just use all of your components 100 percent, or you can mix and match those different pieces together to actually write more of a hybrid application where there's native UI and also hybrid UI as well. Good question here. Mike RDZ in the chat asks, I created a Blazor app, I'm looking at the starred chats here, Jayme and John, one year ago and I would like to target Windows. Is it possible? Yes. With Blazor Hybrid, you can now take your Razor Blazor component libraries, Razor class libraries and bring them over. Pretty much there, you bring them over, and then you can target not only Windows but Mac and other platforms too. >> Use.NET MAUI or WinForms or WPF based on your needs and your application. The advantage here is that, you can also do a progressive web app with Blazor too. But compared to a progressive web app, the nice thing about a native application is you can deploy it into the store, into your own private store internally, and of course, you can use the native capabilities under the hood, you're not restricted, you're not in a sandbox, you're outside of that. To this point here, Abdul asks about, how do you bring in CSS and Razor class libraries into Blazor Hybrid is, is you create a Razor class library that has all of that stuff in it and you share it with the.NET MAUI application of the Blazor application. It should work exactly the same today as Blazor. No difference in that regard. I think maybe before we build our first Blazor Hybrid application, Jayme, do you want to do some more questions that are maybe in the chat? >> There we go. Yeah, I was going to say, are you ready for questions? Because we definitely have a few. >> I think so. >> Okay, cool. I'll just start down the list as we got a few from the beginning. >> Sure. >> The show as well. How can we access Bluetooth and WiFi devices on the network in MAUI on iOS and Android? >> Yeah, that's a great question. We look at this architecture, I'm glad we saw the slides up. In general, there's two ways of doing it. Since Blazor Hybrid apps are built with.NET MAUI, leverage.NET MAUI capabilities, it means you have access to those underlying APIs. We'll see today when we walk through the workshop, how to access the file system and different settings inside of it. But I'll also talk about how to check WiFi or connectivity or different things cross-platform. Additionally, like for Bluetooth is a good example, is there's many plug-ins out there, like a BLE plug-in or Shiny is a good example of community projects and packages that you can just pull into.NET MAUI, and they've abstracted APIs for you. In the case that there isn't one, so for example, we haven't abstracted it, the team hasn't abstracted it into.NET MAUI, there isn't a community package, the other thing you can do is just access the iOS and Android and Mac and Windows APIs directly in C#, because you have access to those native capabilities in C#. Good question there. >> Okay. That probably relates to the speaker and the mic for recording. >> Yes. >> Okay. Because we had another question about that. >> Exactly. >> Another question we have here is, will we get to see an example of customizing the non-client area of a Window when targeting Windows, and for Mac? >> I like to show Humbert, so is asking the non-client area. I think in that area, you still have access to those APIs in Mac and Windows. There are some examples out there in the.NET MAUI samples repo of accessing the settings, or status bars, and other things like that. But if you want to follow up with me, Humberto, you can Tweet at me @JamesMontemagno, and I can answer a little bit more afterwards, or post another one with exactly what you mean. >> Yeah. Perhaps non-client apps with Blazor. >> Yeah. >> We'll follow up. Another question that we have is, pardon me. Here we go. Is there a performance issue in Blazor Hybrid when converting from Blazor syntax to native MAUI? >> Yeah, great question. Well, one specifically is that's not what it does. Maybe pretty clear about this, in general, and you'll see today, is in this form, there is a Blazor WebView control that you use. When you're building these applications with Blazor Hybrid, and you're using your Blazor and your Razor components. Those specifically are Web UI. Inside of that, those are not native components, it's a WebView. In this example you see it here. The difference is that you can blend in native controls, so you could have a Native button on top and then the Blazor WebView control and you can share state between those different elements. Or a good example might be, you're on page 1, that is fully native and it's a scrolling collection view of items, and when you tap on one you go to details, and that's a Blazor WebView control that is fully being shared with other components across there. One would be fully native and then one would be the Blazor stuff there. I would say as far as performance goes,.NET is super fast, these devices are super fast, the browsers are super fast. Rendering web controls and web views, will always have somewhat of a performance indication. It's not a Blazor thing, it's a WebView JavaScript thing that's happening, in general. But the nice thing is that there is no additional overhead of a server or WebAssembly since.NET is running locally there. They are quite fast, in general. >> Yeah. >> Good question. >> Speedy Blazor quick. >> Yeah. >> Okay. Is it possible that access SQLite or a file system on Android using Blazor Hybrid, obviously? >> Yes, totally. We're actually going to access the file system today in the workshop. Then there is a SQLite-net, which is an open-source cross-platform version of SQLite that runs everywhere, including inside of Blazor, and of course, Blazor Hybrid and.NET MAUI, so runs everywhere, so yes. >> Okay, great. We have time for a couple more questions here. >> Yeah. >> Today, will we be explaining how to deploy authentication and DB to the Hybrid Architecture? >> Not today. However, in the Blazor Hybrid documentation, specifically, there's a section on that that the team added, and they go through multiple scenarios and different libraries that you can use with Blazor Hybrid. Check out the Blazor Hybrid documentation on the Microsoft Docs. If we have a link, we'll drop that in there. But great question. >> Yeah, I was like, oh, I have the link. >> Yeah. >> Oh, no. Perhaps, John, our amazing producer in the background can pull that link. Also if you go to the let's learn.NET Blazor Hybrid webpage, it also has the link to all of the resources, the download, the documentation, the workshops we're walking through. We'll share that in just a moment. I'm going to do one more question. Thank you. There we go. All of the event resources can be found down there. I'm seeing a little bit of this. Is there an API available for the.NET MAUI Blazor for QR code scanning? >> Yeah, great question. Here's what's really fascinating about this system is there's two kind of capabilities here. If you think about it, if there is a Blazor component today, it should just also work inside of a Blazor Hybrid application. It's going to depend, like sometimes there's different permissions that you may need. For example, like I just added a Blazor component that allows you to pick or take a photo, for example, with a camera. As long as I had the correct permissions on and I set that up ahead of time, it worked fine. There may be some QR codes scanning libraries for Blazor out there today that you could use. Some of those may just be only web and some of them might have some native capabilities in there. Jonathan Dick, who's the Dynamo team lead has a Zebra Crossing.NET library @ZXing, Zebra Crossing 1, and he has a new version, I think it's like Big Island or something like that. It's still a work in progress, but you should be able to at least grab some of that code and figure out from there what's going on. But again, there's a lot more of these community packages coming up, in general. But good question. There's other vendors out there too, like Zebra itself, that have additional libraries usually as well. Good question. >> Okay. >> We do have more questions but let's see. >> You do the Georges's question. I like that one. >> Yes. Let's pull this one out. >> George was asking, I want to build a mobile app for games. Simple quiz, should I use.NET MAUI, Blazor Hybrid, and that stuff? Any app. You can build any app. >> That is easy. Anything. >> Anything you want to build. >> Build anything. >> In general, what I usually tell people in this scenario is if you want to use a fully native control and you want it to be just 100 percent.NET MAUI, just be.NET MAUI. If you want it to be Blazor Hybrid, do it there. You're totally good to go. >> A lot of options here. All ready. Do you want to get started as we actually dive into the workshop? >> Yes. Let's do it. >> For those of us who are just joining us now, don't worry. We haven't actually started to learn module. We've just been going over the briefing for Blazor Hybrid and.NET MAUI and the basic this for that. Now we're going to get started with the actual learn module. I will let James take that away. >> Cool. Yes. We'll share a link for the learn module, but the easiest way to get there is if you go to docs.Microsoft.com, you can click on "Learn", and that's going to take you here. I'm just logged into an incognito browser, but you can come into "Products" and there's.NET. This is pretty cool. You can see now is there a big.NET MAUI. Focus event coming up. But additionally, we have all these collections. You can learn to build on.NET apps, C# apps, Blazor applications, ASP.NET Core applications, micro-services and.NET MAUI apps. If you-all are like, hey, let's start learning this stuff. This is a good place to start learning Maui and start learning Blazor. You can also then click this "Browse all", and you can type in a Hybrid. If we tap on that, you're going to see the Blazor Hybrid learn module here. Build a mobile and desktop app with plays or hybrid. Now you can do learn modules with or without being logged in. If you do log in, you get different points and levels and upgrade systems and things like that as you complete your learn modules on your way. It's pretty cool. I should also say here, if you go to this browse section here, and if I was just to show you-all those over a 100.NET specific or tagged things, but you can also come in and you can say, oh, give me only Blazor, give me only.NET MAUI, and the Blazor Hybrid 1 will be in both of them, because it's both.NET MAUI and Blazor. Let's go. What we're going to learn today in this objective as we go through is we're going to learn how to configure our local environment for Blazor Hybrid development. We're going to talk about the basics of architecture of a Blazor Hybrid app. We're going to create a new app. We're going to add some logic to our app, but we're also going to access some platform features for mobile and desktop with.NET MAUI, and then we're going to deploy our app, of course, from Visual Studio. The biggest part here is that you will need to install Visual Studio 2022 with a.NET MAUI workload. Specifically, it will be the Visual Studio 2022 preview is what you'll need, because that's where.NET MAUI is found today, in the preview version of Visual Studio 2022 or Visual Studio 2022 for Mac. Those are both options there and hit "Start" on here and we are going to start it up. We walk through many of this earlier, so we don't need to necessarily go through all of the introductory part. We're going to actually just go through the exercises today. But if you want to always go back and revisit any of these different concepts, the nice thing about learn modules is that they're set up to do some learning, and then go and do something. Inside of here we can look at the units, and you can see here that there's literally an introduction. What is Blazor Hybrid? Go and do something. Go and create an app? What is Razor components? Let's go and do something. What are data binding and events and Blazor Hybrid? Oh, let's go and do something, as we go on and on and on. It's cool in general as we go through this. Here of course, we're just going to talk about exactly what I was mentioning earlier about what Blazor Hybrid is, the learning objectives, but let's just go ahead and get started here. We've already covered what Blazor Hybrid is and what Blazor is, and you can see there's some beautiful screenshots here from exactly what we just talked about in the slides, and even talks about what.NET MAUI is exactly right here and how it's built on.NET. Now, I mentioned earlier here that we're going to be using either Visual Studio 2022 for Windows or for Mac, and specifically, we're going to use the preview version over here. Now we're going to go ahead and walk through the exercise. The first one is creating and running our Blazor Hybrid application. You can see specifically here it tells us our exact requirements, Visual Studio version 17.3 Preview here, and the specific workloads that we'll need to install on our machine. If you already have the Visual Studio installer, we'll go ahead and open this up, over here. Here you can use Visual Studio 17.3 either Community Edition, so that obviously version works perfectly well, and then here I'm going to hit "Modify". You can see exactly what I've installed. Now of course you can install multiple things. I have not only the ASP.NET. Workloads, I can do Blazor and Blazor Hybrid, and stuff. I also have the Azure SDK, development tools. I have desktop, UWP and.NET MAUI. I have all the things installed. But the only one you need is just this one, and then of course I recommend the ASP.NET and web development because I also want to do Blazor development as well. Just those two would be the main ones that you need, in general. Now, when we are doing this, here, we're going to focus on deploying just to Windows and Android. I know that there was a question in the chat from Matt about how to deploy to iOS and MacOS, and that's a great question, in general. There's three ways of doing that. One, if you're on a Mac, you can install Visual Studio 2022 for Mac, and then you'd have iOS, Android, and MacOS. Of course, for Windows, you need Windows, and for Mac, you need a Mac. Now if you're on Windows and you're installing and using Visual Studio 2022 Preview like I am, then you will be able to deploy to Windows and Android immediately, or you can also do one of two things for iOS. For iOS deployment, you can actually connect remotely to a Mac. If you have a Mac on your network like this here, my MacBook Air, you can connect remotely. Then what's nice about that is it will do remote build and compilation, and there's a remoted iOS simulator that will pop up on your Windows machine. The other option is a feature called Hot Restart that enables you to plug an iPhone into your Windows device. But you also need an Apple Developer account to get that setup working, but it does allow you to deploy there. There we go. I'm going to launch Visual Studio. What I'm going to do is I'm going to go through this on another monitor, so you can follow along at home, but you'll see exactly what I'm doing here. But I guess I can do it right here. Well, what I'm going to do is I'm going to go into Visual Studio 2022. I'm going to say "Create New Project". >> There's a few options here. There's all projects, so there's all the different things you see Blazor server, you can actually go to Blazor itself, and here you'd see Blazor server, Blazor WebAssembly, and.NET MAUI Blazor app. That's the Blazor Hybrid app, that is power by.Net Maui. The other thing that you may note and then there was a question about Razor class libraries. We just typed in Razor, for example, here there's a Razor class library and that is the same exact project template that you would use to share with a.Net Maui app or a Blazor app. There's no specific.Net Maui or Blazor Hybrid Razor class library. It's just a Razor class libraries. If you have Razor class libraries today are the same exact ones that you would use. What I'm going to do is I'm going to type in what it says up here which is.NET MAUI Blazor. Here we go and we can see the first one is.NET MAUI Blazor. Let's go ahead and create that. We're going to call this Blazor app like that. That's what I believe it says to call it or Blazor Hybrid app. Blazor Hybrid app. There we go. Perfect, and then now what we're going to do is go ahead and create this. It's going to go ahead and ask us for.Net 6 support. That's what it supports and we're going to hit "Create". It already exists. Let me go ahead and delete it. Because I did this demo earlier, let me delete it. Perfect. Delete. Now I can create it. Perfect. I knew that was going to happen. Awesome. Cool. What this is going to do is it's going to create my project, and what it's going to show us is something that might look similar to Blazor applications if you're coming from that world, and also might look a little bit similar for.Net Maui if you try that out at all. But I want to walk through the infrastructure and environment here for a Blazor Hybrid application. I'm going to go ahead and zoom in over here. What I want to show you is that there is a single project and single solution for this application. We not only have our Blazor Hybrid app, we also have all of our dependencies, and this is unique because this application is a multi-targeted with.Net Maui. It's a.Net Maui application, and it targets Android, iOS, Mac Catalyst, and Windows, which is pretty cool. Now inside of here, there's some additional launch setting properties that you might be familiar with. There's also things like data, pages, platforms or resources shared and a wwwroot, and I'm going to go through all of this. Let's take a look from the start. The first thing is data. This actually is using the same exact Blazor infrastructure and code. If you did a brand new Blazor app which has a few tabs and has a weather area on there, but it has a simple weather object. Here I can go and move this out of the way. We see weather forecast, date, time, temperature, temperature Fahrenheit, and a summary. There's a forecast service so this goes off and gets some forecast over here and it goes and gets some different data, and then we also have some pages. This is just straight up Razor pages inside of here. There's a index.razor, FetchData. These are Razor Pages for Blazor. If you've ever looked at a Blazor application that is going to look exactly the same. Here, for example, we have the counter page. It has some HTML in here, and then it also has our C-Sharp code that Blazor will execute directly in our webpage. For example, we have an onclick event here for our HTML button, and I increment the count that has some CSS styling on here, and when that is clicked, it will call IncrementCount. It will increment this count, and then here with this little data binding, it's going to increment that count for us, which is pretty cool. Same thing fetch data is it's just using some very simple HTML components in Razor syntax to automatically go in, display a table with weather data, and here it's just using simple.Net to load data from that forecast. Now over here is where it gets pretty fascinating because we have these platform folders, and this is where the.Net Maui stuff with platforms and resources comes in. Here we have all of the infrastructure needed to boot up Android, iOS, Mac, Windows, and Tizen, which is a platform from Samsung that they support on their different devices with.Net Maui. Inside of here or anything specific, they're just C-sharp classes or different things specific for Android, iOS, Mac, or Windows. For Android, for example, there's a little bit of Android startup logic written in C-Sharp. Here I have Android things like the Android runtime, I could say using Android dot, and I have things like the native Android, Bluetooth or database or graphic systems or media systems here available to me all inside of this folder. There's very little code, but this is just some infrastructure and scaffolding that is needed there. There's also some manifest files that basically enable you to set permissions for your application, and the same thing true for iOS, Mac, and of course Windows. These are just basically little starter applications that'll be deployed for those specific platforms. Now instead of resources, these are resources specific for the app and for.Net Maui things. For example, for the application itself, there are things such as app icons which are like SVGs that are loaded. There are splash screens that are generated automatically, and then there are embedded raw assets like text files or databases or JSON feeds, and then things like fonts and images. These fonts are images would be ones that are used in native controls with.Net Maui whereas if you have controls for your Blazor apps, they're going to go into this wwwroot folder. Here we can see CSS with Bootstrap and open iconic, the fonts that's here and all the different things. You're going to blend in those two worlds together base if you're using those things in the native world or in the web world. We also have shared. This is just main infrastructure coming from the Blazor. >> Infrastructure. There's a navigation system, a survey prompt component that is reused in different areas and a little bit more. Now inside of here, additionally, are a main Maui program. The main Maui program is similar to the program file and a Blazor application, and it's the startup of the app. When the app goes to start, it goes here, and we can see that it uses a very similar host builder pattern from ASP.NET Core, and what's great here is that that means that it is going to use the same exact service models, dependency injection models that you're used to when you are coming from Blazor or ASP.NET Core. Here we can see that the builder is starting up using an app. It's configuring fonts. There's life cycle events. There's all sorts of things in there. Then it's starting up and injecting into the services, the MauiBlazorWebView(). It's also, here, if in debug mode, it's enabling the BlazorWebViewDeveloperTools() because you don't want those in run time. You want to turn those off. Then additionally, it is registering that WeatherForecastService() that will be used in that razor page that we saw earlier from Blazor. Now here we can see that this thing is loading up the Maui app. We go down the rabbit hole of how this goes. Here we have the app file. This app file is just a little bit of styling for different things in a.NET MAUI application. But the code behind is saying, hey, when you load this app, program file, create a MainPage(). That MainPage() here is a.NET MAUI page. You have the program which loads here, which loads the page that's going to start with the application. We can see that this XAML, so this is.NET MAUI XAML. You could also write this in C# as well. It's up to you. But we can see is that it's a main ContentPage. That means you can have multiple different things inside of here. You can have not only just this BlazorWebView control but you could also, for example, have native controls as well. If you open up this toolbox over here, it should show me that toolboxes. It isn't showing up. But if I just go in and start writing some stuff, we can see that I have access to a bunch of different.NET MAUI controls; a "Border", a "Button", a "CarouselView", "CollectionView", "DatePicker", "Entry", "Ellipses", "GraphicsView", "StackPanels", "Images", all the native controls that are there. This application though just uses the BlazorWebView and that's it. There's one BlazorWebView that is hosting this page, and specifically a component, which is the main component. That main component lives over here, and this main component is coming in setting up some scaffolding and infrastructure for our Blazor application that's going to load our main layout and our navigation, to actually load the NavMenu here. This is what's going to be loaded from Blazor. Here we have our Blazor navbar. Up here, there's a toggler. There is a few different pages inside of here, such as our index page, our counter page right here, and then also our fetchdata page. There's a little bit of logic to collapse and non-collapse the page as well. Which is cool. That's how that is loading up there. What I'm going to do now is I'm going to come up to this debug menu up here. This is actually a very unique. If you're coming from the Blazor world, you'd normally just hit go and it will deploy into a browser, but we're going to deploy into Windows, Android, or if you wanted to connect your Mac or plug in an iPhone device, you could deploy to those different operating systems like iOS, simulators, or devices. Here, what this is going to enable me to do is toggle between the different frameworks, and those frameworks are coming from this csproj files. This is something that's really important inside of here. I'm going to drop this down, and what we can see is that this application is targeting Android, iOS, Mac, and if we're on Windows, it's going to also add the Windows target there, which is really nice. If I had Tizen tooling installed, I wanted to play the Tizen, I could add that as well. Here this is not only adding multiple targets if you never want to deploy to Mac or to iOS, you could remove those, for example, or you just leave them as I'm going to hurt anything. But we can also see that it's using the Razor project system from.NET. It's using the single project and using.NET MAUI. It's using some default CSS items, but what is also cool here is that it is displaying our name. Here we have our application title, our application identifier, our ApplicationIdGuid, we have version numbers that are in here and.NET MAUI is for all intents and purposes, handling that for us. Basically, it is handling all of this cross-platform complexity for us automatically. It also handles our icons, our splash screens, our images, fonts, and assets, all right here. You can go in and tweak and change these different things. If you want to change this splash screen or change the colors, you can change all of that here, which is quite nice. I'm just going to hit debug here and this is going to build and compile our Blazor Hybrid application for Windows, and we should go ahead and see it running. I'm going to run it not only on Windows, but also run it on Android as well, and talk about what's happening in that instance there. Let me see here. Should just go ahead and compile up and then deploy. Now might give me an error because I did deploy this earlier, so I needed change a name or two. We'll see if that is the case, but I don't know. It just runs perfect. Amazing. Cool. Here is our native Blazor Hybrid application. We can see that I'm inside of a Windows application. It's inside of here. It works. There we go. Thank you really confetti. I can pin it to the taskbar. I can do all that stuff. Its all right there. Now here, like I mentioned, there's the three pages; Home, Counter. If I go ahead and click on that, we can see that I have this Counter here. I have Fetch data, so I can see my weather forecast that's coming in. I can also shrink it down and we can see that I have my full responsive UI that's inside of here, automatically just using CSS. There's no native UI here. It's just simply controls coming in here. Now it's nice though. If I wanted to, I can of course change any of this stuff too. I can do a few bits of different capabilities. I can actually come in and I can use this Live Preview here. This is a feature of Visual Studio on Windows that enables me to put an actual image of it here inside of it which is nice, and if I wanted to go into, let me go into my "Solution Explorer" and go into my pages and my counter page here, for example. I could come in, I can go ahead and hit that break-point. I get the exact breakpoints debugging that I would expect. Inside of there, I can also come in, right now we just have this incrementer. I could change this to plus equals 10, and then I can hit this little "Hot Reload" button in here, and that's going to go ahead and hot reload that code for me. Now we can see it's incrementing by 10 every single time. You can really go in, you can change your UI, you can change all those different bits and pieces and have them update their too. If I went into my index, for example, and now put that counter control over here, says that counter component, I should say, go over to the homepage. We can now see it's over there too. It's cool. We're sharing that counter component in both places. Now if I do want to go ahead and run this on Android, I'm going to stop debugging, and I'm going to go ahead and change the framework to Android. I can also just look at the Android emulators out of there. I'm just going to go and change it to Android. Visual Studio, if you have an emulator, well, go ahead and select one for you. You can also set one up over here. You can also go to "Tools", "Android", and look at the different device managers or SDKs and it'll handle everything for you, if you're missing any of that stuff. If you're on Windows 11 and you're in a location where Windows Subsystem for Android is available, you can actually deploy to WSA directly on your machine as well. That's an option. I have a video on the.NET YouTube, which is where you may be watching this right now, currently. This is now going to go ahead and compile up by just hit debug my Android application with my changes. The first time I do this, it's going to take maybe about a minute or so. It's going to start my emulator up. This is a previous app that I had running, which is just a.NET MAUI application. Then it's going to deploy it to my emulator. But it's going to do a full compilation, package up my Android app and then deploy it. I guess it takes the first time, maybe 30-60 seconds based on a faster machine is. I'm on now a relatively older machine. It's six series Intel, so it's five generations ago, but it does have a lot of RAM. We're just going to let it building compile up here. But we're going to see what questions I have here. Let's go ahead and I can tap on it. But maybe Zap from London over here was asking, well, and this Blazor Hybrid app, is it using different web view rendering platforms? That Great question. We'll see here if I just tap on the Windows app. This is going to be using whatever the, of course, my machine is going to slow down. My webcam may slow down as well. There too. It's going to tow compiling. That's for sure. There we go, as they just hide it from me. On Windows is going to use web view too. It's going to use the native bits and pieces there. If Aaron's just hop in on. Aaron, can hop in and answer these questions too. I don't know if he's just backstage hiding from everybody. >> He built the thing. He's muted, but he's there. >> Hello. Hi. >> Hello friend. >> I wasn't hiding. I was hanging out with my fellow YouTubers on the YouTube chat. >> Nice, so do you want to answer that question about how the Web views are handled on each platform? >> Yeah, absolutely, so just like any.NET MAUI component, whether it's your simple button or a label or the more richer controls like the MAUI shell control or the Blazor WebView control, which is also a MAUI component. On each platform we have slightly different code that runs. Most of the code is common, but then we, on each platform, configure and set up the appropriate native components to actually get the pixels on the screen. Ultimately, what is your application if there's no pixels? As James was saying, on Windows, it uses the Edge WebView2 control, to get that running, and on Android it uses the Chromium or Chrome-based Android WebView, and on MacOS, Mac Catalyst, and iOS it uses the WK, The Web-kit WebView I think is what that one's called. They will all have very similar APIs. But ultimately the Blazor WebView makes sure that all the right HTML and CSS and JavaScript and everything is plumbed in and all the right events are handled. As you're clicking through the user interface that you've built inside that WebView, inside that rectangle. That all the right.NET code runs as a result of that and communicates everything. >> Yeah, so I think now we have this deployed. We can see it up on Windows, and then now we can also see it running on Android as I not only stream and share my screen and do all the stuff, and run in Emulator too, we get the same exact thing, and now the difference, is that we have this running in the Android WebView. We have this running, but it's the exact same application basically running here. Look at that magic. Akash asks like, why is it hybrid? Do you want to answer, why it's hybrid? I don't think I hopefully did but maybe I didn't specifically go deep enough on the hybrid bit and piece of it. >> Yeah. Absolutely, so hybrid, well, it's a word it can mean whatever you want it to mean. It's one of those things. This is the most hybrid Blazor and MAUI ever that we've ever released. What does it mean hybrid usually in this context means it's mixing web UI when I say Web UI, That doesn't mean a website with HTTP request response, but Web UI, meaning HTML and CSS to put the pixels on the screen. But in the context of running in native platform application. What James has running on the screen there, that's a real Windows application. There's an EXE file that's running, that's your application. On that Android application, that's a real Android application. There's APK, IPK. >> APK. >> APK. Actually, that should be easy A, Android. >> There's an IPA for iOS, that's why. >> I'm never going to learn this. I'll just have like a cheat sheet on the wall printed out. Those are genuine Android applications. Application, it is a true native Android application. What's hybrid about it? Well, the UI is not rendering Android controls. That's not an Android button, that's not an Android grid, that's not an Android label. That's an HTML label. That to get the pixels on the screen itself, and that's all a hybrid application is. It's mixing web based UI, that meaning using HTML and CSS to get the pixels on the screen for an otherwise native application. >> Yeah, and I think the important part there, because I think Jose on the bottom here is asking, is this a WebView or is a native? Well, is both it's native and this is a WebView right inside of it so you can access native capabilities. You can blend native controls with the WebView, like Eilon, just said. Or you can be 100 percent WebView. Some developers are coming from the web role. They don't want to mix and match. They just want it all to be web stuff. Like if I really wanted to, let me just show you what that would look like is I could go into this main page and I could come in and I can say, there's this WebView here. It's a Blazor WebView. I could come in and say, well, let me add a grid instead of just adding one control, and a grid enables you to columns and rows, and I'm going to do the do row definitions and I'll say auto and star, and then I'll say Grid.Row of one, and then I'm going to add a button here, and I'm going to say text, "Native Button" here hit "Save." I think I need like redeploy this, let me just go out and redeploy this. But what you will see as I'm just going to close out all this other junk that I have is if we look at what I literally just created in my XAML here,.Net MAUI XAML is there's two controls. There is a button control and that's a dynamic Valley button, and that's going to render a native button at the end of the day. Then there's a Blazor WebView control, which is going to size itself inside of this grid and display whatever Blazor web contents I want inside of that did I accurately say that, Eilon? >> Yeah, absolutely. >> Yeah, so we'll this recompile up and spin up again on my machine that I apparently now need to build a brand new one for. Yeah, Jose asked about performance. Well, I covered this a little bit here is, when you're rendering and pulling up WebView and web components and since they are pretty fast in general rights. But yeah, rendering and pulling up the browser's going to have the browser or the WebView control overhead of loading whatever it does on the operating system. But as far as like actually rendering the native or the web UI like that's really fast. Is that accurate, Eilon? I'm a little bit freezing >> Yeah, absolutely, so there's two sides to the story. One is the calls for like the back-end applicant. The logic of your application. Whenever you're calculating the web requests you're making. That's just.Net code that's been running essentially natively on the device in various ways, and so whether it's a hybrid application or some other. NET MAUI application or Xamarin.Forms application is the exact same.NET running all of those, and so that should be full-speed, blazing fast. Then there's the UI, what's the efficiency of putting the pixels on the screen? Your application set, I'm on a button here, a label there, a grid over here and all that stuff. My answer to that is, if you think that the web browser on your device is slow, then you might have some performance problem there it's just like the regular web you're running Chrome or Edge or Safari on whatever the device is, your iPhone or Android tablet or Mac Book, M2, whatever thing. Those should all be quite fast because those are extremely optimized pieces of application, and this is using exactly those same components. The same component that's used in Safari on your regular desktop Mac to render a web page is the same component that's used for a Mac hybrid application as well is that same component. The one advantage that this has is that all the HTML and CSS that's in this application, it's your HTML and CSS. Now if you go to a random, let's say news website or whatever website, and you see what's loaded into those applications. I don't want to get into a discussion about like tracking and spyware and all that stuff. But you'd better off not looking at how much stuff is being loaded into when you go to your favorite news websites, homepage or whatever social media site, it's making 100 different requests for images and CSS and JavaScript, all that stuff. Yet they actually tend to render pretty fast that despite all of that. Now consider that for your application here, unless you're doing something weird, it's just your HTML for your application. You're generally not going to have tons of like advertising or other things in there. You can have those if you want, but you're not going to have those things. It's really just your HTML, your UI, your CSS, your application, and so if you think that the performance of the browser on that given platform is reasonable, then this should be at least as good. Which is to say, I wouldn't be particularly worried about anything now, if your UI has a page with a grid with 10 million rows of HTML on it, it's probably going to be slow, but you probably shouldn't have a page with 10 million rows for a table in HTML, there are much better ways to do that with virtualized UI or have a pager is just not a good UI to have to begin with, how can you possibly interact with that? I think for any reasonable application, there should be no particular performance problem here, and even if you are experiencing something, there are tools to analyze the performance of the application and say like, I think it's rendering a little slow when I get to this page, when I do this interaction, I'm not getting the performance. I expect there are tools both in Visual Studio and the web developer tools that are used to debug and analyze what's going on inside that WebView to create analysis and see where the hotspots are at in your application. >> Yeah, that's a great too, and the same can be true for native applications too with or without.NET MAUI is like you can create a non-performant app. There's plenty apps I use on my phone that are native or hybrid or that, and they're made by unicorn companies that are most performance thing in the world. Performance is in the eye of the beholder sometimes. >> It is, and can I say that people should be careful asking me questions. I'm going to give like 10-minute answers to every question. >> Could you play to listen and replay to internalize everything that you are saying. >> Well, we got 15 minutes left and we're trying to get through this because I think so far we're 10 minutes in an-hour-and-a-half. But yeah, I just wanted to show you there's a Native Button, and this is a Web Button. You can see the web view. I spaced them out so you can literally see the spacing here. But this is a native button and this is the Web Component. You can have multiple Blazor WebView Controls as well. If I wanted to, I could. I don't know if it's going to work or not, but this would be cool if it did without you having to reload it. I'm curious, I think as I reload the state of it. But for example, I could put in multiple BlazorWebviews and I could put in native components in between that. I don't know if you'd want to do that, but you can. I'm doing it, and Eilon can't stop me. >> This is perfectly legit. >> Yeah. >> Before we call this sometimes the term doesn't apply here as well, but we call it islands of richness, though here it's not about richness, but it's just islands of Blazors scattered throughout your MAUI application. Now itself being an island. This is very meta. This is like some fractal, I'll cut myself off right there. >> Let's continue on it. I'm going to go ahead and put this back to its original states. I'm just going to go ahead and get rid of this stuff that we put in there. There we go. That's going to look good. I can leave orange as the background, you're not going to see it. Let's go back over to here, and we've basically completed this section. We learned all about this stuff. I told you-all about this stuff. So much co, we ran the app. Amazing. Now, so far we've talked a little bit about Razor and we've talked about some of the things that you see, and inside of here, we've tested out the counter. We did this, which is cool. We incremented the counter here, and what we can see is that what happened is when we incremented that counter, this logic outran right here. We can see, for example, we have the increment count and updated the count, and sure enough it updated there. This is going to outline what it does. I would just go. I guess I should have ran through his, but I've did run through it 100 times. I ran through these things. Let's see if Eilon can answer these questions and feel free in the chat wherever you're at to put, A, B, C, D, or 1, 2, 3, 4, whatever you want. Blazor Hybrid apps use which.NET runtime, is that the run-time provided by the browser? Is it the.NET runtime deployed natively with your app? Is it javascript run-time deployed with your app or is it WebAssembly that's deployed with your app in a Blazor hybrid application? >> This is a fascinating question. This is one of the things when I'm talking about Blazor Hybrid, I'm surprised you spend 10 minutes just on this one topic. If you watched any talk that I've been in previously about Blazor Hybrid, you should know the answer. But if you're new to this, we're going to spend 15 minutes on this topic. >> But I have some slides on it too. Hopefully there we got some people said four some people said two. Another person said two or B, I don't know either. I should A, B, C, D inside of here. What do you think it is on? You know what it is. >> Well, I just want to say what you can do is you can press F2 and you can edit directionally, correctly can inspect the elements on the webpage and you can put an A, B, C, D in there if you want. Yeah, that's the beauty. I said right-click, inspect and edit HTML. >> I'm not going to do that. Some people are saying two and four to JavaScript run-time. >> Yeah, those seem to be the two big choices here. Either.NET runtime deployed natively within your application or WebAssembly runtime deploy in your app. People are not going for browser runtime or JavaScript runtime. Very interesting. Well, there's actually a big hint here. It boils down to what application is a Blazor Hybrid application, and they are native applications. Hopefully that helps people gravitate towards, and I think probably most people picked probably B but there are quite a few people considering option D, the WebAssembly option. But B is definitely the right answer. It's the.NET runtime that is deployed natively with your application. These are native applications. Yes, there is some JavaScript that's running in there, yes, there is a browser component running in there, yes, you could have some WebAssembly code running in there. That is not the nature of the application. It is a native application. All of the.NET code in your application, every line of C-Sharp that you're running, whether it's an adult Razor file is part of the Razor components, whether it's accustomed.NET MAUI native control that you've written or in a view model for the XAML parts of your application. That's all native running on whatever the.NET runtime business deployed natively in your app. >> Correct. Well, I've answered the second one before we can check that. I'm pretty sure that's accurate, but I will say I did it right this module. >> I did run the quiz myself. You have got to make sure the right answer. It was in fact highlighted correctly. >> Blazor UI, how is that typically defined as Razor components with a mix of HTML C-Sharp as XAML pages using XAML or in C-Sharp defined in.NET Standard libraries? But the key here is the Blazor UI and not the.NET MAUI. If you remember here, what we're seeing is that this is in XAML,.NET Maui UI is in C-Sharp or in XAML. Whereas if we look specifically at the Blazor UI components, what is this? It's a mix of HTML and C-Sharp. Hey let's check our answers. We did it, Thanks John. >> We should each get 200 XP. It's not fair only you get 200 XP. >> You can go through this, you can sign in. I'm going to continue with our progress. Those XP will just go into the ether after this. >> Oh, man. Again it's an HTML page. You can just right-click on the elements and just give yourself 10 million XP till you refresh the page. >> Exactly. Let's continue on here. We added our component over here. I'm going to snap these over here. Let's do this, and let's make this small. Let's make this to smalls it'll go. Perfect. Awesome. This is cool. This is how I would actually do it except for our Bn and ultra-wide monitoring, 1920 by 1080. We've added our component over here into our main page. Let me go into our index.razor. We've added the counter. Here, what we've seen is if we're debugging and we increase it, we can get it up and running and going. Let's go ahead and I'm just going to run this now on Windows, and we can do that in a bit so we get the counter there. But let's modify that component. We are going to learn a little bit about how do we actually change this to not increase it by one or 10 every time, but increase it a little bit different by passing in a parameter into this counter. What we're going to do is we're going to come in and we're going to create a new property called increment amount. I'm going to copy this, I'm going to say public int here, and I'll say one as the default. That sounds good. Or I guess I need to do get set property. There we go. I set that equal to one as the default. Right there, and we're going to add this parameter on top of that. That's what we're going to do. Now Eilon, what is that parameter, dude that's an attribute, correct? >> Right, that's C-sharp attribute that Blazor provides so that you can specify, I mean, this might be spoiling the very next thing. For this lets, you specify what are the publicly settable properties of this Razor components? James has this counter component that he's re-used already on the main page of the application, and he wants to make things configurable. Well Blazor doesn't just let you say anything on that component, you have to specify things as being a parameter, and that's what tells a Blazor to allow that to be said whenever the component is used in another page. >> That's pretty cool. That enables me to add very easily new properties on set components. Now what I can do here is I can go ahead and say plus equals and I can change that to increment amount. Now we're not just randomly changing stuff, we can do that there. Now my machine is being odd. I don't know what its doing. The building? No. It was definitely being odd. I'm going to close the Android emulator just for now because it is being odd. Let's go ahead and see if that goes out and fix this up. My machine is purring. It's making loud purr noises. We'll see if that's going to save stay there. Let's go get rid of that. Yeah. Cool. >> Streaming while running an emulator and a bunch of other things all at the same time, that's a lot. >> Windows Update. Here what I'm going to do is I'm going to go back into here and now I can say increments amount and say equals 10 over here. But if we remember on the counter page, it's going to just default to one right here, which is great, and I make sure I copy this correct. I definitely did. I'm just going to copy it just in case. I know one thing. The Visual Studio is being odd. I feel like it's oddly compiling something weird. I don't know what? To save and inspect really quick. This is very odd. Let me go ahead and save these files and I'm going to go ahead and close Visual Studio and reopen it, and I'm not sure what it's doing. Let me go ahead and shut it down really quick. Maybe there's a lingering task of something doing something on my machine. It doesn't seem ideal. Let me go ahead and open this app again. There we go, everything seems a 1,000 times faster now. We'll see how that goes. What I should be able to do in this case is come in and start debugging, and we should see this parameter light up to increment our count over there. Let's see. >> See if it's going to work. Cool. Things are happening. Calm down like this. It's still loading, so let's go ahead and give it a second here to load up. See even the pros run into issues as Eilon knows. Not that Eilon ever has issues at all, ever. >> Never had issue. >> No. Someone was asking about how big our applications in general with.NET MAUI and Blazor Hybrid. I guess it's a combination of the two. You have both not only the.NET MAUI app, but you also have the Blazor components in general. In general.NET MAUI applications are natively compiled up and deployed. I don't know what's happening on my machine. It's being weird. It goes through a native compilation step in general. I wonder if MSBuild is just, not hanging around, in general cool. You go through a native compilation step and full LLVM IoT, AOT compilation on your machine. What happens in general is that those all get packaged up and deployed natively for iOS, Android, Mac, or Windows. What's nice about that is it gets to take advantage of the different capabilities. It's like Android app packages, app bundles, and of course iOS bundling. Then really it's just how much web content do you have? As far as size, it's not necessarily very large, it depends. But remember the nice thing is that it's not the entire operating system or iodine.Net SDK that's being deployed, it is just a very slim lightweight dotnet runtime that's usually only a few megs that get bundled into your application. That's an important part to remember there, when you're doing that. That's one thing to remember that in general, my applications on Android or on a 15-20 megabytes, I don't know. Actually also, here's my general James tip. This is not an officially sanctioned Eilon Microsoft thing. It matters and they will be small, based on what your requirements are. If you need to have a very slim application, you can do that. Now if you start adding tons of stuff into your application and tons of packages, extensions and all those other stuff, it can get larger. That's not.NET MAUI, or Blazor Hybrid fall can just get large like Eilon was saying is like you can add the world. When I updated Instagram it was half a gig. It really depends on what you're going for. You can totally make slim packages, but of course you can always inflate them as well. Anyways, here we go. We got it working. Now my machine is way faster Eilon. I don't know what you did, but it's magic. >> You deserve double confetti for that. John, can we get a double confetti? Balloons or something. Vary is going to slide me for a bit. Look at that, that's beautiful. Then in real life show up behind James at his place of living or confetti thing. Maybe not that one with the explosions. >> This is pretty cool. Now we get these components in here. If I came in to my index Razor and changes to so many, this should now, if I click off and on, we can see that it's incrementing by 1,010 every single time, so many numbers being added there over and over and over again. Amazing. I can increment those different properties. That's how these different components work. Easy. Data binding. So far all we've done is we've learned about just adding the components, adding properties to that component. But what's great here is that we can also access different Razor directives. They're component markup used in C-sharp and HTML that help us have our different code blocks. We can see inside of our Razor, here we can see our code block here. There's also function methods and expression things and things like that. The important part that this is pointing out is that there's this Razor data binding system. Remember whenever I was calling on click, we saw that @currentCount was updated. There's also an app bind markup that enables us to bind a CSR variable in HTML input as well. For example here this is just output, but what if we have input like I'm going to enter something into a text box? We can do that in the next module. What we're now going to do is we're going to stop debugging, and instead of just messing around with this counter, we're going to actually add an entire new ToDo page. Who doesn't love a ToDo Eilon? >> I always have so many things to do and I love that Blazor. Blazor is the thing that I do and I just love ToDo app using Blazor. >> There you go. Now here's what's fascinating. In this module, it will just have you create the ToDo page inside of the Blazor application. But if you wanted to, you can create a new Razor class library, add all of the functionality into it as added as a dependency of the hybrid application, and you can also then share that to the Internet or share it to your Blazor applications as well. It's up to you. I know someone was asking in the chat awhile ago if there's any plans on creating a template that creates the Blazor Hybrid app, and a Razor class library. Eilon I've talked about it for two years. Eilon any change there? >> We do not currently have a template that does that. It's a lovely idea. I love the idea of having more advanced project templates that include multiple projects. The challenge we have is how to present that to the user in the right way. We know that for a lot of people, it's diving now deep into product design and less is more. We want to have a good experience for users to do that. We're trying to balance folks coming into this experience and trying to learn why are there seven projects and how do I update my code in here and where do I go when everything looks the same, it's confusing. That's a real a negative experience somebody might have if they come to it. On other hand, some people say quite reasonably, but I really want my code in a separate class library. Why isn't there just a checkbox or something like that by default? We have to design those things and come up with a good experience for that, which right now we haven't had the time to build any experience that we think would be the right experience for that. You can do it yourself, rep for right now. It's a few steps. Fortunately, you don't have to do it very often. How often are you creating? Folks like James and myself we're at Razor class library 993. >> Yeah. >> Now we're at 722. We're creating them a lot. Most people, I think are not creating them nearly as often. Of course we'd love to save you the pain of having to do it. We can just set it up for you. I hope that we can find the time and the priority to build that and create a good experience. Not right now, but it is maybe in 10 clicks and one minute you can do it yourself. >> I think we also have as Jack was saying can I migrate Blazor to Blazor Hybrid? You'd still have your Blazor app, but you would put your Razor components into a Razor class library and then share with Blazor Hybrid like Eilon said there. Let me add a Razor component, I'm going to call it a todo.razor. There we go. It's important, I am reading here that Razor component file names require capital first letter. Did you know that Eilon? >> I actually don't think I knew that. >> Yeah. Fun fact. >> Interesting. >> This is a component, but we're going to make it a page so we can actually add it into the navigation stack. What I'm going to do is I'm going to go ahead and add this little app page up here. I'm going to say @page and I'm going to say "/todo" as my route, basically that I'm adding on here. I'm saying if I go to /todo or now I'm told to navigate to /todo, go to this page. Now what we're going to do is we're going to go into our navigation, which is inside of our nav menu, and what we're going to do is we're going to go ahead and add just another menu item in here. I'm just going to copy and paste this menu item from fetch data, and I'm going to change this instead of fetch data, I'm going to call it ToDo. Then I'm also going to give it the URL of ToDo because that's what we named it right over here in this todo.razor file. We just named it there. If I ran it, it would just show up in the menu that's not fun unless actually that could do the thing. I'm going to create a ToDo item over here, so I'm going to go into my data and I'm going to say add a new class, and I'm going to call this a ToDo item. >> Item. There you go. Just normal C#. Again, this could be in a shared class, things like that. I'm going to go ahead and use modern C# stuff by deleting everything. About right. Call this public class TodoItem. We're going to set two properties here. I'm just going to copy and paste these. This is what we want to basically create in our UI in bind in our UI. We have a public string over here which is a nullable annotation. We have a title and then we have also is done, which is going to set to false by default. Now what we're going to do is now that we have our items, we're going to come into our to do Razor and we're going to go ahead and add some controls here. The first thing we're going to do is we're going to go ahead and say, "@using" that's how you bring in a name space. That is in our "Blazorhybrid.data. " No semi-colon needed, wild west over here. We're going to create an unordered list and we're going to give it a class. Now this class is a just CSS styling that's built in, and John Galloway insisted that we use list on style because it looks better. We're going to do that. Now what I'm also going to do is we're going to iterate over a to-do lists. We're going to create that to-do lists. I'm going to create a Private list of to-do item, call it "todos". There equals new. There we go, I like that. Nice and short, fits on the screen. Here's what's cool about this, is like so far that this is a mix of special syntax. But I can just say "@foreach" and I can just use C# sharp in there. I can say for each todo in todos. Let's go ahead and do something with it. Let's just go ahead and output it as an item. I can say, "@todo.title" for example, and there's my property. I'm actually binding to the item, to the title in real time, which is pretty neat. It's pretty cool. That just is razor Blazor. Now let's go ahead and add a input here and a buy-in underneath it. Let's go ahead and do that. We're going to say input. Again, this is just a web controls. You could actually create this in native controls too, if you wanted a native control. Someone was asking if you can share state, and the answer is yes, you can share state and have common backing fields behind that. I think Eilon has a good sample of that. You can easily share the same backing data as well in state management. You could use an MVVM style or controller style, share those and register those dependencies. Eilon, do you have any best practices there? Sending data between native and non-native controls. >> Yeah. The general way I think actually James did some blogs recently. Written many blogs and videos recently about you'd use a dependency injection and have a service. If you want, you can just have a global static field somewhere on a class and that is one way to share a state. There are problems with that, but it'll work. I would say the way you would share state is potentially the same way you would share state between any two native components as well, due to the fact that one of them is using a Blazor doesn't affect that very much. There are some ways that work really well with Blazor, such as using dependency injection and having a singleton service called App State, call it whatever you want, but App State will be a common name that has the state of your application, like the to-do items that are shared maybe throughout different parts of your application. Maybe you have a different page in your app that uses machine learning to predict your next to item or something like that in that UI, you happen to build using XAML and you want to share that data, great, have an App State service, use it here in the.razor file for the Blazor Hybrid part of your application. Inject it into the XAML-based page for the XAML-based part of your application with some native UI. That works just fine, or like I said, if you want, don't say I told you to, because I'm not telling you to do it. But you could just have a global static field somewhere in your application and just use it everywhere. >> Yeah, like that. Cool. What we did is I just created a little method called add to-do. On this button I'm going to say, "@onclick" similar to how we did this before with our increment count, but I'm going to say "Addtodo". There we go. It figures it out for us, which is nice. Whenever I click on this button, it's going to call this. Let's go ahead and fill in and give it some binding here. This input, we need to know what that input is. I'm going to come in and say private string, make it nullable and say new to do. There we go. Now what I can do is I can use this app bind syntax. We're binding the input to the new to-do over here. This is that razor Binding syntax in Blazor that is enabling us to access the on click event and call this method, and then we're binding the value of the input to this new to do. When we update this, it's going to update this. There's no property changes or no other thing, it just handles it automatically for us. That's the beauty of Blazor and this whole setup basically. Now what we're going to do is we're going to go ahead and update add to do, to add stuff in here. What I can do here is I can say, this is saying, if it's not null or whites pace, but I like to do the inner. Say if string is null or whitespace, I'm anti arrow here. I can say new to do, then I can return. There we go. Else, you can come in and say to-dos dot add. I'm going to add b to do. Perfect. Now at this point, what's cool is that we can go ahead and. >> You [inaudible] to-do I believe >> Dang it. >> Or go way off script and create an implicit conversion between strings and to-do items. >> No, absolutely not. What I did was I copied and pasted codes, that's way easier. I just added a new to-do item, which has the title and the new to-do. Then I set the new to do to string. It's going to add it, it's going to update the UI, and then it's actually going to reset the new to-do to empty, so I can actually see what this looks like here. Again, it's binding to this "todo.title" for each item. This should, in theory totally work, at least from this aspect. We now have our to-dos. Here I can say follow Eilon on Twitter, "Add todo" and sure enough, we're there. Look at that, magic. If I hit to do, nothing's happening. I'll say test and it clears it out automatically, and this is Web UI. Now we want to be able to actually mark these as to do and not to do. Let's go ahead and do that. Here what I'm going to do is update this. We're going to go in and we're going to change this. Instead of outputting the title. We're going to go ahead and I'm going to reformat it. It's not going to reformat it. There we go. We're going to add two inputs here. Did we just find an error in this. No, it didn't, it didn't copy it, correct, okay. One is going to be input type checkbox and we're going to bind that to is done. Then another one to title, so we could change it later if we wanted to, and then that will update it automatically. Now here's what's cool about this is we can also run some logic whenever we change the is done property so we can output that. What this is showing us here, if I just copy this and replace the H3 header, is that we can execute inside of the HTML, this C# logic. This is going to say Add to-dos, which is the list, count how many to-do items are not done. That's pretty cool in general, just right inside of the Razor stuff, which is cool. Let's go and run this. Again, we're doing this app bind to the value of this input checkbox which is bound to this is done here and send Sam with the title. Here now I go to the to-do and I can say follow along. There we go. There's that, I'll say subscribe to James on YouTube. I can say learn Blazor, because I actually still need to do that. I don't know what I'm doing. I'm just pretending like I do. Pretend like I know Blazor new part. But now I can check these check boxes and look at that. That's pretty neat. It updates in real time. Of course I can change these and I can do stuff as well because now we have these input fields, which are nice. Now of course, I can make this look a 1,000 times prettier right, because I could style it with CSS and I could use, all the fancy, fast, or I could use Tailwind, I could use all that stuff. I can do whoever want to web, I can do whatever I want inside of there. Which is cool >> I've edited. May be you proud of me on? >> This is amazing. I only take issue with that last to-do item which is pretend that you know Blazor. I don't think you're pretending my friend. >> Here's a fun question we got in the chat too, from Anil. Anil was asking, can we put routing or maybe even the logic into a separate file? Yeah. I mean totally you can create a.razor.css file for your CSS and another file behind it. Or you can do todo.razor.cs, is that correct? Alone, and you can put your CS in the code behind. >> Right. Maybe I understood the question differently. If you go to the top of this file that you're in, I'm not sure if that question was about that route or maybe something else. If the question [inaudible] interpreted as what's online one at the very top, at page /todo. At least by default as far as I know, that's where you specify them, which I think it's perfectly reasonable that way the page, and you can have by the way multiple URLs if you want like a todo or todo like a filter parameter, things like that as well. There might be a much more advanced way to register a service that sets up custom routing for the Blazor routes. I'm not sure. What I can say is the answer to that will not be a Blazor Hybrid or MAUI specific answers. If you find on Stack Overflow or on the documentation side, or find on whatever application, ask your buddy who's a Blazor expert how to do that, it'll be the same Blazor answer no matter where. There's nothing hybrid-specific really about almost anything here that we see inside the.Razor files. There might be some way to register a custom Blazor navigation service that registers or modifies the URLs for that, I would say that would be a very uncommon thing to do. Is so common that like I said, I'm not even sure if that is possible, but maybe I'll certainly will have to understand more about what you're perhaps trying to achieve by doing that or you just don't like seeing it in there. That's fine too. >> Got you. That makes sense. Cool. Let me go ahead and continue on because this is my favorite part because now we're talking about accessing platform features in Blazor Hybrid. If you're coming from the Blazor, while all that's going to seem pretty familiar and it should because is Blazor Hybrid. The cool part, though with Blazor Hybrid is that since it's built on top, in this case.MAUI, it enables you to not only deploy the multiple platforms but access those platform APIs. It's nice is that.NET MAUI itself has access to those underlying capabilities and features. You can access them in C# code. Additionally, what you can do is actually use cross-platform API. Here I actually outline on this doc the different namespaces or features, there's application models and things like opening a browser, opening a URI or maps, or handling permissions or version tracking. You can access contacts, email, SMS, web authentication, device info, battery, and photosensors, flashlight, media pickers, screenshots, unit converters, storage APIs, and a lot more. For example, if you want to access Internet connectivity, you could do this. You could say, well, what's my current access type inside of the Microsoft MAUI networking namespace and you can check to see if it is NetworkAccess.Internet. Thus pretty cool. Now under the hood, that is calling the native iOS, Android, Mac, and Windows APIs, which is very unique. You have access to that automatically. But.NET MAUI brings about 70 or plus features from those platforms into this space. Now additionally, you can access platform APIs directly for iOS, Android, and Windows. For example, here in this walk-through, it shows you how to actually tap into device orientation if you wanted to. Here for example, you could say if I'm on Android, use Android stuff, on iOS, use iOS stuff, and you can access those platform-specific Android iOS or Windows, or Mac APIs directly. You have access to those a 100 percent. You get then register that as an interface and inside of a dependency service, and then button that up to your application. If there's something you want to do, you can do that on the platform. Now what I want to do though is show you how we can add, load, and save buttons into this application and write to the file system the todo list that we have, and specifically store it in the correct location using some platform APIs. Let's go ahead and bring that up here. What we're going to do is we're first going to add some buttons here. The first thing we're going to do is add these two buttons right here under the todo. Here I have a save button and a load button, and that's pretty much it, and of course, it's yelling at me because save and load don't exist so let's go ahead and add them here. I'm going to add them down over here. Now we have a new save and a load. Perfect. Now what's great here is that.NET includes system.IO. If you've used system.IO for the last 20 years, it's the same system.IO that you know and love. You can use it because the runtimes for iOS, Android, Mac, and Windows are optimized for those platforms. It knows how to write to those operating file systems. You know what I mean, and that's what's really cool. Up top, what we're going to do is we're going to add a few namespaces, we're going to say @using [e-mail] and we're going to talk about what that does here in a bit. We're going to also do using System.IO, and we're also going to serialize and de-serialize this as a JSON blob, so we're going to bring in the built-in System.Text.Json which can serialize and de-serialize stuff for us, which is quite cool. Here's what we're going to do is I'm going to go ahead and go down to the Save, and the first thing we're going to do is I'm going to make this a little bit bigger over here and I'm just going to go ahead and type through what I'm doing inside of this Save to really talk about it in general. Let's go ahead and do this exercise here. The first thing I'm going to do is I need to take this todo item list here and you serialize it. I'm going to say var contents equals. Let me go ahead and use my fancy zoom. There you go. Perfect. Then I'm going to say JsonSerializer.Serialize and then save todos. There we go. Now I could use the asynchronous version, the synchronous versions, it's up to you and you just put that in there. Now here's what's interesting is, where am I going to put it? That is a valid question. Where am I going to put it? Well, if I look at this doc, it is telling me that I'm going to use this thing called FileSystem.AppDataDirectory. Maybe I should have a link to a doc in it, but if I go to docs.Microsoft.com/dotnet/maui what we can see is that there's platform integrations. Inside of here, we have application model stuff, communication, device features, media, sharing, and storage. This is where the file system helpers come in. This is a cross-platform API that helps me access the correct locations on each operating system for the cache directory, which is a temporary storage, the app data directory where I would want to store this data that are there and that are backed up by the operating system or access bundled files that I add into my application directly. This is cool and it actually walks me through this. That's what the FileSystem.AppDataDirectory gives me. What I'm going to do, is I'm going to say var path, and I'm going to path, which is coming from System IO and we're going to combine the path where we want to store it, so FileSystem. I'm going to say AppDataDirectory, and I'm going to say todo.json. That's going to use just normal file path stuff there. I'm going to say File.WriteAlltext. We're going to give it the path, we're going to give it the contents, and we're good. What's cool here is that I can not only access the file system here but I can also pop-up native dialog boxes to using.NET MAUI. There's many ways of doing this, but inside of this application, I can go ahead and call and access it at an app layer, and my current app, which is.NET MAUI app, has access to the main page and every page down in MAUI has a way of displaying action sheets, prompts or alert. We're going to do display alert and I'll say List saved. Then here I'm going to say the List has been saved to the path", for example here and I'll say, okay, and this is different. This is not an alert, this is not a JavaScript alert. This is a native pop-up, so we'll see the native controls that pop up on Windows. Now when we load it and we click that load, we're going to do the opposite. We're going to say, well, what's our path? Copy and paste this path. We can pipe that into variable but it's going to do that. I'm going to say, if the file does not exist, that's cool, just using System.IO, let's just return. There, you return, correct. Then if it does, let's grab the contents and I'm going to say File.ReadAllText, perfect to path, add. I'm going to say var savedItems. I'm going to say equals JsonSerializer.De-serialize. I say this is going to be a list of todo item. You can give it the contents, the serializing and deserializing it. I'm going todos.clear, so we just clear out whatever we have, and then I'll say todos.AddRange. I'll have this savedItems in there. Just go ahead and run this now. It's actually cool, like this is just normal C#.NET stuff that maybe I've written for a long time. I'm running the applications, I'll stop the application, but I'm accessing the native file directory over here. It's MAUI. Let's try it again. >> So seamless before, This might be close Visual Studio type of thing. >> Or deploy it on Android. I haven't seen that before. Well, it says preview version of Visual Studio, so there's that. But the nice thing is that those platform helpers. Well, it's not like, "Oh James this is a revolutionary code," but this is really cool. You as a developer don't need to worry about where do I put it? In the cache directory or in the updated directory? This is going to handle it all automatically for you under the hood which is really awesome. Let's go ahead and get this up and running now. It should be good, cool. No, I don't need to off. There we go. That did work. Finding a bug live, I like it on this report. Now, let's go ahead and actually add some breakpoints here. You're going to have our app that's loading. I'm going to Todo do, and I'm going to say Learn Blazor Hybrid and say Add todo. Let's go ahead and save it. Sure enough my content's here, we can view it as this JSON that was added for us automatically by the serializer. Our path over here is this long path that I could never figure it out, but it's bundled into my application. It's going to write it and it's going to pop up a dialog box, which is beautiful. This is exactly what you would output to your users every single time. Inside of the app, we can see where it's been saved specifically and I can hit "Okay" and it's saved. If I was to say second item, Add todo and then third item, Add todo, cool, I can then save it, it's saved. Let's go ahead and stop it. Let's go and run it again. Because that'd be way cooler than just doing some like do you want to load something? I'm going to hit "Load" here. There we go. Let's add some breakpoints. I'm going to go to Todo, hit "Load". Sure enough, my path is the same path. My contents that was loaded are all my items, and now I can go ahead and add those into my list. Now I have a very simple way of storing state. I could put it into a database, of course, but here's a good example of actually loading and saving data very easily inside of my application. If I did something like Item 4 and I hit "Todo" and I add these different things and I hit "Save." Then I was to uncheck them and hit "Load" again, it's going to reload the state automatically because it knows it's there. So that's pretty neat. If I ran this on Android, it'll save it if it will do it for us. Let's give it a go here. I hit "Load" over here. I should read pump up my Android emulator, which would slow my machine and rebuild the application, and we should get some Android UI that's coming up as we can see in the app here. You actually can see it automatically as you're still getting the Android app over here, and with the Android UI and the pop-ups as well which is quite nice. Let's see how long this will take to deploy over there. Let's see. Here's a good question from [inaudible] while this loads up. If we want to use JavaScript components, can we use those two? How does that work along? >> Absolutely. There is a JavaScript runtime. It is a browser control, so any HTML, CSS, JavaScript would run as you expect. In fact, Blazor itself has some JavaScript code that's written in TypeScript, which becomes ultimately JavaScript that runs in the JavaScript runtime. That's how Blazor boots up. Then we actually have little bits of JavaScript sprinkled into, wire everything up and communicate messages between what goes on inside that web browser component and the rest of the application that's written in.NET and C-Sharp. If you have a JavaScript component, for example, the application you're writing has JavaScript in it, it uses Bootstrap. Bootstrap itself has JavaScript components. If you want to use a Bootstrap, dialogue and all the different components with F custom, fancy drop-down lists, things like that, they work just fine. The one place where you might have a limitation is if that JavaScript code is assuming it's running in a web browser with full Internet access, that is where it can work, but you want to be cautious about what it's doing because now you have JavaScript code that's running inside your application. If it's not your JavaScript code, you need to make sure that you trust what that code is doing so it doesn't exfiltrate data to some remote locations like that. There are ways to configure some of that. But in general, yes, if you're using Bootstrap or if have you written your own JavaScript component or you're like me and you just put an alert, JavaScript alert somewhere just to make sure something is running, that'll work just fine. >> Nice, very cool. [inaudible] asking here too how to consume an external API, how would you normally consume an external API? Our good friend, http client, it's exactly the same. Think about it like this, sense that all of this logic is running inside of your application, you just use normal C-Sharp and.NET to call those APIs and 100 percent the same. I'll get this running, and then I'll show one more little sample app that we have as well, it's building up the APK and it's doing seventh signing stuff here, it just go through the final packaging steps and only two minutes left. So we'll see how this thing will run a faith alone in our day. There goes loading, so I can go to the Todo and sure enough I can say hello. Hit "Todo" and then other Todo, hit "Todo". I can check those off. I can save it, and sure enough I get the native pop-up that's there. The other thing that we were talking about too, is that you can blend these different bits and pieces together. The dotnetpodcast.com, for example, back over here is a ASP.NET website and a Blazor app that is built to a 100 percent in Blazor here. I can tap on podcasts over here, which is nice. I can subscribe to them over here. I can go ahead and start listening to a podcast which is cool as well. This over here is the.NET MAUI version of the application. It's a 100 percent native using native controls. Inside of here, I can subscribe, look at my subscriptions. But what's cool is that there is this together mode, and we can see it here in the browser and over here too. I'm just going to create a room and I'll say Blazor and there we go. I'm going to copy this code, and I'm going to go ahead and paste it over here and hit "Join Room." I'll say Android Join Room. What's actually cool about this is that this 100 percent, just this one page is a Blazor component in this application that enables me to share code, enables me to share and listen to music together between the two of them, which is cool and I'm listening to music back and forth, and I can go ahead and enter and leave rooms in this application which is pretty cool. Here's the native player there that we see. It's pretty cool that I can access that right from the application. Again, you can use as much or as little as you want in the app and we're totally at time, so I guess with that, thanks. I don't know, James, what else have we got? I'm going to stick around for your questions if you have some. >> Oh, there we go. >> There we go. >> I'm having significant issues with my computer on this side. My apologies. We are at time we're probably going to get cut from the stream. But we do have lots of questions, so if y'all are able to stick around and answer some questions, I can be there still. >> Let's do it. I think we'll get locked off from [inaudible], we are over on the YouTube. Go on. >> We've already got from the livestream, but that's again where we're catching this all in a recording, so no worries there. But, we do have a bunch of questions that we'd love to get to these. I know that Eilon was answering most of them in the chat, but I thought maybe we can address them publicly. I'm just going to go down the list James in the Start Session unless you've seen anything there. >> I think so. >> Cool. First one that we got a bit ago was can we use ML.NET in Blazor Hybrid? I think I know the answer to this one. Absolutely. >> Will there be a Blazor Hybrid template that has a RazorClassLibrary for at least one other project like MAUI or WinForms? >> Yes. Kind of like Eilon touched on earlier. Right now, no, but the templates are open source inside of GitHub.com/.NET MAUI. There's that. >> There's that. Do you have to install the VS preview to use this? Yes. But can you do it with a.NET CLI? >> That's a good question. Technically, no, you don't have to. Technically,.NET MAUI and Blazor Hybrid are at least GA. You can do all of this via the command line if you want, and you could edit your files inside of VS code or something like that. There are some documents and Wiki articles on how to run and deploy those. The tooling definitely simplifies it a lot, but you can, and I know a lot of you.NET is possible. >> Have I ever run a trickle by light? Yes. Obviously, it's generally not going be as nice an experience as compared to having IntelliSense and Hot Reload and all those kinds of things. I think it's just super important to mention that though you do need the Visual Studio preview, you can install that side-by-side with whatever other Visual Studio you have. Maybe in your day job or your regular life, let's say you use Visual Studio Enterprise and you have to use some particular version of it because that's what your company or your colleagues, that's what they use. That's great. You can install Visual Studio Preview side-by-side. Basically, you'll have two Visual Studio icons. You'll have two visual studio everythings, and you'll use the preview, want to do.NET MAUI, and have a great experience there, and then you could use the other Visual Studio for whatever else you want to do on that. They are side-by-side, if the concern is, do I have to lose out on anything by using the VS preview? I think the answer to that is no, you don't because you could just have them side-by-side. Then when you're done with one or the other, you can uninstall or update or change which options are installed on each one and they're independent of one another. >> Okay. Awesome. >> Cool. >> Next, will it be possible to create a Bolero hybrid app for F-sharp devs? >> I don't know how to pronounce that, Bolero? Do you know bolero? >> No. >> I don't know, you can create.MLE apps in F sharp devs for sure. But that's a good question and I'm not an F-sharp expert, so I don't normally follow up. >> All right, we will follow up on this question. Could we use Shell with MAUI hybrid? >> Yeah, totally. I love Shell, I'm a big proponent of Shell. If you're doing just 100 percent Blazor , there's no need for Shell. You would never use any of the features of it in general. However, if you actually take a look at the.NET podcast application which always have a link into the comments over here, what's nice about that is it actually does use Shell. So you can actually see exactly how that works. Yeah. >> Okay, cool. Is it possible to run this app on iOS from the dev environment? >> Totally. There's two ways of doing that. One, head over to Visual Studio 2022 for Mac, and then you can just run it on iOS simulators, your device or on Mac over there. There's also a way to connect from Windows to a MacOS device, and then it will pop up a remoted iOS simulator over there. Yeah. >> Okay, cool. I have a few more. Can I create an inception situation by loading a web view in MAUI to render a nested.NET MAUI app? >> No. Because.NET MAUI renders the Blazor component in UI, and in a web components, and Blazor doesn't render native MAUI controls. It's only one larity. We can't do inception. >> Okay. No inception here. >> Yeah. Eilon is over there, who knows what he'll cook up. >> You could. There's those, say, wild things out there where people have run emulators that run in the browser. You could presumably emulate Windows inside the browser, and inside that get Windows 10 to run inside the emulator. The answer is no. >> We're getting complicated. >> I'm sure tomorrow on Twitter, somebody's going to post like, check out what I did. Somebody will do it. I encourage you to try, but it's not out of the box, that's for sure. The Blazor WebView is a MAUI control. The question could be, for example, rephrase it as, can I put a label inside a button? The answer to that is, no, you can't put a label inside of a button because buttons can't contain other controls. The Blazor WebView is its own control, is just like a label. But it's like a label in the sense that it's its own control that renders its UI. Just like you can't put a MAUI button inside a MAUI label, you can't put a MAUI button inside of the MAUI Blazor WebView. >> A little clarity here. The difference between a.NET MAUI app and a.NET MAUI Blazor app is the way that you display your stuff? One with XAML or C# and the other with HTML and CSS. Is that correct or is there a difference? >> Thumbs up. >> He did it. Yeah. I mean, the.NET MAUI Blazor app is the Blazor Hybrid app. Now, that being said, you can mix and match the UI so you can do either, and you can do a little bit of this, a little bit of that. Now, the cool part is that you can start with it on MLE application, you can always add the Blazor web components, Blazor Hybrid stuff later too. There's documentation on how to do that. The difference in the template is that it scaffolds it up for you automatically. >> Okay. I'm reading questions trying to get as many in as possible. Okay. This is a compliment. You always like compliments. Really exciting stuff here, by the way, coming from an Ionic/ Angular/.NET back end to this, I could see it's saving me a lot of time, allowing me to do more stuff. >> That's the goal. >> Like to hear it, that's the whole goal. All right. We have, can it work with a device like biometric devices such as passport reader, facial recognition, fingerprint, iris, etc.? >> Whatever the device can do, you can do it. >> All right. We're a little bit over. I know we have a few more questions in the chat. Are there ones that we want to ask the audience that you're seeing here? >> Vax is asking, when can I get it? If you install Visual Studio 2022 preview edition, that's where the.NET MAUI workload is at. Just inside of there, that's where you go and of course, all the documentation, all that stuff there. Yes. Someone was asking if Blazor hybrids run in offline mode? Yes. By default. There is no server, there is no WebAssembly. It's in the app. It's in it. >> Yeah. I'll rephrase the question is, can a.NET MAUI app run offline, and then I'll rephrase that question. Can an Android app or a Windows app or an iOS app run offline? It's the same answer. It's not just coincidentally the same answer for all of those, it's the same answer for the same reasons for all of those. This is an application. If you try to make a web request and you're offline, it will fail. But as James showed,.NET MAUI has APIs to check your Internet connectivity status. You can even check even on WiFi versus mobile networks. You might want to lower your usage or turn it off completely if you're offline or ask the user like, hey, you know, you're trying to do a search. If you want to refresh, you got to be online, turn off airplane mode or pay for your airplane WiFi a few pennies or euros or whatever it costs. It's offline by default in the sense that apps don't make web requests by default unless you have it make a web request. >> I got you, I see. Already. Well, we are a little bit over time here, but I think we got a lot of questions. Feel free to reach out to us should you have more questions on Twitter and online. We're happy to hear from you. Thank you so much for joining us here today for our.NET Blazor Hybrid event. We hope to see you at our.NET focus event on MAUI in August. We also have a separate event,.NET Conf, that's regular, that's in a November. Two separate events. All the.NET we can get you in as many times as possible. Thank you again so much. Thank you, Eilon. Thank you, James. You're awesome and I hope to see you all at the next event. Take care. >> Thank you all. >> Thank you, everybody. [MUSIC]

Channel: dotnet

Views: 36,079

Keywords:

Id: iI058EA_maE

Length: 130min 49sec (7849 seconds)

Published: Thu Jul 28 2022