Comment by JimDabell
6 months ago
> yes we do now know what good syntax for templating is, it's basically jsx (and I'm saying this as someone who's really not a fan of React). It took the whole web by storm, it's been adapted for all kinds of frameworks, and it's undeniable that all js templating systems converged towards common attributes: templates-as-expressions, composition via nesting and control flow with just javascript (instead of specific template syntax).
This is not true. For instance:
Vue uses markup-based templates like this:
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
Svelte uses text-based templates like this:
<ul>
{#each items as item}
<li>{item.message}</li>
{/each}
</ul>
Angular uses markup-based templates like this:
<ul>
<li *ngFor="let item of items">
{{ item.message }}
</li>
</ul>
And let’s not forget that the world doesn’t begin and end with JavaScript. Most other templating systems are either markup-based or text-based. For instance, Jinja2 is text-based:
<ul>
{% for item in items %}
<li>{{ item.message }}</li>
{% endfor %}
</ul>
JSX really isn’t that great. Sometimes it feels like most React devs don’t know how to write a for loop or if statement because they mostly use map(), ternaries, and short-circuiting, which are not very ergonomic compared with markup-based approaches.
> JSX really isn’t that great. Sometimes it feels like most React devs don’t know how to write a for loop or if statement because they mostly use map(), ternaries, and short-circuiting, which are not very ergonomic compared with markup-based approaches.
I'm the last person to vouch for React and the horrors it has inflicted upon web development, but the one thing it definitely got right compared to Angular (and Vue) is the use of JS for control flow, rather than fake attributes and whole new language.
JSX is as much a new language as Vue’s templating. JSX extends JavaScript syntax; Vue extends HTML syntax.
If you’re working on generating markup, it makes more sense to do that at the markup level than constantly switch between markup and imperative JavaScript.
It might use JavaScript for control flow, but does it really count when it uses it in a way that is not idiomatic at all? It’s not idiomatic JavaScript to use map instead of for everywhere, and it’s not idiomatic JavaScript to use ternaries instead of if everywhere. Writing JSX looks very different to writing normal JavaScript.
The difference is that JSX is using control flow from an actual programming language, whereas Vue is shoehorning control flow into declarative markup. This is the single reason React won the frontend framework market: they got the templating right.
PS: in modern JavaScript, using map rather than for loops is more idiomatic!
7 replies →