Top
Best
New

Posted by mdhb 5 days ago

The time is right for a DOM templating API(justinfagnani.com)
218 points | 249 commentspage 2
wavemode 5 days ago|
I would argue that the proliferation of frontend frameworks is evidence is that we -don't- know what the optimal abstraction is for building frontend applications. We're all still trying to figure that out.

Just look at what happened with Web Components. It didn't take over or become the foundation of everyone's software. It just became yet another competitor [0].

I wish the standards committees would focus their efforts on improving JavaScript the language. That has a much greater and more lasting return on investment.

[0]: https://xkcd.com/927/

jdkoeck 5 days ago||
Is there really a proliferation? At this point it’s 90% React.
branko_d 5 days ago||
I would love to see Web platform become more similar to JVM or .NET CLR - just a bytecode JIT with access to rich layout/rendering engine. Then build whatever you want on top of it.
nine_k 4 days ago||
DOM + CSS is a hugely rich layout / rendering engine. The problem is that it's heavyweight.
notnullorvoid 4 days ago||
This is exactly the kind of high-level feature we need to stop putting standardisation efforts towards, and focus instead on low-level features that provide value for high-level user land abstractions.

There is no value this provides over making a tagged template function and exposing it as a library. If that library is stable with ubiquitous adoption for 5-10 years then maybe there's something to talk about.

rs186 5 days ago||
The author was a core contributor of Google's Lit project: https://github.com/lit/lit
mock-possum 5 days ago|
Lit my beloved

God I love lithtml’s tagged template literals so much more than react’s JSX or Vue’s 3-in-one thing. It’s just html, in strings, in JavaScript. Lit is just a way to make custom elements easier. Man it’s gonna suck when I have to move on from my current gig and get my hands dirty with react again.

troupo 4 days ago||
> It’s just html, in strings, in JavaScript.

It's not. It's a custom HTML-like syntax with lots of custom and weird rules.

unlog 4 days ago|||
Yep, `lit` is contaminating the browser API with their ideas just because their group of people writes the code for the browsers. They should be competing from the outside. Instead of pushing this kind of apis that only fit their mental models.
yoz-y 4 days ago|||
It’s similar enough to html that anybody familiar with html and JS can pick it up. Quirks it has, but I like that using it mostly just feels like building a huge html string.
troupo 4 days ago||
> It’s similar enough to html that

"Similar enough" is a far cry from "It’s just html, in strings, in JavaScript"

> anybody familiar with html and JS can pick it up

Just like JSX. But no one calls JSX "just HTML" (and in React, with rules of hooks, it's no longer "just JS"). In Solid JSX returns actual DOM nodes btw.

> it mostly just feels like building a huge html string.

Because that's what you essentially do. lit runtime parses your custom string, converts it to proper HTML, concatenates that into a string, and then dumps into the document with innerHTML (it does set up data bindings etc. , so it's more than just thay of course)

aatd86 4 days ago||
I don't quite understand. The DOM is/needs a functional API. Why bolt another DSL on top?

Now you have to find a way for javascript to interact with your template language.

While functions are sufficient. That doesn't look like orthogonal language design.

austin-cheney 4 days ago||
People want this because JSX is all they are capable of.

One reason why things like this have never happened before is because the people who need this are only barely capable of working with HTML. The DOM supports a wide variety of technologies far outside and unrelated to HTML.

troupo 4 days ago||
> I don't quite understand. The DOM is/needs a functional API. Why bolt another DSL on top?

There are no parts of DOM APIs that are functional. It's all 90s-era Java OOP-style.

aatd86 4 days ago||
functional in the sense that it uses method calls on objects and javascript has higher order functions. It is a spectrum. I know DOM nodes are objects that use inheritance but I also know javascript is not deemed a "traditional" functional PL of course.
troupo 4 days ago||
Javascript being a decent functional language does not make DOM API functional.

DOM API is 90-s era OOP

llcooliovice 5 days ago||
There is still innovation happening in frameworks. I do wonder if it is too early to start adding things like this to the browser. Web components landed way too early and now we’re stuck with them.
llcooliovice 5 days ago||
> There's no fundamental templating knowledge that's portable between stacks, and native DOM creation APIs like innerHTML are unsafe by default.

setHTML() is already implemented in Chrome/Edge and Firefox so this point is a bit outdated - there is a safe alternative to innerHTML.

infensus 4 days ago|
MDN and caniuse say otherwise. I think there might've been an older specification that got implemented, but it's been revised since
llcooliovice 4 days ago||
Chrome implemented a prototype, then the spec changed and they removed it, then they implemented the new version. I should have been clearer and said Chrome Canary and Firefox Nightly. Not sure when it will reach stable but probably some point this year, they’ve been working on it for ages and Safari is onboard.
stevage 5 days ago||
What exactly is the problem with having the higher levels of web development supported through libraries (React, Vue etc) rather than directly in the browser? Why does this need to happen?
mock-possum 5 days ago|
FTA, which I agree with:

> Developers need to reach for a library, and thus tools like npm or a CDN, to do many basic things. This adds to the overhead of getting started. It makes simple static files and devtools less useful than they could be. There's no fundamental templating knowledge that's portable between stacks, and native DOM creation APIs like innerHTML are unsafe by default.

Remember when you could just drag an html file into your browser, and it would work? No build step, no package install, no web server, just vanilla html+css+javascript?

It would be nice to get to do that again, and the more we move things like .querySelector out of libraries like jQuery and into native browser APIs the better, imo.

That should ideally be the highest calling of frameworks like Lit and packages like Lodash - to be so good that they prove indispensable, and ultimately go native.

bapak 4 days ago||
> It would be nice to get to do that again

The answer to this is both "never gonna happen" and "you already can."

You already can ship a React app in pure JS and even import modules via ESM in the browser from CDN. Performance will suck but you can.

You'll never be able to actually have a complex web app that you can just drag into the browser. As the base API expands, so do the ambitions.

Heck we've had PHP 4 years after HTML just to fill in some blanks, people will always want more than static code.

mosdl 5 days ago||
I miss mozilla's XUL language (and XBL!), those were awesome.
latortuga 5 days ago||
Seems like a comment comes up about XUL every few years and I can't help but be sniped by it. A xulrunner app was my first job out of college in '08, good memories, fun dev environment!
sabellito 5 days ago|||
My company, me as a solo dev, back in 2003-04 built a "single page app" using XUL and iframes. Still has some 200 monthly users, the poor bastards. They have to download Firefox 3.6 iirc, and it only works in an 800x600 window.

XUL was beastly back then though.

Nextgrid 5 days ago||
> Still has some 200 monthly users, the poor bastards. They have to download Firefox 3.6 iirc, and it only works in an 800x600 window.

Out of curiosity, what does that app do to convince people to jump through such hoops? Would you mind sending a link to it?

sabellito 5 days ago|||
It's a full management app for recruiting companies.

There are still 3 companies that use it (since 2008), so their employees don't have a choice really. The app does a lot, so to stop using it the companies would need to hire and migrate to 3-4 other services. I reckon SAP and the kind could do everything as well, but these companies are too small for that.

There isn't a website or anything anymore for me to show, and I haven't been involved in it for over 10 years.

mosdl 5 days ago|||
Quite common, lots of old software that is custom written lives on, be it java apps, old vb stuff, etc
watersb 5 days ago||
there-is-only-XUL
paulrouget 5 days ago||
There is no data!

https://www.mozilla.org/keymaster/gatekeeper/there.is.only.x...

Good old time.

ericyd 5 days ago||
> React doesn't provide a way to explicitly bind to properties and events of DOM elements, or provide directives that apply to an element.

I didn't understand this part, can anyone shed light? What is different between what's being described here and what React does with event listeners, etc?

krebby 5 days ago||
I think this is referring to the fact that React uses synthetic event listeners - it's cheaper to bind an event listener once at the root and do your own element matching than it is to continuously bind and unbind listeners.

https://react.dev/reference/react-dom/components/common#reac...

bevr1337 5 days ago||
> React doesn't provide a way to explicitly bind to properties and events of DOM elements

We can nitpick this point because react has had a ref API for at least 5 years now. Given a ref, all DOM API are available. For events, SyntheticEvent will refer to a native event if it exists.

The SyntheticEvent abstracts vendor discrepancy. Under the hood, react can apply some optimization too.

https://legacy.reactjs.org/docs/events.html https://react.dev/reference/react-dom/components/common#reac...

MrJohz 5 days ago||
The synthetic event also adds its own abstractions though. For example, the `onChange` handler in React behaves very differently to the native DOM `change` event.
bevr1337 5 days ago||
And then some. Switching to react-native or other render targets can also be a doozy. Hopefully the references clarify all the features.
jongjong 5 days ago|
Yes, it's weird that Browsers were so fast to ship CSP rules to prevent XSS attacks by limiting the use of inline scripts but so slow to ship a templating mechanism which would largely solve the problem.

It's like creating regulations which require a specific solution before that solution exists.

More comments...