The Unclear Impact

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?

https://htmx.org/
https://hyperscript.org

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?

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>
)

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)

replies
2
announces
0
likes
1

Re: javascript

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

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.

🤔

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>

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 :)

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

@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:

http://www.tylerchilds.com/tag/examples/index.html

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 https://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.

https://www.youtube.com/watch?v=4eXbUYxZhfE

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

A screenshot of tag's documentation and APIs, read in full at https://tylerchilds.com/tag/examples

@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:

https://markus.oberlehner.net/blog/goodbye-webpack-building-vue-applications-without-webpack

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

https://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.