HTMX: The Future of Web

Recently I have been developing a platform SaaS website and have been using HTMX along with TailwindCSS for my frontend and Python and Flask for my backend I have used most of them earlier but HTMX is the new tool in my tool belt so in this post we will look into how exactly I have implemented it in my web app. JSON Oriented Architecture Before understanding the points made by HTMX it is important to understand what is HTMX challenging to change. Everyone who has made a full stack app before is familiar to the JSON oriented architecture where the backend sends a json data and the frontend renders the data based on the response. This is most commonly known as the it increases interactivity of the website sending data back and forth the client and the server. Even though it is a great way to improve interactivity it also costs on the size of data sent to the client as JSON has size of even 10x of what rendering HTML costs. Comes in HTMX HTMX is says that for a server to return JSON is very expensive and leads to a slow and bad user experience so let the server return HTML and do it’s job and all the interaction will be handled right in HTML attributes, HTMX does a lot more than just replacing JSON with HTML but also bring in the server side and client closer leading to much better and faster interactivity. HTMX is not replacing Javascript in fact if you want to use HTMX in your web app you need to link it’s Javascript either through a CDN or directly through a file. Another benefit of using HTMX over other Javascript frameworks is how you can interact directly through an API right through HTML with out a single line of Javascript Example Nibodhdaware News Blog In the above code we have setup the HTML file by bringing in all the files we are going to need through a CDN the first is of course HTMX. Next we have something called client-side-templates which is a HTMX extension (will explain later in the post) which enables us to get data in a JSON form and render it using HTML directly without making us write Javascript. Next is something called nunjucks which is a templating style engine helping us to write loops, conditional statements, etc directly within HTML Within the body we will write the actual code we need to render the posts: Nibodhdaware HTMX JSON API Test {% if not previous %} Found {{count}} articles. {% endif %} {% for blog in results %} {{blog.title}} Published by {{blog.news_site}}, {{blog.published_at | truncate(10, true, "")}} {{blog.summary}} {% endfor %} We create a div having attribute hx-ext=’client-side-templates’ which tells HTMX to use the client-side-templates extension within the div which it is defined in. We are using the Space Flight News API that provides space blogs for developers to use. We use the hx-get attribute to send a GET request to the url in this case, the Space Flight News API. The hx-trigger=”load” indicates that the GET request is sent every time the page loads and nunjucks-template indicates that the blogs-template div is a template and we can use nunjucks syntax in the div. The template tag crates a template for HTMX to use multiple times in the file when specified. The API schema to be rendered is as given below. { "count": 123, "next": "http://api.example.org/accounts/?offset=400&limit=100", "previous": "http://api.example.org/accounts/?offset=200&limit=100", "results": [ { "id": 0, "title": "string", "url": "string", "image_url": "string", "news_site": "string", "summary": "string", "published_at": "2023-09-12T23:51:31.675Z", "updated_at": "2023-09-12T23:51:31.675Z", "featured": true, "launches": [ { "launch_id": "3fa85f64-5717-4562-b3fc-2c963f66afa6", "provider": "string" } ], "events": [ { "event_id": 2147483647, "provider": "string" } ] } ] } The nunjucks templating engine uses a similar syntax if you are familiar with jinja templating engine used in Django and Python, the {% %} indicates the block of code like the conditional block, loops, etc. The {{ }} indicate any variable or any value. Note: All blocks must be ended using {% end %} So using {% if previous %} we are checking if there is a value for previous in the API response if yes we are displaying the count variable using {{ count }} and the if block is ended with the {% endif %}. Using a {% for blog in results %} loop we are getting info on all the blog posts in the API response and using {{ blog.url }} we are fetching the blogs url and using {{ blog.title }} we are fe

 lang="en">
  
    
     charset="utf-8" />
     name="viewport" content="width=device-width, initial-scale=1" />
     src="https://unpkg.com/htmx.org">
     src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js">
     src="https://cdn.jsdelivr.net/npm/nunjucks@3.2.4/browser/nunjucks.min.js">
  
  
    
  

    
Nibodhdaware
    
HTMX JSON API Test
     hx-ext="client-side-templates">
      
        hx-get="https://api.spaceflightnewsapi.net/v4/blogs/"
        hx-trigger="load"
        nunjucks-template="blogs-template"
      >
         id="blogs-template">
          {% if not previous %}
          Found {{count}} articles.
          {% endif %}

          {% for blog in results %}
          

             />
            

               href="{{blog.url}}" target="_blank">
                {{blog.title}}
              
            
            

              Published by {{blog.news_site}}, {{blog.published_at | truncate(10, true, "")}}
            
            
{{blog.summary}}
          
          {% endfor %}