Since June 2024

Staark

Staark is a minimalist front-end framework I developed for building efficient web apps with minimal overhead. At just 1.5kB compressed (with staark-patch at 1kB), it emphasizes simplicity through a few core concepts like reactive state and efficient DOM updates.

Building Staark was a deep dive into minimalist design and performance optimization. Since June 2024, I've focused on creating a framework with as few concepts as possible—primarily mount and node—while delivering powerful reactivity via a proxy-based state system and optimized diffing. This project taught me all about the virtual DOM, improved DOM morphing, and writing efficient code with constrained package size. Maintaining it involves refining features like memoization, isomorphic rendering, and additional packages for state diffs and real-time synchronization.

Staark is currently heavily used for all the simple tools available on this website. I find it a joy to use. It has also inspired looking further into what can be done with this paradigm, leading me to create libraries like tiedliene for state diffs and roupn for real-time state synchronization, enabling the development of decentralised end-to-end encrypted multiplayer apps in an incredibly simple way. So delving into this project allowed me to think laterally and create some other interesting technology.

Staark's efficiency shines in its tiny footprint and lightning-fast diffing, minimizing DOM updates for smoother user experiences and quicker development cycles. It's used in projects like my tools site and the Toaln language-learning app, showcasing how minimalism accelerates innovation without sacrificing power. The constrained size taught me to prioritize essential features, leading to faster load times and better performance across devices.

Here's a basic counter example:

import { mount, node as n } from '@doars/staark'

mount(
  document.body.firstChild,
  (state) => n('div', [
    n('span', state.count),
    n('button', { click: () => state.count++ }, 'Add')
  ]),
  { count: 0 }
)

This approach has taught me the value of thoughtful simplicity, enabling rapid prototyping, better resource management, and innovative extensions.

Link

Staark

Further Reading