DEV Community

Cover image for ๐ŸŒฑ Lightweight and Fast: Why I Built Sigment Instead of Using React
yaniv soussana
yaniv soussana

Posted on

๐ŸŒฑ Lightweight and Fast: Why I Built Sigment Instead of Using React

Tired of JSX, Babel, and slow builds? Sigment is a new lightweight JavaScript framework that brings fast, fine-grained reactivity โ€” with zero boilerplate.


โœจ Why Sigment?

Most frontend frameworks today rely on concepts like Virtual DOM, JSX, transpilers like Babel, and heavy build pipelines. While powerful, they introduce complexity and slow down compile time โ€” especially in large projects with many components.

Sigment was built to break that cycle:

  • Zero JSX or Transpilers โ€” use plain JavaScript tag functions like div()
  • No Virtual DOM โ€” DOM updates are direct and efficient
  • Signal-Based Reactivity โ€” inspired by fine-grained reactivity systems like SolidJS
  • Faster Compilation โ€” no need for Babel or JSX transforms means drastically faster builds

๐Ÿ”ง Core Concepts

1. Clean, Functional Syntax

function Hello() {
  return div("Hello, world!")
}
Enter fullscreen mode Exit fullscreen mode

2. Signals Made Simple

const [count, setCount] = signal(0);

const view = div(
  button({ onClick: () => setCount(count() + 1) }, "+1"),
  p(() => `Count is ${count()}`)
);
Enter fullscreen mode Exit fullscreen mode

3. No JSX

Just plain JavaScript. What you write is what the browser sees โ€” no build tools required.


๐Ÿš€ Runtime Performance

Sigment skips the diffing and reconciliation of Virtual DOM entirely. This leads to:

  • Lower memory usage
  • Faster startup and update times
  • Easier debugging (no abstraction between your code and the DOM)

๐Ÿ“ฆ Automatic Optimization

Sigment includes built-in strategies for optimal rendering:

  • Components are automatically cached when loaded at runtime
  • Global state is simple and signal-based โ€” no need for Redux
  • Use navigateTo("dashboard", true) to preserve state across views

Memoization isn't needed by default, but if a component is heavy, you can use memoizeFunc() explicitly to optimize it.


๐Ÿ“ Project Setup

You can start using Sigment in seconds:

npx create-sigment-app my-app
cd my-app
npm run dev
Enter fullscreen mode Exit fullscreen mode

Built with TypeScript and Vite under the hood, but you can also run it without a build step if you prefer.


๐Ÿง  Designed for Humans

Sigment is ideal for developers who want simplicity, speed, and full control over the DOM โ€” without giving up reactivity.

  • No more bloated configs
  • No JSX mental overhead
  • No virtual DOM penalty
  • No Babel or transpile time โ€” compilation is instant

๐Ÿ“š Learn More


Made with โค๏ธ by developers who love simplicity.


Tags: #javascript #webdev #frontend #framework

Top comments (3)

Collapse
 
kareem42 profile image
Justin Alcendor

I will have to give this a try. Iโ€™m always looking for new ideas for my future projects. Thank you!

Collapse
 
sohel_tanvir_06e0745693fc profile image
Sohel Tanvir

thanks

Collapse
 
__0fec510db8d8d profile image
ื™ืื™ืจ ื‘ืŸ ืžืฉื”

Awesome work! I really appreciate the explanation behind Sigmentโ€™s design choices. Definitely something I want to try out.