I have been making websites by myself for a few months now and although I understand the concept of how to add Javascript to a site, I am really struggling with how to best go about it and would have liked some experienced developers opinions/advice.
I have read countless times on SO that it is best practice to build a plain site first and then go about adding Javascript. That way the site will work pretty much no matter what. It’s a great idea for stuff like animations, basically, Javascript which acts on the page.
But, if you have a site with server generated content. And say, that to shorten load time on your pages you would like to then have part of your content loaded via ajax calls. How do you go about adding that to the site?
As far as I understand you cannot know at the server whether your client has Javascript enabled or disabled when the page refreshes… so you can’t leave content out at the server. But if you send all of it to the client then you don’t need an ajax on the page anymore.
How do you normally go about it in this case? Do you make links for and versions and signal the server which version to load that way?
But that still doesn’t tell you whether or not the user will have scripts enabled at refresh or not…
Or do you just do like facebook and ebay and ignore users with scripts disabled?
6
Answers
1) Personally I would ignore people without javascript.
2) Loading web parts is a personal flavour, so up to you if you want hardcore mode, however loading different web parts will potentially have variable/id/class name clashes, so be careful with them.
Technology is moving away from people without javascript, so this may be an eventuality to ignore them.
But if you must support those types of users it is a popular practice to ‘intercept’ html links/buttons when clicked and load through ajax. If the user doesnt have javascript, the link/button will act as normal.
This type of ‘interception’ concept is covered in progressive enhancement concepts.
Visually at least it always seems that AJAX-loading will feel slower (from the technical side this makes sense as it uses another GET request).
Javascript should be reserved for interactive loading of content not pre-loading all your content.
If you really want to I can only recommend pre-loading images, but not content for other “pages”
JavaScript adds so much potential that it is sometimes unwise to focus so much effort into creating a site that works perfectly for the few users who have it disabled.
Generally during the planning stages of a site, I determine what features are needs and what features are simply enhancements, like animation or dynamic content loading. I put failsafes in place to accomodate needs, while restricting the rest of the content to visitors with JS enabled.
I build my sites in a way that all of the essential content is still accessible to everyone in one way or another, but when it comes to “extras” that require JavaScript, I’m not going to waste my valuable time catering to the less than 1% my of visitors.
I would heed Mike Samuel’s advice, as StackOverflow probably is not the best place to ask this kind of question.
First, you should ask yourself what the nature of your website will be like. Relying on Javascript is rarely a good idea, since you will shut out some of your potential viewers (fortunately, less every day). On web apps such as Gmail, this makes sense, but you should never require your viewers to enable Javascript to do something essential to the site’s function.
It is also important to know the different technologies available and their place in website development. Of course, the big 3 are:
want to use animation (unless it’s essential), not Javascript)
Though seldom practiced, I would advice making your website fully functional without using CSS, Javascript, or anything, and then go about adding those technologies. That is a near-surefire way to make sure everyone can at least view your content.
Count on your users having javascript enabled, however do not allow security holes to be opened by those who would disable javascript. Edit per @Hawken: Also, do not make content that would normally be visible to the user unreachable if javascript is disabled.
Javascript is very versatile, and as such it is used in many different ways. Javascript can be used to preload images into the client cache in order to have a more fluid interaction.
Javascript can be used to facilitate dynamic content replacing or overlapping other content on the page.
AJAX is great when you want to query the server and get data back without refreshing the whole page. There are other ways to do this, but they usually involve frameworks.
AJAX is also good for when you want to dynamically load scripts or other data such as page sections from remote locations (same domain or from other domains – other domains can become complex.)
As a rule of thumb, use javascript to enhance client side browsing.