About this talk
This talk focuses on the Uno Platform, a cross-platform framework that allows developers to build .NET applications that run on any platform from a single codebase. The speaker, Steve, highlights the platform's capabilities to leverage native rendering engines for Android, iOS, and Linux, making .NET development more versatile. He demonstrates how developers can create applications using XAML and showcases the integration with various tools like Figma for design and Visual Studio for coding. The session includes a hands-on coding demonstration where Steve builds an Uno application, discussing the structure of the code and the underlying APIs that enable seamless functionality across different devices. Additionally, he introduces advanced features like MVU (Model-View-Update) architecture and discusses the ecosystem of Uno extensions that facilitate modular functionality for developers.
Full transcript
[Music] welcome to the dev days conference we we are in Hall one languages and framework and we have Steve our next presenter in front of us and I'm very happy because For the First Time In This Hall today after five speakers there's somebody talking about net apps and I am a net developer I've been listening to react I've been listening to Java and my face just lit
up it's late in the evening but then there is net apps to save us so Steve the stage is yours all right thank you so much all right yeah so hello everyone so yes we're gonna be talking net today uh so my name is Steve uh I'm an engineer on the Uno platform team and one of its uh main um maintainers and contributors and today I want
to talk to you about how how you can get your net apps up and running on any platform right so we're bringing net to to the world to every platform no matter where where you are developing on or where you're using these apps so what I want to do is basically we're going to jump into some code we're going to jump into some demos we're going to
show a lot of stuff today I'm going to try and get it all uh uh you know under under the time uh but the first thing I want to do is do a quick overview of what Uno platform is how it works and then we'll you know jump back into that those code and start building some apps building some cool stuff so oops next slide uh so
what is uno platform right so Uno platform itself at its core uh is a free and open source framework for building crossplatform applications right so building using net as as its underlying uh framework right and so basically you can build apps using Uno platform and Target anywhere that net runs so if net runs there it runs Uno apps and doet runs pretty much everywhere now these days
um all from a single codebase and all from a single project file as well uh that will take a look at the structure of what an Uno app looks like right and so the core platform uh uh is basically a implementation of a single API layer for the UI that works across all platforms and it plugs into the native rendering edgin of each of those platforms right
so whether that's UI kit uh for iOS or the Android views system or engine or HTML um or even skia based rendering for multiple different platforms right so um whether you're using the native rendering engines or you you can have skia basically uh do the flutter style of engineering uh of engineering of uh of um of rendering uh for different platforms depending on which platforms that you're
running on so that's the core technology that that that is the basis of Uno platform right and on top of that there's this ecosystem of first-party libraries that uh uh that we've we've built uh for things like theming and styling your applications uh for additional complex controls that don't come out of the box with the with the main apis uh reusable modules uh for things like navigation
Frameworks or presentation Frameworks pendency injection so all that stuff so basically it's a whole platform for building applications at its core it's it's that crossplatform UI API um but it's it's a whole ecosystem to to basically anything you need for a full-on application we have availability for you to to use that right so um there's also great tooling for integration with uh with developers uh as well
as designers right so we have things that we'll look into today we have Integrations with figma the design tool we also have great Integrations and extensions and all that with Visual Studio code if you don't want to do Visual Studio or if you want to use a different IDE uh which we'll jump into all that shortly um but next let's take a look at what a Uno
app actually looks like and so this this is this is an a slide that I've used over the years uh and it's very basic but I like it and it's been we're running out of room as we've added the platforms basically but um it's just a quick look of how what I mean when I say you can write once and build everywhere right so it's just a
simple piece of code that you can see and you can see how it looks across all these different platforms you'll notice that it actually looks the same right it's it's sort of styled in that same way uh but it's actually rendered natively on each one of these platforms uh whereas you know in certain cases like Linux here it's being rendered using skia as a as a 2d
based uh graphics and so you notice if you take a look at the at the examl that we're actually looking at right now uh in the in the center do I have my laser pointer so right here so the zaml that we're actually defin using to Define our UI here so this is um the the zaml code that we have it may look familiar to some of
you as if especially if you're coming from the windows world of development right so this is straight up wiui zamal so that is being built and running across all these other platforms so the thing is um we are actually what we're doing is we're taking these wiui apis these well documented and already established apis for for defining UI uh that are used originally for building windows apps
and we're using those apis and making them work across totally new platform so bringing them to the web bringing them to Android bringing them to iOS bringing them to Linux you know um so it's the same code it's the same behavior it's the same everything and when I mean a same code I actually mean it's the the same code right so like we actually have been able
to Port over most and many of the control the original controls written for Windows and have them running across all these new platforms so when you're using that date picker natively in the browser or in your mobile app that's the real date picker um written by Microsoft it's the actual code it's the actual um um uh behavior and everything that's that's running on your Windows machine right
now but it's actually now running across all these other platforms and so it's been great like partnership with Microsoft having access to this uh now of of course wiui is open source so go definitely check out uh all the C++ code that's there but we love C here so we've been porting it over um and we have lots of and so things like the date picker we
have you know it's just it's just been massive reuse of code uh bringing over all these zaml lines of code all the C+ plus lines of code Plus on top of that we get to increase our testing coverage because we have all the tests that were developed by Microsoft for these controls already we have these now running across all of our platforms running these tests and having
them covered uh across all um across Android across iOS across all these things right so there's uh there's lots of coverage there and lots of cool stuff that we've been building and bringing over and so along with that uh we have controls like I mentioned defined by wi UI so the date Pickers the text boxes the buttons you know all the all the stuff that you would
normally use for for building an application um but we also have great library of controls coming from things like the first-party libraries like I was mentioning so one of those is the Uno toolkit right which provides outof the boox crossplatform controls that aren't originally in the wiu IPI so um things like tab bars or navigation bars or or um um chips and cards and you know like
other things like that um and there's also the things like the windows Community toolkit right so the windows community toolit um um as well as uh third party vendors like charts from places like live charts or maps from things like Maps UI um and so the great thing about this is these vendors and these controls like the windows Community toolkit and and live charts and all and
fusion and all these people um they've had controls and stuff that's been targeting the wp or the wiui apis and since they're already targeting those apis for those controls we're implementing that same exact API without any changes right so if you're already targeting the wiu apis then you're targeting Uno as well and you just didn't know it already oh just didn't know it yet right um so
we have a large set of controls and everything that's adaptable to uh to bring to all these different platforms as long as they're targeting those those apis and so let's jump into some code and let's take a look at what a real app looks like and what some of these components actually look like while they're running right and so the first thing that we're going to do
is our initial exper experience for getting an Uno app built and that's going to be using our wizard so let's go ahead and let's open Visual Studio and let's create a new app so I have Visual Studio open just double check my slides worked yeah so we can uh create a new application and right now we do Visual Studio we jump to some different idees in a
second um but basically we can start a Uno application here from the uh the app templates that we have built into visual studio so if I open up an Uno app uh and I click create might open on a different window um but we will have our wizard Let's see we will have our wizard oh there it is uh show up and so this is basically how
you can get a your Uno app up and running and bootstrapped with everything that you need right so you'll see I won't go through all the options because there's a lot but um you'll see we have options for we have uh already previews and and support for the previews of net n uh but I'm going to stick with net 8 uh we have recom we have pre
presets here can I zoom in yes I can so we have presets here and so we have a recommended and sort of a blank preset so I'm going to go back to blank because we're going to do some customizations uh but recommended comes with all the bells and whistles turned on you know like everything that we're going to slowly uh build up to in this talk and
so for platforms um you know we have all the platforms are going to be selected so for Android for iOS for mobile for web we could Target the the a web assembly Target for the browser uh and for desktop it's very interesting we have have obviously windows so Uno sort of steps aside and lets when app SDK and when ui3 do its thing um whereas on desktop
we can Target Mac OS using Mac Catalyst uh you know um along with iOS uh but we also have the ability to have skia base rendering for your desktop targets right so that means for for Linux uh for Mac OS and this is time this time Mac OS targeting sort of the appkit apis and Windows using sort of WPF as a shell to to host the app
where actually going to be rendering using skia rather than the native rendering uh Native rendering engines and it looks the same it looks the exact same so really cool stuff so we'll take a look about that um some of the stuff that you can get out of the box we're going to talk about some presentation Frameworks later um but uh we're not going to have one right
now uh but if you wanted to get started with using mvvm as your presentation framework coming from the Microsoft Community toolkit you have that option here uh and we also have our own implementation of a presentation uh framework called mvu which we'll get into in a bit uh in in uh in a little bit but this is coming from Uno as part of our Uno extensions uh
package of of modular uh functionality that you can use as as our pre-built crossplatform first um presentation framework right a really great thing is uh the markup right so I uh I'm G to stick with zaml here but you have the ability to build your UI using C as your markup language instead of zaml if you so wish right so you have the option to do both
I'm sticking with zaml because it's my first love so I'm staying with zaml um what you saw before in the slider there um was you saw that it was sort of like it looked like a a Windows style FL uh slider in in that in that application so basically by default you'll have those fluent design themes the fluent design Styles coming from from Microsoft from Windows that'll
be what your app looks like across all these platforms by default um we also have material design so you can style your crossplatform apps using the material design style so I'm going to choose material because we're going to be building a little bit of a application what I mentioned before with mvu is it's part of these extensions these Uno extensions that we have so you can have
modular bits of functionality so if you want to have dependency injection in your app if you want to enable logging if you want to have uh um certain navigation uh framework installed or or um logged in but or sorry um pluged in by default H we'll go into navigation and MX in a bit more because those are the big the big kunas of the Uno extensions um
so we don't have to go too much into details other than that I had mentioned the Uno toolkit um so the Uno toolkit is a set of additional controls and helper classes that you can use when you're building apps so we're going to use that as well and the only other one I'll talk about here is Maui embedding so that's a really great one um if you
when I was mentioning all those UI components uh if they're targeting when UI they're targeting Windows right but the thing is if you have components that or vendors or controls or whatever that are targeting net Maui and you're most most um interested in platforms like Android iOS Windows basically where we intersect with the platforms that Maui targets you can actually take those controls uh and host them
within Uno application seamlessly and they'll work just as they would work in Maui application as long as they're running on the same targets right we have some targets that don't uh align technically with with what Maui targets so they won't work on those platforms but the ones where they intersect with Maui those ones work perfectly and so a bunch of others I won't go through the rest
but you know you can bootstrap with authentication you set up some app stuff set up testing set up uh whether you want to have CI pipeline stuff ready in your app to go but we'll go ahead and create this and let it build and so we should have our first Uno app so this is what an UNO application looks like come on Visual Studio there you go
um so I'll close this and we'll switch over to the Target I want to run on and we'll take a look at sort of the structure of an UNO application um hey go there H okay so this is an Uno app so if you look here there's not much to it right there's just a single CS Pro that we have here that's basically it so if we
open up that and and this is new as of our current release so basically if you were used to Uno before uh there might have been multiple projects there a base project one for Android one or sorry one for mobile one for web assembly that's all been Consolidated into a single project single source of of all your code so you don't have to worry about all that
uh all those extra platforms anymore or all those extra projects anymore and so this is what Uno app looks like so we have our project and we have uh basically all of our shared code is in this project here so um we have U assets here so all your shared assets everything that you're going to have within your application it's all going to be within one shared
spot and it'll properly be brought in so if you have image files they'll they'll properly be made into icon or to image bundle assets for iOS or they'll be put into the XX hdpi and htpi and mdpi folders for Android those will all be done for you and properly placed at build time so you just place this in one spot and you're good to go and uh
the great thing is you still have access to things like um uh your platform specific stuff right so if you needed to do Platform specific code you can head over here into the platforms folder under Android you have you know the entry points for your application natively for the main activity same idea here your delegate is here for uh for iOS U so all your platform specific
access is still there and you can have platform specific code if you so wish and so that's all available for you right so the big thing I want to show is the actual CS project itself so if we look here there's not too much that's actually in the project file so the big thing I want to notice I want to point out here are the target Frameworks
right so we have some of the ones you may be used to so Android iOS Mac Catalyst uh windows and so we have these nice ones here for desktop and for browser wiom so now we have a split right so we can actually do runtime checks and compile time checks and all that for am I currently running in the browser or am I currently running on the
as a desktop application and do some different uh logic in your app if you so wish for platform conditionals and so net desktop is an interesting one right so we're going to run the desktop uh head in a second and I'll explain a little bit of what that is uh but the other thing I wanted to point out was the Uno features so this is specific to
our the SDK sort of that comes with the project um it's a list so you don't have to worry about your nougat package dependencies you don't have to worry about any of that basically what we're looking at here is just a um uh different way of managing all your dependencies and your applications so here we have okay I know I want to use material in my app
and I know I want to use toolkit that's all I got to do all the dependencies are pulled down for me pulled into the proper uh packages and all done properly for all my crossplatform apps so if you wanted to look a little bit at um oh it opened in the other window window that's some of the features that are available to you in our documentation you'll
see them here so you can have material you can have toolkit you can if you want to start logging with Siri log if you want to use mvu like I was mentioning before that's here as a feature and so the these all get pulled in for you um and you can don't have to worry about the noua dependencies anymore right and so if you were to look
you could just go to your build props folder and you'll notice here you have a central location for handling which version that you actually want to be pulled in for those features that you have activated in your right so let's go ahead and run this so the thing is I'm going to be running this as the desktop head right so what desktop means basically is you well
I have the option to choose different um sort of Target Frameworks for uh for the desktop that I'm targeting but here what we're actually doing is we're going to be launching oh it opened in the other window let me just pull it down and I'll resize this uh here we go here we go here we go and so what we're actually looking at here is a native
Windows application so this is within a WPF shell right so it's being hosted within WPF app and then we're rendering the app um using skia as a rendering engine for actually drawing our UI based on our zaml right so if we looked at our zaml you'll notice that we have our text blocks text block that says hello Uno platform and we have that here um and you'll
notice you could you could see sort of the Chrome around the window is the normal Windows Chrome that you're expecting to see right so we can do nice things uh hello Dev days you know um and we can change our UI and you'll see it hot reload on the side here so we're we're actually running this app I'm not I don't have the debugger attach anything we
just have nice hot reload support within within Uno platform so we can change things like that so you'll see that the the UI changed on the right here um let me just close this window okay um and so we can do some nice stuff so you know we can add buttons you know quick me and we should have a button show up and it's a you'll notice
it's so now we actually are seeing the material part of the material design that I posted here so we have a nice button I don't know if you can see it on the screen but you see the nice Ripple on the button as it's going you know so we can add things like that so it's uh it's all good now um let's build sort of a more
interesting application so we do have a lot of reference applications uh and reference designs and everything that you can use uh if you want to get up up and running and started right so um let's go to our designs for one of our sample apps actually the first thing I'm going to do is talk about yes so in terms of getting started getting sample apps getting some
reference applications for how am I going to do this how how do I properly build a UI um we do have a bunch of um samples and tutorials within our within our documentation so if you go to the uno dos you'll see this samples and tutorials section we have the basic counter we have some Workshop applications that will it's a workshop that's hosted on the docs website
that will step you step that will guide you step by step into building an application whether that's a simple calculator app or a YouTube player app and it has navigation in it it has presentation framework usage it has all that nice stuff in it right and so one of the great things are are Uno samples so we have a repository of just of of those workshops and
of those um um tutorials but we also have just other reference applications like the Commerce app right so if we go here you can go to the Uno platform Uno sample is repository and we have this Commerce application that is just going to be a small eShop sort of app right that you can build so we can go ahead and take a look at what that looks
like and so what that looks like is here we have a a figma design of this right so if you don't know what figma is figma is uh basically a design tool for for um um app designers or or yeah for designers basically but it could basically drag and drop components build your build your your your pages build your website build whatever your UI of how it
would all look you build wireframes do all that nice stuff um it's very very powerful and so here are some wireframes and mockups of um the Uno Commerce app that I was mentioning right so it has a login page it has the main product details you know it has um has a search page and it has you know product detail pages and all that fun stuff right
so it's just a full it's just a sample app and we have a we have a working version of this application with the code written in our Uno samples repository that you saw that you can play around with and see how it was done uh but one of the great things uh that we have built is a plugin for the uh the figma tool right so if
I were to take this this uh and so this is just dumb uh design data right like so I could take this I could drag it around on this canvas you know like it's just I'm just moving components around as a design canvas so I could actually take this this page and I could right click and I can open the Uno plug-in and so since this is
a web-based tool right you can run web-based little apps within the figma sort of sandbox ecosystem and so since Uno targets the web itself this is actually a small Uno application running inside of figma uh since we're targeting web assembly and so it's it's built with Uno with material design as you can see and so I'll move this to the side a little bit and so here's
our login page if I were to refresh what I had selected as my selected frame you'll see that it now gets rendered here in the plug-in and when I talk about rendered I'm saying this is a running version of that design data so this is a working I can't zoom in too much but you'll see here this is a working text box these are working password boxes
this is a working button you'll see that Ripple again like I had clicked on the the other button before so this is an actual native like web assembly Uno application running and what happened is the plug-in pars that designed data so parsed those components that are in that that this this uh canvas here and generated the UI code and actually ran it like live uh within it
so it's a real Uno app so if I were to actually you know move around this stuff in the design and refresh it'll rebuild the UI and it'll refresh and give it a second and now the button's on the bottom and it's a working button right so really interesting stuff and so one of the great things is you now have the zaml that was generated based on
the design and so you can also export it as C if you want if you're using C as your markup language so you have you know all the C here but we're using zaml so I'm going to go and I'm going to copy this code and we'll jump back to our visual studio and we will replace our current code with a code that I generated from the
Uno figma plugin right and you'll see now our desktop application our ski so that was a web assembly using HTML and and and all that stuff to to render now that same exact examl I paste it here and the skia based rendering desktop application that we're we using is working just the same we have the nice material text boxes we have the login page that or login
button that does nothing but it's working um and so if I were to do some cool stuff after that we can even hot reload stuff like the code behind of the file not just the UI right so um let's go ahead let's paste some interesting stuff uh like a button click and we'll save that and it'll reload and we'll just add the click Handler that should now
be detected as and code changes were applied successfully so if I are now to click oh it oped on a different window but if I now were to click on that login button it will open a second window if I click again it'll open a third window uh so we do have uh now multi- window support Ino applications as well for the desktop targets which we're currently
working on the mobile targets uh but we do now have you know multi- Windows support so uh some really cool stuff that you can build and this was all done hot reload style uh you know I didn't have to rebuild the application it's just going as I save so uh really interesting stuff um so that was uh basically the beginnings of the Commerce app that's just the
login page right uh so if you wanted you can go to that GitHub that I had mentioned the Uno samples into within the reference folder there's the Commerce GitHub uh sorry the Commerce folder uh and right there is the fullon application where the UI has been generated from figma and then we had built in the you know the presentation logic and all the other stuff that go
along with it to actually getting it working as a working Commerce application so definitely go check that out that is a good reference application for how to build applications and how to see um how certain code is used it's using stuff from the Uno toolkit it's using Uno extensions for presentation framework and navigation um so it's it's a really good reference application uh so next oh I
have to switch over sorry so next um I will keep this up for a second as I was supposed to put that up as I was talking um but if you wanted to you can uh go check out the link that I have here um this link will go to that reference uh that reference design for the Commerce app and that also includes all the components all
the figma based components that you can drag and drop and build an application with so it's all the compatible material sty styled comp components uh that you can use to build Uno apps uh can be found at this link in this figma file it's a free community file that you can use the plugin itself is you're able to download it and use it within figma you have
a a good amount of exports that you can export the code with and play around with it um but then um there's a license that you can look into uh if you're curious about um you know using it for more heavy usage so another great thing that we could take a look at I won't go through all of them but uh here you see Commerce uh the
Commerce app in our screenshots um there's also some great examples of Uno apps that are built for demo purposes and prototyping uh like the official Uno gallery and the playground uh and there's also the toolkit do toolkit labs. deev uh which is a great um uh initiative that's being taken on uh for the the windows Community toolkit team for um sort of prototyping and and handling uh
new controls that they're sort of working through and these are all uh built with Uno and running in the in the browser right natively so if we wanted to look at um the Uno Gallery say you can go to Gallery oops you can go to gallery. platform. Uno and this is an UNO application built you know it's built with Uno and it's built for just demonstrating Uno
and it's just basically a list of or a collection of all the control or not all a good amount of or a good collection of the uh UI components that are available to you um uh whether you want to Define them or style them as material whether you wanted to style them as fluent you know so you have the fluent buttons here we even have copertino Styles
as well so um if you have that sort of iosc type feel that you'd like to style on your application and uh lots of great stuff in here so um go around check it out play around at gallery. platform. UNO so lots of fun stuff you know combo boxes all that great stuff um and and we have you it's all dark and light theming support so this
is also a great reference application for looking on how to actually use components how to do theme changing how to do things like this so it's a it's a nice little uh place to look around and and learn about um all the things that are available to you in Uno platform as well as Community toolkit controls and um Uno tool kit controls as well so fun stuff
so the thing is we have been talking a lot about um the the UI API so basically the core of Uno where you can build uh sorry you can build uh your UI right the thing is we focused a lot on the UI apis that Uno platform implements but we also um implement the non UI apis from Windows in a new crossplatform way right so these are
runtime apis that are developed that were developed originally for for Windows um and they cover a lot of ground from things like the accelerometer to the clipboards to dealing with the I don't know game pads or the flashlight or geolocation things like that and so we've implemented these apis all without needing any platform specific code right so we could take a look at oh it just restarted
the animation so let's take a look at some so I'll put this I'll keep this up in a uh for a second if in case people want to uh go to that link take a screenshot of the QR code um but this is a nice little sample app and we're going to look at some code for how to deal with non UI apis for Windows applic or
sorry for Uno applications so let's jump to that and then we'll go back to our to building our application um so if we go to this unexpected apis I'll refresh the page just in case and so we have this nice Uno application that we built you'll see that it's you know has a nice little navigation view that we're dealing with here and so it's just a small
sampling of some of the non UI uh runtime apis that we have uh implemented in a crossplatform way so think of zamon Essentials but plus plus right because there's a lot of it's a large JPI surface that we've covered uh and there's even more to go so things like network connectivity right so if you look here at the bottom we actually have the code that you would
need to place into your application so just by a few lines of code nothing nothing uh uh nothing platform specific uh this will work across all your platforms so you can check your connectivity this means I'm connected right if I were to observe my connectivity so now we're currently watching and we're waiting for changes in connectivity if I were to simulate uh going offline right you'll see
that it uh switched and now it thinks that I'm I no longer have connectivity right so let's put that back let's close this uh things like geolocator and so again this is a couple lines of code will get you the the geolocation or whatever and that handles all of the um requests for permissions and what happens if you deny what happens if you allow it and all
that stuff so if I were to click get geoposition you'll see that it's waiting um but it's actually here I've been prompted with the native browser uh sort of dialogues to request my location right so if I allow it I get where I am um uh things like well I don't have any accelerometer on this machine but uh things like uh if I were to share right
so uh you get the native share uh share sheet that's coming from the browser itself so how you'd want to share this API this this uh this link one of the really cool ones is speech recognition right so look it's three lines of code and I could do something like this oh first it's got to allow it hello one two three hello one two three and there
you go right so that's pretty cool it's it's it's coming from my microphone that's connected to my little Hub here that's connected to USB to my to my computer going into the browser and listening and understanding everything so that's pretty crazy stuff um I won't go through all of them but uh another nice one is like uh is the folder access so folder and file access straight
from the browser itself and so this works on other platforms as well I'm just doing it on web assembly for now because it's easiest um what if we go I have this nice folder called a uh and I select it I get my listing of files that are here I have a hello.txt if I were to open that file quickly just quickly hello.txt open another window here
we go so hello.txt is here um it's got nothing in it right so I can write hello Dev days right I can write to this file and we'll see it shown up here uh and I had already previously given usually you would get a a permission thing saying like hey can the browser read your files but I had already done it so it's saved in the cookies
um but you'll see that it shows up live uh on the saved file on my actual machine itself through the browser so interesting stuff uh if I had the GamePad which I had forgotten uh but I could plug in with USB I could plug in my Xbox controller and you'd see live as I as I Chang you know the the toggles or I press button you'd see
it being shown and detecting the changes and all that stuff there and even nice things like how would we like title bar right like title bar is something that's sort of Windows specific to the to the to the the Chrome around the the windows that you could change the name of it um but you can change things like this right even here we could set the title
and you'll notice it's a little bit uh scrunched up because I have lots of tabs but you'll notice that my the actual title of my tab in my browser changed to what I had placed here right so really so definitely go check it out um I'll put it back on if people want to play around with it or look at the code we'll this um so yeah
so these are the non UI apis and so um I'll keep it up for a two more seconds good so uh the next thing that I had mentioned before that I wanted to talk a little bit about more were the Uno extensions so this is another first-party sort of library that for allowing you to have modular um like battle tested modular bits of functionality that you could
just pick and choose and drop into your applications right so whether that's you want to get started with dependency injection you want to deal with serialization you want to do uh logging with Seri log syncs or or logging to the console or whatever like Central logging uh stuff like that um one of the big ones I had mentioned was mbux and and uh navigation those are two
large extensions that are available here and so this is sort of goes outside of the core product right so the core product were those UI and non-ui apis that work in a crossplatform way now we have this ecosystem uh within this platform that we want to be able to to uh build get you to build applications get up and running quick right so I'm not going to
spend too much time on each of the extensions because I I know I am running out of time um but um as part of the ecosystem of extensions from the Uno extensions Library a main citizen of this library is the mvu presentation framework implementation right so mvu it stands for model view update like extended so it's an implementation of the model view update design pattern and so
it encourages the flow of immutable data in a single direction right so it's coming from your model it's going to your view it's going back through to the update cycle and it's just moving like that so you just have sort of this constant stream of feeds of data right so that's what we call them our feeds um and they're just being observed and reacted to as it
flows through and you have these feeds also represented as states that you can push data to right so this deserves a talk all on its own I'm not going to go into all the detail because it's going to take a long time to explain and it is a very complex topic so we do have extensive documentation and example-based um explanations on the Uno platform docs so definitely
go check that out under the extensions section called MV x uh but basically the magic sauce here is that there's a generated bindable version of your view model so of your model uh there's a generated version of it uh that's created for you by m the mvu extension and so this abstracts all of the things like I commands and I notifi property change it extracts all that
away from your actual presentation model so you can keep it simple and it acts as the bindable glue between your view and your model your immutable model right so a good basic example of the concepts is the main counter sample app uh that is from the Uno documentation right so we looked at the Uno documentation a little bit uh it is here yes oh here um so
the counter app um is a great way to get started it's just a very simple app right you could just click a button and it keeps count um but it's implemented in multiple ways so it's implemented using Z as a markup using MV as a presentation framework zaml with mvvm C with mvvm or MV so you can have your choice of which you'd like to choose so
if we looked quickly um if quickly where is my code uh we can open up visual studio code Visual Studio code and we have uh the the counter app uh here right so the thing is I've opened Visual Studio code and so with Visual Studio code we actually have an extension for vs code as well if you don't want to use Visual itself and so from here
you have hot reload access you have all this stuff so um if you take a look you have this nice uh immutable partial record right of a main model it P it pushes states to this count and to this step and it has this increment command you'll notice it's just three lines right so there's no get set there's no I notified property change there's no I even
it's just a it's just a method if we were to jump to the main page of the zaml um we have our normal binding so you bind as if it is a command because technically is it's using that generated glue in in the middle there right and so you're you're you have a binding to the count you have a two-way binding to the step of the text
box right so if we were to run this quickly and running out of time so I'll do this uh and then we will talk about the last little thing and we'll wrap up so um as this builds we'll get ready for the next little thing um oh it opened on another window where is my browser oh it's gone okay it's not showing oh there it is uh
so here we go so here is the C the counter app so right I can increment my step and so every time time I click this it automatically goes not too exciting uh but basically that's all done without you needing to do I notified property chains without you needing to do commands without needing you to do anything right and so this was all run and debugged straight
from Visual Studio code which is very nice um and so the last thing I just wanted to show yep the last thing I just wanted to show uh was just a nice case study right so a nice case study for Uno is actually um the nougat package Explorer right so if we were to go to nuget.org and say we're on the Uno website right um we actually
can go uh over here to open in nougat package Explorer from n.org and it'll launch an UNO application that will download this package and it will um you'll be able to sort of explore the actual contents of the package all using Windows uh sorry all using Uno and this is running natively in the browser right so uh you have all the access to the metadata it's still
downloading connections a little slow there you go so you have all access to the the metadata dependencies of the of the stuff itself you can dive into the actual file structure of your nougat packages and see everything from the dlls so it's nice little tool that you can use uh and it's built with Uno and it's hosted directly from the nuget.org website um so that's a great
case study and so yeah wiui in the web there's 30,000 monthly active users like we've seen 22% of them are actually from non- Windows machines which is really cool and really interesting um and so that was just a whirlwind of uh Uno platform how you build it uh what it looks like and so how it works and so I just want to it's been a great honor
to be able to talk here I just want to thank everyone I know it was like a fire hose of information uh but I wanted to get as much stuff stuck in there as I could so uh I really appreciate uh you know you having having the time here to to to listen and if you have any questions you want to get started uh you can go
to the platform. website that we have a very active Discord server where there's lots of people there that will help out including myself as well as our GitHub is a great place for support and questions and information as well so uh definitely go check those out and hit me up on my socials if you if you want to connect and uh and talk about Uno talk about.net
so thank you so much um yeah I'm happy happy to be here hey Steve thank you so much for this session I mean I just love the kind of variety that you brought in not just in UI but also showed us a few other things like you know the accelerometer the Geo positioning and also thrown in through in that stuff with the nuget Explorer because I remember
maintaining a nuget pack package and I had to do it with all kinds of crazy stuff use an old app import it and then edit it to even figure out what was happening so it's good to see so much happening right so you know what it's been a while after WPF that I came in to do a desktop app but now if you ask me I'm not
sure if I'm you know I know now Maui is not the only one out there there is youo out there setting platforms on fire it's so nice to see so much Community activity going on there yeah lot of stuff yeah the more net in the world the better so we're happy that there's you know that we're we have lots of people playing with net and no matter
no matter which framework they're using as long as it's net you know yeah great thank you so much Steve let's stay in touch on LinkedIn and other platforms and have a nice time great thank you bye
More from this event
See all 73 talks →
Tomas Lekavicius: Building Tech Product Offer
42:08
Alisa Dammer: Science and Tech Backed Approach to Increase Productivity
44:53
Roy Wasse: The Definitive Answer to Measuring Developer Productivity
44:47
Pierluigi Meloni: You’re a Great Coder? That Alone Won’t Get You Far
44:47