4 ms·

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/JU

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 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!

tricolon 13y ago
A coworker made something similar that we all appreciated using: https://github.com/nanotone/js-templates https://github.com/nanotone/js-templates
Touche 13y ago
But it's not. JSON doesn't have closing tags, which makes it more difficult to read. JSON is for machines.
- MarkPNeyer 13y ago
  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.
mikewhy 13y ago
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.
- deleted 13y ago
  [deleted]
saraid216 13y ago
> [ "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?
- MarkPNeyer 13y ago
  yes!
- flywheel 13y ago
  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"}]}]
spyder 13y ago
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/ https://dombuilder.readthedocs.org/en/latest/
ssorallen 13y ago
Enyo JS (http://enyojs.com/ 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.

tricolon 13y ago

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

Touche 13y ago

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

MarkPNeyer 13y ago
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.

mikewhy 13y ago

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.

deleted 13y ago
[deleted]

saraid216 13y ago

> [ "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?

MarkPNeyer 13y ago
yes!
flywheel 13y ago
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"}]}]

spyder 13y ago

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/ https://dombuilder.readthedocs.org/en/latest/

ssorallen 13y ago

Enyo JS (http://enyojs.com/ 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.