Bridging the FE/BE Divide: Why I Built a Zero-Dependency Component Engine for Vanilla HTML

In a work environment where Front-End and Back-End developers operate in distinct roles, a common issue arises. The Front-End team crafts clean, unadulterated HTML, which subsequently becomes the responsibility of the Back-End team. This transition often necessitates the Back-End developers to recode, refactor, and clean up the markup to accommodate server-side rendering logic—regardless of the specific server-side framework in use (such as JSF, ASP, Laravel, PHP, Django, JSP, Thymeleaf, Blade, or Jinja2).

This leads to a significant misalignment between the two teams, causing friction and wasting development cycles during the handoff process. The core issue stems from the need for traditional component frameworks like React, Vue, and Svelte, which impose a substantial Node.js toolchain, build processes, and complex bundling. When a Back-End-centric stack does not employ a full Node.js ecosystem, incorporating modern component architectures becomes an arduous task.

Consequently, teams are compelled to copy-paste raw HTML templates, resulting in disjointed codebases where front-end design diverges from back-end logic. To address this disparity, a solution was sought—a lightweight bridge that operates without demanding a substantial infrastructure overhaul. Andalina was conceived as a zero-dependency, client-side template engine that integrates seamlessly with vanilla HTML, eliminating the need for Node.js, bundlers such as Webpack, or server-side rendering setups for previews.

Andalina operates solely on standard HTML/XHTML syntax, enabling the Back-End team to effortlessly incorporate these components into their existing server-side architecture without any alterations to the markup. The simplicity of Andalina is further emphasized by its minimal tag count—only six tags to master, resulting in a straightforward learning curve for all team members.

The goal behind Andalina’s creation was to facilitate improved collaboration and enjoyment among Front-End and Back-End teams during the handoff process. For those interested in exploring Andalina further or providing feedback, documentation can be accessed at Andalina Documentation. The author extends an invitation for all types of input, including ideas, enhancements, edge cases, or issue reports, in order to foster a more harmonious relationship between Front-End and Back-End developers.