Discussion on: Why I've made "yet another UI framework"?

[Arek Nawo]

I mentioned it in the post. I know there are many UI libraries already out there, and mine is (to some degree) similar to all of them.
With that said, the main advantage of Isotope is its API. It's designed to be used comfortably without any additional tooling (pure JS), and without any performance or size penalty.
To put it in contrast to some of the other libraries you've listed:

• Preact is basically a lightweight React alternative, thus it's most likely to be used with JSX. Sure, it's optional, but then the development experience (DX drops significantly. Also, Isotope is a tiny bit smaller than Preact.
• Hyperapp is also reliant on JSX to improve the DX, however to a bit lesser degree. It's also smaller than the Isotope.
• Mithril - again, JSX, but also a much bigger size (Mithril min + gzip is the same as Isotope without gzip). However, it can be justified with Mithril being more of a framework than a library (it provides e.g. routing and XHR functionalities)
• Stencil - it's more of its own thing. It's a toolchain intended to simplify the creation of Web Components. Also, if you're interested in Web Components - Isotope should work with them just fine.

As for the performance comparison - I can't say exactly. I tested Isotope against Svelte, React and vanilla JS using this benchmark, and it landed only a bit behind Svelte. I've already opened a PR to add my library to the comparison. But, based on the results, I'd say that Isotope would certainly beat Mithril, don't know about Preact and would be a bit behind Hyperapp.

[Debove Christopher]

Seeing the example in the Playground I don't really understand why the API is the main advantage of isotope :o
To me it seems as much difficult to read than React without JSX. In a sense, yeah it's chainable but what's the real difference between :

const container = view
    .main({
        classes: ["container", "fluid"]
    })
    .div({
        classes: ["columns", "is-centered", "is-vcentered", "is-mobile"]
    })
    .div({
        classes: ["column", "is-narrow"],
        state: {
            input: "",
            todos: []
        },
        styles: {
            width: "70%"
        }
    });
container
    .h1({
        classes: ["has-text-centered", "title"]
    })
    .text("Isotope TODO");
container.$(Form);
container.$(List);

and

const container = React.createElement('main', { className: 'container fluid' },
    React.createElement('div', { className: 'columns is-centered is-vcentered is-mobile' },
        React.createElement('div', { className: 'column is-narrow', style: { width: '70%' } },
            React.createElement('h1', { className: 'has-text-centered title'}, 'Isotope TODO'),
            React.createElement(Form),
            React.createElement(List),
        )
    )
);

[Arek Nawo]

Formatting doesn't do the justification here. 😅 However, I see your point.
IMHO, the div() like methods are better than repetitive React.createElement(), and the ability to supply classes as arrays is also a bit easier than through strings.