 On today's Visual Studio Toolbox, Martin will show us how you can write an app using UWP XAML and have it run not only in Windows 10, but also iOS and also Android and also the web. Hi, welcome to Visual Studio Toolbox. I'm your host Robert Green and joining me today from the Czech Republic is Martin Zygmunt. Hello, Martin, how are you? Hello, hello. Thanks for joining us on the show today. I met Martin at the DevReach Conference in Sofia a few weeks back and he was giving a talk on Uno and I had heard about Uno and I thought this would be a perfect thing to do a show on. Definitely. It's a very nice framework and it has many interesting features for mobile developers and web developers. So give us a quick overview of what Uno is. Yeah. So Uno is basically a framework for building cross-platform mobile and web applications. It allows you to do that with a single code base. So you are sharing all of your code across all the platforms and you don't have to write anything twice. Is that just the C-sharp code? It's more than that, right? Yeah. It's basically a combination of C-sharp and XAML and it's the XAML dialect of UWP, so Windows platform, Universal Windows platform, which is supported across all the platforms at once. So Uno platform is basically a bridge of Universal Windows platform to Android, iOS, and WebAssembly. So if I do Xamarin forms, for example, I write the XAML once and it runs across iOS, Android, and Windows. You're saying that with Uno, I write UWP type XAML and it runs in obviously Windows, but also iOS, Android, and the Web. Exactly, yes. Wow. That's the goal. That's quite a promise. Does it work? I hope so. It does work. Of course it does or we wouldn't be doing this show. Okay. So give us a look at it. All right. So I will share my screen. Again, this is a framework so it's freely downloadable, it's open source, all the things you'd expect. Okay. So first thing we'll do is launch Visual Studio, and we will create a new project and I will first show you how to install the Uno platform extension before you create a new project. So if you go to Manage Extensions and you search for Uno platform, you should find Uno platform solution templates. This extension is downloadable for free and installable into Visual Studio 2019. Cool. So once you do that, you get some new templates for your projects and this. Sorry. So you get two different templates. One is cross-platform application for Uno platform and one is cross-platform library. And the most interesting is of course the application one, which allows you to create a new project. I will do a sample here and it basically creates a solution with four platform heads, which is WebAssembly, iOS, and Android, and UWP. Yeah. So you get WebAssembly out of the box. Interesting. Yeah. So you get Droid, iOS, UWP and WebAssembly, and one shared project, which is the project where you will have the most of your code. So that's the basic layout of a Uno platform solution. So shared projects, we first saw those in UWP Universal Windows Platform. Xamarin was originally using them, but then they moved over to PCLs and then over to .NET Standard Library. I see Uno is still using shared. I assume that eventually it would move over. Well, basically you have both of those options. You can build your application with a .NET Standard Library which is shared across all those platforms and you can have the shared project. But the advantage of shared projects in case of Uno platform is that you can put your XAML files there, which are then shared across all the platforms, which is not easily done in .NET Standard project. So the advantage here is especially for the XAML part. Okay. As well, you have the assets and the assets like images can be also shared across all the projects, and if you do it in the shared project, it's done automatically for you. Okay. It's advantageous to keep it there. We'll just open the same project here I've prepared. So it's basically the same solution, just I pre-cached the build so it doesn't take so long. Okay. So the basic layout is just a simple UWP application. So we have this main page XAML, which looks just like a normal UWP application, and when we launch this in UWP, it should launch and show us a window with UWP project. So let's see. So this is just a basic UWP application. Okay. And we can now develop our UWP application as we normally do. So when I open this, I get the designer just like normally, and I can do things like put a stack panel here and add a slider with some name, for example, Slider. And I can do a text block. And I can use, for example, data binding to show that it's all interactive. So like this, you will get a text block, make it a little bit bigger, and add a padding to make it more visible. So if I launch this, I should get a slider. This data bound to a text block and the text box will show the current value of the slider. So if I slide, I get the value there. So nothing's really special here. It's just UWP. OK. And that's the basic workflow. You just start with UWP and build your application. And then you switch to another platform and run it there. So let's do, for example, Android. So I will launch the emulator. And in a few moments, you should get the same experience here on the emulator. In the meantime, I can show you that in the platform project heads, there is nothing much special. There is just basic activity that launches UNO platform and nothing much else. So most of your code will be in the shared project or in a shared library. So here is the same example running in Android. And as you can see, the slider works exactly the same way as on UWP. Wow. And it even reacts to orientation changes. So OK. Not this way, but oh, I've locked the orientation this way. Yeah, that's better. It's the exact same thing as in UWP. And yeah. So basically, you could take an existing UWP app and essentially, without changing it, be able to run it on these multiple platforms. Exactly. That's the goal of the new platform is to have a one-to-one compatibility with UWP XAML. So when you take your existing UWP application, take your XAML and copy paste it in UNO platform, it will just work. So that's the ultimate goal. And similar to what Xamarin is doing, it's taking your C-sharp code, your XAML, and compiling it into something native and doing a mapping from C-sharp XAML speak into iOS speak and Android speak. Yeah, basically. So how is it different than Xamarin? Yeah, I will definitely show you that. It's a very interesting thing. So Xamarin forms is also XAML. So you would think, that's the same thing. Why do something that's also already created? So the reason is, this is the full XAML of UWP. So you can do things like create a image button, which is not easily done in Xamarin forms. As in Xamarin forms, your button has just a text property, and you can just enter some text into the button, which is not very flexible, as you cannot compose your button of other controls. And in comparison, in UNO platform, you can do something like this. So you can take your content and put an image there, for example, this way. And as you can see, we have basically an image button in just five lines of code. So that's super easy. And if you wanted to do the same thing in Xamarin forms, it would take you a lot of work. So this is, I think, the main advantage of UNO platform is you have more flexible and composable XAML at your disposal. And then if you've already been doing UWP and you're already familiar with UWP XAML, then you don't have to go learn a new XAML. Yeah, exactly. That's the goal. And you can even take your existing applications and easily pour them to other platforms without too much additional work. I will just show you this running in iOS as well. So you can see that the UI is exactly the same on all platforms. And you don't have to care about changing paddings and changing colors and things. If you want to have, yeah. Yeah, that's interesting because I've heard other people talk about that as well. Is that a benefit? Do we literally want the UI to look exactly the same on all platforms? Or do we want a UWP app to look like it's a UWP app and an iOS app look like it's an iOS app, et cetera? Yeah, well, it depends on the specific project you are working on. So if you are working on a project that benefits from having a native user experience and familiarity of the platform, then it's easier for you to start with Xamarin forms probably as you will get the native look and feel directly. But Google Platform itself gives you the same experience across all the platforms. And that's also beneficial when you want to introduce your company branding or you want to make your application just look pixel perfect the same on all platforms. And that becomes more and more the requirement of many companies to get the UI the same so that it's easily replicable. The experience is the same and familiar for the user. OK. But you are not limited. You can even change the UI of the Uno platform controls to match the specific native platforms. That's also possible. And there is nothing stopping you from doing that. So you have the full flexibility here. Got it. So we can see there's a button we created and the site are also working here. And that's for iOS. But the final then the biggest advantage of Uno Platform is the web assembly part. And that's probably the most extraordinary thing as you just launch your UWP application web assembly. And once it does launch, we should see the same experience running in the browser and rendered on the client. So there is no server side there. You just download the libraries and it runs in the client. So hopefully it will start up. And so then this is a XAML app running in the browser using web assembly. Yeah, exactly. So you can see that there are some DLs downloaded. So we can see here things like system DLL and various system numerics and so on. And yeah, sorry. And now it should launch. And as you can see, the same experience with the same UI running in the browser. And when I delete these, you can see there is no network communication going on. So it's all running in the client. And that works the same way even on a phone. So you can open this application on the phone and it will work the same way. Really interesting. So that's the coolest part probably that you can run your applications in the browser. And you don't have to touch JavaScript at all. So that's, I think, a big advantage for many C Sharp developers who don't really like JavaScript that they can now target the web without knowing JavaScript at all. So to run it on a mobile, well, I guess, you'd have to design it to begin with to work well on phones. And then it just runs the same way in the browser on the phone, right? Yeah, that's right. So then what's the advantage then to running it in the mobile browser versus as a mobile app? Well, the advantage can be that you don't have to install the application. You can just browse to the URL where the application is hosted and you launch it and you just use it and then you go somewhere else. And there is nothing left in your device after that, after your cache is cleared, there is nothing left after the application. So that's probably the most interesting thing for mobile users that you can use applications which have more features than normal website, but you don't have to install them. And then you could easily determine whether somebody is running this on a PC or a Surface device versus a mobile device and then have a broader, a bigger UI for some platforms than others, right? Yeah, because you have the full XAML at your disposal, you have also the adaptive triggers from UWP. So you can change the layout of your page depending on the break points in your view size. So that's kind of similar to CSS media queries. So you just decide when to change and then you switch the layout, change lists to grids and so on. Yeah, so great. So if it's running on Windows 10 on a device, you would have the UI look one way. If it's running on iOS or Android, you'd have a look a different way. Yeah, you can decide based on the OS, you can decide based on the UI side, like the display size and so on. We all have the full flexibility and you can even easily introduce native controls from Android on iOS into your XAML and just use native controls and communicate with them via your XAML code. So that's also cool. I can show you one more thing here. That's kind of new, but it's pretty interesting. So if I go to settings and change my theme to dark, it's because developers like dark. So when I launch the application now, something will change. As you can see, the application detected that my OS is running dark theme and is now also dark. So that's running across all the platforms. So in iOS, when you change to dark mode, you have dark application and in Android as well. And you don't have to do anything else in addition because that's already built into UWP platforms. So you have the dark theme there and if you don't customize your UI, you just can use the default UI and switch between those themes automatically. Wild. Yeah. So again, this is a free download. It's just an extension to put into Visual Studio. You get UNO platform templates to create apps and then it looks pretty similar to what UWP was when it first came out where you would have the desktop version of the app and the mobile version of the app, shared code, shared XAML across. Looks very similar to what Xamarin's doing. So it should be a familiar paradigm to anybody that's built across platform applications recently. But it again uses UWP XAML and it adds web assembly. It's pretty interesting. So we'll stop here to keep this a 20 minute episode and in the next episode, Martin will show us some more complicated, more interesting demos. Sound good? All right. All right, so hope you enjoyed that and we will see you next time on Visual Studio Toolbox.