Beautiful UI Controls for .NET MAUI with Telerik UI

[Music] foreign [Applause] welcome back to on.net I'm Becky Buckler and I'm here today with my buddy Sam from progress Sam you've got some exciting things to show us today right I'll try so uh thanks for having me here it's uh great to be on campus Becky and we are in the Microsoft studios here beautiful day but let's talk about cross-platform development let's talk about making developers a little bit more successful and productive they always want to be more successful and productive indeed let's hear let's dive in all right so if you have not noticed me and Becky are big fans off.net Maui it's been a while uh you know to get it all going but this is the evolution of next generation.net cross-platform development we're hitting all types of mobile devices iOS Android that's given coming from xamarin land and now we got desktop we got Windows Mac tizen so it's it's a really good place to be you know tooling has come along with thanks to Becky and everybody else who works in the darkness team now we've got real Studio on Windows Mac and now we've got vs code support as well very exciting a lot of good things for developers to be excited and be productive with net Maui however we'd like to help out a little bit more so I am Sam Basu I'm a Dev Advocate AT progress software and you may know us for some of the things we do to help developers be just a little bit more productive so I'm going to take you to tulare.com that's our home for all of the UI components that we build across.net JavaScript you know testing reporting rules engine CMS we do a lot of things but my heart and soul lies with mobile desktop components here so if I look at the mobile stuff we obviously have had xamarin for years and years and that's great but then.net Maui this journey began pretty much on Day Zero of.net Maui launching and you know we have been busy with you folks every week in and out and trying to build out as many UI components as we can to help our customers be more successful so developers get to ship their apps a little quicker you know it's you know polished performant UI that they can just drop in you know Windows or Mac we don't care and be able to you know easily bind to whatever data they want to bring in have the confidence that everything is Pixel Perfect across iOS Android Windows and Mac and that's not a you know light thing to say because these are very different platforms xamarin was one you know where we just had mobile but now we have the same you know data grids across desktop which is you know a very big you know form factor in canvas and then the same UI on iOS or Android as well so we have to be really careful about how we render things absolutely yep so we have been busy uh you know uh trying to build up as many things as developers might end up using so a lot of input controls a lot of data visualization a lot of you know interactivity layouts anything we can do so it all starts up here at uh you know at our Maui landing page and you know we have little things like extensions that will help you out templates that will help you out and you don't have to trust any thing that I say this is what you know developers should be doing you have to try it out yourself okay but just to be clear I do trust you oh that's good because you are my friend but you should all uh try it out see if a UI you know toolkit see if a tooling is good for what you're trying to do with your app so we have a couple of apps out in the App Store so you can you know go get those apps from iOS Android Windows or Mac try out the UI make sure it works for your app awesome that's super exciting yeah so let's take a look actually I'm going to show you uh some code here I'm in visual studio for Mac it works the same way on Visual Studio on Windows as well if you just you know installed the binaries uh this is what you kind of get we have had a long journey we are at uh you know 5.2.0 which runs on the latest Maui bits.net 7.8 bits are also you know coming so we have binaries we have examples and these examples are pretty much the same apps that you see that we power with the apps that are in the store so you can look through the code it's you know a full-on uh you know Enterprise ready in the store app so it's not fake hello world yeah right and it's a true code base where you can see how we are doing like mvvm design patterns how we are structuring things how we are doing data binding so it's as a developer it's also good for me to see how a real app is you know built so here I am in Visual Studio I have the solution open and this is a code base which has all of our UI just shoved into it because we just want to give you one app that has all of it so this has no nvvm you know framework that we are bringing in we're just utilizing what's built in Maui which is you know plenty we do have some extensions some behaviors and converters in there but this examples folder has all of our UI that is you know needed by developers Enterprise developers or Indie developers where you want that data grid to be Pixel Perfect you want to chart you want to graph you want a calendar all of the things that are really hard to you know use by are you know build by hand so this is a DOT and Maui app so I'm going to just run this on my Mac as a desktop application all right here we go yeah no it's all real here it's doing a build and I have it building for every platform so you know it takes a second but out comes a desktop application oh my goodness now this is busy and you know I'm sure this is something the dot and Maui team is also catering to there are two types of audiences one is we have developers who have always is done xamarin and mobile is what they want to do they're moving over from xamarin xamarin forms over to Dr Maui so that's mobile first and then we have customers who have always done desktop right maybe WPF maybe even forms and we have folks who are doing desktop first with Dr Mary and this is new uh you know we are having the same UI stretch across mobile and desktop so here's a desktop app and it looks busy because it's meant to be busy it's it's a desktop application so again all of our UI is right right here some of the you know really hard hitting ones are things like data grid everybody needs a data grid which is you know performant has all the features that you can think of uh you know when you're building desktop applications you need things you know like frozen columns or you know sorting filtering grouping all the things that you can think of on a data Grid it's you know it's built and done for you more hardering things like you know different types of input controls uh combo boxes check boxes data form I love this if you have you know a data object for where it's just just a form driven app you can just throw the data object at it it just renders all the UI configure things out nice and then we are known for our charts and graphs which is a lot because it gets complicated uh let me try to find any of the charts so we do have a chat component if you're building like you know chat gbg type Ai and then all of the charts and graphs is what people really love so a variety of you know bar charts and financial series charts lines charts scatter series you name it you know it's there for you to use and this is what Enterprises need because they need all types of you know data to be brought in now in addition we also have needs for you know working with documents it's not something you think about a lot especially on the mobile front but the moment you get to desktop you have you know your business workflows you need to be able to work with spreadsheets Word documents PDFs so we have a whole dotnet you know Library that just does document processing and all of that magic is built in so you can render PDFs you can open up you know spreadsheets you can open up Word documents and go to town it's all you know API driven so developers have Pixel Perfect control over exactly what's being rendered uh you know on each document so that's us Tree View time picker just a lot of UI components these ones are again some of them cater mode to desktop than mobile and then some of them cater more to mobile but it's all one big happy family that's it's amazing yeah so again we have you know Enterprises who are doing a lot of.net Maui development just straight up for desktop maybe they don't want mobile right now but maybe you know two years down the line they would like to turn on mobile apps and the good thing is it's all one code base so the same UI the same uh you know platform API access just works on mobile uh you know and desktop now let me show you one more app here and again all of these things are things that people can you know go to GitHub check out the source code or run things on their own so I'm going to show you one more solution here just to kind of pinpoint how uh you know this needs to be thought out just because Dot and Maui works on mobile and desktop does not mean the ux should be the same because you're talking you know mouse and keyboard versus touch right so very different uniform factors so let me run uh you know a little crypto app here uh this is all fake I'm not pulling any crypto data you may or may not want to invest a whole lot in crypto these days but this is another app all of the data is you know it's local it's fake but I want to showcase like how you have to think about this as a developer so here's a desktop application and it's going to look the same if you pull this up on Windows we know that you're running on desktop this is Dr Maui apis we know exactly which platform you're running on right and here we can pull up you know a list of uh you know cryptocurrencies and for each one that you you know tap into you get a detailed view so how is this you know Bitcoin doing over you know six months so one year uh you can do you know regular charts you can do like Financial Candlestick charts uh so a pretty you know usual busy desktop application however if I'm a developer and I want to make this app also run on mobile I probably don't want this I don't think so it's busy it's too busy however I also don't want to reinvent the wheel I want to be able to reuse as much of my UI as possible so all I have to do and this is the you know magic of dot net Maui we can just you know flip around uh where this app is running so let's go change this up I'm on a Mac here and again this works the same way if you're on Windows or you know or want to run this on Android let's switch to an iPhone 14 pro so you know classic mobile interface and let's you know fire up the same app I'm not diving into any of the code because this is all out there for people to you know uh look through on their own time let's see it is complaining about something all right we'll close this and maybe Matt will come back to this if it needs to be but let's let's try again let's uh try running this on an iPhone 14 pro and it's building uh and it should this is a cold start so iOS simulator comes out and I can do this on you know my devices as well uh you know deploy directly from Visual Studio onto my devices and that that you know workflow is really nice I can do hot reload yeah thanks to you and Maddie and everybody else so my you know workflows are really nice and tight my inner Dev Loops are nice let's see if this is working I'm imagining that big chart on my phone I'm like I would need to take out my reading glasses okay so it took a second but now it's up so the same app now you see that it's working on mobile and this you know list of uh cryptocurrencies this might look familiar because it is the same UI so we can just compose our UI in a way where we are reusing things across you know mobile and desktop here's a list which we saw on desktop was on the left and you could you know tap on one you could see the detailed view on the right here because you're on a smaller form factor I have to tap and then I go to a different page and then it'll go to the same exact UI right and you know not recreating anything as a developer I'm just reusing the views and just you know deciding are you on desktop are you on you know mobile and just adjusting the view accordingly so uh there's a lot of help here you know for developers to be inspired you know we are putting out apps in the App Store so you can look through real world app code base and you know try to be more productive here and again we are you know we are building on this as quickly as we can you know we are already at parity with everything that we we had with xamarin and xamarin forms and this is just the beginning you know Dr Maui has been a great journey and we'll just you know look forward to making developers more and more successful over the next few years absolutely I can really imagine those things taking away a lot of frustrations that people might have and you know really well done UI like performing polish GUI text engineering it takes effort and as the Dr Maori team will know so we are happy to help and augment the developer experience yeah yeah make people faster make people more efficient absolutely um well that was awesome thank you so much for joining us today if you're looking for more information just check out the links below and you can find the links to the GitHub yes absolutely more information Sam thank you so much for joining us that was awesome and uh yeah [Music] foreign

Channel: dotnet

Views: 4,399

Keywords: .NET

Id: DzD0ucPldeM

Length: 13min 17sec (797 seconds)

Published: Fri Aug 18 2023