NewT.js - pure JS templating engine

by gregory80 • 15 years ago

10 4 15 years ago

anko• 15 years ago

this reminds me of superflyDOM: http://docs.jquery.com/Plugins/SuperFlyDOM/createAppend#elem...

I saw it used in a project once and it was a disaster. The problem being, by using javascript to represent html you are making your templates harder to write and harder to maintain.

This solution certainly has some cool features, but I strongly disagree with comparisons to haml. Where haml strips away a bunch of html syntactical weight, newt.js piles it on.

Sorry if i'm being too strong, but I just wanted to share my thoughts/experiences/criticism. It is clear the author has put a lot of work into this, including tests.

I like http://www.handlebarsjs.com/ for my javascript templating because I can literally cut and paste in some html into a template, add some logic(if/then blocks) and I'm done.

badmonkey0001• 15 years ago

I don't think you're being too harsh. I agree that newT really doesn't seem like a templating engine - it seems more like a HTML generator. It's a pretty complex hammer to drive a carpet tack. Programmatically constructing DOM from that low of a level is still more trouble than it's worth.

For me, I stick to small chunks I can loop on my own if need be and use a simple tokenizer I wrote (see bpmv.toke() at https://github.com/BrynM/bpmv/blob/master/bpmv.js ). Far simpler and I can have anyone whip up HTML boilerplate to use.

insin• 15 years ago

I started coming to a similar conclusion about pure-JavaScript templating in terms of ease of writing and maintenance after getting most of the way into implementing a templating plugin for my DOMBuilder library, based on this speculative API extracted from a sample Django template: https://gist.github.com/958838

Once you start piling on the mixed, nested content and a mix of elements with and without attributes, it takes some diligence to ensure you've put all your commas and parentheses in the right place first time, and the resulting code isn't all that pleasing on the eye when you compare it to the usual HTML with placeholders for logic/dynamic content.

I still find this style of templating useful for smaller chunks of content like this sort of thing, though:

  function dataTable(headers, objects, properties) {
    return TABLE({cellSpacing: 1, 'class': 'data sortable'}
    , THEAD(TR(TH.map(headers)))
    , TBODY(TR.map(objects, function(obj, attrs, loop) {
        attrs['class'] = (loop.index % 2 == 0 ? 'odd', 'even')
        return TD.map(properties, function(prop) {
          return obj[prop]
        })
      }))
    )
  }

taitems• 15 years ago

Using "clss" to avoid a conflict seems really clunky. className? @class?

NewT.js - pure JS templating engine

Related Stories