DEV Community

Cover image for Introducing Isotope - statically-dynamic UI library!
Arek Nawo
Arek Nawo

Posted on • Originally published at areknawo.com

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!

Top comments (9)

Collapse
 
trevdev profile image
Trev • Edited

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.

Collapse
 
areknawo profile image
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.

Collapse
 
trevdev profile image
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!

Collapse
 
ilovecharliemey profile image
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");
}
});

Collapse
 
areknawo profile image
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", () => {
    // ...
});
Collapse
 
ilovecharliemey profile image
GabrielFernandes.js

Thanks ! S2

Collapse
 
ilovecharliemey profile image
GabrielFernandes.js

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

Collapse
 
giorgosk profile image
Giorgos Kontopoulos πŸ‘€ • Edited

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

Collapse
 
areknawo profile image
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. πŸ˜‰