Declarative Templates: A Better JavaScript View Layer | Hacker News Reader

Declarative Templates: A Better JavaScript View Layer

medium.com

2 pointsjugularkill9 comments

Or just use something like twig where the whole point is to have your view data sorted BEFORE you get to templating, which IMO, is the real source of clutter. Template systems should be boring, stupid, and clean. Making all of the things JavaScript has never been necessary. Definitely better than React or most anything else that's popular though.

> It’s not only pleasantly readable

I find JSX to be more readable. "Tags as first class functions" means I have to parse the functions into HTML as an extra mental step when trying to understand the structure and elements that make up the view.

there({class:'is-no'},extra('Mental Step'));

<there class="is-no"><extra>Mental Step</extra></there>

Spent 10 seconds looking for the closing tags and trying to understand hierarchy on the first version. YMMV. I've been reading HTML for 20 years now.

I hear you. Maybe that wasn't a good attempt of an example how about this https://github.com/julienetie/hypertext#3-case-create-html-e...

Currently aside from JSX and things like mustache some devs are using h https://github.com/snabbdom/snabbdom#inline-example and Cycle has a syntax not far off from what I'm proposing http://widdersh.in/tricycle/ . But the syntax is not actually the big deal, the biggest benefit is the complete separation of logic from semantics.

I don't expect everyone to like it but I don't think it's horrible or difficult to look at when used in a real project.

> the biggest benefit is the complete separation of logic from semantics.

Then maybe allow JSX? The way I write my React components, the view is what you find in the `render()` method, and there is little to no logic there. The big selling point for me with React is that I no longer have to learn yet another templating language. Which seems to be somewhat where you are leaning as well. But being able to read HTML as, well HTML (or something very close like JSX), has a lot of benefits. Just going between code and the browser debugger for example. The mental step of translating between what I see in the browser and what's in my code, is in fact a step.

"The big selling point for me with React is that I no longer have to learn yet another templating language."

Hmm, I get the impression you're tired of having to learn something new and you're happy to stick with what just works for you. . I understand but I'm not sure everyone feel that way, but I would be honest enough to say I think most people in FE development are on your wavelength.

Here's the entire syntax documentation: - Tags are functions - Attributes + props are object literals - Strings are text nodes, - Remaining parameters are child elements

It's nothing but basic JavaScript.

The separation is not enforced by API it's a discipline that can't be forced into React via JSX as far as I've tried.

Here you have: - No transpiler - No logic mixed in semantics - No vague component separation - No wrapping everything in a div (use ...spread) - No new syntax to learn

Maybe it's not for you, but the advantages are more than obvious.

I love it. Please build this so I can use it immediately.

Will do, eventually ;)

Reply on news.ycombinator.com