Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

caldom.org

Post reply on HN
Print view View original

1–10 of 60 posts

Re: Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

#2

Post by dumindaxsb »

Introducing CalDOM, an agnostic, reactive & minimalist (3kb) JavaScript UI library with direct access to native DOM.

Instead of pulling you into a library-specific magical world, CalDOM let you fully access the DOM directly while keeping the reactivity. A 2-in-1 virtual-DOM & no-virtual-DOM approach if you will.

So you could take full advantage of native APIs & mix it with other libraries to gain superior performance & flexibility in the development process.

CalDOM does not require any dependency or tooling. It does not introduce any new syntax. Just pure JS.

This is the first time I’m publishing something like this. This was a simple jQuery alternative I made myself years ago & kept on improving it slowly. Worked really hard during the last few months to add reactivity and get it to this level.

Please check it out & let me know what you think, the good, bad & your suggestions to improve it.

Also, it's great if you could contribute to the project: https://github.com/dumijay/CalDom

Re: Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

#3

Post by dumindaxsb »

I honestly don’t know where this will lead. Probably all of this is just for nothing. The world has enough UI libraries already. Duh!.

I decided to make my own mini jQuery years ago because I wanted a lightweight library. Also, I wanted to stay close to the native DOM API & vanilla JavaScript. Looking back, it paid really well. Then React & Vue JS happened.

In my opinion, the reactive UI approach bought a huge productivity improvement from the perspective of the developer. Also, it enabled a lot of beginner developers to navigate the programming landscape more easily.

However, this shift also moved people away from the core stuff that’s happening under the hood. As a result, sometimes we have to struggle a lot to find solutions within the library’s limits, which are sometimes hilariously dead simple & performant to implement with native APIs.

CalDOM tries to solve this by being 100% interoperable with the native DOM. I hope this will be helpful for developers with similar requirements.

Re: Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

#4

Post by beebeepka »

dumindaxsb wrote: post #3

I honestly don’t know where this will lead. Probably all of this is just for nothing. The world has enough UI libraries already. Duh!. I decided to make my own mini jQuery years ago because I wanted a lightweight library. Also, I wanted to stay close to the native DOM API & vanilla JavaScript. Looking back, it paid really well. Then React & Vue JS happened. In my opinion, the reactive UI approach bought a huge produc…

Some good points, especially about framework abstractions sometimes turning certain otherwise trivial things into hilariously overcomplicated piles of "why".

Good luck with your lib.

Re: Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

#6

Post by dgb23 »

dumindaxsb wrote: post #3

I honestly don’t know where this will lead. Probably all of this is just for nothing. The world has enough UI libraries already. Duh!. I decided to make my own mini jQuery years ago because I wanted a lightweight library. Also, I wanted to stay close to the native DOM API & vanilla JavaScript. Looking back, it paid really well. Then React & Vue JS happened. In my opinion, the reactive UI approach bought a huge produc…

> I honestly don’t know where this will lead.

The best approach for myself has been implementing the thing I use to some degree as a learning exercise. Not as in "production ready and feature complete" but rather as an exploration of the major mechanisms and basically playing around. It's fun!

Re: Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

#7

Post by c-smile »

For the note: Sciter ( https://sciter.com ) implements CalDOM features out of the box. But better.

In Sciter DOM and vDOM are equally honored.

This CalDOM's (DOM + vDOM population):

    _("#output-1")
      .append(
        _("+h1").text("Hello World!")
      );
In Sciter is

    document.$("#output-1")
      .append(Hello World!)
And this reactive CalDOM:

    let app = _().react(
        {},
        {
            render: state =>
                _( "+h1", `Hello ${state.name}` ) //This is XSS safe
        }
    )

    _("#output-2", app );

    //Edit below line to update state
    app.state.name = "World Reactively ";
in Sciter is

    class App extends Element {
       name = "unknown";
       render() {
         return Hello { this.name };
       }
    }

    document.body.patch();

    document.body.componentUpdate({name:"World Reactively "}); // will invoke render()

Re: Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

#8

Post by ofrzeta »

c-smile wrote: post #7

For the note: Sciter ( https://sciter.com ) implements CalDOM features out of the box. But better. In Sciter DOM and vDOM are equally honored. This CalDOM's (DOM + vDOM population): _("#output-1") .append( _("+h1").text("Hello World!") ); In Sciter is document.$("#output-1") .append( Hello World! ) And this reactive CalDOM: let app = _().react( {}, { render: state => _( "+h1", `Hello ${state.name}` ) //This is XSS sa…

Not exactly "minimalistic" or "lightweight, though, is it?

Re: Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

#9

Post by kissgyorgy »

The aesthetics of a programming language or framework are pretty important IMO, that's one of the reasons Python is my favorit language. This has a lot more punctuation, weird characters (underscore, seriously?), parenthesis and brackets than I ever willing to write or look at. In other words; it's very ugly.

Re: Show HN: CalDOM: An agnostic, reactive and minimalist JavaScript UI library

#10

Post by tobr »

c-smile wrote: post #7

For the note: Sciter ( https://sciter.com ) implements CalDOM features out of the box. But better. In Sciter DOM and vDOM are equally honored. This CalDOM's (DOM + vDOM population): _("#output-1") .append( _("+h1").text("Hello World!") ); In Sciter is document.$("#output-1") .append( Hello World! ) And this reactive CalDOM: let app = _().react( {}, { render: state => _( "+h1", `Hello ${state.name}` ) //This is XSS sa…

> But better.

This blunt dismissal is very rude when you don’t even mention that you are the author of sciter.

Post reply on HN