Structure of a single page app

Question

I'm looking to develop a one page app, and will likely be using node.js for my server side coding.

I'm trying to get some advice regards the client-side coding. While i realise that something like backbone.js would really help me, since im very new to development the learning curve is very high for me.

So i'm going to be using something like dust.js for my client side templating. Currently i'm creating some mockup screens (there are 4 in total) that are being built in just plain html/css.

When i come to doing the client side and server coding, is it better for me to combine all my presentation code into one html file, or into multiple files and then call them separately, considering it's a one page app that i am creating?

Answer 1

It's not a question of singlepage/multipage, it's a question of source code organisation

To exagerate a little: it is like asking if you should have only one source file, since your result is only one executable.

How you present the page to the customer (1 page with js/4 pages with links) is a presentational issue, that should not interfere with how you organise your code.

How you keep your source files should determined by how easy it is for the coders to read, extend, debug them.

And how you meet these needs is determined by the actual tasks at hand, and not nesessarly by whether you present them to the user in a single page.

So, without talking about the projects details, i think, it's not easy to answer your question.

As a general guide how, imho, HTML-Templates should be structured, i would suggest the following:

• The general page layout should be structured to provide some kind of inheritance, so that i easily can create new pages with the same header, columns, footer, etc, where only placeholders need to be filled.

• each "widget" the page uses should be a functional unit, not depending on it's environment. for example, if you have tags, you should only change a single place in your source if you want all your tags to be dispayed as lowercase

Depending on your Technology Stack, these constrains may already imply a certain file structure: in Jinja2 (python templating engine), the general page layout inheritance needs seperate files, in Rails, the rendering of the widgets would be realised via "partials", which would be separate files, too.

Generally, i prefer small files, but that's more a preference. Before overengineering, just start simple (i.e., one file), and dont hesitate to split, as soon as it starts getting messy.

Answer 2

I assume you're trying to create a single HTML page where the contents change depending on the data returned from the server.

Its not the programming model used by HTML, but I guess it can work... You can reload html sections using jQuery's .html() call - so the server can return chunks of html and you can display it dynamically. Put the sections you'll be reloading in a div and you'll be able to easily find the part of the page that gets reloaded.