DEV Community

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

Collapse
 
chibiblasphem profile image
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),
        )
    )
);
Thread Thread
 
areknawo profile image
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.