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

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 #Performance

---

The writing of this article was improved using AI.