Hacker News new | ask | show | jobs
by crubier 2291 days ago
I dislike the templating pseudo language of Svelte (and many view frameworks). Maybe I am spoiled by react but I never ever want to write my view logic in anything else than JS. This is my main blocker for Svelte.
2 comments

I've never fully understood this viewpoint, which comes up a lot in relation to React and JSX specifically.

The templating in Svelte and Vue is (almost) html with some magic sprinkled here and there, so much closer to the end result. Using JS for everything is moving further away from the metal.

What is it about writing views the React way that appeals to you more?

> What is it about writing views the React way that appeals to you more?

JSX is JS thus it's powerful. I prefer to use JS to "sprinkel the magic", rather than using yet another (awkward) template language. Using JS for everything is keeping my mental consistent. I enjoy getting full editor support for the entire app (typing (via TS), warnings, auto-suggestions, etc...). Overall it feels more consistent, more composable and more functional (as in Functional Programming) to me.

What I found on several consecutive projects was that less the HTML generation resembles the final HTML, the harder it is for people to keep the CSS selectors wired up correctly. Getting text into the page as fast as possible at the cost of layout issues is a sucker's bet.

You can't ship until it looks good, and the longer features are in-flight the worse management feels about the team's abilities.

A utility-first compile-time CSS framework (eg Tailwind) should be a perfect fit for this scenario, on multiple levels
Two of the projects I'm thinking of used Sass or Less. The problem is on figuring out why you have black text on a black background because your CSS selectors no longer match the DOM structure, when the DOM structure is split up and/or not even HTML-like anymore.

You don't want situations where senior staff have to intervene on what should be a straightforward issue. It gums up the works.

I dislike Vue and similar templates because the result is not used as HTML, it's used as JS to generate HTML, but tries to imitate HTML. I feel the same way about JSX.

IMO a just a simple function/array based templates work better like this that I have used recently:

div({class: 'test'}, b({}, 'Hello world!'))

Or for the array syntax:

['div', {class: 'test'}, ['b', {}, 'Hello world!']]

To my mind the templating language isn't that different to JSX, <div class={classNameVariable}/> and all that. I agree that if and else statements feel a little less natural but for me it's more than worth the price of admission.
Not having to learn yet another tempting language is why I vastly prefer React. JSX is just JS.