Building SibuJS: What I'm Learning About Frontend Architecture 🚀

José Ramírez — Fri, 23 May 2025 16:14:19 +0000

I'm creating SibuJS - a frontend framework built on a simple
philosophy: everything is a function.

The Core Idea Behind Sibu:

Instead of JSX, templates, or complex abstractions, what if we treated
UI as pure function composition?

const App = () => div({
  class: "box",
  children: [
    h1({ children: "Welcome" }),
    button({ 
      children: "Click me",
      on: { click: () => console.log("Hello!") }
    })
  ]
})

No JSX compilation. No virtual diffing. Just functions calling
functions, directly manipulating the DOM with fine-grained reactivity.

What I'm Discovering:

React's Genius: While studying React's design, I realize how
brilliantly it abstracts complexity. disabled={isRunning} looks
simple, but there's sophisticated handling underneath.

Solid's Precision: Learning from SolidJS showed me how fine-grained
reactivity can eliminate unnecessary re-renders entirely.

Vue's Developer Experience: Exploring Vue's approach revealed how
much developer ergonomics matter for adoption.

Svelte's Compilation: Understanding Svelte taught me that build-time
optimizations can eliminate runtime overhead.

The Learning:

Building a framework is like reverse-engineering the web itself. Every
decision other frameworks made suddenly makes sense when you face the
same problems.

Why does React have keys for lists? (DOM reconciliation is hard)
Why does Vue have computed properties? (Dependency tracking is tricky)\
Why does Svelte compile everything? (Runtime performance vs bundle size)

What's Already Working

Here's what SibuJS already delivers:

Core Architecture

Function-based UI composition - Everything is a pure JavaScript function
Direct DOM manipulation - No virtual DOM overhead, straight to the real DOM
Zero build configuration - Works out-of-the-box without compilation steps
TypeScript support - Fully typed APIs for better developer experience

Reactivity System

Fine-grained reactivity - Only updates what actually changed
Automatic dependency tracking - Smart detection of reactive dependencies
useState hook - Simple state management with getter/setter pattern
useEffect hook - Side effects with automatic cleanup
useStore hook - Global state management across components
useWatch hook - Watch reactive values for changes
useComputed - Computed values, derived state that updates reactively

DOM Utilities

Complete tag factory - All HTML elements as functions (div, span, button, etc.)
Event handling - Clean event listener attachment and management
Attribute binding - Static and reactive attribute assignment
Children composition - Nested element hierarchies

Advanced Features

Error boundaries - Catch and handle component errors gracefully
Nested error handling - Error boundaries that work with child components
Automatic cleanup - Memory leak prevention with proper resource management
Effect dependency resolution - Smart re-running of effects when dependencies change
Routing system - You do not require an external dependency for building SPA.

Developer Experience

Minimal learning curve - Just functions and JavaScript objects (still need improvements to hide some complexity)
No special syntax - Pure JavaScript, no JSX or template languages
Immediate feedback - Direct DOM updates for fast development iteration
Built-in debugging - Clear error messages and component inspection

Performance Features

Minimal runtime footprint - Lightweight core with no unnecessary abstractions
Efficient updates - Only re-renders components that actually need updates
Memory management - Automatic cleanup of event listeners and effects
Fast startup - No heavy initial parsing or compilation

Current Status

SibuJS is already functional for building real applications. The core
reactive system works, DOM manipulation is solid, and the developer
experience is getting refined with each iteration.

What's Next for Sibu:

Simplifying the attribute API and adding more developer convenience features.
More reactive primitives
Performance benchmarks against established frameworks
Developer experience improvements learned from Vue
Tons of already listed features

The honest truth: I'm not a frontend framework developer veteran.
I'm learning more about React, Vue, Angular, Svelte and Solid while
building Sibu. Each feature I implement teaches me why existing
solutions work the way they do.

But that fresh perspective might be exactly what leads to something
different.

Where is it?

If SibuJS reaches a significant level of maturity enabling its use in
large-scale projects, I'll publish the project as open source under the
MIT license.

SibuJS is my exploration into function-based frontend architecture -
prioritizing direct DOM manipulation, fine-grained reactivity, and zero
build steps. Early stage, but every line teaches me something new about
web development.

WebDevelopment #JavaScript #Frontend #Learning #FrameworkDesign #SibuJS

DEV Community: José Ramírez