Uno Platform 5.0: Elevate Your Cross-Platform .NET Development with .NET 8 | .NET Conf 2023

[Music] hello everyone my name is f I'm the CEO of the Uno platform and I'm joined today by Jerome our CTO hi everyone so today we're here to share some of the announcements we shipped uh last week our 5 version of the Uno platform uh it got updated obviously yesterday with the ga version of done and8 and as part of this 5 release we've shipped five highly requested features as part of 5 the first one and probably the most exciting one is our support for C Market right with the idea of you being able to use C for everything including all of your UI definition and basically live a zaml free life uh consequently we've also updated our figma plugin to be able to Output to C markup as well as opposed to just being able to Output to zaml uh for those of you that might not be familiar with our figma plug-in this is a design to code tool that integrates into figma allows you to see any design in real time as an Uno app and then allows you to export Pixel Perfect all of this design into a UI markup without the labor intensive uh process of doing a design hand up and manually code and try to Port all of an existing design into UI markup right so it's pretty powerful in terms of productivity gains uh We've also updated uh thanks to the new net constructs on hot reload our hot reload story we've updated our mvx that I'll share in a moment or MV story with new hre capabilities and finally we've shipped two new workshops that take you uh through the Journey of learning everything Uno has to offer from start to finish and really like concrete examples uh I figured like it' probably be a good idea before we dig like super deep intoo to take a step back and try to see and explain why we're here in the first place uh we uh created Uno with a vision that's part of the name like it's called Uno platform and that's because coming at it from an app builder perspective we do believe that when you're trying to build a like a productive in a productive manner a crossplatform app sitting on top of net you need a set of tools guidance and recipes to help you and support you through that process so there's UI Frameworks out there that are available we believe we can do a lot more and push the envelope of what's available uh to you and that's why we have a platform that we want it to be flexible productive rich and gives you everything you need to build beautiful apps and uh and no time at all so what do we mean by being flexible we believe that you should be able to create like your apps developing from any operating system that the dev experience should allow you to work from your favorite ID to Target all the platforms you want to Target where doet runs to use your favorite markup should it be like C markup now or zaml and that's why we created C markup to add flexibility to this process that you might be wanting to leverage some of the existing Estate Management patterns like the mvvm from the community toolkit or even in V that we're now shipping but in all cases that all of these options should be optim so it should be extensible it should be modular and you should be able to chair pick whatever you need in the context of that app specifically that you're building uh I was talking about cop markup uh Pedro Jesus has an entire Deep dive session at netcon on cop markup I strongly encourage you to go see it but in in a nutshell what we're doing here is we have a source generator based C fluent API uh offering that basically doesn't try to reinvent a wheel it Maps one to one with the underlying object model so it gives you first party support for cop markup it gives you if you have third party component uh from other vendors that you're bringing into your application you'll get C markup automatically if you have your own pages and user controls in your app you'll also get C markup so it's really like hopefully the leading experience into to how you could approach coding all of your uis with C markup and in a moment Jerome will see what it looks like in action I've also mentioned in terms of flexibility being able to use something else in mvvm so we've pushed out a a few months ago U mvu as a state management pattern right so not everybody's familiar with it if you were to look at it uh if mvvm had a baby with mvu they would probably have called it mvx so in a sense it's like getting what's good of view models right they're decoupled from the views they're highly testable but we hate having to implement in not five property change I commands having to deal with threading and dispat and all that so get here a fully declarative reactive fluent API that you can explicitly like specify your intents about your state when it gets updated and behind the scene will generate everything you need kind of like what commun tool kit is doing with mvvm to implement in fire property change and stuff but in a fully immutable uh kind of pattern and again that's something that uh drum will be able to show you an next an action in terms of like what flexibility it brings to the table on the productivity side probably the first thing you'll experience in terms of productivity boost with platform is if you're using our templates if you're looking at like the thousands of combinations that are available to create apps with different NET Framework targets with different uh heads that you want to Target with with or without State Management whether or not you want to use a design system if you want to use C ex markup it creates an Infinity of options so with our net template that is H either through CLI or that is also surfaced in our visual C uh extension through a wizard you get to just select everything you need and it outputs an application ready to use and ready to consume in terms of and you can focus just on your business logic basically uh finally like from a productivity standpoint We Believe like the one thing that keeps you productive while building an app is a h reload experience that simply works right so it's something where it should work in both visual studio and or vs code it should work regardless of the platforms you're targeting and debugging it should work if you're deploying to devices or emulators but most importantly it should work regardless of what you're updating so if you're updating zaml or C markup if you're updating business logic if you're uh upload updating those XB expressions or like global resources and colors and data templates all this should simply work and you should experience H action so with something you can trust and rely on drone why don't you like try to show all this uh together in action definitely so uh let's take a look at my screen now um what we're what we're going to be doing in in the next few minutes is talk about the simple C Workshop which is a workshop that we've been releasing as part of Uno 5 and I will show you what we can do uh what you can do with with Uno 5 C markup uh m v hot reload and all the done eight goodness that was uh recently released uh so let's dive into this but first let's take a look quickly at what the uh the wizard looks like so when you're in Visual Studio you can create a new project get to the Uno platform app template then when you click the create button you're going to be presented with a new Wizard that wizard will allow you to get all the combinations that that F just mentioned and I'm going to be walking through just uh you selecting all the options that I need for that that new uh the new workshop so we l dat uh we're going to be needing all the targets that are available so let's go for WF and frame buffer as well uh we're going to be using MV mvu this time but you can also use mvvm if you want to in your application uh you have the option to do zaml and C markup that's going to be that's what we're going to be using here uh for the theming you have a flued material let's go for material and we going to be using a theme service which is an a feature that we're providing as part of our toolkit to allow you to switch between themes so light and dark theme and follow up with the system no extensions for this specific uh specific sample and then we have we're going to be adding uh feature with the toolkit uh with additional um pieces like being able to use the safe area for uh for mobile device and things like that uh and then once you're done you can click the create button it will create you a new project with an empty content that you can start with and uh start developing your app so in rest of time I've uh set up my application already with uh with the uh the beginnings of the the workshop for the calculator the sample the uh simple calculator and what I'm going to do is start the application uh right now uh with uh uh actually I started a little bit too fast let me start with the debugger we're going to be starting the application and we're going to take a look at it on the side and we're going to be making modifications to the app uh with the zaml markup that you're seeing here so what we can see here is uh the sample a basic sample page uh that uh uh will basically show um a small small application here with just a hello world for in the middle and we can change the we can change the content immediately and it will just show up immediately so you can see I just press save and because we have automatic save on hot reload on Save the content is automatically available directly in the app um so in the example uh in the C markup you can see all the things that you had with the the one to one mapping so this is the exact same API that you can see in the zaml zaml API in in zaml AP when you API in zaml but this time written in in a fluent way so you can set your vertical alignment set your children uh set your text blocks and things like that so we're going to dive into a little bit more into the the different pieces and features that uh C marup Is providing so let me come in this part out and I'm going to be adding a skeleton layout uh and we're going to go through all of that so let me comment this and save you're going to see that I have some content that appears uh here so I have um my content with a default background a data cont that's that's default and it's some custom data dat context just for showing the demo and how it works out when you're developing your own app then you can see that the data context is typed so I can have um content that's provided directly to some of the header output and keypad that we're going to be adding later on um we can see that you can create your grids uh set Ro definitions with with the santax that you can find in the zaml in the same way you can also set uh you know themes and um resources directly from uh in a static way so you can discover the uh the names of the resources this way so let's go ahead and change this with the keypad for instance so I'm going to be commenting out that method and let's go to take a look at the keypad button so this method here is pretty much like a user control so you could yet when you when you're in Samo uh you have to create a separate user control separate page and then you have to add your content uh directly in in another page add Nam spaces and things like that in C markup you just create a new method and then you're going to be recalling that method multiple times if you need to make multiple buttons for a uh an application so let me uncomment the rest and then we can make additional modifications and I'm going to show you what I mean by this so if I save uh you'll see that the keypad appears here and it's life I'm I'm just and that haven't changed anything and if I want to say let's say make the the font size of the button a little bit bigger if I change this and save you can see that the buttons are way bigger now so they clipped because of the content but uh you get the idea um and uh now that method is being called uh by 12 other uh 12 other methods that are in the keypad uh for which we have defined the grid and spacing and column definition and things like that and then we call the keep button multiple times to get uh to what we've seen we're seeing here uh one important part about the buttons is that you have bindings with commands and command parameters so in here we have defined in our temporary data context um command that you combine to the two each individual button and then we're going to take a look at an updated um data an updated model and view model so that we get the the buttons working so let's finish the UI so I'm going to be finishing those two parts that we placeholder at the top and let's take a look at this so we have now um a button that will show that will change the the theme and we also have a zero because our data context is not set yet and if I click on the button nothing happens now the important part here is that we're going to go to a main model now I'm going to be en commenting the the the view model and you can see as FR mentioned there's nothing here there's no I notifi property change there's nothing just state that are provided by by MV and Uno reactive where you can set your state with the calculator and the calculator here is a fully immutable calculator so it's a record all everything's in it uh and when you input something in a key then you get a new calculator instance that's been modified and then rebound automatically to the UI that's pretty important because that means that your state is not modified but you don't have to deal with all that uh um you're going back and forth with the UI thread and things like that so that's that's where it's uh it's quite interesting and you can see also that uh there's the input command which is it just a simple method that's automatically converted to an I command directly in the UI and you don't have to do anything but the only thing you you actually have to do when you have a model like this is to bind it uh to the UI and to do this we go back to our main Constructor here we're going to change the tap data context that was there just to uh begin the application and convert this to a bindable model so basically by convention we just add bindable in front of the name of the model and when we're done the UI the UI reloads and then our application will react accordingly uh so that's pretty cool it's just you don't don't have anything to do our commands are bound automatically and and you can go even inside the input command there and you you press a breakpoint and that's the cool new things about all the all the new features are done in that for hot hot reload um you can get you know from start to finish without mostly starting the app uh and uh it's pretty awesome to see all of this working uh with what the rth engineer and donet engineer has been able to do and you can see here that I have my uh input key Nine that's showing up and finally uh our button at the top is not working so let's make that working and for that we can change the Constructor to make a Constructor that's a bit more complicated and you can see that uh we're bound we're binding the is dark State here which is directly associated to uh the totle button that's at the top and we're going to change the the model here so that it uh uses a an extension that's provided by the toolkit which is called a get theme Ser get uh theme service here and when I save both you're going to see that the UI is going to be refreshing itself and then when I click a few time then you're going to get your UI is going to be updated so without restarting the app without changing anything just pressing save every time I change making changes my app is uh getting updated quickly so that's the experience that we're we're offering to you as part of Uno platform starting from Uno 5 and with d8 it's even more awesome so uh that's it for for this demo uh now back to you f thanks R sometimes it almost feels like magical right even though we're in day and day out in my book it's the closest we can get to a flutter like experience that uses like cop markup mvx H reload Al together while remaining in do net ecosystem uh I I've mentioned flexible and productive so far in terms of qualities and pillars on top of which we're we're building I think rich is also super important right as a friendly reminder all Uno apps are native apps therefore you get all the richness coming from the underlying operating system and toolkit for example on mobile you would get access disbility you would get password Management in your text inputs by default you would get ime support out of the buck but you're also getting at the platform level hundreds and hundreds of UI and non-ui apis that are readily available but we're also as part of Uno also shipping some extensions for the more I'll say complex scenarios right stuff like authentication stuff like navigation and there's a session that Nick Randol is doing that's also going deep dive into extensions specifically because it deserves its own uh Workshop probably so I also there strongly encourage you to go sit in action here like controls just to give you a sense of the bread of all the controls that that are available as part of Uno same thing you can also leverage all of the community toolkit controls things like data grid expanders all controls that are in there as part of the wiui first party controls that can be surfaced and used uh by the uh Uno apps using the community toolkit there's also a great session on the community tool kit we at section on the Windows Community tool kit where Michael L uh shares like how they're able to Target Uno as part of their normal build process they're targeting both wp1 UI and Uno directly and also how they're using internally at Microsoft whoo for their own Labs send box in order to experiment with n controls we're also in the Uno side shipping our own toolkit for additional controls things like navigation bar tab bar like more advanced ux scenarios things like Shadows containers as well so you can get additional experiences and one of my favorites is everything non UI API right so in a crossplatform manner you still need to be able to deal with file storage with network information with all the sensors espe especially on devices so all these things are available across all platforms as non apis and finally and probably most importantly is the rich ecosystem of third party component vendors you get some of them either open source or or paid that are available across all platforms that Uno support primarily because they're skia based so and we have skia native support in Uno platform but some of them that are targeting Maui specifically can be lit up now with our most recent Maui embedding release that we've done recently finally on a beautiful side even though like apps are native we believe that those native apps should look and behave the same across all platforms it means that they should be Pixel Perfect and look exactly the same regardless in the device form factor or operating system that you're targeting and that's why we're also enabling that that pixel Perfection through some uh inbox Design Systems that we're shipping like fluent support like material M3 support and you're able to customize obviously and tailor those Design Systems to your specific needs with color pallet overrides with light WID styling and you're able to get that Pixel Perfect UI code by using what I mentioned in the beginning is our integration with figma where like in a couple of clicks you'll be able to get from complex designs uh delivered Maybe by your designer into like fully functional code right away so Jerome maybe you can show this in action as well yes definitely so uh so there there's there's quite a bit to cover here and uh I'm gonna be starting with the uh the Maui embedding and that's a that's a pretty cool feature that allows to embed your controls and if you're starting with your app using uh the window platform template wizard in the features you're going to find the new Maui embedding option that will you up with a new project so uh I've taken a a sample that we have in our Uno sample repository that demos some of our uh uh supported controls from syn Fusion for instance um this one you can find in in in the in that repo and start by yourself and what you can see here when you're creating an application that has that option for that Ma we checked in uh we have a a separate control that is basically a Maui app that's integrated into another Maui another Ula platform app and uh what that will do is that you can see that in that Uno platform app you're going to have Maui controls like virtual stack layout content View and others that are you different from the apis that are coming from wiui and what that means is that when I start this application we're going to get the ability to see uh content like this one uh so for instance you can see that there also I forgot about this uh there's the app builder extension so this is a Maui uh you know Maui controls you with adding funds in configuration Sy Fusion and things like that so that's pretty much the same thing that you can find in the standard app and um you can see that in the main page here uh we're going to find a Maui host which is the way for Uno applications to use Maui controls that are embedded into an application that runs on every Target that Maui supports so for instance I can use um the uh donut uh Center elevation which is a secular chart so if I search at the top you can see that it's coming from that specific uh that specific sample that comes from C chart here and uh um um let's let's actually take a look a bit at that application for instance that Center elevation control uh that is a um a navigation view from uh from Uno and wiui and this is the section where the Maui control is embedded so it runs on IOS and Android and there are you know cool controls like the neomorphism UI that shows uh things like the Android the those bar that are animated uh or radio charts or razor chart part so that's the kind of features that are quite interesting and there are many other controls that are supported as you could see um in the slide that Francis showed with uh other other vendors that are you know providing an amazing breath of controls uh so that that's pretty awesome and it's pretty easy to use you know just use the Maui host put your control there can be your own controls as well doesn't need to be something that comes from outside uh you got a SLE here from the Abed control but you can use your own control you know as a it could be a migration scenario or it can be an integration scenario for any kind of reason so that's that's pretty cool as a as a scenario um so that's the first part second part is I want to I want to guide you through um the the figma integration and that's that's pretty nice uh so this is a and I'm a developer so I'm not I'm not super used to everything that's design oriented but the idea here is that I can take a layout that's been defined in figma and by using a plugin that we're providing which is the Uno platform plug-in that I can load using uh the right click here um I'm I'm able to take the what's selected here preview it inside of the the plugin as an interactive view you can see I can click things around uh and and and view what that is and I can convert it to zaml or C that's that's a pretty cool thing and I can take that that zaml for instance uh export it then go into an app like this one uh for instance and if I start this application here on the side you can see it's building I'm going to be able to modify that application and take the content that's coming from figma and just paste it in and we're going to be able to see uh the the application running directly so um to see that it's actually something that works directly I can say you know I can uh you know wait a little bit for the for the hot reload to start up and once uh once hot reload is started when I save the file I'm going to get get an updated version here and now if I can replace all of this by what's coming from figma I'm going to get a newer version of the app containing everything that was coming from the figma plugin and the cool thing is that I can even modify the UI here directly so using hot reload and I haven't restarted the app and this is WebMD app by the way um I can change for instance the dark color uh and that's the color of a right palette that's coming from um uh material and I can change this for instance I don't like that color for inance let's put red it's it's nice red so I save and then I got the new UI updated so that that's pretty nice and you can change all of this very quickly in your app and get uh you know get a lot faster with hot reload and uh from what your designers have created down to an application that actually running uh with a lot of other features that are coming from the the Fig my 2 the figma plugin um so I hope you enjoyed that one uh it's a pretty interesting pretty interesting demo and uh that's it back to F thanks Jerome that's probably why you don't see us streaming replicating UI with the platform right it would take only it make for a short stream like 5c stream with three button there you go so speaking of which like we've open sourced who know right over five years ago and the primary reason we did it in first place was to create a rich ecosystem around us right and we've been blessed with having over 300 contributors so far contribute to the platform uh we've had like 23 MVPs which probably amongst the the largest number of MVPs on any open source project and like it's a testament We Believe to to the importance of the problem we're trying to solve we've seen increases in all of our downloads like we've reached over 60 million downloads of all of our packages combined together we're seeing up takes and our extensions downloads for visual studio and vs code plus our figma plugin as well so it's been an amazing adventure and like coming at it from an app builder standpoint building apps day in day out and fooding uh what we're pushing out I think it gives us the confidence that we're really uh delivering on the idea of being the most like productive solution to build crossplatform apps on top of net right so I strongly encourage you to go to platform. Uno website give it a try take our workshops for spin provide feedback we have an amazing Community online across all of our Channels with GitHub Twitter and Discord so please come say hi and provide all the feedback you can it hey there friend hey Jeff hey je I love seeing all the updates for for the Ono platform and and and seeing the the growth of of third-party Frameworks that aren't built by Microsoft tools and things that are so rich so engaging and folks can be successful with it's really great to see see how your group has progressed and all the great features folks are really going on about how much that hot reload is just impressive really really nice um I want to make sure we come back to a couple questions that folks have asked here one or two folks have said where's the decision point between choosing Maui versus zuno that's a great question like most people coming to AO platform uh like the idea of being able to Target additional platforms so like being able from their single code base to do both native on mobile desktop but also on web and Linux so that's one of the primary reasons and and especially if they have a a native like Rich desktop environment background as opposed to like a web background for example right so that's one of the main reasons yeah makes sense well thank you so much fellas it was great having you here I hope you have a fantastic rest of your netc and of course this session's recorded folks will be able to catch it later so thank you so much thank you Jee always

Channel: dotnet

Views: 5,790

Keywords: .NET

Id: EgftgnNz-lA

Length: 28min 28sec (1708 seconds)

Published: Sat Nov 18 2023