HTMX vs WASM - more backend or more frontend?

Speaker 1: Thank you. Yeah, this is a really good round of applause in uh Django Khan. It's really good. Um thank you for being awake. Uh I'm not very awake. Um I'm I'm very tired actually. If you talked to me this morning I was like, oh what am I doing here? But Um, I hope I'll survive this talk and so do you. Um so like I always said this is the most important s slide of the whole deck and because you gotta take a picture of uh the link to the whole side deck so you don't have to take a picture of like any other slides if you got this slide. Um my contact information is there so if you have more questions uh drop me a message either on Twitter or Mastodon it's same same handle so you can still find me. there. Um and also apologies because the background here you can see that wow is like very, you know, um very fiery, right?

Speaker 1: Oh, people are fighting. But It this is not what I'm trying to convey through this picture. I'm trying to convey is like the sporting spirit behind it that we are actually in a very um hopefully constructive competition so by comparing two different kind of approaches. Um we are trying to find a better one or you know find one that shoots us. It's not a kind of you know competition in a bad way. Um so that being said, let's uh jump into the talk. So oh actually I have a clicker, I forgot. So I don't have to go back and forth. So I'm Sheikh. I work for Alaconda. And uh I love open source projects, have been involved in various ones in the past. I'm still contributing to open source project uh when I whenever I can And uh also I organize events, so um I should have changed the logo of EuroPython.

Speaker 1: That was last year. I will tell you more about EuroPython later. Um so who have heard of Project Iodai A few hands, yes? Uh so maybe maybe you know it's just like not very awake, that's why you didn't put up your hands. Um so project Aladdai is actually uh Well it's it's something that uh has been there for a while. Um so um Monsella, you know the uh the the company that basically is most fa famously known for Firefox, the browser Um so they they're they are you know trying something new. They are trying to like see if they can build a scientific tool that uh basically can run um an interactive. So th they they it can be run fully uh using the a browser.

Speaker 1: So no back end is needed. It's not like Jupyter Notebook. For those of you who n have tried to use Jupyter Notebook, there's like a server running. It's actually a uh to uh tornado framework, you know, uh if you strip everything down it's a tornado framework. But um yeah, so it's not like that. Um but that project is actually not uh Python specific, it's just an idea of building that tool for people who work with data, who are like researcher, work with scientific things Um unfortunately the project is sunset um t uh a few years ago. 2020 is quite a long time ago, uh in September So uh so this is I I kind of find this like old like website that you can kind of s you know still see what the project's about. It's really cool. Uh if you you know if you have to slide that you can click on the link and go there and

Speaker 1: You know, you get more demonstration from that page, you can see what it was like supposed to be, um, if the project's still alive. Um so it looks really cool. Um to do that actually uh to make all of these available, right? All these like supercomputing power but only on the browser is actually we're using Wasm. So what is Wasm? So um let's just go through that a little bit um because you know uh we want to get everybody on the same page. So um let's let's imagine right um so for your computer for example this one here it will have a CPU chip Okay. Um so that's basically your processor. That's the kind of we say is the brain of your computer. Um that's uh you know you So uh we we wipe Python as well

Speaker 1: look at the bottom of the of the screen here. Uh so uh on the left hand side at the bottom. So we wipe Python So when we wipe write Python, actually I doesn't go straight to the brain of your computer. So you need to go through a lot of steps because Your computer actually don't understand Python if to be frank. Um so first of all, uh so Pi what is Python? The C Python that you download from Python. org is actually in uh interpreter. So what it does is that like it will is well why it's called C Python? Because it's written in C. So what it does is like it will read your Python code and understand your Python code and then change it into um So using C it would change it into a C code that got compiled. So why like so for those of you who are like too young, like

Speaker 1: always compiling code and stuff. because you write Python directly. Uh the compilation process actually is converting the code that you write into machine code that your computer understands. So there are like a lot of steps to like, you know, translate your Python code that you understand into a code that the computer understands. This is what it does. But if let's say we want to run everything on the browser Uh instead of using the CPU chip in your computer, uh we are using a virtual machine on your browser. So it's basically um supposed to be the same on all computers as long as you have that browser installed Um

Speaker 1: so we have some comparison here. So you also write Python code, so this is the ideal, right? Like well we want to write Python code And then we go through Baudai, which is a uh you know, we I will explain a little bit more later. So it's kind of like a Python um version of uh you know uh uh of this so it's well. It's uh ooh, it's so sorry, it goes to sleep. So let's let Lebanon wake up in a bit. So um yeah, I have to I have to keep keep my hand on it so it doesn't go to go go to bed. Oh it's too early. Come on wake up. Oh okay. So um Yeah, uh so so it's like you write Python and then instead of C Python doing the interpretation, it's the Pi L die that do the interpretation. So uh instead of a C compiler that compile the C code into machine codes, uh there is a um

Speaker 1: a tool called mscripton. which is we can compile uh a lot of different languages into a wasm code, which the virtual machine on your browser understands. So this is kind of an analogy of how like from Python code we can you know get it to uh to running. So but let's go back to Project Aodai. So Project Aodai tried to like do everything, like you know, especially scientific things on uh with uh Wesm to be uh able to run it on your browser. But why your sunset? Why is it not that popular? Because like some of us haven't heard about it before. Um there are a few issues, uh, because uh the project is not community driven. I would say that's the main problem. Um But uh you know, for example compared to other projects in the Python community, for example Jupiter.

Speaker 1: So Jupyter projects always you know have uh in mind that it need to be computer driven uh community driven computer community driven and um need to have the community to really adopt and using it. So Project Aodai wasn't as successful because it's mainly maintained by a company, supported by one company. Uh so it yeah, so if the company made the decision that okay we you know is you know we we're closing down the project then it got sunset, right? Uh like many, many other things that uh we see we see in the tech uh tech world. So But it's not that everything is lost. Usually, when it happened, if it's an open source project, there will be a community who step up And say like, no, no, no, we want that, we love it, we will maintain it ourselves.

Speaker 1: So um so that's become the project Piel Dye. So Pi Al Dai is actually a community-run project, is uh actually Um you know, g get a lot of interest from the Python community because you know a lot of uh people do data science and scientific research are now using Python. So there are lots of interest of that. So that's why From Project Iodai, now we have Project Pyodai. And then it's um yeah, it's driven by the community. So uh yeah, I've I've met some of those uh maintainers of uh Project Pyodai, they are lovely folks. Like you know, uh uh you know, next time you see them, you know, buy them a uh coffee or drink, you know, to to thank them. Um so we are in age of Python on the browser. I think In the past few years since I've been to a lot of conference, there's always uh some talk about Wasam, talk about oh, how to run Python on the browser

Speaker 1: in one way or the other, like you know, it could be like Py ODI or like, you know, about PyScript, which I'm going to cover in a bit. So Um bic why uh project PyODI is so successful, um I think, is that like not just because well Python is very popular, but it also allow a lot of Python package, which is what make Python so uh loved by a lot of uh researcher. Um so it provides those as well. So it's not just is you know uh a vanilla um interpreter like your C Python It's actually come with all the all the other things that you can pip in store, it's it also available. So Um you can uh you know pip install pandas

Speaker 1: to your uh web browser. You can pip install NumPy into your web browser, you can even pip install Django in your web browser Uh last year, if you remember, if you've been to uh Django uh DjangoCon in Porto, someone gave a lightning talk in the Python Portugal, which is like a a uh one day of conference right after the uh Django Con. Uh someone like uh make uh you know Django run on a browser. So there's like browser as a backend. I don't know what's going on there. Um but um yeah so that this is what happened And um so now I think uh the most kind of popular use uh of that is that for example, now we instead of Jupyter Notebook, which again we need a server to do that, uh we have

Speaker 1: Jupyter Lite, which again everything is run on a browser. So you can basically have a Jupyter notebook that doesn't need a backend. Um also it uh you can build a lot of like front-end application with PyScript, so is which is what I'm going to cover in a bit. So PyScript, what is PyScript? PyScript is actually a framework that um allow you to write Python. Um write You well, you can just write Python on your HTML file if you want, but uh it's not recommended. It also allow allow you to access to DOM almost like JavaScript, but replace it with Python. Um also like you can change uh between PowerDye, which is the uh the you know, we'll just cover what is PowerDye. But you can also use MicroPython, which is like a lightweight version of Python The reason of doing that is that because it will load faster.

Speaker 1: We will see why in a bit when I demonstrate. Thank you, PowerDye. If you want to try it out, there's also a playground on PyScript. com. You can sign up. You know, just sign up and then it's almost like the Code Pen or something like that. You can create a PyScript project and share with people. So this is how a code will look like. I'm not going to go through them line by line, of course, but uh you can see that at the beginning there, oh I should have highlighted, but I hope this worked. No, no, it doesn't. Okay. So uh you can see that at the beginning we would uh kind of you know call in like the the PyScript. js over there if you can spot it and uh PyScript. css.

Speaker 1: Um so Those are actually, you know, uh now is like C DN from uh Passcript. net, but you can actually self-host it if you want to. You can download it and you know this is using a latest, so it's You know, not recommended again, like pin the version if you can. Um you just need to use the link that you have to ex uh some like explicitly say which version you want to use. And then you can do this, like you can I want to show you this amazing thing. So you can write Python here. So with the PyScript hack, you can write Python here. Um so yeah, it reminds me of during the old days when, you know, in the 2000s, you know, I like fooling around the internet, I would right click and view source and see all the HTML like how to make this webpage. And now people can this open source, right? Like people can see your source code, like your Python code on the HTML file

Speaker 1: Um but it's not necessarily like this. This is a demo. You can actually call in like using the PyConfig tag. You can uh load in extra file if you want. For example here, it loads in the uh utils and pylist. Pi. So um yeah, I'm not going to cover all because this is not a talk solely about PyScript. So check it out if you're interested. This is again a demo. You can see that it's spinning because it's trying to load in the um load in the the all the things that you need from pyle dye. So for example, I will be by milk. Okay So if I do that and then add task, it would yeah, it's just like a normal to-do list. All of these are code that is run. So it's all of them are Python Python code. Like if you inspect that, like I don't write JavaScript. It's not this not JavaScript.

Speaker 1: So yeah There's no back end either, so that's cool. So oh I have to have to come here now. It doesn't work like that. Okay. What 's going on? Okay. I think because I click on yeah, okay, fine. Um so Now it's like a the front end is getting thicker and thicker, right? We load everything on the browser, there's no backend, we don't use backend anymore Oh, so is is that is that cool? Is that what we want? Is well um of course there are limitations like everything in the world For example, the loading time, like I said, there would be a spinning wheel. So that example is very simple, but it still takes some time to load If you load in something like a pandas and it's you know a some data file, then oh my god, like it would spin for quite a while and it got annoying for your user. Um Also there's like limitation of the RAM you can have in your VM, uh of the browser VM.

Speaker 1: Like uh I think right now the the in the st industry standard is four gigabyte of RAM. But you know it may in improve in the future, but still there's a limitation. You ca you can't have everything on the browser to be honest. So uh so But it's handy if some like data scientists want to just like you know do some illustration. Again, like um there's some use case that's useful or for education because you know for kids it's fun to do and it's not sophisticated. Um But uh there are other approach, right? There's not just like one thing that's to solve all the problems. Sometimes we want to make it thinner. So HGM HTML, I love it. I told you I have like you know since the 2000s I like right click as the other HTML like tax and stuff. Um so it's back in fashion.

Speaker 1: We love tax now. We want to just write HTML. Oh so Um HTMX. Uh everybody knows of HTMX, I assume. Or who yes, who knows? Please raise your hands. Yo! Yes. Yeah, I feel like this community really loves HTMX, which is great. Um so this is like some of these points are copied from their website. So is uh for example like it's very uh lightweight, it's lighter than React, you know And uh some of them is my opinion about it. For example, like, oh, you don't have to watch your script, you can just write uh HTML text. Um so it would dynamically change element and also uh everything is in one place. If you have been to uh culture 's talk yesterday, you know that You know, there's benefit of putting everything in one place instead of opening multiple files, you see what's going on very easily.

Speaker 1: So um But now we talk about using Django with HTMX. So um yeah, how how the two things work together? I I I I'm sure you would know because like, you know, we are the DjangoCon and everybody loves HTMX, so there's a lot of talk about it Um but I'm gonna do just briefly cover something and then show you a very small demo. So um one thing that I realized when I start like learning okay how can I use uh HTMX with Django is that I Uh it got mentioned a lot of times that uh we need this CSRF security token. Um so sometimes I got like errors because I forgot uh I need the token. So uh I'll show you some code like how you can put that in. Um So HTMX elements, you know, uh well for

Speaker 1: I assume you know, but like I would just cover the basic that you have to put those uh attributes in the tag to make it work. Um and then you put the that, you know, when you create the template for your Django project, then you put that in there. Um it will dynamically change the page, so I'm gonna show you later Uh there's also people who create like plugins to make it easier for you to deploy a project with Django and XGMX. So for example, uh Django XTMX, I think uh Adam is not here. He left early, but um Yeah, so uh that's uh you know, thank him for creating all these uh amazing pr uh uh tools. So This is this is uh you know because Django project you have multiple files, so this is only a two of them. Um so for example this one is the uh base

Speaker 1: or HTML, so this is one of the template that you would uh use So here uh I want to show you this because uh this is uh well this is not my code. I find it on someone's uh blog post, so you can go there and have a look. But um so this is actually adding the the token there. So uh that makes sure that um You won't come into that like uh C C SRF token error later when you use XTMX. And then um when you use it is very cool because Um you basically put everything, um everything is in the uh in the tag here. So you can see that it kind of say that oh it's You know, you don't have to write um any JavaScript or J Jacks or anything like that. It's just like, you know, um

Speaker 1: all in the tag attribute. So here I want to show you oops okay, one sec. Okay. So uh okay ooh it works here. Okay. Sorry you if you don't see my face, sorry, uh but you see the uh demo which is a good thing. So This is uh what I created uh is a uh small kind of uh minimalist example of uh how you use them together. Um you see that here uh I have multiple templates, you know, like I showed you before, we have to have the token uh you know uh inject into into it. And then I have multiple

Speaker 1: So these are different um sections of the page because you know I I will call them here. So they are including the ad task and the task list. So Some tasks lists here I have actually this is how I can delete an element. Sorry, I need some copy. So um for example this is how you can delete an element. You just uh for example here if I create a link then I would actually have the attribute to call the uh hx delete which is sending a um a re a request uh to to the back. So if you see the views here, you see that I have delete task and create task. So um for example, if the method is delete

Speaker 1: like the the one the before, xx delete then is we'll go go here and it will delete the the task. So here um maybe I'll show you actually before I talk More about it because it doesn't make sense for me either if I don't talk. If I don't show user I have to show you. So for example, buy milk Right. So you can uh so all these are actually you know nothing new, right? Oh I've seen this before, you just like put some JavaScript up. No, you don't have to now, you just use HTMX, you see These are all elements. These are all just elements here. And if you add more things here, for example, buy bread. We need meal and bread for breakfast. Okay. So um If you see here, so this is or this is basically just a token, so ignore that.

Speaker 1: But if you see here, then like is this one is actually just the form if I can find it here. It's just the form. So there's no JavaScript in here. They're all HTMX. So if you save and then it changed. So you see that now instead of having one uh list uh like list element I have two. So it just changed dynamically And then I can delete uh anything here. So if you click on it and it would even have the prompt. You can also have this and then it would delete it and then uh replace the element with the the one without the milk. So Is all just like so that's why I think uh HTMX works so well with Django is because you know we can just call each of them is actually a uh function in the in the view. So

Speaker 1: um Just works hands in hand and it works very well. Okay, so uh for example look at at task. So this one is It's the form actually. So it's as it's it's just a very is you know a form, right? Everything is HTML, we just have various attribute, we just have to point to the right target. And then uh replace the right element and then it it it will work because if if you look at URLs, because each of them actually will be corresponding to um one of the pubs and then they would just call and call our views and then replace it. So um it's it's very cool and I think it it I don't know if it's like design to work like that, but it works very well with Django.

Speaker 1: So it's it's very good. Um so what time do I have left? I I'm kind of keeping loose track of the time. But anyway, okay, let's move on. So um I want to kind of um close uh at the end of this talk I want to kind of um have a thought process of how it will be like in the future. So Uh we have seen how everything can be put on the front end. Like uh that everything is just uh you know, I can write all the Python code in the front end is really great. You know, I I don't have to worry about the back end, I can just, you know send my friend and uh a HTML file and double click and it will work. Um so that's pretty cool. At the same time you also see that oh we can have a very large range, you know, front

Speaker 1: end just like a bunch of tags in HTML and things you know if you set it properly for example in Django like what I just show you then it will also work so it's really really good but um I think we're kind of seeing the movement here. We're seeing things are changing. We see that the traditional way of how we imagine developing a web application have been changed. So Here's some of my opinions you can disagree with it and please uh come and let me know what you think about it and we can talk about that later. So first of all Um I think JavaScript is no longer needed for like front-end work maybe. So um you know now if you look for jobs for front-end developers you will see that um wow you know uh you need to write JavaScript, you need to write React

Speaker 1: and all that stuff. So maybe it will change. A front-end developer don't need to write JavaScript. Um and JavaScript will be actually low-level because well, you create all this cool stuff uh with JavaScript and then but the user the the people who actually writing the the the page doesn't have to write javascript. So if we consider low level, that 's actually funny to think of it. Also there w I think there's something I like about it is that we have more cache coders, for example, like uh PyScript is actually one of the Uh the idea is that we could actually encourage more kids to learn coding because they can see the thing, it's fun, you don't have to install Python, go through all this trouble of like all these paths are messed up and all these like, you know, environments are all messed up. It it just one environment is

Speaker 1: r run on the browser. So we can teach Python uh mu in a much easier way. Um So it it there may be more casual coders and also like for example like again if you don't need to write JavaScript like learn an extra language when you uh create your front end work then you know it may be easier for people to uh write a Django app because they don't have to uh you know they want interactivity but you they don't have to write JavaScript they can just use HTMX. Also, since now, you know, AI, you know, especially generative AI is so popular, um, people will be interested in AI and a lot of them may be not really like developers Um so they they can actually maybe create some like tools or something for their work using AI models, but like you know, making all this integration uh with the web

Speaker 1: app much easier when they don't have to worry too much about um the complexity of d uh developing a web app. So um that's my opinion. So this is the end of the talk And of course I can't end the talk without plugged in for EuroPython. So it's in Prague, it's in July and um there are amazing talks about both like you know different kind of things there will be talks about web development, Wasm and all this cool stuff. Oh that will be a Wasum summit by the way. So if you're interested, there you go. So that's it. That's it for me. I have to get off the stage I think So thank you.

Speaker 2: Great, thank you. That was uh also very inspiring. I think we have time for one or two questions. So if you have a question right now, is that okay?

Speaker 1: Yeah, sure.

Speaker 2: So um you could go to one of the microphones.

Speaker 1: Do we have a microphone down there? I think someone's.

Speaker 3: Hi. Thanks.

Speaker 1: Oh.

Speaker 4: Awesome. I really like your talk and I like seeing uh how we're coming full circle almost from uh hypertext to React and JavaScript and now we're back in hypertext and I really see the cool sides of of HTMX and making life a lot easier for us. But I wonder what's the experience like I I think mobile apps are a given even if we don't like them always and they might be overused in in in many circumstances It's a g it it's probably a a situation we have to deal with anyway. How good is the experience in making natively feeling mobile apps using HTMX and templating languages. Is that is that something that is on the horizon or even already a reality?

Speaker 1: Yeah, that's actually a very good question because uh two days ago I ran a workshop that uh we use Beware to deploy some a mobile app uh with Django uh web app as well. So um so actually I think uh because now s since HTMX uh I oh I forgot to show you the the point out in the code, but you still have to you know call in the HTMX and stuff. So but again you have the option to host it yourself. So if it hosted in your Django project, you can deploy it together then it's is is not a problem. It's you know is it will you can isolate it from you know CDN to another source where you can just have it in your project and then once you have build and deploy a project, for example, using Beware, then um then it

Speaker 1: it will be um it it will be fine um uh on your web uh on your mobile as well. So If you're interested in di deploying mobile with bware, then talk to me later. I can also point you to my workshop material.

Speaker 2: Thank you. Jacob.

Speaker 3: Thanks, Jack. Um just a question because I've I've even seen that you you need to load some kind of payload. JavaScript to so th that the engine is running. So what's the comparison between Pyodite and HTMX runtime in kind of bytes you have to download before everything starts to work?

Speaker 1: Yeah, exactly. That's the point. Uh so for of course like if you go for the Wasam approach, you know, you have everything on the front end. Of course there will be a the o the overhead of loading everything. So I I'm not trying to like, you know But um you know PyR dye is actually quite heavy, uh because Python's actually got a lot of physical. So um And also together with other things you pip install, you know, or or like, you know, I guess you are not pip installed in the in the browser, but you can have a way of like uh hooking them in. So the bigger it is, for example Panda is a big project. So bigger it is the longer the loading time. So the user will get annoyed a little bit like because you have to wait until you can use something. So Um yeah, so that that's this the comparison to HTMX. So HTMX

Speaker 1: approach will be more um fast. You can just like the web page will load really quickly. Until you kind of have some dynamic thing, then the XDMX need to make the call, like the the request call, then it will take some time. So it depends where you want the the slowest point is. If you you know, for example, if you don't mind or you actually there's a way of uh like again you can choose MicroPython which will take the loading time faster. So It depends on your UK use case again, like where is the heaviest load it is and does it really make the user experience good? You will have to try it out to see which approach is better. Yeah.

Speaker 2: Okay, thank you very much.

Speaker 1: Thank you.

Speaker 2: Chuck, big applause please. Thank you so much.