Uno Platform Behind the Scenes

Today’s Visual Studio Toolbox, Jerome is going to give us a behind-the-scenes look at the Uno Platform. Welcome to Visual Studio Toolbox. I’m your host, Robert Green, and we’re in the cozy confines of Studio B today, and joining me is Jerome Laban. Hi, Jerome. >> Hi, Robert. >> Thanks for coming by. >> That’s a pleasure and it’s cozy for sure. >> Jerome is the CTO of the Uno Platform. >> Yes, I am, and it’s been a very interesting ride for the past six years. >> Cool. So back in December, we had our good friend, Martin Zikmund on the show who gave people an overview of Uno.

00:39 - So if you guys haven’t seen that, I highly recommend that. Basically is you take your UWP XAML and you can build Windows apps, iOS apps, Android apps, and WebAssembly, which is very cool. >> Absolutely. >> Martin showed us that, gave us some demos. Very cool stuff. Then I heard that you guys were in town, so I said, “Well, we should get the Uno guys on the show,” not so much to tell us how to use it but, I guess my first question is where did this come from. You obviously had a need, and now, here we are years later with an actual open-source product.

01:18 - So how did that happen? >> Well, it all started with Microsoft, as it always does. The company behind Uno is nventive, It’s an agency that used to be doing and still does Windows Phone application and Silverlight and WPF, and for quite a while, we were doing Windows Phone application, then the 7 series and 8 and then 5 and then Windows 8, Windows 10, and then we had a lot of developers that were doing XAML and C#. Then things evolved, then people started asking us, “Well, do you know how to do iOS apps as well?” At the time, Xamarin was starting up pretty nicely. I think it was renamed at the time from MonoTouch. So Xamarin iOS got renamed by Miguel de Icaza.

02:11 - Then we started looking around and we got to something that was very interesting because we said we have to be able to reuse all those skills that the developers that we had at nventive. One thing led to another. We started to implement a few controls and then it started working pretty well. Then we added lots of other controls and we got to do some very nice applications that are still running as of today using the Uno Platform. It was not called that at the time. We got to continue doing this. At some point, it made sense to just align everything with the UWP API or what is now called WinUI, or it’s going to be called WinUI, WinUI 3 and those kind of release. It’s all about raising skills really, that’s what it is.

03:01 - Also, the fact that Microsoft from the get-go and UWP and WinUI team have been designing the API set with all those screens in mind, from the very small screen, IoT, and the phones, and to the very large screen that we’re going to find in Surface, the very large Surface and HoloLens and Xbox for that matter. So that means that they thought about all those concerns and it made sense to reuse all this and make sure that we can implement that contract properly and target all of this. In between, we were doing this for iOS and Android, and then WebAssembly came in and that’s where it became very interesting. At this point, it was closed source because we were developing that for our clients. We said, “Well, we cannot keep that to ourselves.

03:57 - People are going to be wanting to use that.” >> So if you look at something like Xamarin Forms, there’s a XAML that you use to express the UI. XAML is XAML, no one had a XAML to XAML, it’s not 100 percent the same as UWP, but if you know one, you can learn the other, and if you’ve never learned XAML, you can just learn XAML. Then when you compile, it builds into a Windows app, an iOS app, an Android app. In the compile phase, it reads the XAML and knows how to translate that into native UI for iOS and Android as well as Windows.

04:38 - Obviously, the compiler in Visual Studio already knows how to do UWP into a Windows app, that’s already there. >> Yes. >> So did you have to write your own compiler? Your own translator? You can hook into the one already in Visual Studio? >> Somehow. >> Is that okay? >> A few things, but no. The most interesting part of that is that we’re leveraging everything that Xamarin is providing, everything that makes a Xamarin app, not talking about Xamarin Forms specifically but Xamarin in terms of the binding to iOS and Android, we’re reusing all this. So every single feature that comes out, latest of those is hot restart- the hot restart works with Uno apps.

05:23 - It’s just a few lines of code to add and then you can debug an iOS application, usually in your phone, from your Windows PC without a Mac. So it’s something that was added by the Xamarin team and we just being able to take advantage of that. So the key part for iOS and Android is that it’s not something that is so different. We’re just sitting on top of Xamarin, that’s pretty much it. So the part of the XAML is a bit different because the XAML is assembled from WinUI, so what we did is create a generator using the Roslyn API.

06:00 - So the very smart folks at the Roslyn API, they have been doing some amazing things there and we’re taking advantage of that to generate C# from that XAML. That C# is basically a representation of the XAML. That’s an interesting thing because that means that you could probably just write your C# directly and not use XAML instead. >> Or I could create my own ML, I could create row-green ML and, as long as I’m clever enough, write something using the Roslyn analyzer to spit out the right code. >> That could be. >> Well, it won’t be, but it could be is the key Because it’s interesting to understand the mechanics.

06:42 - When I first saw it, I thought that’s really cool because if you have been doing UWP and you know that XAML, yes, you can learn Xamarin Forms XAML, but it’s cool not to have to. Then I thought, “How did they build iOS and Android?” Then I discovered that you’re just using the same Xamarin build tools. So now, there’s some way of taking whatever ML, that XAML, and then just translating it or building something that then plugs into the Xamarin engine, then after that, all the work is done as long as you get it right. >> Exactly. So the interesting thing and the very important piece of that language is that what we are doing is we’re taking the XAML and generate in C#, and that C# is basically something that you could write in UWP directly on Windows. Then at runtime, what we do is we take that tree that you’re generating, so let’s say you have a Grid, StackPanel, and TextBlock, and then that chain or the hierarchy that you’re generating, that gets translated into something that can be displayed. >> Okay. >> That’s a very important part. It’s using the native APIs to do that.

08:00 - That’s something I’m going to show, I have a demo for that explicitly. That’s a confusion from people, and even Martin when he tried to explain you that, it missed that specific part. I’m going to be explaining that. We’re using the native APIs to show the control. So for instance, if you have a button, you can use a native button, but you can also use the XAML representation of a button. So if you want a video inside your button with the rounded corners with weird colors in it, you can do that.

08:27 - But you can also use the native button instead and you can switch between the two. So that’s where it gets interesting and it gives you the ability to get from something that your designers will love because it’s going to be the same for all platforms including the web, but also be able to, say, I have a client that wants to use Uno and he wants to be using the native APIs and have the native look and feel, he can do that as well. >> Then because you’re using UWP XAML, you don’t have to write a designer. >> Exactly. >> There’s already one in Visual Studio and there’s already a team adding things like IntelliSense and all the beautiful trickery. We had Dmitry Lyalin on the show a while ago showing all these cool tools and you don’t have to duplicate any of those because you’re using the existing XAML. >> Exactly.

The side effect of using that XAML is if there’s 09:23 - a library or a piece of program that has been written that is using that same XAML, it will work. So you don’t have to translate anything to get that running. So that’s why we have the Windows Community Toolkit running, and it’s getting better. So we have a set of controls that we are updating. We have in the recent update of the community toolkits [inaudible] that’s working now. So it’s a control that the XAML now is very fond of and that control is working out. >> You mentioned Xamarin before prior to being purchased by Microsoft. Xamarin was not free and it was actually pricey. >> Yes. >> Now, it’s obviously just a piece of Visual Studio. Uno Platform is open source and free? >> Free.

10:15 - >> How did you decide that part? Thank you by the way. >> Of course. >> I love it as a user, but as a company, how did you decide that part? >> If you want to use the Uno, you can just go over to GitHub and then download the packages or from NuGet and then just use it. What is interesting for us is then saying if something doesn’t work for you and you want an update or you want a new feature, then you can implement it yourself and send a pull request. That works really well. We have over 130 contributors now in our GitHub. >> So is that the math? We can get money now or we can save money later? >> Well, it’s more about if you come to us and say, “I want to have that feature implemented,” we have professional services and people that are going to be implementing those features and it’s about managing the priorities of the backlog that we have for implementing features. >> Right. >> That’s exactly how we’re doing it.

11:18 - We’ve been using Uno as part of nventive to make all those apps. We have over 200 apps that are running now. >> Okay. >> For us, we use it and the company’s based off of that and we had that model before opening sourcing Uno. So we were designing Uno based on the fact that nventive is using it to build apps. >> So you were going to do it anyway, and then you said, “Okay, we can just do it anyway and just keep it ourselves or we could do it anyway and productize it.

You make some money, but now, 11:51 - you’re on the hook for support or you can do it anyway, open source it, and now, you get more of the ecosystem and more people contributing to it. So you grow your development team on something you were going to do anyway.” >> Exactly. >> Okay. >> We’ve got people that are interesting. >> It’s actually a cool world. >> People are contributing to add macOS support. This is amazing. So that’s what we’re looking for and getting people interested in fighting bugs. There was Morton, a very interesting person from the Windows community that started looking at Uno and said, “That V6 that you’ve made for creating new templates for Uno apps, it doesn’t have the tags in the creation of new projects. I’m going to add that.” Just made a PR and then that’s it.

12:43 - So that’s the kind of thing that makes it so interesting to work with Window open-source, that anyone can contribute and makes the platform move forward for everyone. >> Microsoft supports you guys and is happy to see you, I imagine. >> Microsoft, yes. It’s all about pushing.NET. >> Right. >> That’s what we’re doing. We love the ecosystem, making sure that.NET moves forward, we want to push C# to the web, we’re using all the tooling that’s available here. The WCT folks and Michael Hawker, specifically XAML Llama, he’s helping us as well, providing feedback and adding features there as well. We have the Xamarin Forms guys that have been helping us as well for the implementation of the Xamarin Forms renderers, so being able to take a Xamarin Forms apps and then make it run on the web using WebAssembly.

13:36 - So they’ve been helping us and they’re testing out features and things like that so that we can make that feature move forward, so that’s been interesting, and you as well of course. Yeah, Microsoft’s helping, that’s for sure. >> Awesome. So I guess those are the kind of questions I had. Now, it’s your turn to lead the discussion. >> Sure. >> So Martin was on the show in December. I assume new things have happened since then? >> Lots of those. >> Okay. >> I’m going to be showing you what’s hot lately, especially with the release of the Surface Duo and all of those libraries. I’m going to be showing you something that has been used by Microsoft to demo lots of features around two-pane view. So that is a control that Microsoft is pushing as part of the Surface. TwoPaneView, there it is. So what we did and because Uno is something that is using the WinUI API, that control that you see on screen is the exact control that Microsoft uses inside the WinUI 2.4, that’s an upcoming release, and that is used on both Neo and Duo.

15:01 - The Xamarin Forms folks have been doing the same control and that control is the exact same code that you will find in WinUI. So it behaves the exact same way. So for instance, I can take that up and put it on the second screen like that, put it in the middle. When it resizes and place itself in the middle, then you’re going to see that the second part has been shown on the side. That is code that I have not developed. If I look at some of the features, I don’t know some and of what those do. I looked at the documentation when that happened and that’s very interesting to see because it’s just the same code and we’re down to even reusing the same UI tests for that part, so the Uno tooling uses that.

15:50 - So it’s very interesting to see what you can do with that. >> That again is one of the benefits of what you’re doing, is that you just inherit things that show up in UWP and in what Microsoft supports. >> Exactly. >> Was there some work you had to do? What happens if I put that in an app and then I create an iOS app out of it? >> It will run the same way. So that control is able to work even if there’s no two screens. >> Okay. >> That control works for that. The way it works is that you can set a size for one side of the screen or one side of the pane and then another side of the pane, and then if the window resizes or if you’re on an iPad and let’s say you dock the window or dock the app on one side over another, then the control will adjust itself properly.

16:42 - So that’s the kind of thing that we’re adding in the platform. So that’s quite amazing that we can actually do reuse that kind of things. Notice that control, it took me let’s say four hours to port, something like that, so it’s very easy to do. It took Microsoft some time to develop that kind of controls and the thought that was put into designing proper concerns and properties and things like that to make sure that the control behaved properly on the Duo. >> Then it’s a new thing, these dual screen phones are a new thing so you can imagine the next several years that things will change. >> Of course, of course.

17:23 - >> V1 of the UI will then become V2 which will then become V3, etc. >> Yes. We’re going to update as we go. We’re going to take the updates that Microsoft is going to be making inside of WinUI and follow along. So that’s one of the very interesting thing of being able to reuse code because the APIs are the same. That’s one interesting part. Another demo that I want to show you is the notion of styling. I’m going to be putting that application aside, I’m going to be launching another one, choose that application. I’m going to be using that on the side. Let’s keep the other one on this side.

18:10 - What I have here is the application that I have here, so let’s meet, just bump up that so we can see it better. There. So what I’ve done is I have a grid, and inside, I have a checkbox, a slider, a button, and a toggle switch. So those are Windows controls in the pure sense, if you will. If you put that inside of a Windows application or in an Uno, iOS, Android, or web, it’s going to look like this on that side. It looks like a Windows control. >> It looks very familiar. >> Exactly. The thing is that sometimes, you may not want that.

18:46 - You may want an actual control that looks like the Android one and those are not the Android ones. So the interesting part about Uno is that you can style a control at runtime to change its behavior or change its appearance to change from Excel-ish control to a native control. So what I did here is I bound that checkbox to change the style of those controls. So when I do this, I change the style of those controls. So it’s re-rendering completely and it allows me to change the visual aspect of that control. So there it is. That’s the original one.

19:25 - You see there’s even the visual cues of the Android controls. >> Why would you do that? >> You don’t. That’s to show a point. I’m saying that it’s up to you, the developer, to choose what you want to show and it’s not bound to I want to choose for the whole app what it looks like. I can choose per control, per instance of a control. >> It’s actually an interesting option to offer users, right? To have things look like a Win 10 app, look the same across.

19:58 - >> Maybe you may want to say that if your user is picky and then you change your UI completely and then provide something else. The way I implemented it is basically data binding its style for Xamarin projects only and say that the IsChecked property of my checkbox, that’s above, that uses a converter that tells, let’s say, for the sliderSwitch, that’s at the top. I’m going to be using either the NativeDefault style which shows the actual Android or iOS depending on where it runs or the XAML default slider, that’s the one that you’re going to be seeing when you’re on Windows directly. That’s how you can switch between the two. So that’s to show that it’s not frozen when you’re building your app.

20:42 - You can change it even at runtime, even if it doesn’t make sense in that kind of scenario. So that’s to explain that very specific feature and it’s something that people, especially people that do know about XAML don’t get on the get-go, they think it’s XAML so it’s probably just one way. Data binding styles can be done and can be doing that kind of feature set. >> Is that in the current version or is that coming? >> No. It’s been there since the beginning. >> Okay. >> The very important thing is that we have designers that are very picky.

21:23 - They want to have that design, the actual one they know, they want that slider to be blue and very specific size. So they want that kind of things, but there are also occasions where having the right native platform design makes sense because it’s a small app and then you don’t want to design those controls because it can be complicated to do. >> So that’s where it makes sense to use native controls so you can choose whenever you want. >> Okay. Cool. >> So that’s the one. Then I’m going to be talking about another feature that we announced from WebAssembly, that’s AOT support. So AOT is what is called ahead-of-time compilation and it’s for WebAssembly.

22:08 - The idea is that at this point, and that’s what Blazor is doing at this point, is that when you have C# running in your browser, it’s actually taking the IL that comes from the DLLs and it’s running that. It’s not compiling that to WebAssembly, it’s keeping that as IL and then the Mono runtime takes that and executes that on the flow. That means that while it can take anything, an interpreter is not as fast as running code that is targeted for the platform that’s underneath it, WebAssembly in that case. What we’ve seen is that an IL interpreted on WebAssembly is about 30-40 times slower than running using compile down to a WebAssembly code. So that takes a toll in an application. Up until now, the only ability to compile to WebAssembly was to use Linux.

23:04 - We posted a while back the ability to use Windows Subsystem for Linux, WSL, to compile that to WebAssembly. Then recently, we made an update that allow us to use that completely from Visual Studio. So you can build that from Visual Studio without having to run any command line inside of WSL. So that gives you the ability to build AOT from Visual Studio. But what I want to show you is that, and that’s another feature, is that you can use C++ that you compile down to WebAssembly inside of a C# app.

23:35 - >> Really? >> Yes, and that is the interesting part. So what I’m going to be showing you now, and it’s a side effect of adding AOT from Windows that gives the ability to do that kind of development. So what I have here, let’s say I’m going to be looking at my page. So it’s a very simple app. My XAML just has a text block with “Hello world” in it and a “Click” button, and inside, I’m going to be finding DLLImport. So for those who have been doing things for a while, been in.NET for a while may be familiar with that.

24:12 - The idea is that what you’re saying at your C# program, “I’m going to be calling that method that comes from somewhere else.” It’s not.NET. It comes from a new import, that’s something exported over. In Windows, that means that you’re referencing most of the time a DLL that has some exports and then you’re calling that method from that DLL. What we did for WebAssembly is basically map that to be able to say, “That method I’m calling, it’s coming from another WebAssembly module that’s linked in when building the overall application.” So what we’re doing is basically that method.

24:45 - It’s implemented in that file that I called mymodule.cpp here. So it’s basically a plus b. I’m calling that from my page. What I’m going to be doing right now is just compiling that method so we can see what it does. So it’s going to be running my application. So I built it already so you can see the results from the building it and hence see the proper result. Okay, so I built it with the previous one so I’m going to be rebuilding it. So let’s see that.

25:23 - So what it does here is basically compile the C#, then calls some native tooling that’s called Emscripten that calls Mono to generate some WebAssembly code. It takes in as well some external WebAssembly code that is linked in, and then Mono just does the connection between the two and provides you with a single experience that you can just execute right away in your browser. So you don’t see it when it’s building but it’s actually calling WSL in the back. It’s actually calling a lot of other things like Mono,.NET Core inside of the WSL and the tooling is just doing calls, executing bash commands behind it. It’s amazingly powerful. >> Yeah.

26:19 - >> It’s just done all on the back and you don’t see anything. It takes a bit of time and that’s why we don’t suggest you to do that all the time. But when it builds, it gives you the proper result. So that’s probably just the first build. >> Okay. >> But then afterwards, it gets running and you get your application running. That’s the technique that we use in the calculator by the way, Windows Calculator. >> Yeah. >> Did Martin show that? I think he’s shown that. >> Yeah. Not only did he show that, I started adopting it. That’s the calculator I use on this. >> You did. Excellent. Yeah. So it’s been interesting. So we’ve been building that. The application that I’ve executed, so it’s still building. >> Okay. So we’ll let that go in a while. We saw it. It probably is very cool. >> But it’s probably going to come back. >> Okay. >> It’s been very interesting to be able to integrate all that. That means that for people to be able to reuse, let’s say, for Rust code or Go code or anything that’s been compiled to- there it is, compiled down to WebAssembly and reuse that without doing anything.

27:24 - So that one is 41, and if I change that in my C++ module here, instead of doing that, I want the actual truth and not just a partial truth, 41, I want 42, I can just execute my little scripts. So that is compiling my C++ into WebAssembly module. It’s very fast. It’s a little script that I put here. I could show you that. It’s just Emscripten, emcc, takes my C++ modules, compiles it down to bitcode which is the intermediate language that LLVM uses. So it’s basically like a DLL, if you will, and so you then download. Then if I rebuild my application, I’m changing that, then it’s going to take again my new module and then fill it in in the application and do the proper results. >> Cool.

28:15 - >> It’s a lot of fun being able to plug all those things together and have a functioning ecosystem and you pull in all those things. The two-pane view works in web. >> Yeah. >> That’s where it gets interesting. We’re going to be adding support, that’s one of the things that are on the future. We’re going to be adding support for the Duo SDK for web applications. So that means that if you have an application that uses the two-pane view in your WebAssembly application, then if you go to a Duo or a Neo instead of Edge, then you’re going to have the support for the hinge and support for the two screens. So that’s very interesting to have as a feature set. >> Right. Cool. >> Yeah, it’s amazing. >> Awesome.

Anything else? 29:06 - >> Anything else? At this point, no. >> Okay. >> Well, I don’t have a demo for that but we’ve been poking at advanced features of WebAssembly [inaudible] threads. Threading is something that has been missing for.NET applications. I’ve been able to- I tweeted a little bit about that a few days before, where basically you can update the UI from a background thread. That’s going to make for very performant applications where you can push work on the background. >> Yeah.

29:39 - >> Because at this point, most of the WebAssembly applications on.NET specifically, they’ve only been able to use the main thread. So if you’re doing decentralization on the main thread, it’s not a good idea because your application stalls and it’s not something that you want to have. So that is something that’s going to be interesting. Last but not the least, macOS. That is something that we’re looking at. >> Yeah. >> People have been asking for that for a long time and lots of people have Macs and want to be developing on their Macs but they want to be able to take that app and put it on the web and put it on Windows.

30:19 - That’s something that people have been interested in developing for. >> Yeah. Cool. >> For and with. >> Yeah. All right, cool. Well, thanks so much for coming by. >> Yeah, it was fun. >> Glad you guys were in town. We were able to do this. >> Yeah. it was fun. >> Awesome, it was fun. >> Thank you very much for inviting me. >> All right. I hope you enjoyed that and we will see you next time on Visual Studio Toolbox. .