>>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. [MUSIC]>>Hi, welcome to
Visual Studio Toolbox. I’m your host Robert Green, and joining me today from the
Czech Republic is Martin Zikmund. Hello, Martin. How are you?>>Hello. I’m feeling great.>>Thanks for joining
us on the show today.>>All right.>>I met Martin at the
DevReach conference in Sofia a few weeks back. He was giving a talk on Uno, and I’d heard about Uno. 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 and
mobile and web applications, and 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 Uno is a Windows Platform, which is ported across all
the platforms at once. So Uno platform is basically
a breach of Uno is a 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?>>Yeah, I hope so. It does work.>>Of course, it does, or I
wouldn’t be doing this show. 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.>>Yes.>>Okay.>>So the first thing
we will 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. So you get two different templates, one is cross-platform
application for Uno Platform, and one is cross-platform Library. The most interesting is, of course, the application one, which allows
you to create a new project. I will do the sample here. 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 this is the basic layout
of 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.>>Okay.>>But the advantage of Sharing
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 Projects. So the advantage here is
especially for the XAML part.>>Okay.>>As well, you have the assets. The assets images can be also
shared across all the projects. If you do it in the Shared Project, it’s done automatically for you.>>Okay.>>So it’s advantage
is to keep it there. I will just open the same
project here I’ve prepared. So it’s basically the same solution, it’s just that I’ve
pre cached the build, so it doesn’t take so long. So the basic layout is just
a simple UWP application. So we have this MainPage XAML, which looks just like a
normal UWP application. 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.>>We can now develop our UWP
application as we normally do. So when I open this, I get the designer
just like normally. I can do things like
put a stack panel here and add a slider with some name, a simple 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 TextBlock, 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 textbook, and the textbook will show the
current value of the slider. So if I slide, I get the value there. So nothing really special
here, it’s just UWP.>>Okay.>>This is 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 have launched the emulator. In a few moments, we 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’s just my 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’s the same example
running in Android. As you can see, the slider works
exactly the same way as on UWP.>>Wow.>>It even reacts to
orientation changes. So okay, not this way but, all right, look the orientation.>>This way, yeah. So it’s the exact same
thing as in UWP, and yeah.>>Basically you can take
an existing UWP app, and essentially without changing it, be able to run it on
these multiple platforms.>>Exactly, yeah the goal
from a 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. That’s the ultimate goal, yeah.>>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 Androids speak.>>Yeah, basically.>>Okay.>>That’s right.>>So how is it
different than Xamarin?>>I will definitely shoot at, it’s a very interesting thing. So like Xamarin Forms is also XAML. So you would think
that’s the same thing, why do something that’s
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. 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 it’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 as you have more flexible and
composable XAML at your disposal.>>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.>>Okay.>>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. 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 etc?>>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 some familiarity of the platform, then it’s easier for you to
start with Xamarin Forms, probably as you will get to a
native you can feel directly. But Uno Platform itself, it gives you the same experience
across all the platforms, and it’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. It becomes more and more
of the requirement of many companies to get the UI the same so that it’s easily replicable and the experiences is the same
and familiar for the user.>>Okay.>>But you are not limited. You can even change the UI of 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.>>Yeah, so we can see
that there’s a button we created and the site
are also working here, and that’s for iOS. But the final and the
biggest advantage of Uno Platform is the WebAssembly part, and it’s probably the
most extraordinary thing. As you just launch your UWP
application in WebAssembly, 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 into a client. So hopefully, it’ll startup.>>So then this is a
XAML app running in the browser using WebAssembly?>>Yeah, exactly. So you can see that there are
some DLLs downloaded. So we can see here things like system DLL and various
system numerics and so on. Yeah. Now it should launch,
and as you can see, the same experience with the
same UI running in the browser, and when I delete this, you can see there is no network
communication going on. So it’s all running into 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 this I think is
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’s 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.>>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 bigger UI for some
platforms than others, right?>>Yeah, because you have the
full XAML at your disposal, you will have also the
adaptive triggers from UWP.>>Yeah.>>So you can change the layout of your page depending on the
breakpoints in your view size. So that’s similar to
CSS media queries. So you just decide when to change and then you
switch maybe the layout, change the lists to
grades, and so on.>>Yeah, so great. So if it’s running on
Windows 10 on a device, you’d have the UI look one way. If it’s running on iOS or Android, you’d have it look a different way.>>Yeah, you can decide
based on the OS, you can decide based on the
display size, and so on. we all have the full flexibility
and you can even easily introduce native controls from
Android and iOS into your XAML, and just use native controls and communicate with them
via your XAML code. So this is also cool. I can show you one more thing here, and it’s new but it’s
pretty interesting. So if I go to “Settings”, and change my theme to dark, it’s because developer’s slide 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 it’s 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 you already built
in to UWP platforms. So you have the dark theme there, and if you don’t customize your UI, you just going to use the default UI, and switch between those
themes automatically.>>Wild.>>Yeah.>>So again, this is a free download. It’s just an extension you
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. It looks very similar to
what Xamarin is doing. It should be a familiar
paradigm to anybody that’s built a cross-platform
applications recently,. But it, again, uses UWP XAML, and it adds WebAssembly.
It’s pretty interesting. So we’ll stop here to keep this 20-minute episode and
then in the next episode, Martin will show us
a more complicated, and more interesting
demos. Sound good?>>All right.>>All right. So I
hope you enjoyed that, and we will see you next time
on Visual Studio Toolbox. [MUSIC]

Uno Platform Part 1
Tagged on:         

Leave a Reply

Your email address will not be published. Required fields are marked *