4

Assuming a JavaScript-based single-page application is returned by the server on the initial request. Besides some initialization code, which is common for every application, just the portion of the application needed to show the requested page (e.g. index page) is returned by the server on the initial request (then cached and rendered).

As the user clicks through the application, other portions of the application should be asynchronously loaded ('fetched', 'requested' or however you wanna call it) from the server. By "portions" a mean javascript code, images, css, etc. required to render the page. Let's focus on the javascript code part in this discussion.

It's important to notice that the javascript code to be returned to the browser is not contained in separate (static) files (which would be easy then and might be the case in the future due to e.g. performance reasons), but rather in one file, so it's not a 1:1 assiociation (request : file).

E.g. we could have a single app defined like this:

var LayoutPresenter = App.Presenter.extend('LayoutPresenter', {
  __view: '<div>{{link "Author" "/author"}} - {{link "Book" "/book"}}</div>'
});

var AuthorPresenter = App.Presenter.extend('AuthorPresenter', {
  __view: '<div><h1>{{name}}</h1></div>',
  __parent: LayoutPresenter,
  __context: { name: "Steve" }
});

var BookPresenter = App.Presenter.extend('BookPresenter', {
  __view: '<div><h1>{{title}}</h1></div>',
  __parent: LayoutPresenter,
  __context: { title: "Advanced JavaScript" }
});

App.Presenter is part of the library I am writing and is available in the browser (or on any other client).

So assuming the user is browsing to the Book page which hasn't be loaded before (neither initially nor cached in the browser), the BookPresenter code, which is a function, should be returned by the server (assuming the LayoutPresenter code is already available in the browser and App.Presenter is available anyway because it's part of the library). I am running node.js on the server side.

How would you recommend to address this problem?

There is the eval function, so one could send javascript as a string and bring it back to live using eval(), but such an approach seems to be bad practice.

Scholle
  • 1,521
  • 2
  • 23
  • 44

1 Answers1

2

Never use eval - it's evil. The better option would be use jQuery ajax and set the dataType as script. This will evaluate your js, and also provide you with a call back once the script is loaded.

Refer to Ajax dataTypes and jQuery getScript shorthand. This is of course assuming that you can separate your code into logical modules

You might also consider it worth your time to check this question (How can I share code between Node.js and the browser?)

dNode is an option that is described in the question above and it looks quite exciting in terms of possibilities. You could create a list of function required for the Book page, then call them right off the server itself. That would eliminate the need to maintain separate js modules for each section of your page. Kudos to @Caolan for suggesting it.

As interesting as it is, take care to properly scope your functions; you don't want random users playing around on your server.

Community
  • 1
  • 1
Jibi Abraham
  • 4,636
  • 2
  • 31
  • 60
  • How does jquery/ajax the evaluation internally? – Scholle Mar 24 '12 at 10:19
  • Unfortunately, I have no answer to that. – Jibi Abraham Mar 24 '12 at 10:22
  • Besides processing the returned javascript in the browser (e.g. using jquery/ajax or the like), I need a way to process javascript on the server side, which is not yet clear to me how to do it properly in node.js. It's not possible to forward a javascript function to the response, like: res.writeHead(200, {'content-type': 'text/javascript'}); res.end(function alertMe() { alert('coming from the server'); }); – Scholle Mar 24 '12 at 10:24
  • 2
    jQuery just embeds the script in the head of the doc using the a normal script tag with an async attribute. Search for "Bind script tag hack transport" in http://code.jquery.com/jquery-1.7.2.js . – Rich Bradshaw Mar 24 '12 at 10:28
  • 1
    Just checked the mentioned article... dNode (like now.js) can be used to call remote functions (RPC-style), which is unfortunately something different I am looking for (but it has it's use cases anyway). But, such an approach is exposed to the high-latency of the network on EACH remote function call. I am looking for a way to actually send the function delaration over the wire in order to being able to execute it locally (e.g. in the browser). State changes of data as outcome of the function execution might then be send asynchronously to the server, so it doens't affect user interaction. – Scholle Mar 24 '12 at 11:08
  • then your best bet will be to write modules and then server them as js files – Jibi Abraham Mar 24 '12 at 11:21