enhance.dev icon indicating copy to clipboard operation
enhance.dev copied to clipboard

Include user interaction example

Open JensRoland opened this issue 2 years ago • 6 comments

Love the clean back-to-basics syntax of Enhance! Great work!

One thing that I feel is missing from the docs is how to implement interactivity, since the developer ergonomics of binding syntax is one of the key differentiators in other frameworks.

It could be as complex as a full TodoMVC app or as simple as a "click a button to update some state" example. I wanted to recreate the 'CounterButton' example from this blog post: https://joshcollinsworth.com/blog/introducing-svelte-comparing-with-react-vue#authoring-svelte-components, but ended up having to use the enhance('counter-button', { ... }) syntax, which felt like a step back into non-standard module land.

I understand that Enhance is meant to enhance vanilla JavaScript, and as such it may not offer any syntactic sugar for value binding, but even so, it would be helpful to include a best-practice example of how it should be done.

JensRoland avatar Nov 01 '22 12:11 JensRoland

@JensRoland I did a blog post with a counter example:

https://blog.begin.com/posts/2022-10-14-web-components-server-side-rendering-and-progressive-enhancement

Is that along the lines of what you are looking for?

macdonst avatar Nov 03 '22 14:11 macdonst

Yes, that’s fantastic! It’s a little more terse than I’d hoped, but at the same time I can appreciate the commitment to true progressive enhancement.

JensRoland avatar Nov 03 '22 19:11 JensRoland

@JensRoland did you mean the code is a bit terse? How can it be improved to be more explicit?

I'm re-opening the issue so we can add more docs around this topic.

macdonst avatar Nov 04 '22 03:11 macdonst

I’m sorry, no I just meant the PE pattern requires significantly more code to achieve a dynamic counter than the frameworks demoed in the link I posted, making it a little bit harder to ‘sell’ to developers who grew up in the SPA era.

I guess I was hoping for some syntactic sugar to replace the JS selection-and-event-housekeeping parts of the StateCounter class. I would think something in the vein of htmx would feel like a natural extension of Enhance.

JensRoland avatar Nov 05 '22 08:11 JensRoland

@JensRoland it's coming soon. PE is going to be way easier with Enhance in the not to distant future.

macdonst avatar Dec 12 '22 16:12 macdonst

Amazing news! I’m really excited to see what you come up with - there’s so many benefits to the html-first approach and Enhance has quite possibly the most elegant implementation of a modern html-first framework that I’ve seen.

JensRoland avatar Dec 14 '22 07:12 JensRoland