DEV Community

sugaiketadao
sugaiketadao

Posted on

Static HTML Implementation - I built a lightweight Java framework for Japan's "SI" projects (third attempt in 10 years) #004

#javascript #framework #html #ajax

Introduction

This time, I'll cover "Static HTML," a key characteristic of SIcore.

Building on the previous article's "JSON-only communication" design, I'll show how we handle HTML with specific code examples.

What This Article Covers

  • What static HTML means
  • How HTML mockups become implementation code
  • Automatic HTML ⇔ JSON conversion
  • name vs data-name attributes
  • Handling table row data
  • Benefits / Drawbacks

What is Static HTML?

In SIcore, HTML files are placed as static files (.html), and the server does not dynamically generate HTML.

This means:

  • No JSP, Thymeleaf, or template engines
  • HTML files are fetched directly by the browser
  • JavaScript displays values from JSON

This makes the transition from "HTML mockup → implementation code" seamless.

HTML Mockups Become Implementation Code

HTML mockups created during the design phase function as implementation code just by adding name attributes.

Mockup HTML:

<input type="text" value="Sample Name">
<input type="text" value="sample@example.com">
Enter fullscreen mode Exit fullscreen mode

Implementation HTML (add name attribute and remove sample values):

<input type="text" name="user_nm">
<input type="text" name="email">
Enter fullscreen mode Exit fullscreen mode

That's it—you can now get and set values from JavaScript.

Automatic HTML ⇔ JSON Conversion

One of SIcore's core features is automatic conversion between HTML and JSON (technically, associative arrays).

HTML → JSON (Request Generation)

HTML:

<input type="text" name="user_id" value="U001">
<input type="text" name="user_nm" value="Mike Davis">
<input type="text" name="email" value="mike.davis@example.com">
Enter fullscreen mode Exit fullscreen mode

JavaScript:

// Generate request JSON from browser input values
const req = PageUtil.getValues();

// Result
// {
//   "user_id": "U001",
//   "user_nm": "Mike Davis",
//   "email": "mike.davis@example.com"
// }
Enter fullscreen mode Exit fullscreen mode

JSON → HTML (Response Display)

JavaScript:

// Receive response JSON from server
const res = await HttpUtil.callJsonService('/services/exmodule/ExampleListSearch', req);

// Display response JSON in browser
PageUtil.setValues(res);
Enter fullscreen mode Exit fullscreen mode

HTML (values are set automatically):

<!-- Before response -->
<input type="text" name="user_id">
<span data-name="user_nm"></span>

<!-- After response -->
<input type="text" name="user_id" value="U001">
<span data-name="user_nm">Mike Davis</span>
Enter fullscreen mode Exit fullscreen mode

No form Tag Needed

In traditional web development, <form> tags group elements and submit events send data to servers. In SIcore:

  • PageUtil.getValues() automatically collects values
  • Only the name attribute is required
  • Form submission events are not used

This simplifies HTML structure and makes it natural to write code with multiple buttons executing different processes.

name Attribute vs data-name Attribute

name Attribute: Input and Display

The name attribute is used for form input elements (<input>, <select>, etc.).

<input type="text" name="user_id">
<select name="country_cs">
  <option value="JP">Japan</option>
  <option value="US">United States</option>
</select>
Enter fullscreen mode Exit fullscreen mode
  • PageUtil.getValues() can retrieve values
  • PageUtil.setValues() can set values

data-name Attribute: Display Only

For response display in <span> or <td> elements that don't normally have a name attribute, use the data-name attribute (a SIcore custom HTML attribute).

<span data-name="user_nm"></span>
<td data-name="income_am"></td>
Enter fullscreen mode Exit fullscreen mode
  • PageUtil.getValues() does not retrieve values (display only)
  • PageUtil.setValues() can set values

This distinction clearly separates "input fields" from "display-only fields."
Since form input elements originally have name attributes and non-form elements don't, this distinction aligns naturally with standard HTML specifications.

Handling Table Row Data

Array data (like detail rows) is also automatically converted to JSON.

HTML (table rows):

<table>
  <tbody id="list">
    <tr>
      <td><input name="list.pet_nm" value="Pochi"></td>
      <td><input name="list.weight_kg" value="5.0"></td>
    </tr>
    <tr>
      <td><input name="list.pet_nm" value="Tama"></td>
      <td><input name="list.weight_kg" value="2.5"></td>
    </tr>
  </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

JavaScript:

const req = PageUtil.getValues();

// Result
// {
//   "list": [
//     {"pet_nm": "Pochi", "weight_kg": "5.0"},
//     {"pet_nm": "Tama", "weight_kg": "2.5"}
//   ]
// }
Enter fullscreen mode Exit fullscreen mode

By separating the name attribute with a "." (dot) like list.pet_nm, it's automatically treated as an array.

Benefits

  • HTML mockups work directly as implementation code: Less divergence between design and implementation
  • No template engine needed: Low learning cost—you can implement with just HTML knowledge
  • No tag required: Simpler HTML structure
  • Easier collaboration with designers: Designers can edit HTML without server-side knowledge
  • AI-friendly code generation: Consistent patterns with less token consumption

Drawbacks

  • HTML componentization is not possible: Common parts like headers and footers must be written in each HTML file
    • However, AI excels at "bulk changes to all files," so this can be covered

Conclusion

"Static HTML" may initially confuse those accustomed to JSP or template engines.

However, the experience of "HTML mockups becoming implementation code directly" bridges the gap between design and implementation, significantly improving development efficiency. This applies not only to humans but to AI as well. The closer the design documents (HTML mockups) are to the implementation code, the more accurately AI can generate code.

Furthermore, "simple and consistent patterns" enhance AI code generation accuracy even more, making this design philosophy increasingly important in the AI era.

In the next article, I plan to dive deeper into the "custom HTML attributes" and "dynamic list display" of array data (detail rows, etc.) mentioned in this article.

Related Articles

Check out the other articles in this series!

SIcore Framework Links

All implementation code and documentation are available here:

Thank you for reading!
❤ Reactions are appreciated!

Top comments (0)