 On today's Visual Studio Toolbox, Martin is going to continue exploring the Uno platform is going to show us some very cool demos. Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green, and joining me today from the Czech Republic is Martin Zickman. Hello, Martin. Hello. How are you? Great, and you? Great. This is part two of a two-parter where we're looking at the Uno platform. In the first video, Martin gave us an introduction to Uno, which is basically the ability to write an app using UWP XAML. So you write a UWP app, and then it runs an iOS and Android, and also in the browser using WebAssembly. So very, very cool. It's similar to the original UWP, write once, run everywhere. It's similar to Xamarin, write once, run everywhere. Here, it's write once, run everywhere where everywhere includes the web, so it's a little bit broader, and then the XAML you're using is UWP XAML instead of Xamarin Form XAML and the original UWP was UWP XAML. So there's still various flavors of XAML, but here you get to pick one, and in this case, it's UWP XAML. Is that basically correct? That's right. Okay. You showed us a very brief introduction last time. Let's see some more interesting demos this time. Not that Hello World wasn't interesting, but come on, it's not. So show us some cooler demos and we'll keep exploring the Uno platform. So the first example I will show you is the calculator. You probably are familiar with this application from Windows. Yes. It's the Windows calculator. It's my favorite calculator. Yeah, exactly. Many interesting features like conversions and so on. So what if- I wish I had it on my phone. Exactly. Yeah, exactly. So what if Uno platform took this and actually ported it to all the platforms? And that's what they did, because Microsoft open sourced this on GitHub. So they naturally made a fork on GitHub. And it already was UWP XAML because that's what it was written in originally. Exactly. So they took this, forked it, and I added some Uno platform magic. And as you can see, it's now running in the browser. The same thing with all the features and you can do conversions. You have all the things that you expect in the calculator and you have also the advanced features for developers and so on. So this shows the true potential and the power of the platform. You can actually build and port even powerful applications and they work exactly as on the desktop. So if I resize the window, it changes the layout and so on. And then you can go get this for your iPhone, you can get this for your Android, which I already did. So when I said I wish I had this on my phone, I do have it on my phone. Yeah, it's downloadable on iOS and Android app stores. So you can try it and you can see that it works exactly as on your PC and it's actually the best calculator application for iPad. So download it. Cool. So that's a more advanced example here. And do you know how much additional work they needed to do? Obviously the XAML that's there is pretty complete. But what additional work did they have to do to get it running on multiple platforms? Do you know? As far as I know, the most things they had to do was to port some C++ code to C-sharp and then make some things more compatible. Like when some features were missing, they stripped those. I think that, for example, the opening the window in a always above window, that's the button which is here, it's not available in browser because it's not possible to do there. But otherwise it was mostly copy, paste, and running. Okay. Because the basic layout is pretty much a grid, right? With a bunch of buttons and text boxes, it's, right. Okay. But you know, with the resizing and so on, it's not a simple XAML, it's kind of complicated as well. Right. Cool. So that would be the first example, but I have more to show. And I think you're probably familiar with Syncfusion. Yep. So Syncfusion does toolkits and controls for many platforms, and that's including UWP. So they partnered with Unoplatform to create a port of their controls to Unoplatform. So you can now use your... That means you get things like charts and cool data grids and all kinds of fun stuff. Well, it's still a very early preview, and it's not really available currently for download, but it was announced in September. And you can see that some things are already working as you expect. So bar charts, bar charts here, and line charts, and bubble plots. It's all running in the browser. So I think that's pretty cool as you just have your shared code and it's running everywhere. Cool. So their intention is to port all of the controls, I imagine. Or most of them. Yeah, the ultimate intention is to port all of those, but the first ones will be the charts because those are the most used in business scenarios. So the goal is to get it to WebAssembly as soon as possible. Okay. So that's forcing Fusion. I can show you one more cool thing that's Skiya. The rendering toolkits from Skiya Sharp is now running in the browser as well. So you can see that this sample from Skiya Sharp is running perfectly in the browser with all the effects and so on. So again, it's all running in the client, nothing, no network communication at all. Nice. Like this. So that's pretty cool. And you can also use the power of Lottie animations which is kind of in now. So you can do that in the browser as well. All these beautiful animations and rewinding and so on. So that's pretty cool. Nice. One of the interesting things that were announced on Unocon this year was also to do with Xamarin Forms as we have already said that Xamarin Forms is kind of similar to Unoplatform in the way, in the architectural way that you have on the same level as Unoplatform but Xamarin Forms unfortunately doesn't run on WebAssembly, right? Right. Well actually, there is a way to do that and I will show you how to do it. So here is a simple example of Xamarin Forms. It's basically the default master detail application which you can create through the template in Visual Studio. So just a simple application with a list, with navigation and about page and so on. So when I take this application I don't have to WebAssembly part here. So what happens if I close the window, go here and do .NET new wasm XF hat. This actually is a special template that's provided by Unoplatform which creates a WebAssembly hat in the Xamarin Forms project. And when I launch the solution again, you can see the WebAssembly hat here. Yeah. And when I launch it, so it's basically just a startup code and bootstrapping code to make it run, just a main program class and so on. And when it launches, we should see the Xamarin Forms application running in the browser. So how does Uno at runtime, because that app's written in Xamarin Forms, right? Yeah, that's right. So how is it that the Uno platform runtime can read Xamarin Forms XAML and understand what to do with it? Oh, here it is, yeah. So the same thing. Well, it's a very nice trick actually as Xamarin Forms already provides UWP renderers. So it knows how to render UWP applications. And Uno platform took advantage of this and basically just took the same renders and renders them using Uno platform. And as Uno platform has the same APIs and same interfaces as UWP, it can basically launch the same application in the browser. So Uno is using Xamarin under the covers? Well, now Xamarin Forms is using Uno platform under the covers. So it's using UWP renders. Wait, wait. Xamarin Forms is using Uno under the covers? No. Yes. So Xamarin Forms is running this, but it's rendering using Uno platform renders. Oh, in this example. Yes. So does Uno require Xamarin to be installed in the first place? Xamarin itself to run iOS and Android? Yes, but not Xamarin Forms. That's the different thing. I can show you the diagram. Yeah. Yeah. So yeah, that might be useful to see that on UWP, you basically have your application code running against UWP APIs. There is no Uno platform there. Right. So all you need there is the UWP. Is the UWP workload in Visual Studio? Yeah, exactly. Nothing else. Just this. Right. But when you go to the other heads, you have Uno platform below your application code. Okay. And Uno platform itself uses Xamarin on Android and iOS, which are good. Those are the native bindings. So to build a Uno application, and to run it in the emulators for iOS or Android, you need Xamarin installed to begin with. Yes, that's right. Okay. Got it. On WebAssembly, it's run directly against Uno. So there is no Xamarin there. But as you can see, the rendering itself is done using the native UI rendering capabilities of those platforms. So on Android, you are using Android rendering on iOS UI kit and on HTML and CSN on WebAssembly. Okay. And then for the WebAssembly that was based on Xamarin forms, Uno is using Xamarin to interpret the forms and then compile that into something that Uno then runs in the browser. Is that essentially right? Yeah, basically you can imagine that here is a Xamarin forms block. Yeah. And below that is the Uno platform renders. And it's basically just, they took the UWP renders and run them against Uno platform. Nothing like additional is needed as UWP and Uno platform APIs are the same. Very clever. So instead of writing their own code to take UWP and render it out natively in iOS and Android, they just leveraged what Xamarin had already done. Exactly, yes. Okay. Very clever. So that's I think pretty cool and useful as Xamarin forms developers can now take it out application and run them in the browser. So it's pretty awesome. Nice. So yeah, I can show you one more interesting thing and that if you know the Microsoft Graph toolkit. Uh-huh, yes I do. So actually there is a Graph Controls repo for UWP applications. And you can use a Windows Graph in your application easily. There are some controls like login and so on. And actually- I did an episode on the Graph about a month ago and I used this in the demo. Exactly, so that's just great because this is actually the basic, the core repo of the Graph toolkit. But the Uno platform team had contributed and made a fork for Uno platform with cooperation with Michael Hawker from the Graph toolkit and they are already working on a port of these controls to Uno platform. So you will be able to use these cross platform on Android iOS and WebAssembly as well. Very cool, very cool. So it's still very early preview but some controls are already working so you can try it out and see how it works. Yeah. One more thing I would probably like to mention that Uno platform, as I said, is not just the presentation layer but it also provides you all the Windows APIs. For example, if you want to build an application with XLR Matter Support, you have that built in and you can use the Windows API and use the cross platform. So you don't have to learn how to use XLR Matter or a specific platform, you just use what you already know and run it as normally. And one example of that is the jump list API. If you right click on something on your test bar you can see this jump list thing and you can just click and go to shortcut in your application. This API is on UWP but on other platforms as well but it's not unified and Uno platform can do that for you. So you can use the jump list API from Windows. For example, here you can see I'm creating some jump list item and adding them to the jump list and saving it. So it's just UWP API but when I launched it on Android, for example and pin an item here, it actually works and it's the same code and you get the jump list item here. So I think that's pretty cool as you don't have to learn new stuff, you don't have to learn how specific things work on specific platforms. You just know your UWP code and most of the time you will just be able to write it cross-platform once and not care about any platform specifics. Very cool. Very, very cool. Yeah, so I can choose one more thing. If you want to try out. We have time for one more, sure. Yeah, if you want to try out Uno platform yourself you can do it in the browser. There is this playground.platform.uno website where you can go and test some things in Uno platform. You can see it renders a XAML code which is here and you can even edit this and change this to low for example and you can try it live in your browser without installing anything. So it's a perfect playground if you want to try out Uno but don't yet know if you want to install it in your, which is studio yet. So there is an example of many of those platform controls which are here. So you can try it out and you can play with it and even do some data binding against sample JSON data. Very cool. So again, so if you have existing UWP apps you've written this is really, really cool because you now have an easy path to get those to mobile in the web. Even if you have existing Xamarin forms applications you showed us a neat trick for getting those to the web without having to take your Xamarin forms and switch back to UWP. And I guess if you were starting from scratch and you hadn't learned either one then you could decide whether you wanted to do UWP and go Uno or Xamarin forms and go through Xamarin. One or the other, you kind of have options here. Yeah, exactly. And Uno platform even provides some things that we used to do doesn't support yet. For example, in case of UWP of XAML hot reload so you can change your XAML and it's updated live in an application that's already running. And Uno platform implemented this functionality even for the browser. I can show you a very quick video here that you can basically edit your XAML in live application, it's updates in the browser. Nice, so hot reload working in the browser. Exactly, yeah. So it's pretty ultimate because you can do even data bindings in live application as it's done here. So that's basically the same thing as I've shown you the slider in the previous episode. Yep. So when this is saved, it will just reload in the browser and shows the same thing even with updating data binding and so on. Very cool, very cool. So this is absolutely something that people should check out, get a sense for how it works. It's a great tool to have in the toolbox. I agree. Sweet, all right. So we will put a link to this in the show notes but again, you can just go to the extensions and search for Uno platform but we'll have maybe some additional notes on where people can go learn more about it and play around with it. Definitely something worth looking into. I agree. All right, well, thanks so much for coming on and showing this to us. Thanks for staying up. How late is it in the Czech Republic right now? Just eight o'clock. Oh, that's not too bad. Okay, and it's only 10 a.m. here, so we're all good. All right, so definitely check that out. Thanks so much, Martin. Hope you enjoyed that and we will see you next time on Visual Studio Toolbox.