atomicojs / atomico

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
https://atomicojs.dev
MIT License
1.15k stars 43 forks source link

New rendering engine (documentation in progress) #79

Open UpperCod opened 2 years ago

UpperCod commented 2 years ago

The goal of this new render engine is:

1. Experiment with an alternative to virtual-dom without losing JSX support.

As the author of Atomico, I believe that today the support given to JSX is unsurpassed at the level of autocomplete types and more. This is thanks to the committed teams (Typescript, React and Community), so JSX will continue to be a valid syntax within Atomico, but we will change the rendering strategy, eliminating the use of virtualDOM in the future without losing backwards compatibility.

This is possible, since Atomico has never exposed the data generated as the virtualDOM as a way of manipulating data, so Atomico currently does not leverage any functionality using the virtual-dom api, as it happens with React and Preact.

2. Improve performance even more

Although for us the performance is subjective, we believe that moving away from the virtual-dom will improve some of the more complex rendering processes, for example:

  1. Render +100,000 nodes.
  2. Improve memory consumption by removing the overhead of the virtual-dom by rebuilding the dom using an object

3. generate different outputs depending on the environment

With this we seek to give different code outputs depending on the environment, for example React Native, Php or another environment.

How could the output be?

input

<div>hello <span>world</span></div>

output

const div1 = tag("div");
    text("hello");
    const span1 = tag("span");
        text("world");
    span1();
div1(true);