@hawkticehurst This is very interesting. I don't think I'm sold on an `x-signal` custom element (auto coercion and reliance on `innerHTML` seem sketchy to me), but it's a unique concept to explore for sure.
If it's interesting to you, I'm doing something not too dissimilar with #HydroActive. It's not quite defining state in HTML like you are, but it does focus on reading initial values from pre-rendered HTML with signals as a reactivity mechanism.
Just released v0.1.7 of #HydroActive with the main new feature being support of the "On-Demand Definitions" community protocol I recently proposed. If you're interested to try it out, this is an easy way to give it a shot.
https://github.com/dgp1130/HydroActive/releases/tag/releases%2F0.1.7
https://github.com/webcomponents-cg/community-protocols/pull/67
Just published #HydroActive v0.1.4 with #ShadowDOM support!
https://github.com/dgp1130/HydroActive/releases/tag/releases%2F0.1.4
Now you can call `host.shadow.query('...')` to easily scope a query to the shadow root of an element.
I had been hoping to spend some time this weekend on #HydroActive, but #Akuma is just too much fun right now.
What even is #hydration?
I just published a new video update on #HydroActive exploring exactly what the term means, what problems you encounter when you hydrate with plain #WebComponents and how HydroActive can help with those problems.
I also give an overview of the `defer-hydration` community protocol and how we can use it provide a common hydration interface.
Recorded another video for #HydroActive today! This one will be focused on what exactly #hydration actually means and how HydroActive helps you solve some key problems with it.
I think the audio should come out better this time, so it's hope it works out 🤞.
New release of #HydroActive re-works some of the DOM access APIs and improves overall hydration support with more comprehensive examples.
https://github.com/dgp1130/HydroActive/releases/tag/releases%2F0.1.1
My next milestone is put together another video which walks through the changes and some of the design decisions which went into hydration and the weird nuances it transparently solves for you in ways you would never notice as a user. Very interesting discussion coming! 😁
Published: New #YouTube video on #HydroActive where I:
* (re)introduce what HydroActive is (a webcomponent library for adding hydration and reactivity to primarily server-side rendered content)
* discuss the problems it's attempting to solve
* explain the core design principles behind the project
* demo some basic components and use cases
https://youtu.be/kTDgjF4a_oU?si=_EKTTgt6mzVyCMjg
While this is retreading some old ground from my previous video, the goal here is to kick off a series of (hopefully shorter) videos on specific concepts in HydroActive and how it evolves over time. Stay tuned for more content in the future!
Been struggling a lot with staying motivated with anything lately.
I've been sitting on a 90% done #YouTube video on #HydroActive but can't quite bring myself to get it over the finish line.
No games have really grabbed my attention. I tried #Prey and I can tell it's good, but just failed to grab me. I think I'm just not in the right mental state right now to enjoy it.
I've been watching #EldenRing #BingoBrawlers which is good time sink, but doesn't exactly make me feel productive. I tried a bingo seed myself, but I feel like it has a pretty high barrier to entry.
Maybe I could get back into a #Zelda #Randomizer? At this point I'm basically just waiting for #ShadowsOfTheErdtree to come out.
Anything that's worked for you to build motivation and passion?
@oxharris @fabrice @slightlyoff Interesting stuff, glad to see more innovation in this space. It's a unique approach for sure.
The reactivity stuff you're talking about reminds me a lot of #HydroActive, which tries to tackle a similar problem in a very different way.
https://github.com/dgp1130/HydroActive/
The HTML modules stuff is interesting. I've been doing similar explorations in this space recently which might be relevant to you.
Recorded a new video for #HydroActive the other day and working through editing it now.
So far I've learned a few things about myself:
1. I have no intrinsic sense of audio quality.
2. I say "definitely" as a filler word way too much where it doesn't have any meaning.
3. I say "not to mention" as a transition phrase like 80% of the time.
Very enlightening experience overall.
The more I look into how #WebComponents implicitly "constructs" existing elements on the page, the more I'm convinced it's a terrible idea. It's so weird and unintuitive to have an element which already exists, has data, and is being used by the page to *then* be "constructed" as a completely different object.
#JavaScript semantics weren't designed for this and you run into some super weird edge cases with field initializers, property descriptors, and (now) decorators.
I'm sure other approaches to this problem were equally bad, so I'm not blaming the spec authors here. Just observing that I've gone through a lot of pain and suffering which comes from this one root cause in particular.
This is going to be a real problem for #HydroActive, but I'm not sure it's fixable at this point in browsers. I think I'll likely have to design around it in some capacity. Maybe I'll do a blog post to articulate all these edge cases and challenges.
Are there any good #web conferences / meetups with an #RFP open in the #BayArea or virtual?
There are a few projects I've been working on which I'd love to give talks about and share with the community (not Angular related). Could be talking about any/all of:
1. #HydroActive - A different take on hydration in an HTML-first world. https://github.com/dgp1130/HydroActive/
2. #rules_prerender - A #Bazel ruleset serving as a fast and scalable #StaticSiteGenerator. https://github.com/dgp1130/rules_prerender/
3. #HTMLFragments - A no-tooling, web standard-based approach to HTML over the wire. https://blog.dwac.dev/posts/html-fragments/
Greatly appreciate boosts for reach!
@mdh I can definitely see the argument that better #RPC technologies would reduce the desire for the client and the server to be the same language. Though in my experience I don't think I've ever seen shared logic in the API layer beyond #TypeScript types.
The environments are so different between the browser and Node that you have to really go out of your way to write portable #JavaScript.
Server-side rendering is the killer feature which usually shares code between the frontend and backend. If we could do that without either:
1) forcing the client JS to run on the server or
2) duplicating the rendering logic on the server
then users would have a lot more freedom to pick their preferred server language and ecosystem. #HydroActive does this.
Even if that was super successful, I doubt it would meaningfully reduce the developers using Node. JavaScript os just too big and developers don't want to context switch between different languages IMHO.
@jerod It's a bit early, but how about a #WebComponent library for adding hydration and interactivity without duplicating your build or rendering logic?
https://techhub.social/@develwithoutacause/109547375333703560
And the wait is over! Check out my *first* #YouTube video:
Introducing #HydroActive, an experimental #WebComponent library for easily adding hydration and reactivity to pre-rendered HTML.
I walk through the motivation for the library, the #UX and #DX I'm trying to create, and then show a whole bunch of demos and how they work. I learned a lot building this library and I hope it's interesting and useful to you too!
