Since January 2021

Doars

Doars is a lightweight front-end framework I developed to bring reactivity to websites without the overhead of larger libraries. It allows developers to add interactive features directly in HTML, making web development more intuitive and efficient.

Building Doars was a transformative experience that deepened my expertise in front-end web development. I started it in January 2021 to explore a declarative approach to interactivity, focusing on embedding logic right in the markup rather than separate JavaScript files. This paradigm shift—from traditional React-style apps to hypermedia-driven applications, especially when combined with plugins like doars-fetch for server communication—presented unique challenges in state management and performance optimization. Maintaining it has involved refining plugins for navigation, persistence, and routing, while iterating based on user feedback to keep it modular and lightweight.

At just 11kB minified, Doars integrates seamlessly into existing projects without requiring a full application architecture, making it ideal for enhancing server-rendered sites incrementally. Its fast update cycles ensure only relevant directives refresh, speeding up development and improving user experiences. Here's a simple example of adding a dynamic list:

<div d-state="{ messages: ['Hello!', 'How are you?'] }">
  <ol>
    <template d-for="message of messages">
      <li d-text="message"></li>
    </template>
  </ol>
  <input d-reference="input" type="text">
  <button d-on:click="messages.push($references.input.value); $references.input.value=''">Add</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@doars/doars@3/dst/doars.iife.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const doars = new window.Doars();
    doars.enable();
  });
</script>

This approach has taught me valuable lessons in balancing simplicity with functionality, enabling quicker iterations and better collaboration. While I haven't tracked external usage, Doars exemplifies my ability to innovate in front-end development and deliver practical tools that solve real problems.

Link

Doars

Further reading