ZjsComponent: A Pragmatic Approach to Modular, Reusable UI Fragments for Web Development

TL;DR

ZjsComponent introduces a lightweight, framework-agnostic web component approach enabling modular, reusable UI fragments with minimal overhead, no build steps, and broad browser compatibility.

Contribution

It presents a novel, dependency-free method for creating dynamic, isolated web components using only standard HTML and JavaScript, simplifying web UI development.

Findings

Supports dynamic loading and isolation of HTML+JS fragments

Eliminates need for build steps or specific ecosystems

Provides simple lifecycle management for components

Abstract

In this paper, I present ZjsComponent, a lightweight and framework-agnostic web component designed for creating modular, reusable UI elements with minimal developer overhead. ZjsComponent is an example implementation of an approach to creating components and object instances that can be used purely from HTML. Unlike traditional approaches to components, the approach implemented by ZjsComponent does not require build-steps, transpiling, pre-compilation, any specific ecosystem or any other dependency. All that is required is that the browser can load and execute Javascript as needed by Web Components. ZjsComponent allows dynamic loading and isolation of HTML+JS fragments, offering developers a simple way to build reusable interfaces with ease. This approach is dependency-free, provides significant DOM and code isolation, and supports simple lifecycle hooks as well as traditional methods expected of an instance of a class.