Comparison with Other Frameworks

speed A note on performance

All frameworks mentioned in this comparison are fast enough for most use cases, and can be further optimized if need be.

callbag-jsx was born out of circumstances were fast enough was not enough, and a realization that because all existing frameworks are designed around the framework detecting and propagating change, most optimizations are equivalent to suppressing the framework and taking manual control.

In contrast, callbag-jsx aims at providing that control as its core principle, trying its best to make it as convenient as existing tools and frameworks without getting in the way.

widgets A note on maturity

Needless to say that all mentioned tools and frameworks are MUCH more mature and with thriving eco-systems. This means that if you want to do something, there is a much higher chance of finding a package designed specifically to do that when using these tools and frameworks, where as in case of callbag-jsx you most probably would need to develop it from scratch.

link React

React and callbag-jsx stylishly share a lot of concepts, from JSX to state management:

1linkimport React, { useState } from 'react';

2linkimport ReactDOM from 'react-dom';

3link

4linkfunction App() {

5link  const [todos, setTodos] = useState([{title: 'Do this'}, {title: 'Do that'}]);

6link  const [next, setNext] = useState('');

7link

8link  const add = () => {

9link    setTodos(todos.concat([{title: next}]));

10link    setNext('');

11link  };

12link

13link  return (<>

14link    <h1>Todos</h1>

15link    <ol>

16link      {todos.map(todo => <li>{todo.title}</li>)}

17link    </ol>

18link    <input type='text' value={next}

19link      onChange={event => setNext(event.target.value)} 

20link      placeholder='What should be done?'/>

21link    <button onClick={add}>Add</button>

22link  </>);

23link}

24link

25linkReactDOM.render(<App />, document.getElementById("root"));

1linkimport { makeRenderer, List } from 'callbag-jsx';

2linkimport { state } from 'callbag-state';

3link

4linkconst renderer = makeRenderer();

5link

6linkconst todos = state([{title: 'Do this'}, {title: 'Do that'}]);

7linkconst next = state('');

8link

9linkconst add = () => {

10link  todos.set(todos.get().concat([{title: next.get()}]));

11link  next.set('');

12link};

13link

14linkrenderer.render(<>

15link  <h1>Todos</h1>

16link  <ol>

17link    <List of={todos} each={todo => <li>{todo.sub('title')}</li>}/>

18link  </ol>

19link  <input type='text' _state={next} placeholder='What should be done?'/>

20link  <button onclick={add}>Add</button>

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

The main difference stems from how this API is achieved: in React, this is basically emulated by virtual DOM and hooks, while in callbag-jsx, it is achieved by explicit use of callbags. As a result, callbag-jsx is faster than React (it does less work) and has a smaller bundle size (it needs less code), while providing more control (e.g. debouncing) and being more robust (e.g. free modification of the DOM).

👉 However, callbag-jsx is more verbose on reactivity. In React, simple JS expressions just work:

1link<div>{myArray.length + 1}</div>

In callbag-jsx, you need to use explicitly reactive expressions:

1link<div>{expr($ => $(myArray).length + 1)}</div>

👉 Additionally, React does impose more structure as it requires developers to break everything into components, while callbag-jsx leaves that completely up to developers.

link Angular

Imagine Angular, but everything is an observable and async pipe is used by default everywhere. Drop everything else from the framework, and you get something pretty close to callbag-jsx.

Because of this, callbag-jsx is faster than Angular with a (much) smaller bundle size, in exchange for being more verbose on reactivity (similar to React). It is notable that Angular also has much more boilerplate code and imposes much stricter structure than callbag-jsx.

It is also notable that Angular is a complete framework equipped with most of the basics you would need for developing an app. callbag-jsx on the other hand is just a rendering library, which means you would need complementary tools alongside it for any proper application.

link Vue.js

Vue.js and callbag-jsx share some notions in reactive state management, specifically with computed properties and reactive expressions. Vue.js is also built around robustness, simplicity and interoperability compared to React and Angular, and also tends to track changes much more precisely than those frameworks.

The end result is that while callbag-jsx is still faster, smaller and more robust than Vue.js, the difference, specifically in terms of performance, is less pronounced compared to Angular or React.

👉 Vue.js has a strict separation of HTML, CSS and JavaScript, while callbag-jsx is JSX based and generally more aligned towards Everything-in-JS style. Vue.js also imposes more structure on the app where as callbag-jsx imposes none.

👉 callbag-jsx is more interoperable / customizable / robust. It does not use virtual DOM so it is more robust in face of manual / external modifications to DOM, and its reactivity system is an independent specification (i.e. callbags).