Question

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.

Answer 1

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.