What is EchoX?

EchoX is The lightweight reactive UI framework for declarative DOM manipulation, alternative to React, Vue and jQuery for small projects especially.

The philosophy for EchoX is UI = f(DOM, Reactive), please keep reading to find out why! Also, EchoX focus on simplicity, so there are only few APIs for now!

Building UI

EchoX provides a declarative way to building user interfaces with pure function calls. A HTML proxy object exported to create native DOM directly. For example, to create a hello world message:

// The dom variable is a native DOM, not a virtual dom!!!
const dom = HTML.span({style: "font-size: 10"}, ["hello World"]);

// So you can directly append dom to the DOM tree!
container.appendChild(dom);

This is the DOM in the philosophy. Also, You can also can create nested structures using HTML. For example, let's create a counter:

const dom = HTML.div([
  HTML.button({style: "background: red"}, ["👍"]),
  HTML.button({style: "background: red"}, ["👎"]),
  HTML.span([0]),
]);

Please refer to EchoX DOM from more information.

If you only want a static DOM, this is all you need to know how about EchoX! Otherwise, keep reading!

Applying Reactivity

EchoX exports one method reactive for reactivity. For example, let's make the counter interactive:

const [scope] = ex
  .reactive()
  .state("value", 0)
  .computed("double", (d) => d.value * 2)
  .effect((d) => console.log(d.value, d.double))
  .join();

const dom = HTML.div([
  HTML.button({onclick: () => scope.value++}, ["👍"]),
  HTML.button({onclick: () => scope.value--}, ["👎"]),
  HTML.span([() => state.double]),
]);

EchoX.reactive returns a reactive scope, where stores the states you defined. Then you can bind states with the attributes or child nodes of DOMs using use. This is the reactive in the philosophy.

Please refer to EchoX Reactive for more information.

What's more?

That's all! But maybe server side rendering (SSR) in the future?