31–40 of 60 posts
Oh damn. I've been working on a project using very similar tricks for the passed ~3 years. I'm assuming state is a proxy and you're using the single threaded nature of JS to make render functions dependent on accessed variables?
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…
Did you forget to add that your library has a licensing cost? You don't get access to the source code unless you pay.
Interesting I'd still go for Lit ( https://lit.dev/ ) though if you want something light weight and no/little build.
In my opinion, this is the future. Especially, Native Web Components will take over in this decade. CalDOM's long-term plan is to seamlessly merge with native web components when it's widely supported.
lately been using Mithril, small api surface but it's been good. I'm enjoying writing JS frontends, again! :) some things can be tricky but the community is helpful. I'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!!
Hope this is helpful: the docs at https://caldom.org/docs/ 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't be able to properly view the documentation. I think it would only take a few simple CSS changes to fix this.
Earlier quoted context omitted.
Some library like this is going to blow up in popularity eventually. Virtual DOMs are often unnessary abstractions, Svelt introduces it's own whole compilation step, and libs like Vue, Ember, and Angular are just too big. There is clearly a need for a lightweight (on the order of 3kb seems good) "framework" that embraces everything the modern browser lets you do as natively as possible, basically the new jQuery, or m…
You either * write stateful UIs (native, jQuery) * have a Virtual DOM (React, Vue) * use a template language that is JIT or AOT compiled (Angular, Svelte) Those are your choices.
Looks interesting! Kudos on the well documented source, benchmark and website. 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?
No, it's not synced. When you use CalDOM without its reactive features, it's just a wrapper around the native DOM Element (similar to jQuery).
_("button").elem === document.querySelectorAll("button")[0]
Regarding capturing events of future elements: You can achieve this by setting an event listener to the parent.
Eg:
_("body").on("click", e => { if( e.target.matches("button") ) //Do something });
Earlier quoted context omitted.
You either * write stateful UIs (native, jQuery) * have a Virtual DOM (React, Vue) * use a template language that is JIT or AOT compiled (Angular, Svelte) Those are your choices.
If only there was a reactive handlebar
(A predecessor to Svelte)
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.
For the latter Python encourages slug_case_naming_schemes and _ is a valid identifier in Python too. So there's nothing going on here beyond normal Javascript syntax which can be closure heavy -- a main feature of Javascript.