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

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!.<p>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 &amp; vanilla JavaScript. Looking back, it paid really well. Then React &amp; Vue JS happened.<p>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.<p>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 &amp; performant to implement with native APIs.<p>CalDOM tries to solve this by being 100% interoperable with the native DOM. I hope this will be helpful for developers with similar requirements.

Introducing CalDOM, an agnostic, reactive &amp; minimalist (3kb) JavaScript UI library with direct access to native DOM.<p>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 &amp; no-virtual-DOM approach if you will.<p>So you could take full advantage of native APIs &amp; mix it with other libraries to gain superior performance &amp; flexibility in the development process.<p>CalDOM does not require any dependency or tooling. It does not introduce any new syntax. Just pure JS.<p>This is the first time I’m publishing something like this. This was a simple jQuery alternative I made myself years ago &amp; kept on improving it slowly. Worked really hard during the last few months to add reactivity and get it to this level.<p>Please check it out &amp; let me know what you think, the good, bad &amp; your suggestions to improve it.<p>Also, it&#x27;s great if you could contribute to the project: <a href="https:&#x2F;&#x2F;github.com&#x2F;dumijay&#x2F;CalDom" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dumijay&#x2F;CalDom</a>

The aesthetics of a programming language or framework are pretty important IMO, that&#x27;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&#x27;s very ugly.

Looks interesting! Kudos on the well documented source, benchmark and website.<p>Are Caldom instances itself always synced with the DOM? e.g. If I create a Caldom instance for all ‘button’ and add an event handler for ‘click’. Now another piece of JavaScript adds a button to the page, will the event handler also trigger for that button or just the buttons when I first instantiated Caldom?

That reminds me, few weeks ago, I read that Preact (a 3kb React alternative) could soon become faster than Vanilla JS.<p>Source: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;_developit&#x2F;status&#x2F;1412451442946981890" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;_developit&#x2F;status&#x2F;1412451442946981890</a>

Hope this is helpful: the docs at <a href="https:&#x2F;&#x2F;caldom.org&#x2F;docs&#x2F;" rel="nofollow">https:&#x2F;&#x2F;caldom.org&#x2F;docs&#x2F;</a> have the table of contents cut off if the window is less than about 1800 px wide. Lots of screens are 1440 or 1280 or even 1024 px wide and won&#x27;t be able to properly view the documentation. I think it would only take a few simple CSS changes to fix this.

Since I&#x27;ve started using Svelte (HTML-oriented, rather than JS-oriented), every other framework feels like such a mess.<p>I highly recommend React&#x2F;Vue folks to check it out, it&#x27;s literally 2x&#x27;d my productivity and completely obliterated the mental RAM i had to keep in order to &quot;think in react&quot;

Oh damn. I&#x27;ve been working on a project using very similar tricks for the passed ~3 years.<p>I&#x27;m assuming state is a proxy and you&#x27;re using the single threaded nature of JS to make render functions dependent on accessed variables?

Am I the only one to write my own “framework” from scratch every time I start a new project?<p>These new “super lightweight frameworks” are only 3kb and as fast as vanilla js because they really don’t do much...<p>They always end up getting in the way though one way or another.<p>Writing a state and updating the DOM when the state changes really isn’t complicated at all.<p>People who don’t know how to do it need vanilla js template projects, not frameworks...

lately been using Mithril, small api surface but it&#x27;s been good. I&#x27;m enjoying writing JS frontends, again! :) some things can be tricky but the community is helpful. I&#x27;m glad others are making tool-less frameworks. just plug it in the script tag and go to work. so props to the author for making something lightweight and straightforward!!

Interesting I&#x27;d still go for Lit (<a href="https:&#x2F;&#x2F;lit.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;lit.dev&#x2F;</a>) though if you want something light weight and no&#x2F;little build.

What does &quot;agnostic&quot; really mean here? Or, how is something like React not &quot;agnostic&quot;?

Why is &quot;get the nth element from a list&quot; spelled &quot;eq&quot;?

For the note: Sciter ( <a href="https:&#x2F;&#x2F;sciter.com" rel="nofollow">https:&#x2F;&#x2F;sciter.com</a> ) implements CalDOM features out of the box. But better.<p>In Sciter DOM and vDOM are equally honored.<p>This CalDOM&#x27;s (DOM + vDOM population):<p><pre><code> _(&quot;#output-1&quot;) .append( _(&quot;+h1&quot;).text(&quot;Hello World!&quot;) ); </code></pre> In Sciter is<p><pre><code> document.$(&quot;#output-1&quot;) .append(&lt;h1&gt;Hello World!&lt;&#x2F;h1&gt;) </code></pre> And this reactive CalDOM:<p><pre><code> let app = _().react( {}, { render: state =&gt; _( &quot;+h1&quot;, `Hello ${state.name}` ) &#x2F;&#x2F;This is XSS safe } ) _(&quot;#output-2&quot;, app ); &#x2F;&#x2F;Edit below line to update state app.state.name = &quot;World Reactively &quot;; </code></pre> in Sciter is<p><pre><code> class App extends Element { name = &quot;unknown&quot;; render() { return &lt;body&gt;&lt;h1&gt;Hello { this.name }&lt;&#x2F;h1&gt;&lt;&#x2F;body&gt;; } } document.body.patch(&lt;App &#x2F;&gt;); document.body.componentUpdate({name:&quot;World Reactively &quot;}); &#x2F;&#x2F; will invoke render()</code></pre>