3
\$\begingroup\$

Not sure how subjective this question is however I am looking for a peer review and general feedback on the intuitiveness and scaffolding potential of a framework concept. I have a gist on GitHub here: node.js MVVM framework concept

Is this more or less intuitive then using pseudo code and a template engine, such as handlebars, for rendering html?

The markup module will use three objects, the first being out design object:

var welcomeDesign = [{
  handle:'pageTitle'
  tag:'h1',
  attr:{
    class:'mainHeading'
  }
},{
  tag:'p',
  handle:'welcomeParagraph',
  content:[{
    content:'Welcome!',
    handle:'welcomeContent'
  },{
    tag:'img'
    handle:'welcomeBanner'
  }]
}];

The second object is our data:

var data = [{
  published:'11-8-13',
  title:'Hello World',
  content:'Welcome to...'
  assets:[{
    type:'img',
    path:'/images/'
    name:'cat.jpg'
  }]
}];

The third will be our mapping logic:

var imageAsset = {
    attr:{
      src:{
        key:'assets',
        map:function(obj, values){
          return values[0].path + values[0].name
        }
      }
    }
};

var welcome = {
  pageTitle:{
    content: {
      key:['published','title']
      map: function(object, values){
        return values[0] + ': ' + values[1];
      }
    }
  },
  welcomeContent:{
    content:{
      key:'content'
    }
  },
  welcomeBanner:imageAsset
};

and finally the methods for bringing them together:

var markup = require('markup'); //our module

var welcomeMessage = markup.design(welcomeDesign); //create a design instance

var homeWelcome = new welcomeMessage(data); //instantiate with our data
homeWelcome.render(welcome); //render with our logic
\$\endgroup\$
  • 1
    \$\begingroup\$ you need to include the code that you want Reviewed. Follow These Rules as well as not linking to the code that you want reviewed. if the question doesn't make sense with out the link it's not being asked properly \$\endgroup\$ – Malachi Nov 9 '13 at 17:02
  • \$\begingroup\$ @Malachi Since he's asking for review of the utility of the library, not its own code quality, this is the code he wants reviewed. I think. \$\endgroup\$ – sqykly Nov 10 '13 at 4:14
  • \$\begingroup\$ @sqykly when I wrote that comment he didn't have any code posted. I left my comment for the sake of the question. and the link in it. \$\endgroup\$ – Malachi Nov 10 '13 at 4:52
3
\$\begingroup\$

It's better than rendering HTML in some other language manually, but it's at a disadvantage to HTML super-set template languages.

Mirroring the structure of HTML in JS makes the design more verbose because you need to map object fields to HTML tokens like attr: and not tangibly better than HTML that's parameterized with jQuery. Mistakes in such a scheme, while not as bad as rendering HTML directly, are easier to make and harder to find than writing straight HTML or a super-set thereof because no IDE is going to understand how the JS object maps to an HTML snippet to validate it. Most HTML super-set template languages have the same problem with IDEs, to be fair, but it's usually easier to see what the HTML emitted is going to look like.

Another thing I might look into refactoring is the mapping object, which is using specific attribute names. You have an abstraction in the design, handle, that could just as easily be applied to attribute names, and your mapping would not have to reference the design's HTML at all. That might be an idealistic complaint, though.

In summary, what I would rather see is roughly the same data and mapping methodology, but make the design something my IDE (and eyes) will better understand as HTML.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ That was definitely one of my concerns, were an application to scale, syntax and error checking would become very difficult. I think you make a good point also in terms of legibility. I wonder if it would be possible to provide an html string, parse it into the design object, making sure to set a data-handle attribute on elements in the string passed in order to declare the handle for the logic. Not sure... but I really appreciate the consideration and response. \$\endgroup\$ – Ben Nov 10 '13 at 5:52
  • \$\begingroup\$ @Ben no problem - I've been wrestling with some of the same issues while working with templates, and there's definitely no perfect solution. In case I didn't get it across in my answer, this is way better than dealing with HTML & JS entirely by hand. If you don't mind introducing dependencies, a headless browser like zombie.js + jQuery could make it relatively painless to switch to HTML-based templates, and as bonus, you get to never deal with the DOM thanks to jQuery. \$\endgroup\$ – sqykly Nov 10 '13 at 8:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.