Shrink Your Web Applications with These Powerful New Features

Developers are constantly seeking ways to optimize web application performance, and reducing application size is a key factor. Smaller applications load faster, leading to a better user experience and improved search engine rankings. Recent advancements in template language functionality provide some compelling new tools to achieve this goal.

Streamlining Server Requests with Automatic Body Generation

One significant improvement is the automatic generation of the body for server requests (RequestInit). This is particularly useful when dealing with forms. Instead of manually creating FormData objects, the template engine can now handle this automatically.

Example:

Consider a scenario where you have a table displaying a list of products and a form to add new products. Previously, you would have needed to manually extract the form data and construct the request body. Now, with autoBody enabled, this process is simplified. When the form is submitted, the request body is generated for you. It will extract the data and construct the body content to be sent over server.

import { compile } from "hmpl-js";

const templateFn = compile(
  `<div>
  <table>
    <caption>
      List of products in the store
    </caption>
    <thead>
      <tr>
        <th scope="col">Product name</th>
        <th scope="col">Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Coca Cola</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Lays</td>
        <td>4</td>
      </tr>
      {
        {
          "src":"/api/products",
          "after":"submit:#form",
          "autoBody":true,
          "indicators": [
            {
              "trigger": "pending",
              "content": "<tr><td>Loading...</td><td>Loading...</td></tr>"
            }
          ]
        }
      }
    </tbody>
  </table>
  <form id="form">
    <div class="form-example">
      <label>Product name: </label>
      <input type="text" name="product" id="product" required /><br/>
      <label>Quantity: </label>
      <input type="number" name="quantity" id="quantity" required />
    </div>
    <div class="form-example">
      <input type="submit" value="Add product" />
    </div>
  </form>
</div>
  `
);
const obj = templateFn({ credentials: "same-origin" });
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);

This feature streamlines the development process and reduces the potential for manual errors.

Enhance User Experience with Dynamic Indicators

Another powerful addition is the concept of “indicators.” These are HTML elements that are displayed conditionally based on the status of a server request. This allows developers to provide real-time feedback to users during asynchronous operations.

Example:

{
  {
    "src": "http://localhost:5000/api/test",
    "indicators": [
       {
         "trigger": "pending",
         "content": "<p>Loading...</p>"
       },
       {
         "trigger": "rejected",
         "content": "<p>Error</p><button>reload</button>"
       }
    ]
  }
}

You can define different indicators for various states, such as “pending” (while waiting for a response), “rejected” (if the request fails), or “fulfilled” (when the request is successful). This allows you to create custom loading messages, error messages, or success indicators, improving the user experience by providing clear visual cues about the ongoing process.

Robustness Through Comprehensive Testing

These new features, and the entire application, are backed by 100% test coverage. This high level of testing ensures reliability and minimizes the risk of bugs, giving developers confidence in using these tools in production environments. You can usually find detailed test reports and access the test suite within the project’s repository.

Getting Started

Integrating these features into your projects is straightforward. Several options are typically available:

Package Managers: Install the necessary package using a package manager like npm (npm i hmpl-js).
CDN: Include the required files directly from a Content Delivery Network (CDN).
Local Installation: Download the files and include them in your project locally.
Starter project: There is also a starter project that can be deployed to start a new project.

Community and Feedback

Engaging with the community is crucial for the continued development and improvement of these tools. Feedback, suggestions, and bug reports are highly valued. Projects often have dedicated communication channels, such as forums or chat platforms, where developers can discuss issues and contribute to the project’s evolution.

Open Source and Commercial Use

Many of these advanced template engines are open-source, allowing developers to freely use, modify, and distribute the software, even for commercial purposes. This fosters collaboration and innovation within the developer community.

Innovative Software Technology: Optimizing Your Web Applications for Peak Performance

At Innovative Software Technology, we specialize in leveraging cutting-edge technologies to enhance website performance and user experience. Our expertise in advanced template engines, including features like automatic request body generation and dynamic request status indicators, allows us to build highly optimized web applications. By minimizing application size and implementing responsive user interfaces, we ensure faster loading times, improved SEO rankings ( website speed optimization, reduce website loading time, improve website performance, SEO friendly web development), and ultimately, a better experience for your users. We can help your business create fast, efficient, and engaging websites that drive results. Contact us to learn how we can optimize your online presence.