[HN Gopher] An agnostic, reactive and minimalist (3kb) JavaScrip...
___________________________________________________________________
An agnostic, reactive and minimalist (3kb) JavaScript UI library
Author : dumindaxsb
Score : 72 points
Date : 2021-07-17 17:25 UTC (2 days ago)
(HTM) web link (caldom.org)
(TXT) w3m dump (caldom.org)
| c-smile wrote:
| 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(<h1>Hello World!</h1>)
|
| 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
| <body><h1>Hello { this.name }</h1></body>; } }
| document.body.patch(<App />);
| document.body.componentUpdate({name:"World Reactively "}); //
| will invoke render()
| tobr wrote:
| > But better.
|
| This blunt dismissal is very rude when you don't even mention
| that you are the author of sciter.
| c-smile wrote:
| My pardon. Yes, I am an author of Sciter.
| Piisamirotta wrote:
| Yep I was thinking the same. Quite an idiot way to advertise
| your own product. I'll leave that link untouched.
| [deleted]
| ctvo wrote:
| Did you forget to add that your library has a licensing cost?
| You don't get access to the source code unless you pay.
| ofrzeta wrote:
| Not exactly "minimalistic" or "lightweight, though, is it?
| c-smile wrote:
| "Better" here means that JSX and things like
| element.append(vDOM/ _JSX expr_ /) and Element.patch(vDOM/
| _JSX expr_ /) are implemented natively - does not need any
| library at all.
|
| Consider these features as an idea for browser vendors / W3C
| to extend DOM that we all use.
|
| With these features (JSX & element.patch(vdom)) we don't need
| whole class of JS frameworks like React, PReact, Mithril.
| Vanilla JS (ES2020 spec) can be used instead. See:
| https://github.com/c-smile/sciter-js-
| sdk/tree/main/docs/md/r...
| zestyping wrote:
| Why is "get the nth element from a list" spelled "eq"?
| pier25 wrote:
| https://api.jquery.com/eq/
| leipert wrote:
| 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?
| zestyping wrote:
| 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.
| seph-reed wrote:
| 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?
| dzonga wrote:
| 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!!
| dumindaxsb wrote:
| 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
| mythrwy wrote:
| I was prepared to say "meh, whatever another JS lib" but this
| actually looks interesting!
|
| Nice work from what I see so far.
| kissgyorgy wrote:
| 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.
| wwweston wrote:
| I also don't like underscores much, but this is JS, so
| shouldn't `window.identifierOfYourChoice = _` alias it without
| much ado?
| dumindaxsb wrote:
| 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.
| beebeepka wrote:
| Some good points, especially about framework abstractions
| sometimes turning certain otherwise trivial things into
| hilariously overcomplicated piles of "why".
|
| Good luck with your lib.
| dgb23 wrote:
| > 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!
| blacktriangle wrote:
| 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 maybe more accurately the new Backbone.js.
| ducharmdev wrote:
| What is the audience for this lightweight framework you have
| in mind? Devs supporting server-rendered sites with minimal
| JavaScript?
|
| In that scenario I can understand how the build step could
| introduce complexity, but I'm a bit surprised to see Svelte
| lumped in with the others simply because it introduces a
| compiler. If size is a concern, it's hard to beat Svelte
| emitting framework-less vanilla JavaScript (whether as a
| complete single-page app, or as piece-meal components you
| sprinkle throughout a more minimal site).
| BiteCode_dev wrote:
| Petit-vue, from vue's author, addresses this already. No
| virtual dom, weigth a few kb.
| [deleted]
___________________________________________________________________
(page generated 2021-07-19 23:01 UTC)