Hacker News Reader

Comment by ng12 | Hacker News Reader

> which is the standards-based approach that ES6 actually provides for embedded DSLs and templating.

Template literals could not possibly be a replacement for JSX. JSX is Javascript, template literals are strings. JSX isn't a templating language by design, it's one of the primary advantages.

View on HN

JSX is not JavaScript, it's a non-standard bastardization that will never be supported natively in browsers. Its reliance on JavaScript for flow control is so problematic[1] that people have started working around its many glaring inadequacies by adding new language primitives to JavaScript itself via Babel plugins[2].

I do my templating in template literals because using standards-based JavaScript means that I don't need 50MB of fragile packages from npm or a largely superfluous build step during development.

[1] https://github.com/facebook/react/issues/690

[2] https://www.npmjs.com/package/babel-plugin-syntax-do-express...

It was never intended to be supported natively by browsers -- it's syntactic sugar for the React.createElement API. That's what I mean when I say JSX is Javascript.

That issue you linked to is 4 years old and is clearly a reflection of the poster being unfamiliar with React/JSX. The community has since unambiguously decided to avoid inserting more control flow in JSX. Also, I'm not entirely sure what the do/while plugin has to do with JSX.

> I do my templating in template literals

I would argue if you can write your code as easily with template literals as React/JSX your application isn't complex enough to warrant using a framework.

> That issue you linked to is 4 years old and is clearly a reflection of the poster being unfamiliar with React/JSX

And yet the underlying issues still remain unaddressed. There aren't better ways to handle the cases raised in that issue, which is why people resort to adding additional non-standard syntax to work around the warts.

> Also, I'm not entirely sure what the do/while plugin has to do with JSX.

The "do" keyword is not do/while, it's a non-standard language feature that you can use to turn statements into expressions by wrapping them. It's like using an IIFE with a return value so that you can use a conventional "if" or "for" statement in place in JSX.

> I would argue if you can write your code as easily with template literals as React/JSX your application isn't complex enough to warrant using a framework.

I don't think you really understand how template literals work. Tagged templates can be used for more than just basic string interpolation. You can read more on the subject here: https://appendto.com/2017/02/advanced-javascript-es2015-temp... Or have a look at t7, which uses tagged template literals for virtual DOM templating: https://github.com/trueadm/t7

Ah, sorry I misunderstood the plugin. But to the point -- people do all kinds of crazy things in all kinds of languages with all kinds of tools. That doesn't mean there's anything fundamentally broken about them. Now that I know about the existence of the Do plugin I can also definitively say I have no use for it. It's a band-aid for bad code, not a bad framework.

> I don't think you really understand how template literals work

I absolutely do. I use them to internationalize my apps. They're a powerful tool that is not comparable to React/JSX. JSX is not just a template engine which is what you seem to be implying.

To be honest, the lack of it existing in javascript aside, statements-as-expressions is a useful thing - no need to remember the semantics of `if {} else {}` vs `? :`, ability to have very complex (multi-line) expressions, and in languages with RAII, blocks being expressions means it's easy and clear to be able to acquire a resource in order to calculate a single value.

Last I heard (from a twitter thread with those in the know), the "do" keyword is considered highly likely to become standard.

Actually you can get pretty close to JSX with es6 template strings and no external transpiler dependency.

https://github.com/trueadm/t7

Flow control using js is very simple. For the example you linked it should have used smaller components. Jsx is all about components. I cannot go back to string literals.

Reply on news.ycombinator.com