Running NET code from Javascript!

foreign improves the interoperability between JavaScript and net client-side applications are running on webassembly directly in the browser this is great to split logic like maybe leave the Dom manipulation logic in JavaScript and all the other logic calculations and processing power into the accompile.net code that's running on webassembly great for performance related features or even security because of course you call the code will be hidden and you can manage you can have all the security features that are available on.net so great let's get started let's see how we can take advantage of this first things first to get started you need to have the.net7 SDK the latest version available in this case I will be using the release candidate one but you should be able to use any of the newer ones that are coming on its on the way you should be using the latest one because it will we have box solved and improvements and even if maybe by the moment you see this video there we're already on.net9 but use the latest version available other thing is that we need to install a couple of tools or extensions to.net to the work to the workload so we can work with webassembly applications on our environment to do that we need to run this couple of commands the dot net workload installed wasm tools which are the webassembly tools for developmentin.net hey I already have them installed so I'm not going to run this well let's do it I think it will not happen nothing will happen as you'll see I already have them installed and also you need webassembly experimental once you have those two you should be able to do the new project that we have to create which is a webassembly browser project this case to do our web assembly uh webassembly browser project you can do the.net new command that it's for everything.net new um oil assembly browser that should be it and as you can see now the code got generated now we have our scaffolding our sample code for our webassembly.net application and we interoperability with on JavaScript so okay first we pre-load a couple of models these are JavaScript models even if it doesn't have the MJS because of course if it's on a JavaScript model you should have an MJS but anyway it's a model because we're in the type here explicitly so yeah and we pre-load those two models we have the main DS which is something which is something that we manage we manage all the logic of that one and we're going to see it later and we have the.net Js Library which is basically the layer of communication on JavaScript to access the webassembly code or or compiled code or dlls and everything will be will pass through it through this layer from JavaScript okay then we have our body we have a little spawn here that it may it's being used on the example and our the JavaScript model that it's implemented by us and we will have all our code and all that stuff let's check the program CS first and then we go to main.js here we have our parameters of Cs as you can see it it doesn't have a lot a lot of things like it it just Imports the system system runtime interrupt Services JavaScript uh why like it doesn't need a lot of code like it's not the the an MBC application or a web API application that has a lot of specific things on on the program side CS it has the code this is basically on the main method of the of the program CS the code that we can also run from JavaScript and I will show you how we can literally run the the program CS main method from the from JavaScript it's completely possible so we have the a console right line there and we have a little class we have a a partial class it needs to be partial call my class and I can export the method greetings uh run my.net code and okay this will be exported to be used on JavaScript I will show you how later and we can also import methods that are that are on JavaScript and use them on.net maybe if you have features that are specifically to the browser that you can only use on the browser for some reason like um many of the windows Navigator methods or maybe Windows client window client Hive that kind of of properties and stuff that are available in JavaScript you can access them using this kind of stuff in this case it's saying okay Windows location href but this is not the real Windows location at href that that you're used to I think it's recreating that object inside we will see it we will see it it comes from the main.js from the model manages let's see how we can we will do that something like that in the examples okay so we have our class we have a couple of methods one exported and one imported now let's see what's happening on the main.js first we import the model that we have that we have preloaded here on the on the index HTML we pre-load this and we import it because this is a model we can do Imports in JavaScript so yeah we import our our.net model and now we have a couple of things available we have we made a little constant here to check if if this is running on the browser because of course the main JS could be running on the on node.ds or Dano or anything so to prevent that it's running on on those environments with dotnet adds this valuation but if you really know that your application it's running on on on your way on a web environment and on a hosting or something hosting or something maybe yeah maybe you'll need this in any way I think it's completely unnecessary but let's leave it there okay we import a couple of things and from the.net library we we have the set model Imports that we will use to set the what's going to be imported on the dotnet side methods that we want to expose to about net size from JavaScript get assembly exports which is basically the way that we get the the exports from that from the.net side the methods that we want from the.net site to run on the JavaScript side configuration uh basically it has the basic basic information of the of the assembly that we're running and we have the Run Main and exit what did what this does is that it runs the main method that's available on your program CS so anything that you have that you want to run at the startup of the application it will run that and finish even though if the application keeps running because of course if we can we're calling instances of static objects that are already available on webassembly and we can call them directly but if you want to run directly your your program CS main method you can use this method which is being imported from the.net model here everything is important power we have a couple of flags that we can add to make our.net application in webassembly uh the Diagnostics uh application arguments from query we can like sending on the on the query parameters the the application arguments thesis well a lot of stuff and at the end create the application this is similar of the way that that the program uh the application Builder works or used to work but yeah let's go to what we really want to know about set model Imports so as you can see here I have an allele object that has the window location href where we have seen this we have seen this on the program CS here on the my class implementation here here I have the object route and where am I taking that from in the in which model I'm exporting that so yeah if we look here I hope I I cannot look the recommendation but anyway I say the access to what I'm going to import and the model that contains it so in this case it's on the model main.js and I I Define an object that has the methods I want to execute uh I think the this is just going to window location href for convention like because of course we don't want to like set up send window here because it will have everything so to make logic that it's taking it from window uh yeah we just do this we have to use Global this this is I think this is because this is a model so the mole doesn't have direct access to the window I think so you have to use Global this yeah probably but okay anyway we can set any route even even though I think we can leave it at as href here will be exactly the same thing and just change this to import the href from that let's leave it let's see if it if it fails I'm not the one that exports a lot of stuff to.net I'm I'm more interested in the way of running.net code from JavaScript so okay let's analyze how this works let's leave this this way so we can see it later and maybe send another thing well we will we will do something with it okay now if we get the config in this case we use the config to get the assembly name and that contains our classes so okay I take all my exports so this will have the structure of all the export that you have done on your application you can have multiple partial classes that have that have KS exports and everything will be available there when you call the method get assembly exports everything will be there in a structure so now we put that into into a little object a constant here called exports and now we can access exports the name of the class and the method that was exported from.net so now by calling this we're running the webassembly code that we have compiled from.net so all these code that we have here on the program CS with all our dotnet logic will be running directly from JavaScript we can assign it to balance we can do anything and just color or net methods so even it's returned this method if we go here it returns a string and that's the thing we have I think oh we can only work with Native types there's there are the worst ways to serialize in the serialized types and everything but yeah in this case we can send receive the native types parameters and stuff and we can send anything back from the Native types or jsons and stuff I would I would work with I will interoperability based on Json communication but there are marshallizations of stuff that make can make your types compilable with JavaScript stuff you can check it out so it's it's kind of complex but it's possible so yeah now we can call this method from JavaScript as you can see I'm calling it here and and the the value was returned from the method I'm saving it into a text variable saying the console log and yeah showing it up on the on the inner HTML of the span that we have on our index HTML here I have my index HTML and I I'm saying up that and I put the text inside uh well what it's happening here is that it's running the the main method of the main assembly so okay the JS interrupt assembly because it's where I created my application so yeah I'm running the main method of that and sending the parameters as you might know the main method of the program always receives a string of arguments and a string array of arguments so yeah we send that and we can work it out that night it's great yay so yeah uh once we have this it should be enough to like run Our obligation let me check okay I changed this to the href and I change this okay let's run it and see how it works and see what what we have about us output and make some changes to on our calendar or something and interchange the logics normally you should be able to do the.net run command which is really common but because of a bug that we're having right now on the rc1 which will be fixed on rc2 we're going to completely confirm that it's fixed on rc2 uh yeah we cannot run.net run because of this block but there is a way to run our application first we build it.net build and then once it's built we can use a.net Serve but first we have to update our.net.net serve two it's a really easy thing to to do that we use the.net tool as as we were installing the AF core tools update.net serve and let's say that globally so we can have it have it everywhere Global and it will update.net service was was reinstalled with the latest latest stable version once we have that now we should be able to run our application so I let me copy this command i.net serve I sell the directory where I where it's my build so as you saw before I run a.net build which puts my my compiled data on my app bundle a route here being the book.net browser app bundle and if I go here and serve now my application should be running as you can see my application is listening on the on the port 51393 if I go here um I should be able to each rep must be a function but it was undefined okay wait because I got an issue here and I and it's because of the weird change that I just did so let's see maybe I I I damaged the object in some other way but I thought it was okay like okay this is the the main then the thing okay you know I don't care I really don't I'm just going to leave it the way it was but let's we will try to add our on our method but let's let's use it test it test this out the way it came and check it out so now we should have hello world greetings from the route because it was getting the href uh property from the method that's defined there and yeah it's displaying that if we go to the console we will be able to see that we have Hello World greetings which is this console right line here that we have another hello hello world greetings which is this console log that it's console logging that what's receiving from the from from the webassembly code and we have the latest thing is that it's running the main method because of of here run Main and exit run the main method which includes the this console rightline hello browser so as you can see we have the one that comes from webassembly dotnet JS which is running our webassembly implementation the one that comes from the main.js which is a console log and we have the console right line that is on on our main method now that that's clear let's try to make some uh cool things some cool stuff let's manage to understand how this works by changing a couple of things so okay let's add a button and yeah about them a little uh there a little other dip here and I'm going to add this pan with class counter and now let's let's see let's add time I don't know a time and yeah let's just add a button called update yeah do you do you know we all need the update button we can just set an interval and update our time uh thing so okay let's do some.net logic just in the daytime a classic update that we haven't done it so by us doing that we can do a couple of things we can receive parameters let's just add another thing here to my HTML like a little input and on our on our dip input type number um IV add days and date add days and a label on top of it or add days or how many days you want to add and a little bun on our div here with bun add face so yeah now we have our date span or an input and yeah another thing here about them that we're that we will click so let's define our logic in JavaScript and then Define our our code on.net so I'm going to do it down down here I'm going to just order this you know in a way they like it better I think yes this no let's save it there I'm not going to run the main method I don't need that and I'm going to remove also that console right line from here on it and I'm going to okay have my logic so I have here a little bun that I'm going to use as a reference document gray selector relevant listener click or dumb Logic the Dom communication logic so my my um when when this is clicked I just get the value from here I don't need any of this and yeah now I have days to add ah let's change it to I think that's better that's these two added to her name so yeah I take the value from days to add I'm going to parse it as an integer I think it's not necessary for but let's do it that's where I'm too Percy as an integer at least it's a numbered a number input so at the end I I'm making sure that it's a number so I when they click here I take the value from here and I'm going to send it to the to my export method I'm going to call my class date con date controller and add base days to add and I'm going to get the new date as a string let's just date and uh my my spawn I don't remember the name which is oh yeah the class let's say I current date current date a inner HTML date yeah that should do it and okay now we have to create our logic in.net to add days we know how to write how to add days with a lay time right it's really quick and we're sending this this parameter here and yeah I just wanted to confirm that and maybe hmm we will do something with this later I'm going to remove this right now because I don't need it I'm going to change this to date a controller it can be another file it's not it's an issue if you want to have an R file and okay and now I'm going to have a little method that I remember if I remember I think you call it out days it will return a string and it will receive an integer of days then I create a bar date mu and also the new day time now at these days and I return date to string year month day so yeah I think that's enough to run this have my exports I have this I'll need this for now let's comment it out I'll need it and yeah I think that that does it so okay now we have this it's okay to run our project let's just kill this build again so I have an issue doesn't contain a main method that's suitable oh maybe I need to have something let's just add a console a right line say application started I I thought that the main method would be empty if I don't have something but yeah minimal hosting minimizing out there the new way to have our the problems yes or or the classes now you don't need brackets this the dotnet things in spite and so yeah.net sir now I have that I have here my little thing that I don't know if it works I hope you know it does and I'm going to just add one day add days and as you can see I'm returning the day if I add 100 it just adds how many days I'm doing and everything and all of this is happening in.net and I can do a lot of stuff I can just and I I should be client all the logic that we're used to doing in.net by by just doing this so now let's try to get something from JavaScript to our.net in case that we need to add to require some properties that comes from the window or anything else so let me close this let me stop stop the thing running and internal static partial and what we're going to get let's get an integer Windows size and I think that makes sense get window size let's say get window size window size and what's the issue just have an implementation or part of an accessibility money modifiers I think yes import and have the function that I'm going to call it a get window size and the model name will be oh no main JS because it will be coming from our main.js so yes I have this and now I'm going to Define what's my method so set mobile Imports we need this we have the same model name here and I'm going to add my little method so I'm going to have get I don't remember the name I put here looks exactly the same I'm going to copy this so get Windows size function and we just add receive this I'm going to send it as a string because yeah it is here there is there is a JS any type that you can receive on.net side and it should work the same way in this case I'm going to use a simple string just to show the the functionality so get Windows size submall Imports and okay now I'm going here and I'm going to get Windows size I'm I don't know why I put it as an integrator let's play as a string and console right line get window size so yeah now this should work Theory I don't know why they didn't work before it's weird but yeah manger is the model I mean yes the method get window size Okay window size get window size so let's build this and let's serve this and let's open this so and let's run the method to see if it works and it seems like window it's not defined object get Windows size it's not defined oh oh wow I I don't know why I added that so yeah let's build again let's serve again let's run this and just see this add face and as you can see here I have 1048 x 150 which which is the size of the window that I have here it's a value so that you can access through JavaScript and yeah I can I can do that type of stuff from here and get the values that are available of the window that stuff it's only from JavaScript and yeah I the this console right line it's also coming from the Dot from the dotnet webassembly uh thing because it's translated to a console log I guess or whatever the way that webassembly does the deluxe but yes that's it that's how you can call.net implementations on JavaScript using JavaScript see now you can use dotnet without the need of Blazer on your applications that's running everything on client side and take advantages of all the stuff that you have in.net standard or dotnet7 I'll ever everything that you can run directly there it's completely available in the browser and you don't require anything else you just take the resources of the user and it runs up so if you like this video don't forget to press the like button and subscribe if you want to see more of our videos we also have other videos that you can check just go to our Channel and check out all your videos I'm sure you're going to learn something new and if you want something specific that you want to see or learn don't forget to use the comment section the comment section is there and we try to hear you and whatever you want to learn we we're completely happy to try to have it in a video in next time without anything else to say have a great day and happy calling

Channel: Hahn Software

Views: 263

Keywords: #C, TypeScript, Angular, .NET, dot net, JavaScript, developer, entwickler, c sharp, interop, client side from JavaScript, interoperability mechanisms, WebAssembly

Id: thoH6-yhJws

Length: 30min 23sec (1823 seconds)

Published: Fri Sep 30 2022