Writing all the html of a document with jquery instead of in the page body?

Question

I'm a UI person currently working on a web application, where most of the people I work with are back end developers. I'm currently at a disagreement with them about whether or not the above is a prudent thing to do.

This application doe use quite a bit of JavaScript, and wouldn't even work without it unfortunately. This being the case, One of the back end developers that I'm working with is claiming that pages could and even SHOULD be build completely with JavaScript or jquery. This caught me completely off guard. We're talking about div tags, lists, background images and text here.

I'm trying to explain to him that this isn't the right way to do things at all, and from a best practices perspective: content(html) should be separate from presentation(css), and behavior(script etc.).

I know that it's possible to write html in jquery, although I haven't done it, but am I wrong in my thinking that this isn't the way things should be done. Is it even possible to write ALL the code with jquery?

would love to hear any thoughts either way, as I will be discussing this with him again tomorrow.

Answer 1

If you had the content JQuery separated from the behavior JQuery, that might be more sane.

But in general, why? What are you gaining by doing that? If it's "don't repeat yourself" (DRY), usually PHP, JSP, or something like that would make far more sense. Rendering to HTML on the client side is incredibly uncommon.

It'll make it harder to maintain for anyone who's not onboard right now, and it'll also greatly screw up your page rankings in various search engines.

As brought up in comments to my response, some sites are strong outliers to this; Google Docs and Google Mail, for example. If you think your developers are high enough quality (and high enough dedication!) to produce something of that scale and caliber, they're probably worth listening to. If you're not doing something that requires that level of dynamic content, though, it still seems an awfully dangerous idea to me, and I'm certainly a developer and not a designer.

Answer 2

Build on things that work

Answer 3

Could: Yes, they could be (mostly written entirely in javascript)

Should: No. Search engines do not read any javascript, and anybody with a browser that doesn't support your javascript, wont be able to see the site at all. (Even screen readers would be flummoxed by your site if it was all javascript)

Answer 4

If you build all of the page client-side, you'll have a pretty poor chance of getting any decent page ranking on any search engine.

That being said, I have built interfaces that consume JSON and build all of the HTML dynamically using JavaScript. It works quite well and takes < 1 second to render. The page was behind a corporate login, so I didn't really care about search engine ranking anyways.

The code output did use a static stylesheet with the proper classes applied to the HTML.

Answer 5

You are right, though you can manipulate the DOM with JS/jQuery, using JS to completely build the DOM is going to make the website very slow (especially IE). Keep DOM modifications with JS to a minimum

Answer 6

Focus on writing maintainable code, what the other developer is proposing isn't going to be very maintainable over the long haul. Ask yourself/other developer what the jquery will look like in 3 to 5 years. If he shrugs his/her shoulders, they're not focusing on maintainability. Nobody wants to spend a few hours tracking down an obscure bug.

just my thoughts.

Answer 7

2 problems here:

1.There is no reason to do strange things like putting all content into jquery where usual way works right
2.Search engines will not look into your jquery files

Therefore sending all content via javascript is nonsense.......

Answer 8

One of the beauties of jQuery and similar approaches is that it encourages you to properly separate your behavior from your content. This approach would completely disregard that and mix content back into behavior.

Another poster mentions progressive enhancement ( http://en.wikipedia.org/wiki/Progressive_enhancement ) which is a big part of this. Your application should degrade gracefully for users with limitations (no Javascript, limited plugins, accessibility issues).

And I haven't even mentioned SEO ( hit wikipedia again, only one link allowed for me ;-) ). Search engines won't find your pages if your content is built by Javascript and inserted, the crawler won't be able to read your text.

Answer 9

content(html) should be separate from presentation(css), and behavior(script etc.).

Sure. But some sites are more 'content' than others. If what you've got is a pure web application like, say, a image editor: that doesn't need searchable content and doesn't have any built-in content (ie. it all comes out of a database anyway). So sure, go ahead and build it out of JavaScript. There's not a great deal to be gained by separating 'content' from behaviour when all that content is, is a few empty placeholder divs.

(When you're building page content from script, do it with DOM-style methods and properties. In jQuery, use attr, text and the jQuery 1.4 $('<div>', {attrname: value}) syntax. Don't create strings of HTML to write to the page; you'll inevitably get the HTML-encoding wrong somewhere and end up with bugs and security problems.)

For a content-heavy site that you want to be accessible to all and to rank in search engines, yeah: it would be a mistake. But then you may have already scuppered those goals by making the site only work with JS.

Answer 10

IMHO writing html from jquery or javascript should be limited to what need to be created that way.

I could write a javascript that outputs 25 array items without a loop but that would be silly

Just because you CAN do something doesn't mean you should !