Introducing Isotope - statically-dynamic UI library!

In the last few years, JavaScript exploded in popularity, creating a large niche of thousands of open-source libraries, frameworks and tools. Arguably, the most popular category of which are UI libraries and frameworks, which, together with JS's growth have become increasingly larger and more complicated.

And with this in mind, I wanted to introduce you to Isotope - a simple, lightweight and ultra-fast UI library that aims to fix the overly-complicated landscape of UI libraries and frameworks. It features a different approach to building UI than most of today's tools. It focuses heavily on providing great development experience, without trading performance, or requiring any additional tooling - it's pure JS!

So, if you're interested, go check out the project and let me know your thoughts!

Comments

[Trev]

When we say it's pure JS, what do we mean by that? React uses JSX to abstract HTML without reading an HTML file, it's "pure JS". Vue abstracts both HTML and CSS with JS. Not a criticism just curiosity.

[Arek Nawo]

I understand the concern. In my opinion, neither JSX nor Vue component files are "pure JS". They get transformed to pure JS, but, in case of JSX - it's a superset with support for HTML tags, and in case of Vue components - they're closer to HTML rather than JS. Sure you can use both Vue and React without these improvements - but this wouldn't be as enjoyable.

For Isotope "pure JS" means just that - pure JavaScript that's within the bounds of ECMAScript specification. Also, the API is designed in such a way, that its end-user should feel as comfortable (if not more) as if it was React with JSX or Vue with its templates.

[Trev]

If JS purity is writing in JS syntax with less interpretation of the code, then I'd throw JSX in the same category as Vue components. Not that our opinions really matter that much, Isotope looks cool!

[GabrielFernandes.js]

This is really incredible. I am migrating an application to see its behavior in a real case and only one of the resources is not working, which would be setState ({property: value}). in this case, the return of the state forms me null, getState and setState are not working.

const node = view
.child("div", {
state: { color: "#aaa", change: false },
styles: (node) => ({
color: node.getState("color"),
}),
})
.span("TEXT ONE")
.on("click", (target) => {
node.getState("change");
node.setState({ change: true });
console.log(node.getState("change"));
if (target.target.textContent === "TEXT ONE") {
node.text("TEXT TWO");
} else {
node.text("TEXT ONE");
}
});

[Arek Nawo]

Thanks for feedback! Your error is that you assign the node created by span() method instead of the div() one. Span doesn't have any state and so, you've got null. Simply change the value of your variable, like this:

const node = view.div({
    state: { 
        color: "#aaa",
        change: false
    },
    styles: (node) => ({
        color: node.getState("color"),
    })
});
node.span("TEXT ONE");
node.on("click", () => {
    // ...
});

[GabrielFernandes.js]

Thanks ! S2

[GabrielFernandes.js]

in this case, the state return is null, getState and setState are not working.*

[Giorgos Kontopoulos 👀]

This is looks great. thanks for sharing, perhaps you can give us here an overview of what to expect and how it compares with other known solutions

[Arek Nawo]

Sure, I've got some content about it in preparation. I just wanted the news to settle in first. If you've got any burning questions, feel free to drop them right here. 😉