Show HN: Full-stack _hyperscript Node.js TODO web app (with Htmx) | Hacker News Reader

Show HN: Full-stack _hyperscript Node.js TODO web app (with Htmx)

github.com

5 pointsdroobles7 comments

Hey HN! I think _hyperscript is an insanely cool language, and while designed for simple front-end DOM interactions, I thought it would be a cool back-end scripting language as well. So, I slapped together a TODO app with a _hyperscript bootstrapping script based on the original repository's node-hyperscript example.

My repo isn't clean, just something I worked out over a weekend to prove the concept, also an excuse to play with htmx. :)

Please read the README, and let me know how, if anyone's interested, I can work in some of my tweaks to the original repository. I'm kind of a noob with open source stuff.

Open articleView on HN

_hyperscript and htmx are both really cool technologies.

I literally built an entire app on it using PHP that feels faster and smoother than the same thing written in React, especially on a low-end device.

That's awesome! I can't wait to build something more than a toy project with it. It was definitely fun to be able to write some backend endpoints with _hyperscript, one of my favorite features is how the language accesses objects:

  set todo's name to "Do the laundry"

vs.

  todo.name = "Do the laundry"

:) property access is a little bonkers in hyperscript

you can say

  set the todo's name to "Do the laundry"

  set the name of the todo to "Do the laundry"

  set name.todo to "Do the laundry"

"the" is white space in the language (allowed before any expression) and helps w/ readability (according to taste)

The first form is what I would recommend in most cases.

The second form is useful when you want to either highlight the property being set or when you want to tweak how the property binds (e.g. to avoid parenthesizing)

The third form is just there because JavaScript, but it works :)

glad you are enjoying the language!

I am definitely enjoying the language, I think the ideas in htmx + hyperscript have massive potential to shift not only frontend, but some fun scripting in Node as well! For that, I am grateful to you. Would love to get involved anyway I can, might start digging through issues in the repository, I learned quite a bit reading hyperscript's source.

sure, jump on the discord:

https://htmx.org/discord

there is a hyperscript channel

the hyperscript parser is definitely idiosyncratic (i joke that i did the opposite of everything my compilers professor taught me) but once you see the patterns it isn't too bad

It was an experimental project, so we were allowed to go a bit wild with the whole thing and see what we came up with. Htmx really changed the whole dev experience from the ground up.

First, there was no duplication of validation, or business logic on forms between the front end and back end. Everything was written in one language (with the exception of HTML + CSS).

Second, the ability to send updates out-of-band was amazing. A user selecting a change on a form and updating a preview felt instant when compared to the same thing in React.

Third, no crazy hooks or weird keeping state between the view and the data we sent. We just used plain html and inputs to store the state along with CSRF tokens.

My only issue was that the browser didn’t validate the form before submission. So email inputs weren’t validated. I don’t know if that’s an htmx bug or expected behavior, but it was annoying.

htmx should perform HTML5 validations forms on submit events, but other elements can turn on validation via the hx-validate attribute:

https://htmx.org/attributes/hx-validate/

Reply on news.ycombinator.com