HTML that's both server-side and javascript generated - how to combine?

Question

I'm usually a creative gal, but right now I just can't find any good solution. There's HTML (say form rows or table rows) that's both generated javascript-based and server-sided, it's exactly the same in both cases. It's generated server-sided when you open the page (and it has to stay server-sided for Google) and it's generated by AJAX, to show live updates or to extend the form by new, empty rows.

Problem is: The HTML generation routines are existing twice now, and you know DRY (don't repeat yourself), aye? Each time something's changed I have to edit 2 places and this just doesn't fit my idea of good software.

What's your best strategy to combine the javascript-based and server-sided HTML generation?

PS: Server-sided language is always different (PHP, RoR, C++).

PPS: Please don't give me an answer for Node.JS, I could figure that out on my own ;-)

Without more details about what is the generated code, it's difficult to give you the best solution, but you can store the data as json, xml, database, etc and generate at runtime — Ortiga, Apr 12 '11 at 20:24
Is it possible, in your situation, that the client side script could avoid generating the markup by focusing on cloning server generated markup and modifying it. This could keep the client side more of a mimic or passive updater within markup that is always generated server side... — ExtraGravy, Apr 12 '11 at 20:26
Are you asking, how to mix the two together as in, how to use ASP variable in HTML? — clamchoda, Apr 12 '11 at 20:27
@Andre I can't really give more details, because I want a solution that's good for most cases not just a few selected ones. — Kira M. Backes, Apr 12 '11 at 20:44

Matt Ball · Answer 1 · 2011-04-12T20:34:19.690

1

What's your best strategy to combine the javascript-based and server-sided HTML generation?

If you want to stay DRY, don't try to combine them. Stick with generating the HTML only on the server (clearly the preferable option for SEO), or only on the client.

edited Apr 12 '11 at 20:34

answered Apr 12 '11 at 20:21

Matt Ball

354,903
100
647
710

1

I agree, except to say that generating _only_ on the client wouldn't fit the "good for Google" criteria. – Widor Apr 12 '11 at 20:24
Generation only on the client excludes Google while generation only on the server excludes live updates. Both are no-gos. And if you look at the other answers, you'll see that DRY is possible without restricting to server or client. (automatic JS template generation or JS copying of other rows) – Kira M. Backes Apr 12 '11 at 20:42
1

@Kiralein: as other answers have explained, generation only on the server **does not** exclude live updates. – Matt Ball Apr 12 '11 at 20:43
1

To reinforce @Matt Ball's point: 1) Backend(s) renders initial HTML and sends to client. 2) Embedded JS events trigger something to be replaced with new content via an AJAX call to whichever backend source you used the first time for that chunk of markup. 3) Crack a cold one. What are we missing? (DRY is good, as is KISS!) – peteorpeter Apr 12 '11 at 21:30
@peteorpeter: You are missing the case of adding empty rows to a form, which would then require an AJAX-call while now it's done 100% client-sided without any delay. – Kira M. Backes Apr 12 '11 at 21:48
Can you just `.clone()` the markup that's already there (or a hidden `div.template`)? – peteorpeter Apr 12 '11 at 21:53
BTW I think it wasn't clear that you _also_ want to minimize HTTP requests (a noble goal), and are currently using some client-side code to accomplish this. This explains your comment about 400% more AJAX volume, I think? – peteorpeter Apr 12 '11 at 22:02

score 1 · Accepted Answer · answered Apr 12 '11 at 20:23

1

Here's the Ruby on Rails solution:

Every model has its own partial. For example, if you have models Post and Comment, you would have _post.html.erb and _comment.html.erb

When you call "render @post" or "render @comment", RoR will look at the type of the object and decide which partial to use.

This means that you can redner out an object in the same way in many different views.
I.e. in a normal response or in an AJAX response you'd always just call "render @post"

Edit:
If you would like to render things in JS without connecting to the server (e.g. you get your data from a different server or whatever), you can make a JS template with the method I mentioned, send it to the client and then have the client render new objects using that template. See this like for a JS templating plugin: http://api.jquery.com/category/plugins/templates/

answered Apr 12 '11 at 20:23

x10

3,820
1
24
32

Wow, the JS templating method really seems to be a good concept, but sadly I need a cross-language solution. Could implement such a JS template generation into PHP though. – Kira M. Backes Apr 12 '11 at 20:40
@Kiralein: [Mustache](http://mustache.github.com/) = cross-language templating. But didn't you just say that client-side-only is not an option because of SEO? – Matt Ball Apr 12 '11 at 20:44
@Matt Ball: since the Javascript template is auto-generated off the RoR template this solution would follow to the DRY idiom while still allowing both server-sided and client-sided HTML generation – Kira M. Backes Apr 12 '11 at 20:49

score 1 · Answer 3 · answered Apr 12 '11 at 20:25

1

Make a server handler to generate the HTML. Call that code from the server when you open the page, and when you need to do a live update, do an AJAX request to that handler so you don't have to repeat the code in the client.

answered Apr 12 '11 at 20:25

Peter Olson

139,199
49
202
242

I thought about that one but this would increase the size of those AJAX updates by 400%. – Kira M. Backes Apr 12 '11 at 20:46
1

@Kiralein Then make the generation more efficient – Peter Olson Apr 12 '11 at 20:52
@Kiralein: ajax message size should be a non-issue, **even if you're not gzipping requests** (which, BTW, would be inexcusable). – Matt Ball Apr 12 '11 at 21:31

score 0 · Answer 4 · answered Apr 12 '11 at 20:23

Make a page which generates the HTML on the server and returns it, e.g.:

http://example.com/serverstuff/generaterows?x=0&y=foo

If you need it on the server, access that link, or call the subroutine that accessing the link calls. If you need it on the client, access that link with AJAX, which will end up calling the same server code.

Or am I missing something? (I'm not sure what you mean by "generated by AJAX").

I don't see another solution if you have two different languages. Either you have a PHP/RoR/whatever to JavaScript compiler (so you have source written in one language and automatically generated in the others), or you have one generate output that the other reads in.

score 0 · Answer 5 · answered Apr 12 '11 at 20:38

0

Load the page without any rows/data.

And then run your Ajax routines to fetch the data first time on page load

and then subsequently fetch updates/new records as and when required/as decided by your code.

answered Apr 12 '11 at 20:38

Robin Maben

22,194
16
64
99

You read the part about server-sided being mandatory for Google? – Kira M. Backes Apr 12 '11 at 20:39

HTML that's both server-side and javascript generated - how to combine?

5 Answers5