Webassembly with java


hello explorers and welcome to another video today we’re gonna talk about Java and the web and what can we do to run Java code in the browser on the web before we had something called JavaScript scriptlets or something like that and these were small packages that you downloaded to your your browser you had to have an extension you had to have Java installed and then you can run these applets Java applets that was a way to actually run Java code in your browser and they were deemed very unsecure and not really a good way to go so many people have turned off Java on in the browser and don’t use that anymore there are some companies that built actual products using applets they need this technology but many people at least in the consumer route or the in private sector they have removed all of this so what can we do today if we want to write java code and we want it to run on the web so I have three little examples here three different projects and I want to show them off first off we have something that’s called teavm and this is something very strange to take Java code and compile it into JavaScript code that you can run in your browser and so the Java code would look something like this you create a document to create some HTML element in this case it’s a div and then you add some text note to that and in this case we have some generated element over here and then you add this to your body and this is something that I created using archetype in maven so this comes with teavm this is an example from theirs page and if you package this with maven you will get both a war file that you can run in your application server of choice or you can open it up in the web browser just open up that directory and go to the index.html in that page and if we do that we will get something like this TeaVM generated element not very exciting but we can see here that we actually get something out and it wasn’t this big have added some styling to the templates just so you can see the text easily and if we go back here we have the next project that builds upon TeaVM where they have added some extra flavor and this project is called flavor and here we see that we have some Java class we have a template that we bind to here this client template I can look at that little bit here we have a template where we have some div in the beginning here we have please enter your name as a label we have an input text here where the HTML value is username and the h2 and change what should be changed is the username and then we have this little hello down here an HTML text and the username should be right written there as well so this is some output field where we can output username and up here we have some inputs for inputting username and if we go back to the clients over here we can see that we have some string here username in our main program we create a client and bind application content to that client and then we have here the username get user name and set user name and this class is the client so we create one of these which is of the type of application template and then it’s bound to this template so it seems a little bit weird and interconnected in some way but I think you can use this and go forth and actually broaden it a lot it to make a very interesting application if you like so what does this little example actually give us well if we go back to the web browser here we can see that we get an input field where I can type in my name and I actually get hello Daniel so this is a very nice way to create something interactive where you can enter things and then get change back into your web browser but this is still a way of compiling your java code into JavaScript so you take something that you have in Java and then create something that you can run in JavaScript and it’s a lot of JavaScript and it’s a lot of boilerplate it’s a runtime that runs this and so in in a way you are actually trying to create the same environment on the web so if you are not comfortable with writing JavaScript code and want to run some java code instead and generate all your javascript code then this might be a good way to go but I think I’ve found a really fun project that could take it a little bit further and if you go into my little IDE here you see that I have an HTML template up here but we can start to look in the pom file it’s nothing here I have actually added the two jar files that are needed this is jwebassembly-api and jweb assembly compiler and both these I needed to add to actually build and I have actually tried to import them here but as you see 1.0 is not available because this project it’s a year old it’s a labor of love for one developer so it’s not that fully fledged yet the but it’s up on maven and mvn repositories but I can’t actually download it so I’m not really sure what what the problem is there um but this is really a fun little project you have implemented more than three-quarters of the language the web assembly language but when it comes to the java language you can only support native types so you can have int floats doubles and longs and s your variables in and out but you can import code and export code so if you look at my little code example here you see that I have my add example from before I will export this add function where I add a with b and then add 18 to that and we can change this value so it’s actually four so we add four instead and in my index.html here the only thing I do is I have a result box up here I get this result box by get element by ID I have something that does something when you import JavaScript function into your java code in this case we just print out the arguments that actually are sent to the java code but we are not using javascript imports at the moment and then we fetch our wasm files this is a web assembly we take that array buffer and pours it through all the bytes so this webassembly initiate and this in turn will take these bytes initiate them with this import object function up here and then we get a result and in this result we have an instance with exports and our add function and this add function I just can run down here so one plus three where I will put into inner HTML but how can I use this little tooling to compile this code here into web assembly and then you use this little short code here where I have a wasm file I have this Java library or Java class jweb assembly and then I take the class I want to compile in this case code and I just use this little funky resolve function here it’s quite long as we can split it up a bit and this is an example that actually was given in an issue from the developer because it’s a very new project so he just wanted to show that you can use this but it’s still a little bit early perhaps so here we take the class resource and we we get the URL from that by looking for the class name and replace the dots dots with slashes so that’s pretty much going from a package name to a directory name and we look for that class in there and then we will get a URL where this class that we want to compile actually resides in the resource directory and we add that file to our jweb assembly and then we compile that to a binary wasm file you can actually compile to text if you want to see how this actually looks as you wasm text so that’s the wasm source code that you then then create a binary from so wasm has a source code language that you can actually compile with this as well so you can take Java code to wasm source code if you like and if we run this a little example here it goes pretty fast and then it will compile and run that and we will have this test wasm file here and we open the other little editor here and we can open this up and you see this is the wasm file it’s not a large wasm file but if we go over to our web browser open that up and reload it it actually shows 8 and that’s 1 plus 3 plus 4 so it actually ran our newly compiled wsam file so I what I think is very exciting about this is we found a way to actually run wasm files natively with a lot less code and I also found this really nice Java library which is still developing so there will be more supported things in the future where you can actually take some Java code and do some calculations or do some something fun with it and actually return the result to your webpage it’s still something you just play around with but I still think is a really fun thing that it actually are people that are working on creating compilers for Java so you can use them on in a wasm file and I hope that you found this as exciting as I thought it was I hope that you found this video interesting I hope that you like this video then give it a like share it with your friends and colleagues if you haven’t subscribed yet please do that and I really hope to see you in the next video

Leave a Reply

Your email address will not be published. Required fields are marked *