Good night to everyone. Thank you very much for inviting me to give this talk. My name is Alejandro Mercado, I'm from Mexico. I am web and mobile developer, adding some DevOps tools under my belt. Very honored to be here to talk about this experiment that I made almost a year ago. It's about having some c plus plus code in web. Something a little weird I can say, but pretty fun. So thank you very much. Let's start. I'm going to share the presentation. This article is on medium if anyone have interest to read. When I write. Well, I write of course about web technologies and the bops, so you can follow me on medium. This article, as you may know, is back to the future, from C Plus plus to angular. For me it was like chalk minding to figure out how can we do that to have a real old c or c plus plus code? How can we handle it in a new framework like angular react or this Javascript state of the art framework? So that was the curious and what led me to write this article and to make this experiment. Maybe not, it depends of your age, but back to the old school days. I remember writing a lot of C and C plus plus as my primary language from a lot of school projects. As you may know, C and C Plus plus is now to be a very powerful language. You have a lot of control with these languages, and with this control it means performance. It's not casualty that a lot of engines uses C and C Plus plus to make the games. For instance, unity or autodesk uses these gaming giants to make prairie faster applications. The render always to deal with graphs in terms of memory are pretty exceptive. So you need to have a lot of control to deal with the performance. It's like a must. So C and C plus plus are like the more powerful. I don't know if they're more powerful, but are the better two languages to deal with that with graphs. But nowadays it sounds like a little weird to do web development with these languages like C plus Plus, Us prolog, Perl and many other good languages that are not considered. Or it was not by any chance idea to have this as a web languages. But things changes and maybe you have heard about webassembly, maybe. If not, there is a couple of links here where you can get the detail about what is this about? But the idea is this bridge between these all languages and the web browser that is everywhere. So what's the deal? Well, my first approach was to compile just a c code, something very easy code. So for that we used webassembly using a tool called echemeScript. So echemeScript to JavaScript compiler. So that was the magic. So that was the first step. The installation and setup instructions are detailed in the site, so you can click here to to go directly to the specification. It's pretty neat. Well just here I am just verifying that everything the max scripting is already installed men's version, because I was pretty sure that I already have it installed. After that I made my c code, as you can see. Now if you remember, this is pretty basic, the hello world. In c you can use of course notepad or visual studio code or whatever you want. But to build the JavaScript version of this code I simply specify the c. In this case it's c, but it can be both c or c plus plus file. After Dell mcc use m plus plus to for the compilation, as you can see here. So this is just the line, as you can see, it's pretty neat. So this way I can generate my files that are going to be my web files. As a result of this I get two files, the aoud js and the a. Out was the wasp file is our webassembly compile code, and the other one, the js, is our JavaScript file which contains the runtime support to load and execute it. This is something like that, something I can say in LG level. So well this is our binary file. So having that with all friend node we can run this aodges using code so I can get the output. In this case, the hello world is pretty simple, as you can see here, I just run with code and I get the hell award. But it was like the aha moment, a very particular moment. Well, at least for me to have this from c to javascript was like wow, because it was something I was like joining, something that I made 20 years ago with something that I am using nowadays. So because of that I can start in a lot of possibilities. That's why for me was like a very happy moment. So to generate the HTML because well in this example it's just the hello world, but to generate the HTML with MX script, we can generate the HTML output with something like that, with the output indicating the file, in this case hello HTML, of course we can see, or we need to see it in our browser, and for that we need a web server. For this experiment I find that a pretty easy way to do that was using the Python, the simple HTTP server. Now with just one line you can get the Python server running, but of course you can use any server, web server that you want and just open them, of course in localhost, in this port the file, so you can see the output. Then the output, as I said, is pretty simple because it's just a hello world. But the potential is enormous. It's from here. Now this is the starting point because you can start doing a lot of crazy things. And this is where I get wild, because I remember when I was at college, I have this subject, this graphics programming 101, we did a lot of these things about to draw different, to draw and interact with different figures, to draw circles, donuts, toroids and a lot of crazy things like this that you can see. And it was in this subject, in graphics programming 101, we use it at that time, we use the SDL AP that this was the simple direct media layer that was a cross platform, because it's still available. It's a cross platform development library designed to provide low level access to audio, keyboard, mouse, joystick and graphic hardware. So via OpenGL and direct 3d, so we can not just draw things and move things and animate things, if not to interact. So we were opening like a whole world about games, about a lot of, I mean it was the imagination, it was just the limit with all these graphics and libraries. But as I wrote here, this exercise was made in 97, 22 years ago. The surprises is still working well, some not just of course to communicate with was in webassembly to communicate, but it's almost the same code. So as you can fear at that time, we don't have angular, we don't have react, we don't have spelt or any view or any other fancy front end framework. Well that's the experiment that I was trying to accomplish with these new possibilities about webassembly. So since some other code, this was purse, the following one is with c plus plus, it's about a nice color cube. Also using this library that I already mentioned, the SDL. This is the sample direct media layer. The idea is just to grade this cube, but with some gradients and they move and change the faces as well. You can access the repo here. You are curious. This is the code in GitHub. If anyone wants to replicate some of these exercises, you have available documentation and resources. Well, so the, the tricky part where I spent more time of course was between the communication, you have some language, C code, but you have something in the middle there was that you want to communicate or to try to make a javascript, to work it in JavaScript. So with this CPP C plus plus code. I'm not going in detail to the code, this is c plus plus. But if you want to trade, you have to take care of these kind of things. How you are going to communicate? Mcscript provides a number of hepard methods that making interactions between the model and JavaScript easier. And that's the whole idea, to take care and to be aware of these helper methods. Mm scripting includes a conditional compilation symbol. This is when you see this eggmark script like constant. You can use it to detect if the solution is being compiled by Mx scripting. So this is pretty helpful to run your programs. So this is the idea. Well, this is like a pretty basic explanation because it can be pretty complex and deeper and deeper, but the idea is, was just to achieve some of these experiments and to see if that is possible. So we have this external c block in C plus plus function names. C plus plus function names can be overload. So to make sure the name is unique when compiled, this can happen. The compiler mangles the name by adding information to it about the functions parameters. The compiler changing the names of functions when the code is compiled is a problem for external code. Wanted to call a specific method because that method's name no longer exists. So this is, I can say the network part where you have to spend more time. Well, it's just in the documentation. So you want to tell the compiler to not adjust the name of the method that the JavaScript code will be calling. To do this, you need to include an external C block around the methods, continue it, repeat the previous compilation steps. As you can see here, this is 10ft very high explanation about how to make this possible. Now this code running on JavaScript, on a web browser. So as you can see, I have this color cube running on the browser. This is the output, and having this in the browser, to have it running in a framework, you are in the other side. It's not that easy, but I mean it's JavaScript. And the idea nowadays about JavaScript is to have components. So you can have this component or C plus plus code in a component and use it in angular or react project. Yes, having Mx script the HTML that we generate with Mx scripting is not typically used for production, but that's like a first approach. It's pretty useful if you are learning about Webassembly. That's the idea. As you may know, Webassembly now is evolving too fast. We have a lot of programs, languages using Webassembly. So webassembly, in my humble opinion, opens a fantastic and interesting new alternatives and it's already supported in browsers. One question that a lot of people ask me is about if Webassembly is going to replace JavaScript. The answer is no. Webassembly doesn't replace JavaScript, but those expand the web enables new hybrid JavaScript designs. So you can see here the support the Webassembly support in the browsers. I don't know if this image is a little updated, we have to verify it, but well, it's evolving too fast. And the part of the angular integration, well, with angular integration, angular per se, it's not that easy. It's not that easy framework. I guide you through the process. You have to make the project to see if the project is running like showing here, so you can follow the whole article now to have it. And I create a component with the angular command line. I'm creating the component, I just put it already made code with C and Wasp as a service. That was everything I did. So it was just like, I don't know if I was cheating, but it was pretty easy. The word cc could be located in the same folder, the one with the color cube seminars code. But just be sure that after compilation you get the files webassembly and webassembly was inside the color cube folder. Because I didn't have this couple of files, I have a lot of time trying to figure out, but it was not working so well. Taking consideration that you can save a lot of time, well, a microscript build like can include as a plumbing file in that HTML file. If you want to go for this approach, it depends how do you want to display the app? A JavaScript plumbing file is a JavaScript file that FMac scripting generates. It can be in this different way. I don't like it. You can generate with angular the UI elements, but well, you can generate with scripting. It depends what are you doing? And it's something like that. So, well, this is basically the approach that how can I use this? I can say all and powerful languages as a component in modern projects, in modern front end projects where I see the business cases is because a lot of this code, c plus plus or c code, the performance is better, is way better from JavaScript. So I think, I'm pretty sure that we are going to see a lot of things like renders games that they are going to run in the browser pretty smoothly and we are going to see a lot of hallucinance things, awesome things. Well, we are seeing a lot of things with Javascript in combination with these kind of technologies that are pretty good for something in particular. Well, this will be amazing. So I think that's why I don't think that Javascript is going to disappear. It's going to be, they are going to complement with a lot of other technologies. So. Well, this code is about how I include in the component. This is just angular. When the angular side of the project to include the web assembly, you can take a look in detail if you have time. So the idea is just to achieve the original example. That was because there is another example. I have several examples here, but the idea was to accomplish this. This is the angular component as a service. Well it was load as a service, but this is the final result. The C Plus plus code run in angular. Yeah. Well this is it. I hope that it gives you a lot of ideas of crazy things that you can achieve with this combination of technologies with Webassembly. I have another article about this very quickly about, I want to show just in two minutes because it makes sense. It, it's about web assembly then this is about other, about web components and it's in Spanish. Sorry about that, but I just wanted to show the final part that is like a picture about if Javascript is going to die, I can find it. Well maybe I have to. It was pretty interesting because a lot of people think about this about, well there is going to be about a lot of new languages like C sharp with Blazor or per. There is a lot of new alternative, but JavaScript is going to stay there and it's not going anywhere, don't worry about it. But it's not in this. Sorry, my mistake. I think it was at the same presentation, sorry because of that. But well you are going to see more and more of these examples with a lot of more, not just with C and C plus plus, if not with Perl, Python doing a lot of this kind of web development. So. Well that's what I have to say. I just want to say thanks and thank you very much for everything. If you want to, to grab me. Well, let me see. Well you have my, this is my twitter. Thank you very much.