Pithy.js - An internal DSL for generating HTML in JavaScript

by sdogruyol • 13 years ago

52 28 13 years ago

grimtrigger5• 13 years ago

Awesome! Would be useful if there were callbacks for binding events after the node has been created.

pettazz• 13 years ago

I suppose it's probably just a matter of trying to keep things as simple as possible. You're already specifying all the attributes of the nodes you're creating, so you can just as easily then bind them yourself. UNIX philosophy and all that.

grimtrigger5• 13 years ago

Just an argument for why I think its pretty important (maybe your use case is different so this doesn't apply).

With every HTML injection, I'd have to cycle through all relavant nodes, sorting out the ones that have already been binded, and then apply the relevant bindings. With a dynamic app that injects a lot of small HTML parts, this could be quite painful.

caolanm• 13 years ago

Currently it generates a HTML string rather than DOM Elements but if it did it would be cool to be able to add onclick handlers etc in the attributes argument.

dropdownmenu• 13 years ago

Pretty cool project, but I feel kind of dirty having js and html being so tightly bound to each other. Do you have a specific use case where pithy would perform faster or be more cleanly implemented than standard templates?

danso• 13 years ago

From the OP's documentation, I don't think it's intended to be used for large templates where speed of render is important. It's main benefit seems to be as a more readable, less-error-prone alternative to string concatenation, such as in small snippets that are created by client-side-update methods.

grimtrigger5• 13 years ago

I work on an enterprise platform where I have client side access, but no server side access. My only options for injecting HTML are:

1) cross domain AJAX via CORS

2) Injecting HTML strings constructed in JS

For small amounts of HTML, I'd much rather go with option #2.

muxxa• 13 years ago

Almost identical functionality appears as part of MochiKit, and I've found it very useful for quick and clean DOM creation:

http://mochi.github.com/mochikit/doc/html/MochiKit/DOM.html

Zelphyr• 13 years ago

Why is everyone so afraid of HTML that they insist on starting projects like this? I've seen them come and go for 15+ years now and they're never useful. Even less so in the case of using JS to generate HTML because that makes the browser actually work harder.

This isn't a knock against OP or the project creator (if they're not one and the same) because projects like these can be useful exercises. But I would never use something like this in production and I would hope nobody else would either.

grimtrigger5• 13 years ago

I work on an enterprise platform where I have client side access, but no server side access. My only options for injecting HTML are:

1) cross domain AJAX via CORS

2) Injecting HTML strings constructed in JS

For small amounts of HTML, I'd much rather go with option #2.

ps. Its unfortunately very common for developers to have little or no server side access to the applications they're building.

crescentfresh• 13 years ago

Wait, are you rolling up all client templating libraries into 2) or something?

hellerbarde• 13 years ago

What do you mean by "afraid of HTML"?

I haven't used this yet, so bear that in mind, but to me this seems to be something that is more expressive than html (I meant String) concatenation. That leads, in my experience, to better maintainability and thus less worries in the future.

Whether this impacts JS performance enough to be a problem, I don't know and don't have the time to test right now.

Edit: words are hard... I accidentally a few of them.

crabasa2• 13 years ago

It is worth noting that the OP is calling this tool pithy (terse, meaningful). In an application I'm working on [1] I have several lines of jQuery and string concatenation to build some simple content.

It's probably overkill to use a full-blown client-side templating engine, but my current code leaves much to be desired. I think pithy.js might be a great fit.

[1] https://github.com/crabasa/seattlehacks/blob/gh-pages/calend...

Bjoern• 13 years ago

This is quite interesting, thank you for open sourcing it.

I can see how this can be helpful cleaning up e.g. common string concatenation snippets in code bases.

ajitk• 13 years ago

I prefer https://github.com/jed/domo to create DOM elements in browser. Its output is a real DOM element whereas in pithy.js, its string.

crabasa2• 13 years ago

It might just be me, but I can't stand all of the capitalization.

atirip3• 13 years ago

Nope. Avoid. Switch to templates at the moment you think you need this kind of a solution. Use for example super comoact http://archan937.github.com/templayed.js/ Compared to almost full blown mustache implementation, pithy.js, surprise, is a bloat. Sorry of being harsh, as a positive note, the code itself, in abstract way is my liking. Very good. May even steal some snippets.

sophacles3• 13 years ago

Ahh yes, the old "trusty-hammer" argument. Sometimes this exact sort of library is needed, and quite useful. More than once I've found myself doing single-tag or 2-tag templates and composing them in code, with bits for passing in class name or id, and later selecting them to change some property. Basically the use case for a library like this.

Templates are useful, so are tag generation code snippets. Both go in my toolbox just fine.

atirip3• 13 years ago

For your case this is all what you need: function replace(str, data) { for( var i in data ) str = str.replace('{'+i+'}', data[i]); return str; }

gohwell• 13 years ago

Pardon my ignorance... What is a DSL?

bchar• 13 years ago

Domain-specific language http://en.wikipedia.org/wiki/Domain-specific_language

sophacles3• 13 years ago

This is almost identical in operation to laconic https://github.com/joestelmach/laconic what advantages does this have?

jimmytucson• 13 years ago

Pithy.js - An internal DSL for generating HTML in JavaScript

Related Stories