Why Callbag-JSX?

linktune Control

Unlike most other frameworks and libraries, callbag-jsx DOES NOT decide when or how some part of the DOM should be updated. Instead, it makes it super convenient for you to precisely specify that, giving you full control over the DOM while offering the same convenience as tools like React.

1linkconst input = state('');

2link

3linkrenderer.render(<>

4link  <input _state={input} type='text' placeholder='Type something ...'/>

5link  <div>{ input } <small>(instant)</small></div>

6link  <div>{ pipe(input, debounce(500)) } <small>(.5s delay)</small></div>

7link</>).on(document.body);

Playground

linktouch_app Simplicity

callbag-jsx is pretty simple under the hood: It just binds callbags to corresponding DOM nodes. There is no virtual DOM, no dirty model checking, etc. You won't have bugs for creating a state in an if-clause (like this) or forgetting to write data = data (like this), because there are no such weird rules here.

1linkconst x = <div>Hellow World!</div>;

2link

3linkrenderer.render(x).on(document.body);

Here x IS the DOM element that appears on screen, not a proxy for it.

1linkfunction MyComp(...) { ... }

2link

3linkrenderer.render(<MyComp/>).on(document.body);

Here MyComp is called only once, when the render function is called. Not whenever the framework decides to run it.

linkdevice_hub State Management

With callbags modeling reactivity, you do not need external state management tools such as Redux. You can even manage complex state-trees seamlessly as callbag-jsx is integrated with callbag-state by default.

1linkconst data = state([0, 0, 0, 0]);

2link

3linkrenderer.render(<>

4link  State: {expr($ => $(data).join(', '))}

5link  <ol>

6link    <List of={data} each={i =>

7link      <li onclick={() => i.set(i.get() + 1)}>

8link        clicked {i} times

9link      </li>

10link    }/>

11link  </ol>

12link</>).on(document.body);

Playground

linkspeed Performance

Due to its inherent simplicity, callbag-jsx is pretty light-weight (~7kb runtime) and your app becomes interactive pretty quickly. It is also much faster than most popular frameworks in updating the DOM.

Benchmarked using JS framework benchmark.

linkdeveloper_board Versatility

Also due to its simplicity, callbag-jsx is highly inter-operable and robust. You can use it alongside other frameworks and tools, in other environments (for example in the backend), etc. You can even manually modify the DOM whenever you need to, for example if you need to optimize some particular section of your app for maximum performance.

Control Simplicity State Management Performance Versatility