Hacker News Reader

Hacker News

Comment by MarkPNeyer | Hacker News Reader

Parent Full thread

MarkPNeyer

having html inlined in your js code is ugly. so is mashing strings toether.

a friend at twilio pointed me to a library called JUP

https://github.com/hij1nx/JUP

it lets you express html as json. i don't understand why this isn't more popular.

[ "div", { class : "a-class" }, [ "span", "you can use all of your json tools to edit the DOM" ] ]

so awesome!

View on HN

This point comes up often when talking about React. You can still put the templates in your own file that the view requires and renders in the `render()` function. No different than Backbone.

Enyo JS (http://enyojs.com/), which powered the later versions of Palm/HP/LG webOS, expresses its components in JSON as well. Having developed both for webOS and now in React/JSX, I can say JSX is the more easily understood of the two. JSX does enforce small oddities like camel case attributes and always-closed tags since it is XML in the end, but it's closer to HTML and that is reason enough for it to win for me.

There is DOMBuilder with the same array/object syntax and also it has the function syntax too. It can be used server-side and in the browser too because it builds a virtual DOM and outputs HTML string or just uses the browser's native DOM elements. https://dombuilder.readthedocs.org/en/latest/

> [ "div", { class : "a-class" }, [ "span", "you can use all of your json tools to edit the DOM" ] ]

So, that means

  <div class="a-class">
    <span>you can use all of your json tools to edit the DOM</span>
  </div>

, right?

Probably, but that syntax is awful.

This syntax makes more sense to me:

[{"tagName":"div","class":"a-class","children":[{"tagName":"span","innerHTML":"you can use all of your json tools to edit the DOM"}]}]

yes!

A coworker made something similar that we all appreciated using: https://github.com/nanotone/js-templates

But it's not. JSON doesn't have closing tags, which makes it more difficult to read. JSON is for machines.

The divs in jup are closed with ']'

edit: ahh, see your point. ']' doesn't say what it's ending.

i've never had that be an issue with proper use of whitespace and newslines, but i see your point.

Reply on news.ycombinator.com