# Hyper PyFleX Thx to https://hypermedia.systems/ for the book. Really nice. ## Me No web dev before Like coding, AI, casual geek Was a full python dev, never really touched anything else Wanted to do SaaS, like software Didn't do CS, did Thermal and Energy Engineering First wanted to become data scientist then engineer then software dev then full stack dev. Guess I want to do everything so full stack make sense ## Intro Don't wanted to learn JS so search and found HTMX, was a revelation. I couldn't understand why everybody use JS client if this is available. I mean to do for some highly performant software. But I use python as a backend so, yeah. I have the phylosiphie of simplicity. SOmething simple is something durable, reparaible, upgradable, understadable, ect. Call me crazy but I don't comment my code, or few. I do more docs than comments. Why ? Because my code need to be my comment. I need to be able to understand what this code do by looking at it. Simplicity is readable, understable. So I can upgrade it or repaire it, ect. I guess because I didn't do a CS degree, I don't have strong beleive in comment or stuff said at school. So when I saw some JS code and started to do some basic stuff using chatGPT to give me a script that add a row to a table. I made it work, my app was pretty good, not a lot JS. But WHAT A PAIN IN THE ASS. And look at this shit! How ugly it is. I can't read it. I mean I know, I need to learn JS, code, blablabla to understand it like I understand python, blablabla. I KNOW, I don't WANT to lear JS. Ear me out, I am not saying that JS is bad at all, I'm sure it's great, but I don't WANT to know, I want to stick with what I know, my beloved python and my easy pandas, numpy and stuff. Web dev suck rn because of that in my opinion, you need to learn JS, and not small Java, did you see the size of Java client for some basic stuff ? Crazy !!! JS is the popular because you are force to use this shit. Anyway, no djugi here right ? Anyway, I did the first version of my app using streamlit. Streamlit, if you don't know, it's great, it's easy, it's python. I know, I know, I'm biais, bite me. I did a really great app with it, I wouln't be ashame to share it as if and try to sell it. Specially if I needed to learn JS lol, no way, prefer stick to streamlit than learning JS. That's why thx god HTMX. So for this first version, I used mongoDB as a DB, and I like it. I first took it for the vector seach, that I used it in the v1! But removed to focus on the chat, but I had a all library, import doc, semantic search and shit. And I was already a bit using the idea of HTMX in some way. All data was in mongoDB, and nothing store locally, everytime I reload the script I get the data from mongo and display the messages. Some peoples would tell me "but that useless and you use databse cpu, you should add the message to the db and update a list of message in your client app and then trigger an event on just the chat to blablabla" Well no, I'm not doing that. I keep it simple. And it was the best idea. At first I was worry "it's stupid, it will broke so fast". But guess what, quite the oposite. In fact it was so easy to add features !!! For example I want to add a message to the conversation, well I add it to the db and reload the script, that's it. So I can do it from anywere, at anytime, whithout breaking anything. Noting in the style of "but this small thing need to be change because of this special scenario because I am in this part of the app and not here, blablabla" Nothing, Easy. Yes I end up doing client -> server -> db -> server -> client So HTMX feeled a bit similare. Instead of Client + Server, it is Server + Screen. No client, that is the core idea of Hyper PyFleX. Easy, no JS, no client/server shit. And the beauty is that Hyper PyFleX is obviously all about HTMX. So you can do like Hyper GinX for Go + Gin + HTMX or Hyper RailX, ect The Hyper in all of them is for Hypermedia in HTML, whick is the heart of how internet and webbrowser work and mostly display and organise things. (Recommand https://hypermedia.systems/) TODO ADD the acrynyme from the books Another huhg advantages of using HTMX instead of JS is that you can use all HTML library, like alpine.js, ect. The core idea being that the server send all the browser need to know t odisplay the app. It doesn't need to understand what the app is or do, all of that is either in the HTML, in our head or in the server. When I click on a button to remove something, the client don't understand that I want to remove something. It just understand that I want to change this part. And if the change happend to be an empty HTML, well it's been "removed". Compare to the API phylosophy. The server send just the data, but then the server need a function that understand and interpret the data. For example I want to display a username and an email. If my API send this: ```html

Adrien

adrien.bouvais@blabla.com

``` In this response, there is everything the browser need to know to display. The name is an header and above the mail, ect. I can update, put the email next to the name, ect. Now let's see the current approche. Usuqlly server send JSON to the client and then the client need to do stuff. ```json { "name" : "Adrien", "email" : "adrien.bouvais@blabla.com" } ``` But with that, you don't know how to display it. You need a new JS function to pass from one to another. Why ? I already did the logic server side of getting the data, ect. Why do I need to split some part in JS and do some part twice ? ## part 0 - table At my work, I was task to implement an app. The app is pretty simple. You have a table that is a list of test done on a database. You can see the number of errors. For each test there is a button to see the detail. Let's take an easy example, I have a list of client, I check if any have more than 5 addresses. If so, when I click on the +, I get a new table that list all client with more than 5 addresses. And there is multiple test like that. Pretty simple right ? Well no, obviously. Man, I stuggeled so hard to just add one + button, and then if I do that, it change that, and that and blablabla and it lag and it's not center. God damm, that why I don't wanted JS, I don't know JS. I did a script to exclude a row of the second table and it would react... What a mistake, I think I touched the ultimate use case here, how easy it is in HTMX compare to the other way is just incridible. And now the ultimate roast for JS. Yes JS on client side is in theory more efficient... in theory. But I don't know what I'm am doing here! chatGPT gave me this and it work but god, I use it for python and sometime it give me somecrazy shit. Just to say that it is if you know what you are doing. Way better to stick to the language you know, here you can do someting opti, here you understand. Let's go into a bit of code. So I have my Flask app running ```python from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('demo1.html') if __name__ == '__main__': app.run(debug=True) ``` That look like that: TODO Add image demo1 Easy enough. A list and a form with 2 input and a button. Obviously I want to do 2 things, be able to add row and delete it. With JS, a bit of a pain in the ass. I know that some people will come with "just import react and react a React component then link it to the react hook to auto react to action of the user react blablabla". But let's ee how HTMX would to it. First the table itself: ```html
Name Age
John 20
Jane 21
``` So a table with a header, 2 columns and then a body and 2 rows. Now I want the button to remove the row. First I will add it `hx-get="/demo1/delete"`. It mean *if the button is click, run this and use what it return*. What it return is ALWAYS an HTML. Then `hx-swap="outerHTML"` it mean *replace the old HTML with the new one*. And to finish `hx-target="closest tr"` it mean *do the change on this*. In this case the closest tr is the parent parent of the button, or the row the button is currently in. With all change, we got: ```html
Name Age
John 20
Jane 21
``` No we just need to implement the route `/demo1/delete`. Well easy, it is supose to return the new HTML of a delete row... Meaning nothing, the funtion need to return nothing. ```python @app.route('/demo1/delete', methods=['GET']) def demo1_delete(): return '' ``` That's it! Ofc, at this point, you should do some server stuff. Meaning update the database ect. I don't do that here, I just show the interactivity, so if I reload the page, all changes are lost. ANd the button work, if I click I instently remove it. It REACT! It's ALIVE and JSless! Surely the form to add data isn't that simple... ```html

``` Yes, that's it. If I click on Submit, I instantly get a new row! Let's see what it do. So like before `hx-post` will issue a request to the server, a POST this time. `hx-swap="beforeend"` mean *appends the content after the last child inside the target*. So after the last row of the table (can also be `afterbegin` to append at the beginning of the table) `hx-target="#table_body"` is the `tbody` of the table above. Let's see `/demo1/add`: ```python @app.route('/demo1/add', methods=['POST']) def demo1(): name = request.form['name'] age = request.form['age'] if name and age: return f"{name}{age}" return '' ``` The function return the HTML of a new row. ANd because I say to add it after the last child of the `tbody`, it add a row to the table. And that's it for this first demo/intro. We were able to do some crazy stuff in very few line. I highly recommand reading the HTMX doc in the future to check all availables features. I was able to learn and do the app it few days while doing other stuff and managing issue on the dev virtual machine. The shit was really impressive, and my boss is really similare to me in the way he don"t want to learn JS. He was really impressed. So after that, I was convinced. Let's do JADE 2.0 using the Hyper PyFleX stack. ## Why GO ? After doing a really simple chat where I can write and it answer in like 1-2h. I realease my python code is simple asf. I also realise how I want my app to work and it's simple. remember simplicity boys!!! So how it work. Every time I do something in the chat. I recreate it. Let's take an example, I want to add a message to the chat: User trigger --> ## Used teck So here my full teck stack - GO with Fiber - HTMX - MongoDB ## part 1 - The chat Ok so as a first thing is a chat. What I need is: - Text input at the bottom of the screen - Avatar and message bubble Should be easy right ? Hopefully with HTMX yes. Let's try... # Conclusion - Say a lot about JS during the article. JS is great, I guess, I didn't try. Every language have strenght weakness, blablabla. The point is that it shouln't be a necessity to learn it. And it shouldn't be so difficult to do basic stuff.