Skip to main content

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

#htmx #hyperscript #thoughts

htmx - high power tools for html

htmx.org
#thoughts #hyperscript #htmx
in reply to Aral Balkan

Aral Balkan
Aral Balkan
• •

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?

#htmx #prototyping #NodeKit #design

Code listing, index.jsx: let count = 1 return ( <div> <h1>Hello, world!</h1> <p>I’ve greeted you {count++} time{count > 1 ? 's' : ''}.</p> </div> )
#design #NodeKit #htmx #prototyping
in reply to Aral Balkan

Kristóf Marussy
Kristóf Marussy
• •
Re: javascript

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)
in reply to Aral Balkan

Aral Balkan
Aral Balkan
• •

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.

🤔

#htmx #svelte #javaScript #js #nodeKit #smallWeb #prototyping

Code listing, index.jsx (NodeKit with htmx, hypothetical): let count = 0 export default () => { count++ return ( <div> <h1>Hello, world!</h1> <p>I’ve greeted you {count} time{count > 1 ? 's' : ''}.</p> </div> ) }
Code listing: index.page. NodeKit with NodeScript (Svelte + server-side Node). (Current version.) <get> let count = 1 export default () => { return {count: count++} } </get> <script> export let data </script> <h1>Hello, world!</h1> <p>I’ve greeted you {data.count} time{data.count > 1 ? 's' : ''}.</p>
#SmallWeb #javascript #js #NodeKit #svelte #htmx #prototyping
in reply to Aral Balkan

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

professional internet cat
professional internet cat
• •
i have very little experience with jsx, this might be totally wrong
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.
in reply to Aral Balkan

Arne Babenhauserheide
Arne Babenhauserheide
• •

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…


Developing web components

What we learned from developing web components in the browser nowadays.
Disy Tech-Blog
in reply to Aral Balkan

Evan
Evan
• •

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


GitHub - WebReflection/uhtml: A micro HTML/SVG render

A micro HTML/SVG render. Contribute to WebReflection/uhtml development by creating an account on GitHub.
GitHub
in reply to Aral Balkan

mathew 🦜☕
mathew 🦜☕
• •

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/


Building Vue.js Applications Without webpack

Learn how to set up a Vue.js project without webpack or any other complicated build tools, including features like code splitting and automatically refreshing the browser during development.
markus.oberlehner.net
in reply to mathew 🦜☕

andregil
andregil
• •
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)
@Aral Balkan
in reply to Aral Balkan

Kerfuffle
Kerfuffle
• •
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.
⇧