Slide 1

Slide 1 text

htmx for backend engineer 2024/06/19 Kazutaka Nakamura

Slide 2

Slide 2 text

Nakamura Kazutaka (X account: @kzz705) Position/Project: Software Engineer at Lazuli Inc. Development of the Product Data Management Platform - My team is multi-national and has adopted English as the official language. Keyword: Event driven, Data Management Platform, Workflow, Go, Retail, Maker Introduction

Slide 3

Slide 3 text

htmx for backend engineer

Slide 4

Slide 4 text

Target of this presentation - Anyone who wants to quickly prototype their ideas - Anyone who wants to focus on backend logic - Anyone who struggles with frontend development - and wants genAI to write frontend code like me …

Slide 5

Slide 5 text

My development of frontend application skills is so poor that I asked Chat-GPT to show sample code using raw html, javascript and css… ``` 次のアプリケーションを作りたいです。 - ユーザが4つの英単語を入力します。(名詞、動詞、目的語、場所) - 完成した文に適した絵を画面に表示します - 画面には、入力部分、画像表示部分、作成ボタンがあります - 画像は最初は表示されません。文を入力後に作成ボタンを押すと、バックエンドで生成した画像をダウンロードするためのリンクが作 成されるので、作成されたリンクから画像をダウンロードして表示します 生のHTMLとJavascript,CSSにより、フロントエンドアプリケーションのコードを書いてください。 ``` Notes: a prompt which i posted to ChatGPT

Slide 6

Slide 6 text

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react What is htmx ? https://htmx.org/

Slide 7

Slide 7 text

What can we do by using htmx ? https://htmx.org/docs/#introduction Now any element, not just anchors and forms, can issue an HTTP request Now any event, not just clicks or form submissions, can trigger requests Now any HTTP verb, not just GET and POST, can be used Now any element, not just the entire window, can be the target for update by the request Note that when you are using htmx, on the server side you typically respond with HTML, not JSON.

Slide 8

Slide 8 text

Ajax sample https://htmx.org/ I prepared a sample application which just gets an encoded strings.

Slide 9

Slide 9 text

- Write a HTML - Using htmx to handle HTTP request - Implement a backend server (Go) What’s needed for sample application ? https://htmx.org/

Slide 10

Slide 10 text

- Write a HTML - Using htmx to handle HTTP request - Implement a backend server (Go) What’s needed for sample application ? https://htmx.org/

Slide 11

Slide 11 text

Write a HTML / Use htmx to handle HTTP request index.html import htmx - Define a request encoding type - Define HTTP method and path - The target element to insert/replace HTTP response body

Slide 12

Slide 12 text

- Write a HTML - Using htmx to handle HTTP request - Implement a backend server (Go) What’s needed for sample application ? https://htmx.org/

Slide 13

Slide 13 text

Implement a backend server (Go) HTTP handler just puts a value on HTML and send it as a HTTP response body encode-strings.html

Slide 14

Slide 14 text

Browser index.html < button>convert
Overview Backend Server WebAP Server htmx Browser send a HTTP POST (specified method) request http handler

eyJ0ZXN….

If you want to know more details about this, go ahead the body of htmx. https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js

Slide 15

Slide 15 text

Browser index.html < button>convert
Overview Backend Server WebAP Server htmx Browser send a HTTP POST (specified method) request http handler

eyJ0ZXN….

If you want to know more details about this, go ahead the body of htmx. https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js When a user clicks on this button, issue an HTTP POST request to “/encode-strings” and use the content from the response to replace the element with the id response-encoded in the DOM

Slide 16

Slide 16 text

Browser index.html < button>convert
Overview Backend Server WebAP Server index.html < button>convert

eyJ0ZXN….

htmx Browser send a HTTP POST (specified method) request http handler

eyJ0ZXN….

return HTML as a HTTP Response body When a user clicks on this button, issue an HTTP POST request to “/encode-strings” and use the content from the response to replace the element with the id response-encoded in the DOM If you want to know more details about this, go ahead the body of htmx. https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js

Slide 17

Slide 17 text

Of Course we can use CSS library such as Tailwind CSS at the same time. And also htmx has many other great features such as CSS Transitions, WebSockets, Server Sent Events and so on. Notes: We can make the app more rich

Slide 18

Slide 18 text

- htmx is a library to enhance HTML with modern browser features. - AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML - Benefits for Backend Engineers: - Enable to focus on backend development - Simplifies frontend development. - htmx is simple and HTML-based. I believe that it would make it easy to have genAI write the frontend code! Summary

Slide 19

Slide 19 text

Reference - htmx official document - https://htmx.org - Github - https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js

Slide 20

Slide 20 text

Thank you for your attention. Have a nice htmx life !