Dug.js – A JSONP to HTML Script | Hacker News Reader

Dug.js – A JSONP to HTML Script

rog.ie

157 pointsekpyrotic19 comments

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

On top of that, a simple solution to a task people do again and again.

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/

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).

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 is much better than anything I have seen.

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.

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.

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?

On the other side that make the creation of templates (somethings) unduly complex.

I created 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.

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).

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

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.

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.

why not use liquid?: https://github.com/tonyheupel/liquid.js

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>

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

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

Anybody knows how to use this on instagram photos?

Fun little project :)

Reply on news.ycombinator.com