
Declarative Templates: A Better JavaScript View Layer - jugularkill
https://medium.com/@julienetienne_/declarative-templates-a-better-javascript-view-layer-f6a6ab5a7aa7
======
Pherdnut
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.

------
tchaffee
> 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.

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

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

~~~
tchaffee
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.

~~~
jugularkill
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...](https://github.com/julienetie/hypertext#3-case-create-html-
elements-without-a-virtual-dom)

Currently aside from JSX and things like mustache some devs are using h
[https://github.com/snabbdom/snabbdom#inline-
example](https://github.com/snabbdom/snabbdom#inline-example) and Cycle has a
syntax not far off from what I'm proposing
[http://widdersh.in/tricycle/](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.

~~~
tchaffee
> 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.

~~~
jugularkill
"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.

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

~~~
jugularkill
Will do, eventually ;)

