htmx for backend engineer

Transcript

1. htmx for backend engineer 2024/06/19 Kazutaka Nakamura
2. 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
3. htmx for backend engineer
4. 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 …
5. 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
6. 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/
7. 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.
8. Ajax sample https://htmx.org/ I prepared a sample application which just gets an encoded strings.
9. - Write a HTML - Using htmx to handle HTTP request - Implement a backend server (Go) What’s needed for sample application ? https://htmx.org/
10. - Write a HTML - Using htmx to handle HTTP request - Implement a backend server (Go) What’s needed for sample application ? https://htmx.org/
11. 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
12. - Write a HTML - Using htmx to handle HTTP request - Implement a backend server (Go) What’s needed for sample application ? https://htmx.org/
13. Implement a backend server (Go) HTTP handler just puts a value on HTML and send it as a HTTP response body encode-strings.html
14. Browser index.html <form hx-encoding="multipart/form-data" hx-post="/encode-strings" hx-target="#response-encoded" > < button>convert</button> </form> <div id=”response-encode”> </div> Overview Backend Server WebAP Server htmx Browser send a HTTP POST (specified method) request http handler <div> <p>eyJ0ZXN….</p> </div> 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
15. Browser index.html <form hx-encoding="multipart/form-data" hx-post="/encode-strings" hx-target="#response-encoded" > < button>convert</button> </form> <div id=”response-encode”> </div> Overview Backend Server WebAP Server htmx Browser send a HTTP POST (specified method) request http handler <div> <p>eyJ0ZXN….</p> </div> 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
16. Browser index.html <form hx-encoding="multipart/form-data" hx-post="/encode-strings" hx-target="#response-encoded" > < button>convert</button> </form> <div id=”response-encode”> </div> Overview Backend Server WebAP Server index.html <form hx-encoding="multipart/form-data" hx-post="/encode-strings" hx-target="#response-encoded" > < button>convert</button> </form> <div id=”response-encode”> <div> <p>eyJ0ZXN….</p> </div> </div> htmx Browser send a HTTP POST (specified method) request http handler <div> <p>eyJ0ZXN….</p> </div> 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
17. 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
18. - 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
19. Reference - htmx official document - https://htmx.org - Github - https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js
20. Thank you for your attention. Have a nice htmx life !