Multiple HTML Pages vs Single Page with JavaScript – Which is Better?

csshtmljavascript

Is it better to use multiple html pages and link them together with href or just change content on the same page using JavaScript? I am thinking of how to layout a page and I don't have a lot of content. It would probably be about three of for pages if I just used all html. If I toggled and swapped bits of html around using JavaScript, I could probably fit it all on one page, and it would be a bit "cooler", in that it's more of an application, dynamic, etc. But I'm just wondering what the best way to go here? Is it horrible to have to much JavaScript "squashed" to one document? How do you know where to draw the line when thinking about this?

Best Answer

The downsides you need to consider if you go with the "all on one page, swapped using Javascript" approach:

Will people be able to bookmark or link to specific pages of information?
Will people be able to use their browser's back/forward buttons to navigate between pages on your site?
Will people with Javascript disabled (small but non-zero population) be able to use your site at all?
Will Google and other search engines be able to spider and index your content?

None of these problems are insurmountable, but they're all problems you won't have if you follow the traditional decades-old model of putting separate pieces of content on separate pages.

General

Indents are 4 spaces.
Indent new levels
Comments are < ~80 chars from the indent level. If I'm in two levels (8 spaces) that means the cursor stop will be around 88 characters.
Use multi-line comments. I prefer the look, however this is a subjective point.
Comment now rather then later when you have no idea what's going on.
Allman style braces. It's cleaner and is more readable. Subjective.

JavaScript

Use a library. jQuery in particular is very good. It eliminates all cross browser headaches.
Understand that ID's are for particular elements, classes are for styles. ID's shouldn't be used more then once per page and they will have particular hooks attached to them. Use classes for things like navigation.
Out source into methods. It's tempting to put all the code into the bind call, however putting it in it's own function will increase the flexibility of your code.
Use functions instead of evals. That means setTimeout(function(){ /* Do something */ }, 1000); instead of setTimeout('doSomething', 1000);
Use local variables with var.

HTML

Semantic markup. Use appropriate tags. Don't put <br />'s in there to add space, adjust margins and CSS rules.
All tags are lowercase.
All tags should end with a closing tag or be self closing.
Make use of classes for layout that is similar. Have a couple of predefined classes like hide, clear, error, etc.
Everything (scripts included) should go in <head>. Worry about optimizing (moving stuff around) when it presents a problem.
External stylesheets and JavaScript source is a must unless it is page specific.

PHP

Frameworks are good, I recommend CodeIgniter.
If you don't want to use a framework, try to use the latest version of PHP possible. (That means 5.3).
Use includes to your advantage.
Clear injections or use prepared statements.

Perform if checks on preconceived fail-secure values.

$logged_in = false;
if(check_user($user))
{
     $logged_in = true;
     $user = load_user($_SESSION);
}

Know the difference between single and double quotes. Use single quotes when possible.
Don't echo HTML.

Has JavaScript Evolved Beyond Its Original Design?

People who think JavaScript is not a programming language are people who's opinion on JavaScript you should not respect.

JavaScript is a language that has grown organically inspired by semantics of Scheme and syntax of Java. It's original purpose was not general but it has now grown to be so.

JavaScript as a language is suitable to do just about any task if it's fit for it. Take a look at examples like node.js where JavaScript has access to host environment consisting of IO functionality which allows it to be used for generic server side programming

My friend also advocates against using Javascript's OOP functionality, claiming that "you shouldn't be processing data, merely validating." Is Javascript really limited to validating data and making flashy graphics on a web page?

No, JavaScript is a programming language, if you want to represent data structures, algorithms and logic then use the tools the language offers. Specifically 1st class functions and prototypes are powerful tools.

He goes on to claim "you shouldn't be attempting to access databases through javascript" and also says " in general you don't want to be doing your heavy lifting in javascript". I can't say I agree with his opinion, but I'd like to get some more input on this.

Wrong, In the browser we have a database called indexedDB which we access with JavaScript. It's a database baked right into the browser and if you want to use it (and you should) then you use JavaScript.

Also note that both mongodb and couchdb allow you to use javascript to run adhoc queries on the database directly.

As for heavy lifting, he's partly correct. If your doing heavy lifting you should be doing it in C or erlang. Although note that the term "heavy lifting" is vague, for example I wouldn't encode or decode videos in JavaScript, I wouldn't do image processing in JavaScript (use C). I wouldn't no number crunching in JavaScript (use fortran).

Has Javascript evolved from the definition above to something more powerful, has the way we use it changed, or am I just plain wrong

JavaScript was written in a period of 2 weeks just to slap minor scripting functionality into HTML. Since then it has grown severely. Since ES3 (1999) it has been a powerful general purpose programming language.

Best Answer

Related Solutions

Javascript – PHP, HTML, Javascript and writing good practices

General

JavaScript

HTML

PHP

Has JavaScript Evolved Beyond Its Original Design?

Related Topic