Skip to content
loading...
Cover image for Introducing Isotope - statically-dynamic UI library!

Introducing Isotope - statically-dynamic UI library!

areknawo profile image Arek Nawo twitter logo github logo ・1 min read

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!

twitter logo DISCUSS (9)
Discussion
markdown guide
 

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");
}
});

 

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", () => {
    // ...
});
 
 

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

 

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.

 

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.

 

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!

 

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

 

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. 😉

Classic DEV Post from Jan 11 '19

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you are stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Arek Nawo profile image
Hobby web developer. Hobbyist. Programmer. Dreamer. JavaScript and TypeScript lover. 👍 World-a-better-place maker. 🌐