diff --git a/Simplicity.drawio.png b/Simplicity.drawio.png new file mode 100644 index 0000000..55ed97c Binary files /dev/null and b/Simplicity.drawio.png differ diff --git a/Simplicity2.drawio.png b/Simplicity2.drawio.png new file mode 100644 index 0000000..7dec469 Binary files /dev/null and b/Simplicity2.drawio.png differ diff --git a/Simplicity3.drawio.png b/Simplicity3.drawio.png new file mode 100644 index 0000000..deddd3f Binary files /dev/null and b/Simplicity3.drawio.png differ diff --git a/article.md b/article.md index e114623..b910517 100644 --- a/article.md +++ b/article.md @@ -29,7 +29,7 @@ Another huhg advantages of using HTMX instead of JS is that you can use all HTML 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. +Compare to the API phylosophy where 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 @@ -48,18 +48,19 @@ Now let's see the current approche. Usuqlly server send JSON to the client and t 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 ? +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 shit 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. +To understand here a test 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. +Man, I stuggeled so hard to just add one + button for the details. 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 +Let's go into a bit of code. So I have my Flask app running (I use Flask for my work) ```python from flask import Flask, render_template, request @@ -174,7 +175,7 @@ And that's it for this first demo/intro. We were able to do some crazy stuff in 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. +So after that, I was convinced. Let's do JADE 2.0 using HTMX. ## Why GO ? @@ -183,13 +184,48 @@ I also realise how I want my app to work and it's simple. remember simplicity bo 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 --> +User trigger and send form with message content --> Server get form content and add a message to the database --> Run main generateChatHTML (Read DB -> Generate HTML) -> Send to the client to update just the chat + +The goal is once again simplicity. All data are at one place, the database, where it bellow. If I need it, I read the database. There is no buffer, no global messages array that keep track of mesages in GO, and not at all in both in GO and in JS on the client. Then I need to be sure that they are identical, too much trubble, why would I do that ? +Idk how stupid it is to use this for big app in prod, but worse case you can do a compose and add a mongodb buffer and only receive once and save once when leaving. + +So here a simple diagramm to understand: + +![alt text](Simplicity.drawio.png) + +Compare to the more traditional approche: + +![alt text](Simplicity2.drawio.png) + +Or even worse, with JS + +![alt text](Simplicity3.drawio.png) + +Yep, this is how I see it. WTF is wrong with you peoples? 3 loops ????? 3???? I meqn 2 OOOKKK, I guesssssssss. But 3???? +So If I want to update something in my app, I first need to process the data in JS and updatte what need to be in the JS client then send only the necessarry data through an API in a specific format and have a specific function that receive this specific data and do some stuff on the server, change some stuff and then send the data to the database. Ok we update one thing! +Don't get me wrong, I see the point of using JS. This is not a loop, the data never comeback from the databse to the client! The server never send anything. Meaning it never do the server to client part that HTMX do. So you do transfert more data for similare optimization level for the same thing but, is it better optimizing that if I get a 500mb RAM client ? Depend the app, no in a lot of scenario I beleive. + +Note that in the first one, there is 2 data box. Meaning 2 "states of data". This is the key difference. In the second one, the server is responsible for keeping track of the data as it stay inside it and just send the necessary data to the databse. It is efficient, that is for sure, but the server AND the databse need to keep track of the same thing, that is redondant. + +So after chossing to go with this design, as it is basically the same logic I use in streamlit with st.rerun(). I needed a server efficient, powerful and fast !!! + +*Process to look at python code* + +Yeah..... +I like you python ,that is for sure. But maybe I need someone else on this job. So I alredy had some eyes on GO and was looking for a good project to use it. I saw other framework and language like Rust, ect. I was thinking about mojo at some point, but it is not mature enough at this point. But could of been a good use case for it. + +So GO it is, I did the good old google "Go web framwork" and found a good list, tested with Gin then went with Fiber for the SPEEDDDDDDDDDDDDDDDDDDDDDDDDD!!!!!!!!! YOOOOOOOOOOOLLLLLLLOOOOOOOO!!!!!!!! + +No seriously, had to chose, looked really similare. Tryed Fiber and found it easy to use and powerful so went with it. ## Used teck So here my full teck stack - GO with Fiber - HTMX - MongoDB +- Bulma + +Done ## part 1 - The chat @@ -199,5 +235,134 @@ Ok so as a first thing is a chat. What I need is: Should be easy right ? Hopefully with HTMX yes. Let's try... +Well it do was pretty easy. I first did a base.html and then added an navbar and a page.html a bit like that: +```html +{% extends 'base.html' %} + +{% block content %} +
+
+
+
+ +
+ +
+ + + +{% endblock %} +``` + +So in this HTML, I have a columns with one column empty for now and a form with an input. I also created a small style so the text are on the right or left of the colum depending of if user of bot and that's it. + +Now in this HTML, I use HTMX at 2 places, the column and the form. Let's take a look at the column first: +- `hx-trigger="load"` mean *when the page load* +- `hx-get="/chat/messages"` *get the HTML here* +- `hx-swap="outerHTML"` *to replace yourself with the response* + +The HTML at /chat/messages look like: +```html +
+ {% for message in messages %} + {% if message.Role == 'user' %} +
+
+

User

+
+ + +
+
+
+ {{ message.Content }} +
+
+ {% else %} +
+
+

Bot

+
+ + +
+
+
+ {{ message.Content }} +
+
+ {% endif %} + {% endfor %} +
+``` + +So it create itself back with `
` and then do a for loop on the messages that I extracted from the Database on the server side. + +Now let's take a look at the `form`: +- `hx-posts="/chat"` mean *get the HTML here* +- `hx-swap="outerHTML"` *to replace* +- `hx-target="#messages"` *this with the response* + +The server function at POST /chat will add the message in the databse then return the same as /chat/messages. So if you understand, the function at /chat/messages is the second "Server" box on my diagram. And it's always the same function. Once again simplicity. Out of 4 boxs, only one change basically, the first "Server". Meaning the function that change the database. + +And yeah, that's it. A bit of backend but just this: +```go +func addMessageHandler(c *fiber.Ctx) error { + message := c.FormValue("message") + + collection := mongoClient.Database("chat").Collection("messages") + collection.InsertOne(context.Background(), bson.M{"message": message, "role": "user", "date": time.Now()}) + collection.InsertOne(context.Background(), bson.M{"message": "I did something!", "role": "bot", "date": time.Now()}) + + return generateChatHTML(c) +} + +func generateChatHTML(c *fiber.Ctx) error { + collection := mongoClient.Database("chat").Collection("messages") + + // Get all messages + cursor, _ := collection.Find(context.TODO(), bson.D{}) + + // Convert the cursor to an array of messages + var messages []Message + if err = cursor.All(context.TODO(), &messages); err != nil { + return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{ + "error": "Failed to convert cursor to array", + }) + } + + // Render the HTML template with the messages + return c.Render("chat/messages", fiber.Map{ + "messages": messages, + }) +} +``` + +And that' it! The chat work like that! Obviously I need to add the model api stuff with it but otherwise... done. I just did an ineractive chat in what ? 100 lines of codes ? And in an easy to understand, share and maintain way ? Isn't it beautifull? + +## part 2 - The API + +Ok so now that we have a chat. I need to be able to communicate with the different API. I'm a bit affray on this one, I hope I don't NEED to use python. Now that I think about, I always used the OpenAI Client, because easy to use. Let's see if I can talk with OpeanAI server through Go first... + + + # 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. \ No newline at end of file diff --git a/go.mod b/go.mod index c61f486..4060a90 100644 --- a/go.mod +++ b/go.mod @@ -20,6 +20,7 @@ require ( github.com/gofiber/fiber/v2 v2.52.4 // indirect github.com/gofiber/template v1.8.3 // indirect github.com/gofiber/template/django/v3 v3.1.11 // indirect + github.com/gofiber/template/html/v2 v2.1.1 // indirect github.com/gofiber/utils v1.1.0 // indirect github.com/golang/snappy v0.0.1 // indirect github.com/google/uuid v1.5.0 // indirect diff --git a/go.sum b/go.sum index 6f1a44f..a2ffc18 100644 --- a/go.sum +++ b/go.sum @@ -40,6 +40,8 @@ github.com/gofiber/template v1.8.3 h1:hzHdvMwMo/T2kouz2pPCA0zGiLCeMnoGsQZBTSYgZx github.com/gofiber/template v1.8.3/go.mod h1:bs/2n0pSNPOkRa5VJ8zTIvedcI/lEYxzV3+YPXdBvq8= github.com/gofiber/template/django/v3 v3.1.11 h1:wE5k/wWNKGKxfeopaeB6IBijMiEVAxKHJVf1WMH5iNw= github.com/gofiber/template/django/v3 v3.1.11/go.mod h1:sEUp0cr1iCuFx4GEtHEA7yRXgJmRdAVXwGMR3Q5JnyI= +github.com/gofiber/template/html/v2 v2.1.1 h1:QEy3O3EBkvwDthy5bXVGUseOyO6ldJoiDxlF4+MJiV8= +github.com/gofiber/template/html/v2 v2.1.1/go.mod h1:2G0GHHOUx70C1LDncoBpe4T6maQbNa4x1CVNFW0wju0= github.com/gofiber/utils v1.1.0 h1:vdEBpn7AzIUJRhe+CiTOJdUcTg4Q9RK+pEa0KPbLdrM= github.com/gofiber/utils v1.1.0/go.mod h1:poZpsnhBykfnY1Mc0KeEa6mSHrS3dV0+oBWyeQmb2e0= github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk= diff --git a/layouts/base.html b/layouts/base.html new file mode 100644 index 0000000..0fcd437 --- /dev/null +++ b/layouts/base.html @@ -0,0 +1,61 @@ + + + + + + + JADE 2.0 + + + + + {{ template "navbar" . }} + + {{template "content" .}} + + + + + + + + +{{define "navbar"}} + +{{end}} \ No newline at end of file diff --git a/layouts/chat.html b/layouts/chat.html new file mode 100644 index 0000000..aba06b6 --- /dev/null +++ b/layouts/chat.html @@ -0,0 +1,58 @@ +{{define "user-message"}} +
+
+

User

+
+ + +
+
+
+ {{ .Content }} +
+
+{{end}} + +{{define "bot-message"}} +
+
+

Bot

+
+ + +
+
+
+ {{ .Content }} +
+
+{{end}} + +{{define "chat-input"}} +
+ +
+{{end}} + +{{define "chat-messages"}} +
+
+ {{range .Messages}} + {{if eq .Role "user"}} + {{template "user-message" .Message}} + {{else}} + {{template "bot-message" .Message}} + {{end}} + {{end}} +
+
+{{end}} + + +{{ define "content" }} +
+

Chat Page

+ {{template "chat-messages" .Messages}} + {{template "chat-input"}} +
+{{ end }} \ No newline at end of file diff --git a/templates/welcome_page.html b/layouts/welcome.html similarity index 77% rename from templates/welcome_page.html rename to layouts/welcome.html index 3f62dfa..80ae790 100644 --- a/templates/welcome_page.html +++ b/layouts/welcome.html @@ -1,11 +1,9 @@ -{% extends 'base.html' %} +{{define "content"}} -{% block content %}

Welcome to JADE 2.0!

- -{% endblock %} \ No newline at end of file +{{end}} \ No newline at end of file diff --git a/main.go b/main.go index 5769651..d105de1 100644 --- a/main.go +++ b/main.go @@ -2,12 +2,11 @@ package main import ( "context" - "log" "time" "github.com/gofiber/fiber/v2" "github.com/gofiber/fiber/v2/middleware/logger" - "github.com/gofiber/template/django/v3" + "github.com/gofiber/template/html/v2" "go.mongodb.org/mongo-driver/bson" "go.mongodb.org/mongo-driver/bson/primitive" "go.mongodb.org/mongo-driver/mongo" @@ -16,6 +15,11 @@ import ( var mongoClient *mongo.Client +type User struct { + Username string + Email string +} + type Message struct { ID primitive.ObjectID `bson:"_id"` Content string `bson:"message"` @@ -43,10 +47,8 @@ func connectToMongoDB(uri string) { } func main() { - // Import HTML using django engine/template - engine := django.New("./templates", ".html") - // Create new Fiber instance. Can use any framework. I use fiber for speed and simplicity + engine := html.New("./layouts", ".html") app := fiber.New(fiber.Config{ Views: engine, AppName: "JADE 2.0", @@ -66,20 +68,20 @@ func main() { app.Get("/", indexHandler) app.Get("/isMongoDBConnected", isMongoDBConnectedHandler) - app.Get("/chat", chatPageHandler) - app.Post("/chat", addMessageHandler) - app.Delete("/chat", deleteMessageHandler) + app.Get("/chat", chatPageHandler) // Complete chat page + app.Put("/chat", addMessageHandler) // Add message + app.Delete("/chat", deleteMessageHandler) // Delete message // Start server app.Listen(":3000") } func indexHandler(c *fiber.Ctx) error { - return c.Render("welcome_page", fiber.Map{}) + return c.Render("base", fiber.Map{}, "welcome") } func chatPageHandler(c *fiber.Ctx) error { - return c.Render("chat/page", fiber.Map{}) + return c.Render("base", nil, "chat") } func addMessageHandler(c *fiber.Ctx) error { @@ -135,7 +137,7 @@ func deleteMessageHandler(c *fiber.Ctx) error { }) } - return c.SendString("") // TODO Main loog that return the all chat + return generateChatHTML(c) } func generateChatHTML(c *fiber.Ctx) error { @@ -158,13 +160,8 @@ func generateChatHTML(c *fiber.Ctx) error { }) } - // Print messages - for _, message := range messages { - log.Println(message) - } - // Render the HTML template with the messages - return c.Render("chat/messages", fiber.Map{ + return c.Render("chat", fiber.Map{ "messages": messages, }) } diff --git a/templates/base.html b/templates/base.html deleted file mode 100644 index 41916d4..0000000 --- a/templates/base.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - JADE 2.0 - - - - - - {% include 'navbar.html' %} -
-
-
-
- {% block content %}{% endblock %} -
-
-
-
- - - \ No newline at end of file diff --git a/templates/chat/messages.html b/templates/chat/messages.html deleted file mode 100644 index ec987e9..0000000 --- a/templates/chat/messages.html +++ /dev/null @@ -1,31 +0,0 @@ -
- {% for message in messages %} - {% if message.Role == 'user' %} -
-
-

User

-
- - -
-
-
- {{ message.Content }} -
-
- {% else %} -
-
-

Bot

-
- - -
-
-
- {{ message.Content }} -
-
- {% endif %} - {% endfor %} -
\ No newline at end of file diff --git a/templates/chat/page.html b/templates/chat/page.html deleted file mode 100644 index 4305b23..0000000 --- a/templates/chat/page.html +++ /dev/null @@ -1,33 +0,0 @@ -{% extends 'base.html' %} - -{% block content %} -
-
-
-
- -
- -
- - - -{% endblock %} \ No newline at end of file diff --git a/templates/navbar.html b/templates/navbar.html deleted file mode 100644 index d45c065..0000000 --- a/templates/navbar.html +++ /dev/null @@ -1,19 +0,0 @@ - \ No newline at end of file