Hacker News Reader

Comment by CraftThatBlock | Hacker News Reader

Without JSX (or templates), writing HTML as JS is quite painful. Some don't like JSX but it is truly the best way to write HTML in JS.

View on HN

I really like Developit's (makers of Preact) JSX alternative 'htm'[1] which was inspired by lit-html[2]. It uses tagged template literals so you can run them in the browser during development without needing to compile to hyperscript first (but you should compile during production builds)

1. https://github.com/developit/htm

2. https://lit-html.polymer-project.org/guide

I agree. htm in my eyes in a mix between JSX and templates, and does strike a good balance.

Agreed. I'm hoping JSX (or another JS-first approach) becomes the de-facto standard for frameworks. Svelte seem interesting but giving up JSX is too much to ask. A framework like Svelte that "compiles away" the JSX would be worth looking at.

Solid (posted earlier today: https://news.ycombinator.com/item?id=23368473) does exactly that and some more.

Thanks -- I'll take a look.

Another approach is Webscript: https://mudgen.github.io/webscript/docs/

Looks a lot like Haml: http://haml.info/

I agree with your first sentence. We can agree to disagree on the second, though, as I thoroughly prefer a template approach.

Could you elaborate a bit more? I’m honestly curious.

JSX vs Templates has almost evolved into a holy war at this point within the js community. There are benefits and drawbacks to both, so you'll find people coming down on either side of the argument.

My main reason for preferring templates over jsx is that it allows to separate the functional component code behind the scenes from the actual rendered html in a cleaner fashion, imo, than just embedding the html directly into the JS code. I could also say that, due to my background, I am just more comfortable with it, as well.

And to elaborate on the other side of the argument: JSX creates plain JavaScript objects instead of exposing an "almost-JS" templating language. Additionally you get an enormous amount of flexibility. For some types of apps that is very important.

>> exposing an "almost-JS" templating language

I'm not certain I would call Vue.js templates as an 'almost-JS' templating language. It is pure html. A browser could render it without any js backing it up.

I can't speak for many other template specs, but I believe Angular.js was just pure html, as well, using custom properties to perform the binding between the html and the backing js, which is very similar to what Vue.js does, in that aspect at least.

I should have said that it's the best in my opinion. I think people from different backgrounds do prefer different methods, for example Vue seems very popular with PHP.

I came from a java background. Company I started at used an old templating approach using freemarker, and you could say it just stuck with me. I'm not 100% opposed to JSX, and I think it has its uses, but I prefer to keep the rendering layer separate from the functional code behind the component. I'll grant that a lot of frameworks like Angular.js and Vue tend to blur those lines a little bit with their approach due to directives, but in the end, it is still html, at least, and I like that kind of simplicity.

If you use functions DOM/JS can become really powerful. You are only limited by your imagination. If you are into functional programming (FP) you can combine a function that returns an entire app.

Reply on news.ycombinator.com