Better than templates, building highly dynamic web pages • Hacker News Board

Re: Better than templates, building highly dynamic web pages

#41

Post by NathanRice » Tue, Feb 21, 2012, 12:41 PM UTC

tmanderson wrote: post #22

This is, in my opinion, even worse than writing straight HTML in JavaScript. Before I get into anything, I just want to point out that with jQuery, you can do the same thing: $(' bar ').appendTo('.baz'); I'm not one to condone the over-use of the bloated jQuery, but in this case I sure would. Anyways, my biggest gripe with this whole thing is the fact that writing any markup in your JS, or anywhere other than an HTML…

Actually, if you read between the lines a little bit, what the article suggests is somewhat analogous to a viewmodel/presenter. Creating an entire DOM in the way suggested would be bad form, but creating an abstracted viewmodel then transforming it programmatically is actually quite elegant.

Viewmodels let you use the same skeleton structure for different mediums. You can take a viewmodel and generate a native (read "app") interface easily, as long as you have transformations from abstract viewmodel to concrete view. Of course that would require the ability to compile Javascript to native on your platform of choice, but I don't think that is a pipe dream.

Re: Better than templates, building highly dynamic web pages

#42

Post by jarek-foksa » Tue, Feb 21, 2012, 1:20 PM UTC

Bockit wrote: post #39

jarek-foksa wrote: post #19

The idea that CSS selectors could be used for element creation is awesome. It would be so convenient to write: var link = el("a#top.link[src='http://google.com'][data-external='true']") Instead of: var link = document.createElement('a'); link.setAttribute('id', 'top'); link.setAttribute('class', 'link'); link.setAttribute('src', 'http://google.com'); link.dataset.external = 'true' Someone needs to bring it to W3C for…

I get that what you're trying to do is keep it syntactically correct javascript, but just in case, have you looked at HAML [1] and/or Jade[2]? Both templating languages that allow you to write HTML in that kind of way. Even less syntax than what you're writing there. I guess you have the overhead of the template language and rendering them though still. [1] http://haml-lang.com/ [2] http://jade-lang.com/ EDIT: Added…

What I'm looking for is a way to easily create single DOM nodes, not a full templating language.

HAML and Jade assume that you have static pseudo-markup defined upfront and you just fill it with data, this approach is not suitable for apps that are doing heavy DOM manipulations (e.g. SVG editor, text editor, sophisticated widget toolkit).

Re: Better than templates, building highly dynamic web pages

#43

Post by lootsauce » Tue, Feb 21, 2012, 5:14 PM UTC

Hey man I think its pretty cool, I'm using it to replace my default shorthand to document.createElement. Added a handy dandy outputStrings mode so i can run it in node.js without a dom. Check it out $el is it, plus uses $node for the string output mode https://github.com/andrewluetgers/loot

Re: Better than templates, building highly dynamic web pages

#44

Post by tmeasday » Wed, Feb 22, 2012, 3:15 AM UTC

te_chris wrote: post #37

tmeasday wrote: post #29

Earlier quoted context omitted.

I guess the thing for me is that my HTML is usually simple enough that there isn't significant time spent writing it. So I can see there could be productivity gains, but I don't see they would be sufficient to justify the technical debt in introducing a new syntax.

I seriously think you're overstating the technical debt incurred by HAML. The docs aren't the best - they cover stuff, but are hard to navigate sometimes - but the actual language has a very shallow learning curve in my experience picking it up myself and bringing front-enders up to speed with it when I work with them on projects.

Oh, sure, learning it is pretty trivial if you know CSS. But there are a lot of hidden things, like cutting + pasting snippets of code from the Text Editor to/from the browser/jsfiddle/wherever, providing code samples on Stack Overflow, etc etc etc etc.

I think they made the right call when they went SASS -> SCSS for these kind of reasons. I know that coverting CSS blocks into the equivalent SASS was one of my least favourite things :)