For context: this Callbag-JSX, a dead-simple, super predictable front-end library that closely resembles React in style. The core idea is to use explicitly reactive literals (in this case, callbags) and just allow embedding them in DOM (that is described by JSX, hence the name). This means:
- The library doesn't do much. There is no VDOM, DOM reconciliation, etc. Its a JSX-compliant wrapper for DOM APIs, that also supports reactive elements.
- The library is extremely predictable. A component is just a function. It will be called exactly once, when you call it (i.e. when you write <MyComponent/>). You can "use state" anywhere in the code, not just in "Components". There are no weird rules (such as React's hook rules).
- The end result is surprisingly similar to React in style and convenience. That said, some stuff get more explicit. Where in React you would write `{x + y}`, here you need to write `{expr($ => $(x) + $(y))}` because `x` and `y` are now explicitly reactive literals and not plain JS variables.
- Bonus for those who like reactive programming: you can use transforms (such as debounce, throttle, flattening, etc) easily on your states, as all of this comes from an independent specification for reactive literals (callbags specification).
- Also bonus: Since it doesn't do much, Callbag-JSX doesn't have much code and so is faster and more light-weight than Angular or React. That said, if performance is your primary concern, there are other options out there.
The first thing I look for in a React contender is how to write a stateful component and how to use that in another component. It's not clear to me how to have local state. Maybe put that on the front page?
An example of using local state is on the first page (the last example). It might seem unfamiliar because it does not use components, and that is simply because "local state" in Callbag-JSX is simply a "local variable" in JavaScript, which can be defined in any scope.
As for components: you are correct, there are no examples of components on the first page. There is one in "Getting Started", but that is a pretty simple one with the state defined outside of the component. That said, "components" in Callbag-JSX are just functions, "stateful components" are functions with closure. Though perhaps I should elaborate on that further.
3 comments
[ 1.6 ms ] story [ 18.7 ms ] thread- The library doesn't do much. There is no VDOM, DOM reconciliation, etc. Its a JSX-compliant wrapper for DOM APIs, that also supports reactive elements.
- The library is extremely predictable. A component is just a function. It will be called exactly once, when you call it (i.e. when you write <MyComponent/>). You can "use state" anywhere in the code, not just in "Components". There are no weird rules (such as React's hook rules).
- The end result is surprisingly similar to React in style and convenience. That said, some stuff get more explicit. Where in React you would write `{x + y}`, here you need to write `{expr($ => $(x) + $(y))}` because `x` and `y` are now explicitly reactive literals and not plain JS variables.
- Bonus for those who like reactive programming: you can use transforms (such as debounce, throttle, flattening, etc) easily on your states, as all of this comes from an independent specification for reactive literals (callbags specification).
- Also bonus: Since it doesn't do much, Callbag-JSX doesn't have much code and so is faster and more light-weight than Angular or React. That said, if performance is your primary concern, there are other options out there.
As for components: you are correct, there are no examples of components on the first page. There is one in "Getting Started", but that is a pretty simple one with the state defined outside of the component. That said, "components" in Callbag-JSX are just functions, "stateful components" are functions with closure. Though perhaps I should elaborate on that further.