[Music]
for those who don't know me my name is
nick randolph um and i currently run a
company called built to roam
where we focus on building mobile
cross-platform desktop web you know full
stack kind of applications
tonight's session is going to be on the
uno platform and if you've got any
questions afterwards feel free to hit me
up on twitter
or stick around after user group and
feel free to ask questions
now you might be wondering okay what's
this win ui everywhere okay so there's a
lot of backstory here but essentially if
you think back to the days of
silverlight and and to you know where
microsoft has gone in the last sort of
decade
one of the things that we're trying to
solve is this ability to have to write
code once and have it run everywhere
okay and win ui is microsoft's latest
take on xaml it's their latest take on a
windows development um
capability and it kind of builds on
everything that they did in the uwp
space and so this concept of win ui
everywhere is the ability to take that
concept of win ui or xaml and c-sharp
and be able to have it running
everywhere and so this is the tagline
for the uni platform and this is where
we're going to
to cover off today
so let's dig into the problem definition
a little bit more before we look at the
uno platform itself and how it solves
those
we're going to start with these three
different items the first one being okay
cross-platform is hard okay if you look
at that space then quite often people
are coming from it from the perspective
of say having an ios and app app and
wanting to you know produce it on
android or take it to windows or mac or
linux
or they may be taking you know a windows
app and wanting it to run everywhere or
they want to have it they've got an
existing app and they just want it to
run on the web and every time each of
those scenarios boils down to the
basically taking a code that's running
somewhere and having to recode it for a
different platform
and fundamentally that's a problem for
two reasons firstly it's costly okay
because you've got to rewrite the same
code you know you might take some
objective c code and you're going to
rewrite it into java or kotlin
or you're going to rewrite it in
javascript and html and pick a framework
there for the web
and then the second problem is okay well
now that we've set up two teams and
we're now producing these apps how are
we going to keep them functionally the
same how are we going to make sure that
the code that we write for one platform
is the same across all of those so not
only are duplicating the effort you're
also making having to make sure that
you've got feature parity and that the
implementations are exactly the same
otherwise essentially you've got two
apps that are going to be working
differently and you're going to have
different support matrixes for them
so that's the kind of first section
section the second one is that there is
a whole host of existing legacy apps out
there so whether those be done in
windows forms wpf or even silverlight
we're still trying to clear up that mess
but the reality is we're trying to bring
those forward into a modern world right
now whether that means bringing it
forward to a mobile device on ios or
android or rewriting it for the web
the reality is that that's a costly
exercise and ideally if they've been
written in c-sharp we should be able to
reuse a lot of that code okay so we
should be able to take that windows
forms app or the wpf app and have it
you know re-skinned and made available
for the web
the third problem sort of area is around
skills okay so if we're building up a
team of ios developers and android
developers and then we've got our
mandatory web developers um you know
we've essentially got three sets of
resources there potentially more if
we're supporting windows and you know
linux etc
and keeping those teams engaged growing
them skills development that's hard and
again it comes back to essentially
they're responsible for writing the same
thing over and over again and it's a
matter of okay well which platform's
going to lead that and which one's going
to follow and then you know how do we
get consensus between the teams on the
architecture and the overall structure
that's a hard problem to solve whereas
if we can have one technology where you
know the majority of our developers are
engaged with it maybe csharp.net xaml
and then have it
building an app for eve every platform
out of that um that limits the amount of
sort of skill development we have to do
across these various technologies now
this isn't to say that this is going to
solve everything because occasionally
you'll need to get an expert in who
knows the in-depth workings of ios and
you know maybe they know how to do
authentication on android um but the
reality is that
you know those are one-off type type
things where you can engage a consultant
or you can get somebody who's you know
very deeply engaged with that platform
to come in and solve that individual
problem but the bulk of code
particularly if we're building
enterprise apps is very bulk standard
it's very forms driven type type thing
where you know it's page after page of
you know layout here layout there um
most of that stuff you don't need to be
an expert on those individual platforms
in order to generate that layout based
code and that sort of baseline code that
goes is the foundations for most of
those apps
so the concept that the uno platform
came up with is this ability to have
take what microsoft have done in the the
uwp and the win ui space and have it
broadly available across virtually every
platform and so essentially if you can
run.net on a platform the goal is to
have it support the uno platform
so if we look at the bottom of this sort
of stack we've got the individual
platform frameworks okay so we have win
ui or uwp on windows we've got you know
things like
app kit and ui kit on ios you know and
we've got the foundations of those now
microsoft's done a great job in the sort
of the xamarin and now.net for ios.net
for android space
to provide an abstraction in c sharp for
those but essentially if you're going to
use that abstraction you still end up
having to use the ui components that are
that are native to ios and native to
android so what the uno platform
provides on top of that is basically a
an abstraction that matches or uses the
uwp slash win ui as a spec and has it
available across as an abstraction
across all of those so you essentially
have to build the ui once and it will
work across all of these platforms
and unlike some of the other platform
you know multi-platform frameworks that
are out there the goal with the uno
platform is to have a pixel perfect
rendering on each of those platforms so
if you use a a button on an android in
in the uno platform it should be exactly
the same and look exactly the same on
ios okay this is a bit of a divergent
away from a sort of a design philosophy
from probably five years ago maybe more
where there was a there was a drive to
basically make sure that apps were very
platform specific so an ios app looked
like it belonged on ios and android app
looked it like it was styled for android
um
the sort of the design mentality has
evolved from that and and the the
branding of your application or the
branding of your company and the design
of your application is much more
paramount now and so you know it it no
longer matters to to a greater degree
that you know you might have a button
style for your company um on ios and
android and they look exactly the same
rather than picking up the default look
and feel from the individual platforms
so this leads us into sort of this this
next slide which talks about um the
different kind of rendering capabilities
that different platforms have so these
are the kind of the leading contenders
in this sort of multi-platform or
cross-platform space so on the on the
right-hand side we've got um react
native and xamarin which is now maui and
they basically use the native rendering
components for the platform right so if
you use a text block you'll get a text
block that's specific to those partic
particular platforms and so your
applications out of the box look like
they're they're they're platform
specific they look like an ios app and
they look like an android app
on the left hand side we have the the
sort of these canvas rendering
technologies so we've got abalone and
we've got flutter in the bottom corner
and so those basically their philosophy
is that the devices is a canvas and so
they're going to draw every component
natively and so they're responsible for
every little bit of layout um and in the
case of things like flutter that gives
them great control okay but on the flip
side it also means that they have to
rebuild everything right so they have to
build the you know the text input
control they have to rebuild support for
localization support for accessibility
all those things they have to build
themselves okay from the ground up
because you're treating everything as a
blank canvas
the uni platform kind of sits in the
middle it basically on most of the
platforms it does build on the device
rendering capabilities right so if
you're running on ios it'll use the
native components that are specific to
ios however they're stripped back and
they are rendered in a in a
pixel-perfect way to make sure that
they're exactly they look exactly the
same for your application on every
single platform it uno platform sits in
the middle because it does have some
capabilities of rendering to a canvas
okay so on certain platforms because
um the back end isn't suited um for
those particular platforms they've
adopted a scare rendering capability
there so you know a
button on the wpf implementation
actually uses skier rendering and to
actually generate that look and feel
okay but
as i said before the uno platform is now
responsible for everything for that
particular platform okay so that there's
a lot more effort that needs to go into
supporting those
the last thing that is worth pointing
out is that all of the controls because
they've come from the xaml uwp slash win
ui space are these things called
lookless controls or controls that have
got a template behind them what that
means is that you can actually take the
template you can redesign the template
to your heart's content without
impacting the behavior of the control
okay so you know a combo box if you
restyle it
you know so you basically strip out all
of the templates and you rebuild the
templates yourself the functionality of
that combo box is still going to be the
same it's just going to be the look and
feel of it that's varied
okay so this diagram is getting a little
bit big for the screen but essentially
we're taking this single bit of xaml and
we're having it available on all these
different platforms there are a couple
of heads that are not there so there's
there is we do actually as i mentioned
before there is a skier rendering for
wpf that's not on there um and i think
that there's there's a second renderer
for linux
that's not on there as well at the
moment so
um but within mind i actually want to
switch across and let's actually take a
little bit of a walkthrough of the demo
so there is a couple of.net new
templates so if you want to get started
you can either go through visual studio
download the the uno extensions from the
marketplace or you can download the uh
the uno
net templates from nuget and install
those if you've done that you can
basically go to the command prompt and
run up a new app just using the dot net
new command okay so here we're basically
using we're using a vanilla the vanilla
uno app template
and i'm actually going to include the
dash
vs code extension on the end and that's
just because i want to be able to run
this in directly from visual bs code it
just adds a couple of extra files that
just makes it easier to launch the
application without me having to go and
reconfigure everything
so what we should see is it generates
the solution okay so it's going to
generate projects for each of the
different targets that we're going to
type that we're going to make the app
available for
and then it's going to call net restore
on those um to get us started
and once this is done we're going to go
into there so we'll go
and launch visual studio code
and what we should see when we've
launched this now but to get started in
your studio code um there is also an um
an uno platform extension for vs code
that is worth downloading um and that
will help everything get started in
terms of running and debugging your
application
so i'm just waiting for a minute or so
because
that extension will actually kick in in
a second and should prompt us to
do a net restore
there we go
and down the bottom here we should see
that it's picked up our solution um and
i can use that to hot swap to the
the target or the the destination that i
wanted to debug so i'm going to pick the
wasm target here because we're going to
launch for the web
now one little change i'm going to make
in here i know that my machine sometimes
takes a little while to kick everything
off so i'm just going to include extend
the timeout so this is the timeout for
when you hit run to the point where
everything's actually built and running
but it just takes a little few more
seconds on this machine than it does on
my grunty development machine i normally
use okay so we set the debug target to
be the wasm head i'm going to press f5
and we should see down in the debug
console that it's going to run.net.net
run
and it's going to launch our browser to
step into our application
so this will take a minute or two and
while it's doing that i'm going to
switch across
to the source code and find our
app.xaml.css so if you're used to
building say a wpf or a uwp app the the
file structures that you're that are
here will be fairly familiar with you so
you have an app.xaml or an app.xml.cs
which is essentially the entry point for
your application it sort of represents
the application and then you've got main
page which is kind of like the first
page of your application
so i'm actually going to put a break
point on the unlaunched
and when this does actually come back
you'll see it actually start the the web
application down here once dotnet runs
start completed
um
hopefully it should do that in a second
okay there we go so you can see that
it's actually listening on a url there
um and with a bit of luck okay so it's
loading the uno app here
um so this is the web assembly so there
is a little bit of a down an initial
download to actually pull all the
resources locally into the browser
and you'll see that it's actually hit
our debug breakpoint here so we now have
a fairly full debugging experience so i
can hover over variables and actually
drill down and inspect them like you'd
expect from a debugging experience your
usual um you know f keys work so i can
step into the code etc like that
i'm just going to let that run now
and we have our vanilla hello world
application okay the app doesn't look
particularly great right now so let's
just add a little bit of functionality
so i'll come back here to my files i'll
go to our main page where you can see
the xaml 4r hello world
i'm going to add in a slider here
and you'll notice immediately that we're
actually getting some intellisense both
for the xaml and you'll actually get it
in a c sharp as well
so we'll give this a name i'll call it
slider
i'll make sure that tag is closed and
we're actually going to bind the value
of that slider to the text block here
okay and i'll just hit save on that
and what we should see is that the hot
reload has kicked in it's reloaded the
page and you'll notice that as i drag
the slider across it's updating the
value there right so it's quite a rich
debugging experience
even for building web applications
so i'll actually stop that and the last
thing we're going to show you just in
visual studio code while i'm here is i'm
actually going to switch across to the
um
the gtk head so down on on the left hand
side here you'll actually see that each
of these projects kind of represents the
different targets or the different head
projects uh for our application um
you'll notice that there's a single
project here for mobile so that covers
ios android you know mac os
similar to if you've started looking at
maui they've got a similar construct for
their you know a single project format
for all of that stuff
and then the other targets that are
available whether they're linux or wpf
are all listed down as separate projects
still so they're not include included in
that single project format at this stage
so let's let's run up the gtk so this is
essentially one of the linux heads
and we'll set that as the debug target
as well
and we'll give that a run okay so it's
just building now
and so what i've got running here is
i've actually got wsl running locally on
my machine and so that means essentially
we've got we were able to run you know
linux applications on our windows box
um and what we should see is that the
gtk application is going to launch
and again i've still got that debugging
experience okay so it'll actually hit
breakpoints we've got the you know the
sliders working we can go and do whole
reload etc there
so
okay let's switch back to our slides
so the unit platform's been around for
quite a few years um it kind of dates
back to roughly the time of sort of
windows phone and and the work that
microsoft was doing around you know
bringing forward the xaml platform um
from you know the days of silverlight
and wpf um and so at that point there
was there was things like xamarin you
know starting to surface up and that
this concept of of being able to run an
application or build an application once
and have it run everywhere um kind of
was spawn um and so
that was sort of inspired back in 2013
um and then it made open source in 2018
um along with the first cut of the web
assembly version of it and since then um
the team's been fairly aggressive in
terms of of publishing new updates
we're looking probably around six to
eight a year at the moment
and so you can see the timeline kind of
matches with various releases of both
the sort of the windows capability so
whether those be updates to uwp or or
the release of win ui
but also updates from microsoft around
the support for new versions of ios and
android and mac os um and as we sort of
get into the the this year um and the
latter half of last year we we're adding
in the netsix support um so with the ga
of maui uh microsoft also released the
the netsix mobile support okay so if
you've if you've worked in the xamarin
space then this is kind of like the next
generation of xamarin it's basically
instead of calling it xamarin for ios
and xamarin for android it's now.net for
ios and net for android
with the idea that they're all now this
common
netsix based class library okay still
different runtimes
but the base class library is now
uniform across the different targets
okay in terms of where we sit in terms
of licensing um the uno platform is
completely open source um you can go to
the repository and actually monitor the
activity there it is a fairly active
repository um and basically every time
a pull request is merged there's a new
version of the uno framework um that's
available for for for you to develop on
um they do static releases uh sort of
official releases every sort of six to
eight weeks
but the idea is that if you submit a bug
and it gets fixed you can grab a copy of
the uno platform and start working with
it as soon as
it's gone through that sort of merging
process
they do offer a support model right so
if you're going to use this in an
enterprise setting or you're going to
you need a support model for customers
they can engage with that for paid like
support
ironically microsoft is actually uno's
largest source code contributor and this
is primarily because everything that uno
does is based originally on the work
that microsoft did with the uwp and win
ui platforms okay so all of the controls
that were available for those platforms
have been brought forward and made
available across the the other platforms
for example
the date time picker you can see some of
the stats here
this code was able to be taken and
reused for building out the date picker
capabilities for the other platforms to
make sure it behaves and looks exactly
the same
it also means that other libraries can
come across to the platform so basically
any net standard library can just drop
in and work okay we are in a csharp.net
world right so you know you get all of
that reuse so any library that you might
have come up with and you've you know
that does some you know data processing
or you know some
clever graphics manipulation those if
they don't net standard libraries will
just get up and running on the platform
so you can basically drop those in
reference them and use them anywhere
anything that's ui bound
there is a
an adaptation that needs to be done for
the uno platform but so long as you have
built the controls for uwp and win ui
that process is relatively
straightforward it's really a matter of
just testing it for the various
platforms and get up and running that
way
we've also got some contributors from
various sort of
sort of
higher level frameworks so things like
prism and reactive ui that are available
on the the platform as well
here's an example of the work that
infogistics did for the uni platform
so all of these controls are available
for you to use as part of your
application
with version four of the inner platform
which came out late last year um the
team have moved on from basically just
providing a core base level of
technology and with version four the the
tagline is that we're putting the
platform back into uno platform and so
the idea here is that rather than just
providing you the base framework that
you can write applications
there's still a large amount of stuff
that can be done to improve developer
productivity so these are things like
the toolkit the visual studio code
figma support those types of things
anything to basically improve the the
flow of building an application from
design all the way through to publishing
your application so we're going to go
through a few of those today
and this is where the team's putting a
lot of focus in in terms of making sure
that we're the most productive platform
for building cross-platform applications
we'll start off in the figma world okay
and so if you've ever done work with
designers which i'm sure most of us have
you'll notice that there's obviously
this big divide between what the
designers come up with and the code that
we eventually write and so that this
divide often happens for a number of
reasons and typically it's because the
designers work in a tool that we as
developers are not very familiar with
and that they then go and basically drop
the designs off to us and then we
basically have to go and try and make it
look exactly the same so there's this
handoff problem okay
it's also relatively expensive because
we essentially have to take the designs
that they've come up with and then
basically come up with a user use our
development tools to basically come up
with the same design okay and then of
course that doesn't then round trip very
well okay what would be really good is
if what the designers generated could
then be used within our application and
so on the other end of the spectrum we
have these things for called design to
code okay so these are basically sort of
4gls that allow designers to pull pieces
together that look like an app behaves
like an app generates an app but doesn't
look that great and often you know it's
fairly limited in what the designers can
do to make the application look amazing
okay one of the beautiful things about
xaml is that it's it's very very
designer friendly in the sense that they
can restyle controls to your heart's
content
however there is this hand-off cost
because a lot of the tools that the
designers work in doesn't hand off
particularly well to what developers
like to work in
and so the idea behind what the uno
platform team's been working on is a
couple plugins for for figma that tries
to provide this sort of middle ground
which allows the designers to stay in a
tool that they're familiar with so figma
and yet developers can basically extract
the designs out of figma
use the xaml that's generated and just
drop it into their application
the idea here is it should shorten that
loop it should generate xaml that's
working xaml and that can ideally be
round trip or at least minimal
changes in order to get it up and
running okay so there's two components
for the figma plugin so there's actually
a component library so this is
essentially a figma design template that
you can go and download and get started
with and it provides all of the core
components that a designer would want to
use within their the
when they're building up the look and
feel of their application right we'll
see that in a moment there's also a
plug-in and so this plug-in is basically
gives you a live preview so the
designers can actually see what their
application is going to look like not
just in figma which obviously is going
to look great but actually as running
code okay so the you know think of this
as a round trip of the xaml so the xaml
gets generated out of the figma designs
it then gets surface in the live
preview as actual running code right so
the xaml has been generated it's been um
essentially compiled and running
actually in the previewer
and then there's a bunch of other things
that the xaml should take care of for us
things like localization
support for bindings and support for
navigation are all things that can
actually be generated from our design
so i'll see here there's a very quick
video which kind of sort of walks
through some of the capabilities of
figma
but rather than sort of
you can you can go and download this and
watch it at a later stage but we're
actually going to
jump in and actually have a look at this
actually in figma itself okay
and to do that we're going to take a
look at a sample commerce app okay so
it's got a number of screens that are
already pre-canned for us so that we can
actually take a look at how they're
constructed
and then you can use those as the basis
for coming up with your own application
as well
so let's have a look let's go to
where is my figure gone
there it is
okay so if we scroll up here
um
okay so this is the uno platform
material toolkit so this is downloadable
from the uno platform website
and it comes with a bunch of getting
started instructions okay so it there is
a lot of components in this sort of
template
and so
this provides some basic instructions on
how to get started with things like
colors typography
and how to get started with a new
project okay
we'll just quickly step through some of
the pages that are in here so things
like setting up the themes you can come
in here and adjust your color palette
you can see what the different
typography all the different fonts are
going to look like um and then you can
see things like app icons etc
and just go ahead and use those as the
basics of
for setting up your own application
there are also some sort of higher level
components that we cover off in here
so if we scroll into here we can
basically see
things like
your buttons
and the important thing here is that
okay it's not just a singular button but
there are different
variants on that button button so you
may decide to have like use the elevated
out of focus button which i think is
this one and you so you can take the
copy of that and actually drop it onto
your design okay so rather than having
to take a button and then restyle it the
idea is to make it easier for designers
to basically grab the components that
they want and copy it into the design
that they're building
there are also some other preset
components so things like cards forms
list items etc
and then we have our sample app and the
idea here is that it provides a sort of
a basic sort of getting started place
for somebody coming up with their own
design and what we're going to do here
is actually click on one of these
screens so the search product
and i'm just going to show you this is
the plugin
and we're going to see this actually
running so i'll hit the refresh button
on this and so what's being done behind
the scenes is it's generating the xaml
that corresponds to that design is
actually loading it into essentially an
uno app that's running as a webassembly
app in the figma plugin okay so it's
it's a bit like inception it's kind of
like a you know an uno app inside a new
app inside a nuno app
um okay and we'll see in a minute with
that we can actually take that xaml and
use it in a real application
okay let's just step back to the slides
for a minute
so one of the other components that the
uno team has worked on
is the themes library okay so this is
basically a library to allow you to
essentially drop in or to change the
theme that's used by your application so
if you grab a
a new uno application the theme that
you're going to get with get that comes
out of the box is the fluent theme okay
so it's the microsoft windows theme
language design language and so that's
what your application's going to look
like on all platforms so remember the
uno platform generates pixel perfect or
identical looking applications across
all these platforms
so
if you then want to restyle it as quite
a lot of people do to make it look like
an android app so using the material
design language you can do that using
the material theme library and similarly
if you want it to look like an ios
application you can drop in the
cupertino theme library and it will be
styled accordingly
the other thing that um the team's
working on is this um is a toolkit um so
so you might think okay but doesn't
microsoft provide all of the you know
the base level components that we need
for building our app well if you think
about where windows is coming from it's
a desktop pro predominantly desktop and
tablet kind of interface and so the
controls that come out of the box with
uwp and win ui are predominantly desktop
components okay so they don't have
things like a navigation bar and a tab
bar because you wouldn't expect to see
those on most windows applications
however
if we're building an app that's going to
run across all these platforms then
we're going to have to have some
controls that actually look like they're
appropriate for a mobile app so things
like a nav bar and a tab bar and things
like chips and segment controls and
stuff like that are all the things that
we kind of know even though we may not
know what they're called
as part of a mobile application okay so
the toolkit that the you know platforms
brings
or has been working on actually brings
some of these components and how it
makes them available again across all of
the supported uno targets
so a couple of the other controls are
things like a draw so this is like a
pop-up container from the bottom
and an auto layout control that allows
you to basically lay things out on a
page
and you'll you'll see a lot of this
coming out of the figma designs where
you're dragging things on
and they'll auto size or auto fill um
based on the size and dimensions of the
of the
devices running on
area that um the team's been working on
is the idea of extensions and so if
you're used to building say an asp.net
based applications you kind of be
feeling familiar with some of this
notion these are the the idea of
extensions because when you new up an
application if you go into your sort of
your startup files and your program
files you'll see that there is a host
that's been generated and you're
basically enabling a whole bunch of
things on that as part of that host
building experience
to enable certain capabilities in your
app okay so it's things like it starts
up the di container so you can inject
dependencies through your code um and
all of that kind of nice behavior that
we expect in terms of adding like
authentication and you know navigation
and routing and things like that in the
in the web space we've had that for
years okay in the mobile space we
haven't really had that concept i mean
yeah sure there's been a whole bunch of
dependency injection containers that you
can use so things like auto fact you can
bring those into your application but
the core app framework didn't really
know about those so we've seen this in
the maui space maui now has this sort of
host builder kind of experience as as
the basis of their application you can
go and register things with their
dependency injection container and then
you can retrieve them at a later stage
and this is particularly relevant when
you're using you know view models and
you want to inject services etc
so
the uno team's been working on a similar
sort of thing and this is kind of based
on the work that microsoft's done so the
microsoft extensions um the you know
platform has basically taken those and
basically using those to bootstrap an
application and so what we'll see in a
minute is that we'll actually start an
application not using the vanilla
template we're going to use the
extensions template and we'll see that
some of a lot of this stuff is is set up
for us as part of that so things like
the ability to do navigation and the
ability to do you know logging and http
requests and things like that
all comes through this host builder
experience where you can enable things
um on app startup
two of the main extensions that are
worth noting are the ones for navigation
okay so the the built-in sort of
navigation mechanism for uwp and uno
applications um is the ability to
navigate from one page to another okay
so it's typically a frame based
navigation
but typically most applications are more
complicated than that a lot of
applications will use like a navigation
view so like a like a pop-out you know
menu from the side that allows you to
change the page that's in focus
uh or a tab bar so you've got a number
of tabs that allow you to switch what
page is in focus
so those are all sort of the broader
case of navigation um and so the the
navigation extensions chooses to
abstract or provide an abstraction there
along with making it easier to glue in
your view models right so instead of you
having to new up a view model um and
work out how it's going to get paired
and with the various views
the navigation extensions does that for
you
the other one is the reactive extensions
and so
if you again if you've been sort of
familiar with the xaml space um you'll
be fairly familiar with mvvm okay so
it's a
this model view view model um sort of
essentially equate standard data binding
okay so we're going to generate a view
model and it's going to be data bound to
our view
we're going to surface properties on our
view model that are going to then going
to set values on our view so you can
think of it almost like the state of our
view
and quite often as the state changes
we're going to have to raise events to
let the ui know that it needs to update
so this is the standard i notify
property change that we've all
implemented you know several thousand
times
or we've used a base level class like
observable object from the community
toolkit
that implements it for us
however one of the challenges with that
this sort of mvvm approach is that it
doesn't lend itself very well to
reactive style programming so this is
the there's been a there's a trend over
the last five years or so um where
as the user interacts with an
application they're essentially sending
messages into and modifying the
application state the application then
state then bubbles up the new state that
then should be reflected in the ui okay
so that's kind of like this reactive
pattern that should be um
we should be able to use for our
applications and so there's been you
know attempts by various teams you know
comet being the last one to actually
make a version of this work well with
xaml and data binding
the mvux or the reactive extensions
model that the uni platform working on
essentially allows you to build your
view models as you would normally use a
number of cogenerating techniques to
essentially allow you to build reactive
style
properties and states and things like
that within your view model and then use
this as the glue that then generates the
a bunch of code that does the data
binding for you okay this is a whole
session on its own i'm not planning on
delving deep into that
but reach out to me afterwards if you
are interested in that and we can
definitely help you to get started with
it
okay the the vs code tooling we've kind
of seen before so things like code
completion with intellisense hot reload
and the ability to actually run our
applications from vs code
obviously all well and great
most of us will stick in visual studio
as we're about to see so with that i'm
going to switch back to my code window
and we're going to new up in a different
application and as i mentioned before
this one is actually going to use the
extensions template okay so we're going
to go dot
net new
uno app
extensions
so
and now we're actually going to launch
this in visual studio so we'll do
let's try that again
i'll try and find the solution file
there we go
now the first thing we need to note when
this launches
is that our solution structure is a
little bit different from what we saw in
um
vs code okay so it's laid out um
slightly differently so there's this
platforms folder um this part will be
familiar okay so we had the the single
project that targets ios and android so
that's our mobile project and then we
have the the various other targets that
are available there while we're here i'm
actually going to multi-select those
when visual studio catches up and i'm
going to right click
on those and i'm actually going to
unload and you might be thinking okay
why are you doing that
the reason for that is the visual studio
is inherently bad at dealing with
cross-platform applications this is true
for maui and it's true for xamarin forms
essentially if you're running into
performance problems which i will often
do
or you just want to get a little bit
more performance just unload the
projects that you're not working with
and so what we'll see here is that when
we go to run our application rather than
trying to restore and trying to run all
of those in order to build those
applications
it will actually just ignore them for
the time being so we're going to set our
windows project as our startup project
and we'll kick that off and start that
while i'm talking through the rest of
the structure here so the other projects
we've got in here are we've got a unit
testing project because that's this
first one here we've actually also got a
ui test project okay so one of the
challenges with building cross-platform
apps or building apps across generally
is the is how do we go about testing not
just the the business logic of our apps
because hopefully if we're using things
like dependency injection writing unit
tests for testing the business logic
should be relatively straightforward and
we can do that in an isolated way
however a lot of the frustration with
building you know mobile or
cross-platform apps comes with the you
know what happens when my ui doesn't
behave properly or is not doing the
thing that i wanted to do or it's not
navigating correctly between the pages
etc and so being able to write ui tests
and actually run those ui tests just
gives us a leg up in terms of the
ability to actually test our application
okay
well we'll come back to our solution
structure in a second i'll just show you
the app very basic two pages you will
notice that it's got a different style
okay so the material styles are actually
enabled by default um because we brought
in that material library
and i can navigate to my second page and
this is using that navigation extensions
that i talked about a minute ago okay so
we've got the navigation bar at the top
on the first page it doesn't have a back
button when i go to the second page
because it understands things like
there's a frame there that it's got a
back stack it automatically puts that
back button there for you okay so i can
just go back to there
okay so that's our app running we're
gonna we're gonna modify that to look a
little bit more like the commerce app
that we saw in figma in a minute um but
before we do that let me just bring back
our solution explorer so i mentioned
that we've got the two testing projects
the last two projects we've got here
is a essentially a class library okay so
it's a net standard class library you
can update it to net six if you like
but essentially it gets created here so
this is where all of our business logic
so our view models our services all of
the stuff that actually gets our
application running is going to sit in
that particular class library it's nice
because it's a it's a net standard
library we can test it you know run all
of the unit tests without it being
attached to any particular ui framework
we then have our ui project and this is
actually a shared project so shared
project is one where when you reference
it from the target project it's
essentially pulling all of those files
into those projects when it goes to
compile them
and we we could have made this a
cross-platform library but again visual
studio doesn't actually perform very
well when you're doing that with a
multi-targeted cross-platform library
because what it will try and do is it
will try and build for every single
targets every time you rebuild it okay
so shared project is actually a better
or quicker developer experience for that
okay and in here we've got all our views
okay so we've got things like our main
view on our second view page um
and the one thing i wanted to point out
is that in addition to our xaml and our
xaml.cs page we have the xaml.host.cs
okay so i mentioned before that we have
this notion of a host builder and sort
of
enabling services on app startup and
this is where they're all done so this
builds our app app host if you're doing
maori development you'll see a similar
sort of thing as part of the boot up of
a maui application and so this looks
fairly similar to what you'd expect in
the sort of an asp.net minimal api type
of application where you're newing up a
bunch of servers or you're adding a
whole bunch of services to your your
host
okay let's
zoom in a little bit so we can actually
see these in a little bit more detail
okay
and you can see here that we've got the
ability to configure back-end services
you'll also see that our routes so this
is the the way our navigation is wired
up okay so this is a pairing between our
main page and our main view model second
page second view model
and the corresponding routes for those
okay so this is basically the routing
that powers our application
okay so let's get started making this
look a little bit more like uh the
commerce application we saw in
figma so before we get started i'm
actually going to just grab a
another package ref in here
so we're just going to drop this in here
like that so we're actually bringing in
the community toolkit the mbvm library
uh so this will give us a common
baseline based class called observable
object which implements i notified
property change so it just means that we
can write properties and bubble them up
um and as you'll see i'm not using the
reactive pattern as part of this
this demo
the next thing we're going to do is
we're actually going to
flip back to
figma and this page that we saw rendered
in figma before we're going to switch
across to the xaml tab and you can see
that this is the xaml that's been used
to generate that particular view so i'm
actually going to click on the copy xaml
button down here
and we're going to switch back to our
application i'm going to go back to our
main page
i'm going to select the existing xaml
and actually replace that with the
generated xaml
now i know because i've done this a few
times that there's going to be a bit of
a build error here so let's see if our
intellisense kicks in okay so it's going
to add this namespace in there
and then we should be able to run our
application
now obviously i haven't powered this
with any data so what we should see is
something that looks similar to the what
we saw in figma but obviously it's not
going to have any data to be displayed
give it a second or two
okay so basically this is our it's got
the tabs at the bottom
and our search interface and ideally
we'd have a list of products there so
let's go and wire up that with a little
bit of some services in here so we're
going to go to our back end our
service code
so under presentation we can grab our
main view model i'm going to scroll down
here now normally i'll put this in
separate files but for the time being
i'm just going to drop in
essentially some classes that are going
to represent the service that we're
going to be calling okay let me just add
that using at the top there so we have a
dummy json endpoint
and so we're going to be calling a path
called product now this actually
correlates to
let me see if i can bring it up
dummyjason.com so if you ever need just
to pull some some
um some json from somewhere that's
basically just for demo purposes um you
can do that so it's got things like
products users posts comments you know
so it's it you know if you're building
some demo ware it's like a great
resource because you can just basically
wire up a
a dummy endpoint to this so we're going
to import that um
as our json endpoint and you can see
here i've added i've got some some
basically some poco classes that
basically map to the data that we're
going to get back from this so this was
looking at the product endpoint if i go
back to there you can basically see
where's it going products get all
products
so this is the the product endpoint if i
go and click on the show output you can
see that we've got essentially a list of
products that are going to that we're
going to use in our application
all right let's come back to our app for
a second and we're going to come up to
the top here
and what we want to do is actually
inject that endpoint into our main view
model because that way we can call the
endpoint actually retrieve our products
that are then going to be bubbled up and
used within our application
so i'm going to drop our dummy endpoint
into there
and we're going to end up calling
load products and passing the endpoint
like so
and get visual studio to generate a bit
of code for us
and in here we're going to call our
endpoint
like so
now what this response is going to have
it's going to have a property called
products that we're going to then need
to map and expose through our main view
model to do that i'm going to change our
main view model to
inherit from observable
object okay so that's coming from that
community mbvm library
oops i misspelled that let's get visual
studio to correct that
and import the right thing
and we're going to create an observable
property
and so to do that we actually we make it
private
and so you can think of this as the
backing variable for our properties
right so the actual property is going to
be cogenerated for us using that that
tag so this is going to be our product
and we're going to call that items and
the reason i'm calling that items is
because if we go to our ui we'll
actually see that the list view is
actually data bound to a property called
items so i could either change the
example or i could change the code
so
now we're going to grab that items and
down here we're going to do items and
know you this is going to be uppercase
items because we actually want to use
the property to make sure that the
property change event gets raised so
we're going to items equals response dot
products
okay so that should power up our
application in terms of
the back end service but the question is
okay well where's it getting this this
endpoint from because all we've done is
added a bunch of interfaces and classes
down here we haven't really done very
much i mean even our endpoint is
actually an interface it's not even a
real class okay to get this up and
running we're actually going to go back
to our
host
setup and firstly i'm going to disable
the reactive view models for a second
they're not going to make use of those
and we're going to actually inject a
service into here
and for that we're actually going to use
refit so we're going to replace this
service logic here with this code
and there's a couple of namespaces to
import
and so because we're importing refit so
refit's basically going to take our
interface and create a it will generate
a class that's going to map to it and an
endpoint that we're going to be able to
call now the only thing that's really
missing is the actual url that we need
to call and for that we're going to add
that into our settings file
so i'll come over here go to app
settings
and in here i'm going to specify that
with a dummy json endpoint the url that
we're going to use is there okay so
with all of that we should be able to
run up our application
and with a bit of luck we're going to
end up with some products
and so
as part of startup it's now going off
and hitting that endpoint bringing back
the list of products now what would be
really nice is if i click on those we
should navigate to another page so we
can see the details of it okay let's
just wire up that using a little bit of
navigation so i'm going to come back in
here
and on our list view we're actually
going to attach a property onto here to
tell it where to navigate to so we're
going to do
uen which is our namespace navigation
request equals second now you think okay
where's that second coming from we go
back to what we were looking at before
which is our routes that second
corresponds to this second down here
okay so that's the name of the route
that we're going to
the other thing we're going to do is
actually
change this to from a view model sorry
view map to basically a data view map
and essentially what we're saying here
is the the navigation framework should
expect for a product to be passed into
our second view monitoring and so that's
how the second view model will will get
a product injected into it
however our second view model currently
doesn't know that it's going to get a
product injected to it because it's just
a vanilla class right now so we're going
to change this to it be a record
and again increasingly we're seeing a
move towards a lot of our view models
being static records that don't have
mutable states okay so they're immutable
the idea behind using some of the things
like reactive and stuff like that is
that as the application states it will
bubble up a new version of state
and so essentially those will explode as
exposed as a feed back up to our
application so the actual view model
really shouldn't change state um just
the contents of the feed should okay but
since we're not using those what we're
going to do is actually bring in a
product as part of the constructor here
and that will get exposed out as a
property as well
so that's as simple as our view model
needs to get
the final thing we need to do is
actually go to our second page and
actually tell it where to display the
information about our product because
right now it's not got anywhere to show
it so we're going to put a text block in
the middle of the screen
and we're going to bind
that to the product.name remembering
that on our second view model this
product is actually the name of the
property that will get exposed as well
and so we're going to basically take the
name of that product
and we're going to change the font size
so we can see it
and we're going to put it right in the
middle of the screen
okay and we'll give that a bit of quick
run
okay so it's loading our products click
on a product takes us to our second page
showing the details of that product now
interesting when i go back to the main
page it's having to reload those okay so
this is a bit of a thing um about the
sort of the the page experience on um
uwp and when ui uh is that essentially
as you're navigating between pages
there's this sort of caching model
that's there and essentially if you
don't want it to refresh then you can
set the navigation cache model to
required and that way as we navigate
between those it's actually not going to
repopulate or re-generate that page for
us
and so we should end up with a much
navigate better navigation experience
back and forward there
because it's not reloading data all the
time
okay so i click on a product
go forward go back and it doesn't reload
the page and click on another product
shows the detail of those products
all right
okay so just in summary i just you know
i want to highlight a couple of
customers that are they're using the
window platform
trade zero is one that's been basically
building a very sort of consumer-centric
um user experience using the uno
platform um they've got a long-term
strategy of making it available across
multi-platform
um
a tool that everyone probably is
familiar with um you get so let's just
have a quick look at nougat um there we
go okay so this is our nougat gallery
that we're all kind of familiar with um
i don't know whether most of you have
seen it but there's a new option over on
the right hand side actually not that
new these days
that opens then you get
package explorer so i can click on that
it's going to open the you get package
explorer for this specific package
and so this is actually all powered by
the uno platform okay so it's a it's
basically downloading the the nuget
package into the browser it's extracting
it making the contents available so you
can browse it so you can take a look at
things like the manifest for the applica
um the package then take a look at its
contents you can then drill down and
have a look at the various libraries
that are in there if you click on a logo
it shows that in the screen the various
dlls you can take a look at the debug
sources etc as part of your application
so this is actually quite a useful tool
if you're ever looking wanted to take a
look at the contents of a of a package
without having to download it unzip it
extract it etc you can do that all
within the
the browser now
uh there is actually a windows app for
that as well um
okay uh kahua um so this is a sort of a
large-scale sort of enterprise based
application um and they're pre migrating
essentially from an old wpf style
application um to the web okay and
they're they're doing that using the uno
platform so the idea there is that they
can take all of the existing source code
that's all written in net and move it
forward into the web without having to
rebuild it all
and finally the uno calculator so this
was the original calculator that
microsoft shipped in back in the 90s
exact same source code all brought all
the way forward and it's now across
available across all of these devices
so we can actually see that running
again in the web
here so this is actually the same
calculator that they shipped back in the
sort of the 90s obviously it's been
reskinned slightly but essentially the
core workings of it and the calculation
module is all the exact same source code
okay so in summary basically what we've
covered off today is basically the the
win ui plus uno platform capability um
so the idea of taking a win ui kind of
concept and having it run everywhere
what's really interesting for a lot of
people is the web support um but
interestingly we were doing uh talking
to um
some chinese developers and they're
expressing a lot of interest in the the
ability to take it to linux and actually
even to support things like windows 7
and windows 8 because you can take the
wpf based application and run it on
those older platforms as well
um unlike a lot of the other
cross-platform tools the goal with the
uno platform is this
pixel perfect rendering um and then for
for us to support
the whole developer life cycle through
from development or design all the way
through development and into production
as part of the ongoing tools of the
platform
calls to action if you want to get
started with the uno platform
go and download it and try it it's
available at the platform.uno
the team is very responsive on discord
and if you've got issues make sure you
log them on github if you've got feature
requests make sure you log them on
github the team is very active at
listening to what's coming through on
github
and and actioning on those
okay
i'm going to hold this
and
leave this on the screen for a few
minutes if you have the ssw app then
make sure you scan the qr code
if you if you don't have it with you
right now you can download it and scan
later on um
in the meantime if there's any questions
i'm happy to take them from the floor or
from online
okay so we have one question online can
i zoom in on the code please yes i did
zoom in hopefully it was in time to see
most of the code
if you need any of the code afterwards
just let me know i'm more than happy to
share the code
the commerce sample app that we saw in
figma um obviously it's available in the
figma template but it's also available
on the github repo um it's on uno
platform slash uno dot samples um it's
one of the samples that's available for
the uno platform there
will there be a designer like there is
in wpf um or is this just hot reload
type or is it or is one coming um so
to date there is no there's no work
being done on a designer of sorts
and this is unfortunately true both from
microsoft all the way across the
ecosystem
there is a some work being done by
microsoft particularly for for maui
around a live previewer with based into
visual studio that basically surfaces up
what your app's currently looking like
on the device and mirroring it um it's
kind of like a pseudo design based
experience
but right now the the focus from the
list of microsoft perspective on is on
things like hot reload and
you know the the savings and the the the
benefits to developers from that
perspective um so i don't see a designer
coming anytime soon however if you want
to get design started for the uno
platform you can actually go in and
start up a uwp app you can use blend as
your designer or even the visual studio
design surface for uwp and then you can
reuse that xaml
line for line in your uno base
applications okay so the the the xaml
that's used for uno is exactly the same
as the uwp in fact for uwp applications
there is no
uno part to it uh you're running
essentially a uwp or in a future case a
win ui application
and so you know the the uno componentry
there um is pretty minimal um
what's the main difference between maui
and uno um so the big difference is is
in the strategy they've taken for
how they're abstracting for the
different platforms
so if we look at the way the uno
their sort of view on the world is they
basically come from a very window
centric so they basically said okay
we're not going to provide any level of
abstraction for windows so whether that
be uwp or win ui
if you want to build a windows
application you could do so with or
without uno involved
if you want to then take that windows
application across to other platforms
that's when you engage with uno and it
will provides the abstraction that
matches this essentially the
specification uh for uwp or when ui
across those other targets uh maui on
the other hand provides an abstraction
for all platforms
and it does so using well in the case of
xamarin forms it used to be it used to
be renderers and now it's a bunch of
handlers um
and so it's kind of like a different
perspective on the world there's you
know it's horses for courses
different developers will prefer
different approaches um there are
differences in terms of supported
platforms so for in the maori space um
their targets are ios android and
windows
and mac os
in the uno space they're included
it's those targets plus linux
and the web um
on top of that um
what else can i tell you about the
differences um
it's a longer conversation i'm happy to
have with people um
again it's not a
natural preference over one over the
other it's just that they have some
fundamental differences
um how different is the uno xaml from
wpf and uwp
uh
okay so
for you for i mean essentially the xaml
for for uno is the exact same xaml that
is used in uwp in fact you can build a
uwp
app
without any uno bits involved okay still
and then you can add uno on top of that
to provide support for those other
platforms okay so it is exactly the same
example now where you may run into some
k limitations is some of the
capabilities have not been brought
across from uwp into the other platforms
so there's obviously a prioritization of
the
of work that's gone on there to make
sure that the the you know this the
stuff that makes sense for the other
platforms has come across um and if
they're very window-centric things then
that sometimes they don't get brought
forward um to those other platforms so
the xaml is very different from wpf saml
well it's as different as uwp example is
from from
from wpf
okay
any questions from the crowd here
nope
all makes sense
are we going to go and build an uno app
tomorrow
um the best way to do it is to get
started with it and just download it
have a play see what you can come up
with
i think that the capability of building
a web app using wasm
using xaml and c sharp is just a great
experience
i'm not a native web developer so you
know the more i can stay away from
things like javascript the better
so it works from that perspective but
being able to take the same code and
actually have it run across the
different targets
without having to redevelop it is
definitely a power to the platform so
okay one more question is there support
for hybrid apps with uno
bringing blazer components like maui
does um
so
i'll answer that yes and no i mean yes
you can build an app using uno that has
a web view and that brings in web
components
it doesn't have support in the same way
as as maui blazer does
i think the guidance there is if you're
going to build an app essentially a
blazer app that you want to run in a
native shell the the story for that
today would be to use maui blazer um
it doesn't mean that you couldn't do it
for uw
sorry for on the uno platform it just
means that right today that that's not a
core developer scenario for the platform
um
one of the interesting permutations that
we have seen is that one of the sort of
things that has been built on uno is
taking various web components and
actually making it available across the
suite of uno platforms so for example if
you need a markdown viewer or markdown
editor
rather than building a native experience
in xaml you can actually take a web
experience and package it as an uno
control and have it running on various
platforms and so this has been used in a
couple of scenarios
ones once where we've taken the the
monaco editor so this is actually the
editor that powers visual studio code
and actually made it available within an
uno based applications okay
and so that whole javascript library
which essentially what it is can
actually be packaged as an uno control
and made available across the various
platforms
so yeah um that's quite a a powerful
capability of the platform so
all right let me just progress to the
next uh
slide um so there's a qr code for
earning ssw points
um and i think that there's one more qr
code after this is that right okay
feedback qr code all right so if you've
got feedback on today's sessions um
please provide feedback on the session
um it always really benefits me to learn
what i could do better
and for to know what other information
you might want on the uno platform etc
so scan the code provide some feedback
and that would be fantastic
uh okay so matt's actually got another
question before we sign off what's the
app and page life cycle management like
similar to xamarin maui
so the to the app and page life cycle
exactly matches the the page and life's
app lifecycle for uwp and win ui
so pages have a natural
so they have a sequence of events that
get bubbled up so you have on navigator2
that basically gets called when you
arrive at a page you have one navigated
from or on navigating from where you're
about to leave a page or navigated from
when you leave a page
and your app has similar life cycle
things like when it started and
suspended etc
so it's kind of fairly similar to well
again on windows it's exactly the uwp
model on the other platforms it's
basically abstractions that
sit on top of those
so
yeah
okay with that um
thank you all for for listening in or
for attending um i'm going to hang
around for a few minutes if you've got
questions feel free to either
broadcast them on the web or come have a
chat with me afterwards
thanks very much everyone
[Music]
you