It’s hard to justify using anything other than JS or if you wanna be fancy, Web Assbly, for the FE.
Any other front end language involves generating Javascript from your language, which inevitably ends up with you making a weird Frankenstein project that mixes the two.
I’d rather just use stuff like Webpack or Vite to compile my JS front-end out of JS (or TS) from the start. It always ends up being a cleaner result.
My backend though can be whatever the fuck I want it to be.
But if you ever think dynamically compiling/transpiling a JS front end on the fly on demand is a good idea, instead of simply just delivering static pre-compiled/transpiled pages, you’re part of the problem for why the web is so slow and bloated.
It’s wild how crazy of projects people will build that take 3 entire seconds to just deliver a 500kb static form that doesn’t even need angular to do anything. They turn a couple hundred kb into several mb for no useful reason, it’s wild.
But yeah, I mostly blame the project managers that encourage this behavior, it’s wild how much overengineering goes into basic stuff like making mostly static websites.
Same, plain old HTML, and if I need some reactivity then Stimulus. And if need even more reactivity, then VueJS / Alpine. If the form can’t be submitted via a regular submit button, it infuriates me.
To my understanding, you can’t really use WebAssembly for the frontend - it doesn’t support manipulating the DOM, so you still need to offload a lot of the work to JS. It’s an uncontested language when it comes to web frontend.
It does support it, it’s just slower than JS. WA is faster in other aspects though, so frameworks that compile to WA (like the Rust framework Leptos) still end up being faster than a lot of JS ones.
I find that the only reason for SSR existence is to be able to just move a JS frontend to the backend for SEO/client performonce reasons with almost no effort. If the frontend really needs to be highly interactive then yeah, a FE framework makes things easier. But then you are locking yourself to using JS in the backend. Voluntarily locking yourself to use an objectively bad language.
Then there are the react/angular/other people, who build everything in these frontends.
I really hope tools like htmx gain traction, since it looks like a model able to solve the current JS madness.
I’m not liking htmx, I checked it out, it seemed promising, but it has giant gaping security holes in it so I can’t endorse it.
I have been sticking to using Ejs with html-bundler-webpack
The combo is lightning fast and gives me a solid usability of html partials so I can modularize my front end in re-useable chunks.
It compiles to the static site fast for iterative development, it has everything I need baked in for common needs (minification, bundling, transpiling, cache busting, integrity, crossorigin, tree shaking, etc etx)
I like how it let’s me just focus on actually writing the html + js + css and not have to muck around with thirty boilerplate steps to just make the app run.
If I need a lot of reactivity I’ll use vue or angular but I so so rarely need that.
And now with the template element, half the time reactivity can just be done with those.
Only time I actually need react/vue is when I have to frequently mutate/delete in the DOM.
But if I purely am additive, adding things to the DOM, template elements are plenty.
Could you elaborate on the htmx security holes? I only know about xss attacks, and for those it’s trivial to sanitize in the backend.
I too gravitate towards just templating for static or simple interactivity, but for pages that need SEO and interactivity I’m still wondering what’s a good solution that doesn’t involve SSR and a js framework. For a recent project I had I generated the html in php and sent a lot of pure js for dom manipulation
Htmx has a bunch of logic that basically completely bypasses Content Security Policy stuff, as it has its own pseudo baked in “execute inline js” logic that executes arbitrary javascript via attributes on html elements.
Since this gets executed by the HTMX logic you load in from their library, it effectively allows an attacker to arbitrarily execute js via manipulating the DOM, and Content Security Policy won’t pick it up because HTMX parses the attribute and executes on behalf of it (and you have already whitelisted HTMX in your CSP for it to function)
Result: It punctures a giant hole in your CSP, rendering it useless.
There’s technically a flag you can flip to disable this functionality, but its via the dom so… not reliable imo. If I could pre-compile HTMX ahead of time with that functionality completely disabled to the degree it doesnt even get compiled into the output .js at all, then I would trust it.
But the fact all the logic is still technically there in the library I have loaded and I am purely relying on “this flag in the dom should block this from working, probably”, I don’t see that as very secure.
So until that gets fixed and I can compile htmx with webpack or vite in order to completely treeshake that functionality right the hell out of my output, I aint gonna recommend anyone use it if they want an iota of security on their site. It’s got literally baked in security bypasses, don’t use it.
Hell Id even just be happy if they released a “htmx-lite” package I could use, that just doesnt have that functionality baked in, thatd be enough to make me consider it.
It’s hard to justify using anything other than JS or if you wanna be fancy, Web Assbly, for the FE.
Any other front end language involves generating Javascript from your language, which inevitably ends up with you making a weird Frankenstein project that mixes the two.
I’d rather just use stuff like Webpack or Vite to compile my JS front-end out of JS (or TS) from the start. It always ends up being a cleaner result.
My backend though can be whatever the fuck I want it to be.
But if you ever think dynamically compiling/transpiling a JS front end on the fly on demand is a good idea, instead of simply just delivering static pre-compiled/transpiled pages, you’re part of the problem for why the web is so slow and bloated.
It’s wild how crazy of projects people will build that take 3 entire seconds to just deliver a 500kb static form that doesn’t even need angular to do anything. They turn a couple hundred kb into several mb for no useful reason, it’s wild.
On that last bit. I agree with you, but people are getting paid to produce, and since they probably just know angular, they use angular everywhere.
I prefer html personally :x
But yeah, I mostly blame the project managers that encourage this behavior, it’s wild how much overengineering goes into basic stuff like making mostly static websites.
Same, plain old HTML, and if I need some reactivity then Stimulus. And if need even more reactivity, then VueJS / Alpine. If the form can’t be submitted via a regular submit button, it infuriates me.
To my understanding, you can’t really use WebAssembly for the frontend - it doesn’t support manipulating the DOM, so you still need to offload a lot of the work to JS. It’s an uncontested language when it comes to web frontend.
It does support it, it’s just slower than JS. WA is faster in other aspects though, so frameworks that compile to WA (like the Rust framework Leptos) still end up being faster than a lot of JS ones.
I find that the only reason for SSR existence is to be able to just move a JS frontend to the backend for SEO/client performonce reasons with almost no effort. If the frontend really needs to be highly interactive then yeah, a FE framework makes things easier. But then you are locking yourself to using JS in the backend. Voluntarily locking yourself to use an objectively bad language.
Then there are the react/angular/other people, who build everything in these frontends.
I really hope tools like htmx gain traction, since it looks like a model able to solve the current JS madness.
I’m not liking htmx, I checked it out, it seemed promising, but it has giant gaping security holes in it so I can’t endorse it.
I have been sticking to using Ejs with html-bundler-webpack
The combo is lightning fast and gives me a solid usability of html partials so I can modularize my front end in re-useable chunks.
It compiles to the static site fast for iterative development, it has everything I need baked in for common needs (minification, bundling, transpiling, cache busting, integrity, crossorigin, tree shaking, etc etx)
I like how it let’s me just focus on actually writing the html + js + css and not have to muck around with thirty boilerplate steps to just make the app run.
If I need a lot of reactivity I’ll use vue or angular but I so so rarely need that.
And now with the template element, half the time reactivity can just be done with those.
Only time I actually need react/vue is when I have to frequently mutate/delete in the DOM.
But if I purely am additive, adding things to the DOM, template elements are plenty.
Could you elaborate on the htmx security holes? I only know about xss attacks, and for those it’s trivial to sanitize in the backend.
I too gravitate towards just templating for static or simple interactivity, but for pages that need SEO and interactivity I’m still wondering what’s a good solution that doesn’t involve SSR and a js framework. For a recent project I had I generated the html in php and sent a lot of pure js for dom manipulation
Htmx has a bunch of logic that basically completely bypasses Content Security Policy stuff, as it has its own pseudo baked in “execute inline js” logic that executes arbitrary javascript via attributes on html elements.
Since this gets executed by the HTMX logic you load in from their library, it effectively allows an attacker to arbitrarily execute js via manipulating the DOM, and Content Security Policy won’t pick it up because HTMX parses the attribute and executes on behalf of it (and you have already whitelisted HTMX in your CSP for it to function)
Result: It punctures a giant hole in your CSP, rendering it useless.
There’s technically a flag you can flip to disable this functionality, but its via the dom so… not reliable imo. If I could pre-compile HTMX ahead of time with that functionality completely disabled to the degree it doesnt even get compiled into the output .js at all, then I would trust it.
But the fact all the logic is still technically there in the library I have loaded and I am purely relying on “this flag in the dom should block this from working, probably”, I don’t see that as very secure.
So until that gets fixed and I can compile htmx with webpack or vite in order to completely treeshake that functionality right the hell out of my output, I aint gonna recommend anyone use it if they want an iota of security on their site. It’s got literally baked in security bypasses, don’t use it.
Hell Id even just be happy if they released a “htmx-lite” package I could use, that just doesnt have that functionality baked in, thatd be enough to make me consider it.