3 ms·

I don't do web stuff for a living, but I've been hacking since the early days of JavaScript - what I don't understand is what happened to separation of content,

by exe34 2y ago

I don't do web stuff for a living, but I've been hacking since the early days of JavaScript - what I don't understand is what happened to separation of content, layout and interactivity - most of these react et al. monstrosities start with a big mess of JavaScript generating the html as lisp-like nested trees of tags. in that case, why not just use lisp?

phist_mcgee 2y ago
Because not everyone likes writing lisp?
- exe34 2y ago
  writing lisp in JavaScript is so much worse!
ozim 2y ago
It worked for documents and maybe sprinkling jQuery here and there. For web apps it breaks especially for SPAs really quickly. So I believe it went out of the norm like 10 years
- exe34 2y ago
  it's not like SPAs are more responsive today - they're horribly sluggish and things break constantly. modern and trendy doesn't mean better in any way.
aleksiy123 2y ago
People realized that slicing it that way wasn't nice to work with. The htmx guy has a small post on this. https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/
- ndriscoll 2y ago
  The example there is kind of poor. The problem isn't that the implementation is separated (in fact the implementation of `hx-get` is just ignored, which is cheating). The problem is that the jQuery example is using a button id to specify behavior instead of an attribute like the htmx version. Old CSS wisdom was to give your elements meaningful classes and apply properties to those. Or xpath let you do pattern matching on elements/attributes and apply templates to that. So the jquery version could be the same as the htmx one, but you do `$('[hx-get]').on("click"){...}` or whatever (I don't know jQuery/do javascript).
  - recursivedoubts 2y ago
    regardless of what CSS query you use to look the element up, in the jquery example you'd still have your logic (the url, etc) defined elsewhere the htmx version is symmetric with the href attribute in that it completely specifies what is going to happen directly on the element itself of course you could do something in jquery like using a data attribute to store the url and HTTP method, etc, but at that point you'd be building https://intercoolerjs.org https://intercoolerjs.org, the predecessor to htmx that was built on top of jquery
    - exe34 2y ago
      > button hx-get="/clicked" that doesn't look like a complete subroutine to me.
      - recursivedoubts 2y ago
        it’s not, but it is a complete specification of behavior, just as <a href=“/clicked”> is
        exe34 2y ago
        that sounds about as helpful as a chocolate teapot.
        2y ago
- pull_my_finger 2y ago
  2 neat libraries I've found to work like this are Surreal[1] and CSS-Scope-Inline[2] to get your Locality of Behavior (and Style) without a huge overhead. That said, your markup can get unwieldy fairly quick, and you end up with a lot of similar and duplicated code/style blocks. My solution on a personal site, was to also use a backend-style templating library with partials[3], a file watcher[4] to build them automatically etc to kind of SSG a static site while maintaining reusable components. You can see where this is going, at what point does it make sense to just "reach for xyz framework" out of the gate? For as often as people (especially here) cry "ya aint gonna need it", there are at least as many times where people (less vocally) cry silently to themself, "I wish I'd just used a framework instead of unintentionally building a franken-framework". This from a minimalist developer who has been doing it for a long time, with STRONG opinions about the modern state of the art. Honestly, it's very common for me to feel torn about ideals vs actual pragmatism. [1]: https://github.com/gnat/surreal https://github.com/gnat/surreal [2]: https://github.com/gnat/css-scope-inline https://github.com/gnat/css-scope-inline [3]: https://github.com/leafo/lapis https://github.com/leafo/lapis [4]: https://gittup.org/tup https://gittup.org/tup

by exe34 2y ago

phist_mcgee 2y ago

Because not everyone likes writing lisp?

exe34 2y ago
writing lisp in JavaScript is so much worse!

ozim 2y ago

It worked for documents and maybe sprinkling jQuery here and there. For web apps it breaks especially for SPAs really quickly. So I believe it went out of the norm like 10 years

exe34 2y ago
it's not like SPAs are more responsive today - they're horribly sluggish and things break constantly. modern and trendy doesn't mean better in any way.

aleksiy123 2y ago

People realized that slicing it that way wasn't nice to work with. The htmx guy has a small post on this. https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/

ndriscoll 2y ago
The example there is kind of poor. The problem isn't that the implementation is separated (in fact the implementation of `hx-get` is just ignored, which is cheating). The problem is that the jQuery example is using a button id to specify behavior instead of an attribute like the htmx version. Old CSS wisdom was to give your elements meaningful classes and apply properties to those. Or xpath let you do pattern matching on elements/attributes and apply templates to that. So the jquery version could be the same as the htmx one, but you do `$('[hx-get]').on("click"){...}` or whatever (I don't know jQuery/do javascript).
- recursivedoubts 2y ago
  regardless of what CSS query you use to look the element up, in the jquery example you'd still have your logic (the url, etc) defined elsewhere the htmx version is symmetric with the href attribute in that it completely specifies what is going to happen directly on the element itself of course you could do something in jquery like using a data attribute to store the url and HTTP method, etc, but at that point you'd be building https://intercoolerjs.org https://intercoolerjs.org, the predecessor to htmx that was built on top of jquery
  - exe34 2y ago
    > button hx-get="/clicked" that doesn't look like a complete subroutine to me.
    - recursivedoubts 2y ago
      it’s not, but it is a complete specification of behavior, just as <a href=“/clicked”> is
      - exe34 2y ago
        that sounds about as helpful as a chocolate teapot.
        2y ago
pull_my_finger 2y ago
2 neat libraries I've found to work like this are Surreal[1] and CSS-Scope-Inline[2] to get your Locality of Behavior (and Style) without a huge overhead. That said, your markup can get unwieldy fairly quick, and you end up with a lot of similar and duplicated code/style blocks. My solution on a personal site, was to also use a backend-style templating library with partials[3], a file watcher[4] to build them automatically etc to kind of SSG a static site while maintaining reusable components. You can see where this is going, at what point does it make sense to just "reach for xyz framework" out of the gate? For as often as people (especially here) cry "ya aint gonna need it", there are at least as many times where people (less vocally) cry silently to themself, "I wish I'd just used a framework instead of unintentionally building a franken-framework". This from a minimalist developer who has been doing it for a long time, with STRONG opinions about the modern state of the art. Honestly, it's very common for me to feel torn about ideals vs actual pragmatism. [1]: https://github.com/gnat/surreal https://github.com/gnat/surreal [2]: https://github.com/gnat/css-scope-inline https://github.com/gnat/css-scope-inline [3]: https://github.com/leafo/lapis https://github.com/leafo/lapis [4]: https://gittup.org/tup https://gittup.org/tup