I built a WebComponents-based framework, I am HTML Developer now!

TL;DR: I created Realm (https://realm.codes), a WebComponents-based framework that prioritizes simplicity and efficiency in frontend development. As a solo founder and product builder, I understand the importance of building Minimum Viable Products (MVPs) quickly. That's why Realm doesn't rely on heavy tooling, transpilers, or complex setups.

Embraces the HTML Developer Manifesto, emphasizing clean and concise HTML code over excessive JavaScript. Realm offers a streamlined development experience and allows you to prototype and launch your ideas quickly. With features like reactive data binding and reusability, Realm empowers you to build dynamic web apps effortlessly.

You know, in the world of JavaScript, there's this belief that a new framework pops up every second. Developers are never satisfied with what exists and always end up reinventing the wheel. But you know what? It's actually a good thing. Innovation in other fields works the same way.

As a React / Next.js developer for the past four years (and still using it), I've often found myself struggling with the complexities of modern web development. Sure, there have been attempts in the past to reinvent things, like SSR (Server-Side Rendering) or RSC (React Server Components), can be done with old PHP way, but they're not quite the same. But it makes the web development more complex.

The complexity of modern web development has always bothered me. As someone building products, working on Minimum Viable Products (MVPs), I find myself caught up in endless tasks like setting up boilerplate code, organizing folders, and implementing best practices.

But then, I stumbled upon a post by @levelsio on X (https://x.com/levelsio/status/1675829733668319233). He was using jQuery and PHP, and his product shipped quickly without any issues. It made me realize that building a million-dollar MVP doesn't necessarily require a complex stack. It's all about having a clear vision for your product. The stack is just another piece of the puzzle.

The mindset of a founder or indie maker is different from that of a developer working at a startup. Best practices and scalability, in my opinion, aren't all that important during the MVP phase.

That's why I've always dreamt of creating a simple framework that ignores all the complexity and best practices. I miss the good old days of jQuery, where everything was just simple.

So, let's take a trip down memory lane and explore the evolution of web development, particularly on the frontend development.

Frontend Development Evolution

I witnessed most of the frontend development journey from the beginning, and I am grateful that today we have some awesome frameworks and libraries that have revolutionized the way we build user interfaces. We will recall of our memory about the evolution of frontend development and delve into the journeys of some prominent frameworks and libraries that have shaped the frontend world.

jQuery

The jQuery Era marked a significant shift in frontend development. jQuery, released in 2006, quickly gained popularity due to its simplicity and ability to manipulate the Document Object Model (DOM) efficiently. It provided a concise syntax for traversing and manipulating HTML elements, handling events, and making AJAX requests. jQuery's widespread adoption made it the go-to library for many developers, and its influence can still be seen in countless legacy codebases.

AngularJS

AngularJS, introduced by Google in 2010, brought a new paradigm to frontend development with its Model-View-Controller (MVC) architecture. It offered a comprehensive framework for building dynamic web applications, providing features like two-way data binding, dependency injection, and reusable components. AngularJS gained popularity for its ability to handle complex applications and its strong community support.

Polymer

Polymer, developed by Google in 2013, introduced the concept of web components to frontend development. Web components enable developers to encapsulate and reuse UI elements across different projects. Polymer provided a set of tools and conventions to create and use web components, making it easier to build modular and maintainable frontend code. Polymer may not have reached the same level of popularity as some other frameworks, but it played a crucial role in paving the way for the future of web components. This inspired me to create Realm, a framework that embraces the power and potential of web components.

Vue, React, Svelte

The rise of Vue.js, React, and Svelte in recent years has transformed frontend development. Vue.js, released in 2014, offers a progressive framework that combines declarative rendering, component-based architecture, and a gentle learning curve. React, introduced by Facebook in 2013, revolutionized UI development with its virtual DOM and component-based approach. Svelte, released in 2016, takes a different approach by compiling components at build time, resulting in highly efficient and performant applications.

These frameworks have gained massive popularity due to their robust ecosystems, extensive community support, and developer-friendly features. They have significantly simplified frontend development and empowered developers to build complex and interactive user interfaces with ease.

HTML Lit

HTML Lit, introduced by the Polymer team in 2019, is a lightweight library that enables developers to write web components using template literals. It combines the power of modern JavaScript with the simplicity of HTML templates, making it easier to create reusable components. HTML Lit embraces the native web platform and focuses on small file sizes and performance optimizations, making it an excellent choice for building fast and efficient web applications. This is the grandchild of Polymer, and I must say, I am truly enamored by the simplicity of this framework. The elegance and straightforwardness of HTMLLit have been a tremendous inspiration for the development of Realm.

HTMX

HTMX is not just a meme, it’s real JS library. Everyone loved it. A relatively new addition to the frontend development landscape, focuses on enhancing traditional HTML applications with minimal JavaScript. It allows developers to add dynamic functionality to their websites by annotating HTML elements with attributes. HTMX uses AJAX requests to update parts of the page, providing a seamless user experience without the need for complex JavaScript frameworks. It emphasizes simplicity and developer ergonomics, making it a valuable tool for building modern web applications.

Introducing Realm: Reactive-Lightweight Markup Language

Let me get straight to the point. With Realm, all you need is a text editor and a browser. You don't even have to set up a localhost (although we might need that later, but it's not necessary if you don't import an element).

The heart and soul of Realm lies in defining custom elements that you can use anywhere, and it's only uses HTML element. That's where the magic happens.

<custom-element name="my-element">
  <element-attr name="name" type="string">Default Name</element-attr>
  <element-attr name="dream" type="string">Star</element-attr>
  <template>
    Hello my name is <slot name="@name"></slot>,
    My dream: <slot name="@dream"></slot>
  </template>
</custom-element>

<!-- Render it anywhere -->
<my-element name="Luffy" dream="King of Pirates"></my-element>
<my-element name="Nami" dream="Draw the map of the world"></my-element>
<my-element name="Zoro" dream="The Best Swordsman in the world"></my-element>
<my-element name="Sanji" dream="Finding the All Blue"></my-element>
<my-element name="Ussop" dream="The great warrior of the sea"></my-element>

Realm draws inspiration from a mix of React, Polymer, jQuery, and all the other frameworks I mentioned in the Frontend Development Evolution section above.

<custom-element name="basic-counter">
  <element-state name="counter" type="number">0</element-state>
  <element-flow>
    <trigger-event click="AddCountBtn">
      <set-state name="counter" value="1" mutate="+"></set-state>
    </trigger-event>
  </element-flow>

  <template>
    <button ref="AddCountBtn">
      Add count <slot name="#counter"></slot>
    </button>
  </template>
</custom-element>

If you're curious about how this all works, you can dive into the Tutorial on Realm's website. It will provide you with detailed insights and instructions on the process.

People love to joke about how there's no such thing as an "HTML developer" and that HTML is just a silly markup language. Well, I think it's time for them to stop laughing and start taking it seriously. It's time to take things to a whole new level.

I take great pride in calling myself an HTML developer, with a little help from JavaScript of course. In fact, I proudly declare the HTML Developer Manifesto.

HTML Developer Manifesto

We, the HTML developers, stand united in our belief that HTML is not just a markup language but a versatile tool capable of building powerful web applications. We embrace the potential of HTML and its ecosystem to create innovative, interactive, and scalable solutions. We proudly present the HTML Developer Manifesto, showcasing the capabilities of HTML as a programming language:

1. HTML is not limited to markup: We reject the notion that HTML is solely for structuring web content. With the advent of WebComponents, we can now create custom elements with attributes, state, reactivity, and reusability, all using HTML syntax. HTML is evolving beyond its origins and becoming a programming language in its own right.

2. Embracing the power of WebComponents: We harness the power of WebComponents to encapsulate functionality and create reusable building blocks. By defining custom elements, we can extend the vocabulary of HTML, enabling the creation of complex applications with less reliance on JavaScript.

3. State management in HTML: We recognize that state management is a crucial aspect of application development. With the help of HTML attributes and the power of WebComponents, we can maintain and manage state directly within our HTML code. This allows for cleaner and more declarative code, reducing the need for excessive JavaScript.

4. Reactivity through HTML attributes: We believe that interactivity is a fundamental requirement for modern applications. By leveraging HTML attributes, we can achieve reactivity within our components. Through event listeners and attribute-based triggers, we enable seamless updates and dynamic behavior without heavy JavaScript dependencies.

5. Leveraging CSS for styling and animation: We acknowledge that CSS plays a pivotal role in the visual presentation and user experience. By combining HTML's structure with the expressive power of CSS, we can create stunning interfaces and engaging animations, breathing life into our applications.

6. The spirit of reusability: We champion the concept of reusability in software development. By leveraging the modularity of WebComponents, we can create self-contained, encapsulated elements that can be easily reused across projects. This promotes efficiency, maintainability, and faster development cycles.

7. HTML as a gateway to accessibility: We recognize that building accessible applications is a moral imperative. HTML, with its built-in semantics, provides a solid foundation for creating inclusive experiences. By adhering to best practices and leveraging HTML's accessibility features, we ensure that our applications are usable by a diverse range of users.

8. Collaboration between HTML and JavaScript: We acknowledge that HTML and JavaScript are powerful allies in the pursuit of web development excellence. While HTML can handle many aspects of application logic, we recognize the need for JavaScript to handle complex computations, API interactions, and advanced functionalities. We encourage the harmonious collaboration of HTML and JavaScript to create robust and feature-rich applications.

We the HTML developers, stand firm in our belief that HTML is not merely a markup language but a programming language capable of creating sophisticated web applications. Together, let us push the boundaries of what can be achieved with HTML and build a more innovative, accessible, and inclusive web for all.

This is just the beginning. Once I complete the initial iteration to finish the first version, there's a lot of work ahead of me. I'll be focusing on improving the codebase and optimizing performance.

I've just introduced you to a concept, and who knows? Maybe there's something new that will draw inspiration from what I've created. The possibilities are endless!

I think this article is too long, if you want to supports me you can reach me out on X @oknoorap.

Feel free to show your support for Realm by giving it a star on GitHub 😉

🔥 Website: https://realm.codes
👉 Github: https://github.com/realmorg/realm