Follow

I’m at the point where I’m wondering if choosing Svelte for NodeKit is a design error in terms of cultural fit and goals. (They want to be the “serverless” framework for Big Tech. I feel like I’m hitting my head against a wall whenever I want to adapt anything for small web use because it’s all geared towards corporate web use.)

Anyone here played with htmx and hyperscript? Any experience with the community?

htmx.org/
hyperscript.org

· · Web · 7 · 2 · 6

Question to JavaScript folks who have experience with Node.js… how does the following (theoretical) code listing for a server-side route that renders an index page with a count that’s persisted in memory on the server and updated any time someone loads the page read to you?

Right, thanks to your feedback, this is what the “hello, world” would look like in htmx versus the equiavelent of what I have now in Svelte.

But there’s one big drawback to htmx… no ES modules and thus no components. That’s a biggie.

🤔

… Unless, of course, I implemented it server-side… right, lots to think about and play with :)

Re: javascript 

@aral my first intuition would be that this always displays 1, because let count = 1 is on the top of the file, and it looks like it always gets executed when the page is rendered :blobfoxglare:

I’d expect a clearer separation between the initialization and the rendering, like

let count = 1; export default function render() { return <div>{count++}</div>; }

or maybe even (goodness forbid!)

let count = useState(1); return <div>{count++}</div>;

(btw, won’t the code display 1 times even on the first request, because the condition count > 1 gets evaluated after the post-increment? granted, I’m not familiar with the order of side-effects in jsx interpolation expressions)

Re: javascript 

@kristof Thanks, Kristóf. Interestingly, that’s exactly how I have it in NodeKit right now :)

i have very little experience with jsx, this might be totally wrong 

@aral i would probably do the count++ in a dedicated statement before returning the template and initialize the variable with 0. depending on how exactly it evaluates templates, you'll probably end up with count not being the same value in the two placeholders, which in turn might give you the plural form even if it displays 1.

i have very little experience with jsx, this might be totally wrong 

@fef Thanks, yeah, I messed up that quick example as the two are separate in the Svelte version (the data is calculated on the server and injected into the client where the display logic is). Now fixed in the follow-up :)

@aral

👋, if i can throw my hat in the ring.

i've kept at that client-side framework/library i've been building. The API has been stable since last July. Documentation in the screenshot or in full at:

tylerchilds.com/tag/examples/i

The only critical change I've made in the past year was removing IndexedDB persistence, since that came with some debugging headaches I didn't want to pass onto others.

As far as my motivations go, I wanted something simple, but capable for beginners and experts. My guiding thoughts throughout writing this were like:

1. if you want to learn to program, you must first learn english
2. what is the minimum viable english and the minimum viable javascript someone needs to know to get up to speed.

if you dig into the source code, i avoided complex concepts like "class", "extends", "this", "bind", "call", and "apply".

The screenshot documentation sums it up, but "render", "read", "write", "style", and "on" is that intersection of english and javascript.

I uploaded this video last week mostly about solidproject.org, but the tail end is me demonstrating the most complex example I wrote of a todomvc.com approach fronted by tag and backed by solid.

youtube.com/watch?v=4eXbUYxZhf

if i could hammer just one point home: the documentation fits in a screenshot.

@aral I’ve got experience with hyperscript. It pushes you towards a pure-JS plus CSS structure, but aside from that it works pretty well.

But it’s big tech, too. Pair it with web components and you have a powerful abstraction.

Here’s a lessons learned for web components: blog.disy.net/developing-webco

@ArneBab @aral Are you talking about the same hyperscript? The older one is where you have a HTML DSL made out of JS functions, the other one a HyperScript-like mini-language for adding some dynamic functionality to web pages without directly writing JS (usually paired with HTMX)

@mhd I’m talking about the h('.foo-class', [something]); hyperscript. @aral

@aral out of curiosity, what about something native to the platform like Web Components. You could try a small library like μhtml for dom-diffing updates and probably figure out a way to handle SSR with it.

Platform-native technology like Web Components and template strings feel like they align more with your work.

github.com/WebReflection/uhtml

@aral You might want to consider Vue.js. Key features:

1. You can make full use of ES modules.
2. Uses regular HTML, CSS and JS syntax in a single file per component, much like Svelte.
3. Fast builds using esbuild and Vite.
4. Can be adopted incrementally.
5. You can even use it without a special build step if you really want to:

markus.oberlehner.net/blog/goo

Performance wise it's not quite as good as Svelte (because virtual DOM), but not too far off.

vitejs.dev/

@mathew oh great, now @aral will tell us what’s ethically wrong about Vue.js and I’ll have to start liking something else 😅 (jk ofc)

@andregil @mathew Haha, no, I’ve played with Vue a bit myself. But if I’m going to switch from Svelte it would have to be for something considerably different that offers lots of other advantages. I consider Vue and Svelte to be of the same general family.

@aral I'm not sure they aim to solve the same thing. HTMX is in the camp of serverside rendering and progressive enhancement, where it aims to put focus back on content in HTML, with lightweight scripting sugar on top. Svelte is a precompiled componentbased SPA JS framework.

Sign in to participate in the conversation
Aral’s Mastodon

This is my personal Mastodon.