5 ms·

Dug.js – A JSONP to HTML Script

157 points by ekpyrotic 13y ago

drtse4 13y ago
Clean, concise, no dependencies, straightforward to use, what's not to like.
- pedalpete 13y ago
  On top of that, a simple solution to a task people do again and again.
NKCSS 13y ago
Fun little project :)
hbi99 13y ago
Templating solutions such as Mustache and Handlebars falls short when the need to add intelligence to the template. In such cases, the template needs to extended with helper functions, which leads to scattered templating. Another way to implement smart templates is to use XSLT, which is both standardized as well as longtime proven. XSLT is used commonly used with XML but with DefiantJS, it's trivial to transform JSON structures with XSL (additionally, it's possible to search JSON structures with XPath queries using this lib; http://defiantjs.com/#xpath_evaluator http://defiantjs.com/#xpath_evaluator).
- agilebyte 13y ago
  I was of the same opinion and used Eco exclusively, but the implementation of Mustache in can.JS http://canjs.com/docs/can.Mustache.html http://canjs.com/docs/can.Mustache.html is much better than anything I have seen.
- davedx 13y ago
  I built a large site using XSLT for the templating, and it definitely wasn't my experience that XSLT was a good way to "add intelligence to a template". I found it to be rigid, arcane and inflexible. XSLT is great for transforming XML datasets to other XML datasets. It's just not designed for outputting web pages.
- arethuza 13y ago
  Don't you think that if your template is so complex that it actually justifies something like XSLT then you might be doing something wrong? NB I've used XSLT a lot over the years (not client side though) and I have a healthy respect for what is possible with it - but as I rather prefer JSON to XML these days it seems a bit like overkill.
- philbo 13y ago
  A typical reason to avoid intelligence in view templates is that it is more difficult to test that logic when it is stored inside the template. Separation of the two improves testability. What are the testing options like for XSLT, are you able to run good automated tests against your templates?
  - prottmann 13y ago
    On the other side that make the creation of templates (somethings) unduly complex. I created http://apidocjs.com http://apidocjs.com and had the problem that i needed some "simple" logic in the templates (handlebars). For such things i must implement a separate view with configuration/data modelling/... and Helper function, but that makes the project-output complex, because i want that the people can change the template as easy as possible. Quick & dirty developed i create many duplicate code in the template to avoid a separate view. It was a silly idea, it makes the template more complex ;-) And only because of some missing logic.
- michaelmior 13y ago
  The idea behind Mustache is that your template shouldn't have intelligence. The data passed to the template should be such that it isn't necessary (beyond simple ifs).
  - hbi99 13y ago
    Great input from all commentators and clearly this is an area that many have opinions on like Regarding Mustache and Handlebars; the basic idea is that templates should be logic-free - despite this, there are many question at Stackoverflow, on how to add intelligence when using these templating engines. The basic idea and real-life implementation doesn't add up...
- hrktb 13y ago
  A middle ground would be underscore templating system. It's simple to use and there's all the freedom you want regarding to what you do in the templates.
- hnriot 13y ago
  XSLT is about the worst possible piece of technology - it's over engineered and practically unusable for all but simple transforms. functions, conditionals etc are just typical enterprise antiquated over designed unable crap.
- rip747 13y ago
  why not use liquid?: https://github.com/tonyheupel/liquid.js https://github.com/tonyheupel/liquid.js
jpdlla 13y ago
Previous discussion on Designer News https://news.layervault.com/stories/14856-dugjs-a-jsonp-to-html-script https://news.layervault.com/stories/14856-dugjs-a-jsonp-to-h...
_zen 13y ago
https://github.com/rogie/Dug.js https://github.com/rogie/Dug.js
Sir_Cmpwn 13y ago
This is a great solution for existing APIs, but I want to mention that if you're designing a new API, you should opt for CORS instead of JSONP. This allows people to do straight-up XHR requests on your domain, with a whitelist of methods, headers, whatever. http://www.w3.org/TR/cors/ http://www.w3.org/TR/cors/
va949 13y ago
Anybody knows how to use this on instagram photos?
dpweb 13y ago
Nice although I think I prefer the style to separate the htm from the js <template id='mytemplate'> my data is {{data}} </template> <script> doit('mytemplate', 'http://api.dribbble.com/.../shots') // or jq plugin $('#mytemplate').render('http://...'); </script>

157 points by ekpyrotic 13y ago

drtse4 13y ago

Clean, concise, no dependencies, straightforward to use, what's not to like.

pedalpete 13y ago
On top of that, a simple solution to a task people do again and again.

NKCSS 13y ago

Fun little project :)

hbi99 13y ago

Templating solutions such as Mustache and Handlebars falls short when the need to add intelligence to the template. In such cases, the template needs to extended with helper functions, which leads to scattered templating. Another way to implement smart templates is to use XSLT, which is both standardized as well as longtime proven. XSLT is used commonly used with XML but with DefiantJS, it's trivial to transform JSON structures with XSL (additionally, it's possible to search JSON structures with XPath queries using this lib; http://defiantjs.com/#xpath_evaluator http://defiantjs.com/#xpath_evaluator).

agilebyte 13y ago
I was of the same opinion and used Eco exclusively, but the implementation of Mustache in can.JS http://canjs.com/docs/can.Mustache.html http://canjs.com/docs/can.Mustache.html is much better than anything I have seen.
davedx 13y ago
I built a large site using XSLT for the templating, and it definitely wasn't my experience that XSLT was a good way to "add intelligence to a template". I found it to be rigid, arcane and inflexible. XSLT is great for transforming XML datasets to other XML datasets. It's just not designed for outputting web pages.
arethuza 13y ago
Don't you think that if your template is so complex that it actually justifies something like XSLT then you might be doing something wrong? NB I've used XSLT a lot over the years (not client side though) and I have a healthy respect for what is possible with it - but as I rather prefer JSON to XML these days it seems a bit like overkill.
philbo 13y ago
A typical reason to avoid intelligence in view templates is that it is more difficult to test that logic when it is stored inside the template. Separation of the two improves testability. What are the testing options like for XSLT, are you able to run good automated tests against your templates?
- prottmann 13y ago
  On the other side that make the creation of templates (somethings) unduly complex. I created http://apidocjs.com http://apidocjs.com and had the problem that i needed some "simple" logic in the templates (handlebars). For such things i must implement a separate view with configuration/data modelling/... and Helper function, but that makes the project-output complex, because i want that the people can change the template as easy as possible. Quick & dirty developed i create many duplicate code in the template to avoid a separate view. It was a silly idea, it makes the template more complex ;-) And only because of some missing logic.
michaelmior 13y ago
The idea behind Mustache is that your template shouldn't have intelligence. The data passed to the template should be such that it isn't necessary (beyond simple ifs).
- hbi99 13y ago
  Great input from all commentators and clearly this is an area that many have opinions on like Regarding Mustache and Handlebars; the basic idea is that templates should be logic-free - despite this, there are many question at Stackoverflow, on how to add intelligence when using these templating engines. The basic idea and real-life implementation doesn't add up...
hrktb 13y ago
A middle ground would be underscore templating system. It's simple to use and there's all the freedom you want regarding to what you do in the templates.
hnriot 13y ago
XSLT is about the worst possible piece of technology - it's over engineered and practically unusable for all but simple transforms. functions, conditionals etc are just typical enterprise antiquated over designed unable crap.
rip747 13y ago
why not use liquid?: https://github.com/tonyheupel/liquid.js https://github.com/tonyheupel/liquid.js

jpdlla 13y ago

Previous discussion on Designer News https://news.layervault.com/stories/14856-dugjs-a-jsonp-to-html-script https://news.layervault.com/stories/14856-dugjs-a-jsonp-to-h...

_zen 13y ago

https://github.com/rogie/Dug.js https://github.com/rogie/Dug.js

Sir_Cmpwn 13y ago

This is a great solution for existing APIs, but I want to mention that if you're designing a new API, you should opt for CORS instead of JSONP. This allows people to do straight-up XHR requests on your domain, with a whitelist of methods, headers, whatever. http://www.w3.org/TR/cors/ http://www.w3.org/TR/cors/

va949 13y ago

Anybody knows how to use this on instagram photos?

dpweb 13y ago

Nice although I think I prefer the style to separate the htm from the js <template id='mytemplate'> my data is {{data}} </template> <script> doit('mytemplate', 'http://api.dribbble.com/.../shots') // or jq plugin $('#mytemplate').render('http://...'); </script>