Welcoming JavaScript to .NET MAUI | DevReach 2023

all right folks how are you good long day are you awake there's plenty I cannot count how much coffee I've had but last stretch and uh we are running like a few minutes late uh I know at 510 we have a big net uh session I don't know how many of you want to go hear that so I'll try to wrap up as quickly as I can here maybe like 505 um so let's talk a little bit of JavaScript and mixing and matching different things together um how many of you have heard about this thing called net mous some of you okay so we have had a few sessions on the net side of the family today uh there are exciting Tech like net Maui like uh Blazer a lot of net things but we live in a world where things can be nicely you know mixed and matched uh so let's see what the possibilities are okay is this working yes all right so I'm Sam um I work as a Dev Advocate U here at progress software and uh we help support uh developers to be more successful building UI components and Styles um you know across JavaScript and net trying to get you to be a little bit more productive okay so uh that's me and you can you know uh find me online at most of the places um and that that's my social handle okay I did bring slides but they're not important let's just fly through this and you know feel free to stop me ask me questions I will try to show you as much of code as I can uh in 20 minutes which is really short amount of time but I'll try uh hopefully you see the Promise modern. net is a nice place to be I know the JavaScript universe and the ecosystem are pretty nice too but tools are nice uh either side of the you know table uh ecosystems are nice you can reach you know a lot of different platforms so uh modern. net is actually a really nice and friendly place to come in um let's talk about you know mobile a little bit um and we'll talk about desktop a little bit as well because you don't build native mobile apps or native desktop apps if you're coming from the web world but we are trying to be welcoming we are trying to say come and join our pain of native development and you'll see what it is like desktop deployment uh going to the stores with your mobile apps it's complicated um so you have a lot of choice you know pick something that works for you based on whatever else that you're building hopefully you can share the most code uh you can do you know web stuff very comfortably mobile web pwa you can actually make very good citizens on mobile or desktop uh you know with JavaScript or any other web Technologies if you want to go native you can is just expensive you know iOS Android windows they're very different uh platforms so you'll have to have three different teams with three different code bases so hopefully you're trying to go crossplatform with crossplatform you've had a lot of choice you know you could do U you know native uh apps with JavaScript that are crossplatform and on the net side if you are compiling things down you have quite a few options I'm going to talk about the most hip and cool option nowadays with Maui and maybe a little bit of flutter so everything should be you know coming over nicely to native land uh if we can if you have not known since you folks maybe do not how many of you do net okay so oh most of the room so you do know a little bit I know enough just enough JavaScript to be dangerous but if you have not heard this is what we're talking about this is how we started with uh net crossplatform we started with uh you know writing a little bit of C that is shared between platforms and we wrote iOS Android separately then we started doing zamar in forms which was an abstraction so I don't need to learn Lear much about Android or iOS I can just write C or I can just write zaml and then that gets rendered out as native UI across different platform so this was a good story but it ran its course for like seven eight years and now it's time to evolve to the next thing which is already here it's called umnet Maui uh we have said this a few times Maui stands for multiplatform app UI the p is silent because empa does not sound very good so it's Maui it's the island um in Hawaii so what is cool about this is truly a shared codebase we want to be lazy we want to be reusing as many things as we can so Maui now lets you reach mobile and desktop so iOS Android are kind of given now we are adding on Windows and Mac and taan and you know your devices and you know arvr maybe eventually so this is the net crossplatform strategy going forward uh what is nice is it tries to reuse as much code as possible so your Splash screens your fonts your CSS all of it can be shared um between platforms you know architecture it's nicely thought out and it's a nice new ecosystem to come into so it's it's still early days but it's it's got a lot of promise to it um desktop for the older people like me who have to support desktop apps it's important it's your driving your Enterprise workflows a lot so you need some flexibility you need to know um you know how to build uh desktop apps right and again based on how old you are um this will be very scary or very liberating CU you have you have a lot of choice Windows has evolved uh over last 25 years so you can go all in with Native windows or you can try you know crossplatform strategies like the you know few at the bottom here so you have a lot of choice on how to build Windows desktop apps similar story on Mac and Linux as well again a lot of native stuff if you want or lot of crossplatform stuff so just lot of options here and if anybody wants I mean I can make the slides available later on um let's just look at more of the promise if we can uh so web is where most likely many of you are if you're building with net or JavaScript you have again a lot of choice as to how you build a modern web app if you are an asp.net or AET developer you have likely been on asp.net which is you know again 15 20 years of evolution uh modern asp.net is very open source it's very modular very friendly it's performant but it's mostly you know server side and then came you know other you know modern ways of building um you know web apps which is you know all of your JavaScript Spa uh Frameworks all of that and CSS less nobody uses less anymore but SAS um but you can build modern apps however you want blazer is a net thing that came along maybe three four years back and it's really nice because now you can do Blazer that is both server side and client side or a mix of the two so it can be you know put on as a it's a web app that you're writing but C front and back you know client side as well as server side and you can wrap up Blazer and put it on mobile apps put it on desktop apps as well so you get to share a lot of code so uh it's essentially called Blazer hybrid U but again it's a bit of a misnomer it's not just Blazer that we are welcoming to desktop or mobile you can also bring in JavaScript which is why I made the crossover because you can do JavaScript on desktop and mobile very comfortably now okay um hopefully you are trying to move things forward so if you have any investments in JavaScript angular react vew jQuery uh all of that is powering your web apps and that's fine but if your clients keep on asking about Native apps now you have some opportunities to bring them nicely again this is nothing new things like electron have existed for desktop but it doesn't work on mobile PW are an option but again there are some limitations to you know how Native your apps get to be if you want to you know pull up a camera or a geol location it gets a little tricky so uh hopefully newer things like Maui can enable you to have a fully native app but yet you are utilizing a lot of the web things okay um we try to help a little bit uh I'm obviously biased because I work with our wonderful Engineers um we make UI UI components for net and JavaScript so anything net you can think of winforms WPF all things asp.net all of Blazer we have made you know UI components for years think about really heavy-hitting data grids charts visualization uh you know navigation controls layouts we we do it all that's for net and then we do similar things for U Javas script as well so angular react view jQuery we can help you make very modern web apps that you can light up with some amazing UI so that's us and let's look at some code but any questions before we jump in any questions you're all awake yeah okay all right let's look at how to uh mix and match the best we can okay I am going to start off here um with the ID doesn't really matter here but I'm going to start off with uh a quick little app here that is net Maui with Blazer and then we'll look at the JavaScript side of the story really quick um now take a look at this uh this is too small for you to read let me know if I can bump up the fonts anymore okay so when you start up a net Maui app you know file new project or command line like net new this is essentially what you get so it's one single project but this one is trying to mix and match mobile uh desktop with some web stuff right so your app starts up just as any other net app will and now it's become a little too big um but now we are bringing in this thing called the web View and if I look at my UI markup uh this is a little bit of zaml because that's how we build desktop and mobile apps but you don't have to use it if you don't like it essentially what you need is this one UI component which is smart it's called the Blazer web View and that lets you render all types of JavaScript CSS and HTML so that's all we are doing but beyond that you're going to see some web things in here like dub duub dub root that's a very web thing I have some CSS or any static assets you can throw it in here and then here are my pages which are essentially UI views for Blazer the they all belong to the web but now we are just dropping them into a you know a native project so uh let's go ahead and run this first on uh on a Mac and then we'll look at it maybe on an Android device um and you know try to see where your comfort might be so here if you have done any Blazer this looks familiar Amar this is just the Blazer hello world thing just running on desktop instead of web uh and everything just works because the entire UI here is not native. net it is a web view so we are letting Blazer do it the routing the navigation uh and anything else that you have so for example we have we do something called a theme Builder so this lets you open up your you know web UI and customize it starting from a you know a design system you want to customize it and at the end of it you get SAS or css bring it to over it's just you're rendering HTML so you can you know bring in whatever CSS you want um so you can do all of that so now once you have that up I'm going to open up Safari here just to prove a point uh let's look at this here you see this uh uh Safari develop mode it is actually finding uh my blazer app here because that's a big web view this is essentially def Tools in Chrome or in Safari wherever you want to use but it's just not running in a actual browser it's using a browser component but you can still mess with HTML CSS JavaScript all day long uh so it's the same uh you know developer tools now again just to uh see how this uh essentially what this means uh I'm am going to go in here this is again now I'm taking you deep into native territory but I can do iOS I can do Android there is my Android uh device manager not sure why it's running uh so I'm going to go do a quick reset because it's pretty quick factory reset how quick is that so let's do a start it up so now this is Android uh you can have IOS simulators and Android simulators uh let's close this and let's see if it's coming up it's a cold start so it's going to take a minute come on I got nine maybe 12 more minutes okay so it's kind of up so let's see if this will work cuz sometimes it complains with deployments uh let's do this in debug mode deployment device emulator found it's thinking you don't see it down here in the corner it's trying to uh launch it hold on where's my app there is my app it failed but it did kind of pull up so same exact app that we just saw on desktop now it's on mobile iOS is the same thing uh so here's my app and now it's a little bit adaptive because it realizes I have a smaller you know surface area so now uh between like mac and O that went away uh so now let's go back here to chromium and uh we can do things like Chrome uh what is the thing uh devices uh yeah inspect devices there you go so now since I'm on Android it gives me the chromium uh thing essentially so I can pull up inspect here up comes the same app I can you know navigate right in here and then the emulator actually follows along so again U this is too small for you to read but uh you get the idea like this is the same HTML CSS so it's essentially a web app with JavaScript with CSS just running inside a Native shell so uh you can you know have some flexibility okay make sense all right I'm going to switch gears here to show you a little bit more because it's not all of you do Blazer uh you do JavaScript so uh let's uh do this I'm going to drop into command line here I am going to pull up uh my projects here I'm going to do uh this one here first angular that gives it away right maybe you're doing some angular for web apps so I'm going to pull up vs code here so you get an app which is essentially an angular app notice there's now a solution Explorer so vs code is kind of growing up to be almost like an ID so let's go ahead and run this I think this is a Net 7 app so let's see if it remembers any past commands yeah there it is so I can do a net build uh but I don't want Mac Mac Catalyst I want iOS so let's do a iOS build now cuz I don't care about the other once I just want it to be on iOS and it's going to go talk to xcode come back it's a native app but it's just the UI is all web so uh grabs the default simulator this one here being an iPad Pro it's another cold start uh how many of you do angular in the room anybody oh oh okay so this will look immediately familiar this is angular CLI right so and angular app running inside of a mobile simulator or a device same experience on desktop as well uh so everything is exactly the way you want however let me show you two more things here so uh this is too big so if I uh tap into this uh check number you get a window that is kind of looking like a native window but it's actually a web window so it's a even odd check so I can just hit say four and it says hey it's even number so I can do messaging I can do window now let's take a look at this here you can't read this very well it says get device info now remember this is an angular app so it's written with typescript so I can tap on that and now it's saying hey you are running this on an iPad Pro whatever 16 in and your orientation happens to be portrait those are very native things right that's very native to net maiet Maui knows all about the devices and the platforms but we are calling into net from typescript because we can uh it's the same uh you know runtime now so let's see how we do that really quick so if I look at uh my source code here in my uh let's actually do this so in exactly the same way we did Blazer now we have a dubdub duub root but I'm not using the Blazer index HTML I'm using this index HTML which is essentially my angular app so I did an NG build and I got my polyfills I got my run times or whatever CSS that I want to bring over and I'm just adding on the Blazer web view which it needs anyways and I've dropped my angular assets right in here inside of my Maui app and that's it it starts working and then from my typescript code I'm not going to show you the typescript part but just like really quickly uh the net side of it is super simple here's my net code okay so notice how that uh check number uh this this is these are the two methods we fired off they're both decorated by an attribute called JS invocable this makes um net methods you know available to JavaScript runtime right so there's an inup and that inup is built in you don't have to do anything uh that's right there Microsoft JS interupt that's right there and then my JavaScript is now calling into net this is the get device info that's how I know the device name that's how I know the device orientation these are Maui apis and you can call them from JavaScript so which is pretty nice U now it's unfair if I just talk about angular and not the other one so let's do that really quick I'm not going to pull up the source code uh if I can type uh let's do a clear and where am I uh let's do um uh M react you know where I'm going with this right so let's find the net command uh iOS again anybody do react in the room yeah npx create react tab just shoved inside uh a net Maui shell because it's the same exact you know Tech that we're using all we are borrowing is the web view a web browser that iOS has one Android has one Windows has one you know Mac has one so that modern web view is really nice for me to be able to empower this any questions so far no questions you're all awake right okay all right uh so let's do one more thing I have uh maybe eight minutes left one question that we get a lot is um what we are doing here with you know Maui and Blazer together is this is essentially a native app right so I am dropping my angular my react or my blazer UI components right inside my um net Maui app right and this is fine to do this these are razor components this is fine to do but what happens to your web app because this is meant for inviting web developers you're not going to give up on the web right you still need to support your web browser app so what's the trick how can you still do web while you're doing native mobile and desktop so there are ways to do that uh let's go back in here I'm going to pull up u a different solution uh let's see which one is that uh this one here maybe oh and there's one more thing I want to show you because how Native can you really get with angular Blazer and and so on so here's a project uh it's a solution it's a visual studio solution that has multiple projects in it I have some native Blazer things that are meant for web UI so like these last three are web UI and then I have a net native project so it's the same exact Blazer but I want the same view to power my web app app and my native app so if I switch to um changing up my startup solution and I go ahead and fire this up um start now this is a web app right so it builds it as a web app uh for some reason didn't launch my browser so I'm going to go do that manually so let's do uh Local Host 5000 that's where it was this is Blazer hello world it it's working right here's my counter component that works too uh now you'll notice that this was running on my browser but it it recognizes that I'm on running on my browser even though we will run a browser when we are on desktop or mobile this is literally the browser and it picks up window dimensions that can come from JavaScript or it can come from net uh so I I'll show you that so let's switch over now uh same app I'm going to make the native one my startup project and just to prove a point what I'm doing here is I have brought out the shared Blazer UI and I've put it in a shared project this is just a class library and and these are my pages this is what's powering the UI on both sides and there are also some other shared things like dub duub du root and here's my CSS this is the standard Blazer CSS uh and what I can do that's the button so I can come in here and I can change the button color to Green gray no green was going to stand out more so yep if I can type and we're going to comment out this line that's it so I can make a change in my UI web component in one place and see it on on both sides so let's run this app now on um on a Mac cuz it's a Maui app it runs the same way on web versus uh desktop so here's my uh Maui app now now it says hey I'm running on Mac Catalyst which is Apple's Bridge of bringing iOS to the desktop that's my window dimensions but look at my counter now I have a green button right so change your code in one place keep all of your UI CSS and JavaScript in one place and drive both web UI and neur Native UI okay so that's the promise um and all of this is you know open sourced on my GitHub repos if you wanted to see the code I do want to show you one more thing here we are at 5:00 p.m. one last thing okay I promise uh let's do uh this one here one question that might uh you know come to mind is you're bringing web stuff to Native mobile and desktop how Native is that app is it just the UI that we are doing or can we actually do Native things with with that UI so let's run this this is a blazer with Mai project iPad Pro is fine we're going to run this thing really quickly it's going to do a build and launch my simulator back up again sorry to go a little fast this is really short amount of time 30 minutes I'm trying to show you as many things apologies if it's confusing again I'm just trying to show you the promise okay you get Blazer UI now running on iPad ad or you know Android but I have a button now that says show native things so those are Maui apis that we invoking that tells me here's my app name it's running on portrait on this resolution this is the device name it happens to be on Wi-Fi could be 3G 4G 5G whatever is the network so those are very native things uh now let's go into the uh counter component here uh this one here I can um you know write to storage that's a date time stamp like 50:1 p.m. go back in here come back and read from storage so like file system access I can do that all day long CU I have Maui apis I can um bring up my camera now remember this is a web UI um you know razor component but I can tap into and you know bring up my camera or uh any you know media libraries from my device and I can you know choose one and I can render this on a web UI uh and then the last thing is uh this is for anybody who does Blazer this fetch data essentially is a Weather Service which is fake but now I I'm on an iPad I don't need to fake it so this looks familiar right this is the iOS permissions thing so it's asking hey this web UI component is trying to read your GE location are you okay with this yes or no please do not say that you're going to stalk the user um but if I do allow it once I get What's called the lat long of the device like where exactly is the device you know geolocation wise um you know on Earth so makes sense some very very native things that we are pulling off purely with blazer uh which is really nice so if I look at show you the code here it is super simple here as well I don't even need any of these you know apis it's all built in so right here from my blazer UI I can just tap in I can look into app info which gives us a lot of the app information device display information I can look into my connectivity stack to see how my app is connected and then take a look at this one here the counter uh component when I clicked on that button to show you the image that's a image HTML tag and we are styling it with some CSS all with just a few lines of code here uh I can do a pick media picker photo uh give me a picture from your media library I bring it back get the full full you know image file path and just show it to a URL and we can also style it like there is a counter razor. CSS so very web things is I'm just centering the you know image here so very web things are welcome and then the fetch here uh I'm reading geolocation again one line of code because this isnet it just already knows how to invoke um you know the get last known location so all of the things that net Maui can do on a native app mobile or desktop so can blazer so can angular so can react right so that's the portability that is um you know really nice um o I'm really out of time here but let's see uh is there one more thing I wanted to show you oh this one here yeah one last thing I promise I'm like you know Steve Jobs like one last thing one last thing okay this is uh just to kind of uh show you a different version of this uh let's fire this up uh this is a Maui app but it's using a smarter web view this is using a hybrid web view just to show you how what's possible this UI is actually a react app right it's a to-do react application so I can you know uh I can just say this is my plan for the evening I'm just going to drink uh and I can keep adding I can delete this is a to-do app right so react front end but the code the you know business or you know logic that's all net uh so you can do stuff like this if you look at the project here uh this is my to-do data store this is all C this is all net but the front end is all um you know uh react uh that's because we are still bringing in that hybrid web view it's a slightly different smarter web view now and uh we're just letting the react app render within my web view okay I am now completely out of time but let's go back here to where we stopped and hopefully you see that there is a lot of uh help a lot of promise for you to mix and match and do do the right thing for you uh make your own stack mix and match things bring in JavaScript bring in net server side or client side make Native apps and with full platform API access so you are essentially maximizing how much code you're sharing uh between platforms so hopefully you see that you know the world is your oyster go make the next amazing app make a lot of money be happy uh and just you know let's have a code base that we're all you know happy to support so thank you so much for spending the last half an hour of your day with me you're all awesome thank you

Channel: Progress Telerik

Views: 147

Keywords: Telerik, devreach, devreach 2023, dotnet, dotnet maui, javascript interop, javascript and dotnet

Id: dxzVBHvEwxw

Length: 26min 30sec (1590 seconds)

Published: Wed Nov 22 2023