When a developing a web app, versus a web site, what reasons are there to use multiple HTML pages, rather than using one html page and doing everything through Javascript?
I would expect that it depends on the application -- maybe -- but would appreciate any thoughts on the subject.
Thanks in advance.
EDIT:
Based on the responses here, and some of my own research, if you wanted to do a single-page, fully JS-Powered site, some useful tools would seem to include:
JQuery Plug Ins:
JQuery History:
http://balupton.com/projects/jquery-history
JQuery Address:
http://plugins.jquery.com/project/jquery-address
JQuery Pagination:
http://plugins.jquery.com/project/pagination
Frameworks:
Sproutcore
http://www.sproutcore.com/
Cappucino
http://cappuccino.org/
Possibly, JMVC:
http://www.javascriptmvc.com/
page based applications provide:
ability to work on any browser or device
simpler programming model
they also provide the following (although these are solvable by many js frameworks):
bookmarkability
browser history
refresh or F5 to repeat action
indexability (in case the application is public and open)
One of the bigger reasons is going to be how searchable your website is.
Doing everything in javascript is going to make it complicated for search engines to crawl all content of your website, and thus not fully indexing it. There are ways around this (with Google's recent AJAX SEO guidelines) but I'm not sure if all search engines support this yet. On top of that, it's a little bit more complex then just making separate pages.
The bigger issue, whether you decide to build multiple HTML pages, or you decide to use some sort of framework or CMS to generate them for you, is that the different sections of your website have URL's that are unique to them. E.g., an about section would have a URL like mywebsite.com/about, and that URL is used on the actual "about" link within the website.
One of the biggest downfalls of single-page, Ajax-ified websites is complexity. What might otherwise be spread across several pages suddenly finds its way into one huge, master page. Also, it can be difficult to coordinate the state of the page (for example, tracking if you are in Edit mode, or Preview mode, etc.) and adjusting the interface to match.
Also, one master page that is heavy on JS can be a performance drag if it has to load multiple, big JS files.
At the OP's request, I'm going to discuss my experience with JS-only sites. I've written four relevant sites: two JS-heavy (Slide and SpeedDate) and two JS-only (Yazooli and GameCrush). Keep in mind that I'm a JS-only-site bigot, so you're basically reading John Hinkley on the subject of Jody Foster.
The idea really works. It produces gracefully, responsive sites at very low operational costs. My estimate is that the cost for bandwidth, CPU, and such goes to 10% of the cost of running a similar page-based site.
You need fewer but better (or at least, better-trained) programmers. JavaScript is an powerful and elegant language, but it has huge problems that a more rigid and unimaginative language like Java doesn't have. If you have a whole bunch of basically mediocre guys working for you, consider JSP or Ruby instead of JS-only. If you are required to use PHP, just shoot yourself.
You have to keep basic session state in the anchor tag. Users simply expect that the URL represents the state of the site: reload, bookmark, back, forward. jQuery's Address plug-in will do a lot of the work for you.
If SEO is an issue for you, investigate Google Ajax Crawling. Basically, you make a very simple parallel site, just for search engines.
When would I not use JS-only? If I were producing a site that was almost entirely content, where the user did nothing but navigate from one place to another, never interacting with the site in a complicated manner. So, Wikipedia and ... well, that's about it. A big reference site, with a lot of data for the user to read.
modularization.
multiple files allows you to mre cleanly break out different workflow paths and process parts.
chances are your Business Rules are something that do not usually directly impact your layout rules and multiple files would better help in editing on what needs to be edited without the risk of breaking something unrelated.
I actually just developed my first application using only one page.
..it got messy
My idea was to create an application that mimicked the desktop environment as much as possible. In particular I wanted a detailed view of some app data to be in a popup window that would maintain it's state regardless of the section of the application they were in.
Thus my frankenstein was born.
What ended up happening due to budget/time constraints was the code got out of hand. The various sections of my JavaScript source got muddled together. Maintaining the proper state of various views I had proved to be... difficult.
With proper planning and technique I think the 'one-page' approach is a very easy way to open up some very interesting possibilities (ex: widgets that maintain state across application sections). But it also opens up many... many potential problem areas. including...
Flooding the global namespace (if you don't already have your own... make one)
Code organization can easily get... out of hand
Context - It's very easy to
I'm sure there are more...
In short, I would urge you to stay away from relying on JavaScript dependency for the compatibility issue's alone. What I've come to realize is there is simply no need rely on JavaScript to everything.
I'm actually in the process of removing JavaScript dependencies in loo of Progressive Enhancement. It just makes more sense. You can achieve the same or similar effects with properly coded JavaScript.
The idea is too...
Develop out well-formatted, fully functional application w/o any JavaScript
Style it
Wrap the whole thing with JavaScript
Using Progressive Enhancement one can develop an application that delivers the best possible experience for the user that is possible.
For some additional arguments, check out The Single Page Interface Manifesto and some (mostly) negative reaction to it on Hacker News (link at the bottom of the SPI page):
The Single Page Interface Manifesto: http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php
stofac, first of all, thanks for the link to the Single Page Interface (SPI) Manifesto (I'm the author of this boring text)
Said this, SPI != doing everything through Javascript
Take a look to this example (server-centric):
http://www.innowhere.com/insites/
The same in GAE:
http://itsnatsites.appspot.com/
More info about the GAE approach:
http://www.theserverside.com/news/thread.tss?thread_id=60270
In my opinion coding a complex SPI application/web site fully on JavaScript is very very complex and problematic, the best approach in my opinion is "hybrid programming" for SPI, a mix of server-centric for big state management and client-centric (a.k.a JavaScript by hand) for special effects.
Doing everything on a single page using ajax everywhere would break the browser's history/back button functionality and be annoying to the user.
I utterly despise JS-only sites where it is not needed. That extra condition makes all the difference. By way of example consider the oft quoted Google Docs, in this case it not only helps improve experiences it is essential. But some parts of Google Help have been JS-only and yet it adds nothing to the experience, it is only showing static content.
Here are reasons for my upset:
Like many, I am a user of NoScript and love it. Pages load faster, I feel safer and the more distracting adverts are avoided. The last point may seem like a bad thing for webmasters but I don't want anyone to get rewarded for pushing annoying flashy things in my face, if tactless advertisers go out of business I consider it natural selection.
Obviously this means some visitors to your site are either going to be turned away or feel hassled by the need to provide a temporary exclusion. This reduces your audience.
You are duplicating effort. The browser already has a perfectly good history function and you shouldn't need to reinvent the wheel by redrawing the previous page when a back button is clicked. To make matters worse going back a page shouldn't require re-rendering. I guess I am a student of If-it-ain't-broke-don't-fix-it School (from Don't-Repeat-Yourself U.).
There are no HTTP headers when traversing "pages" in JS. This means no cache controls, no expiries, content cannot be adjusted for requested language nor location, no meaningful "page not found" nor "unavailable" responses. You could write error handling routines within your uber-page that respond to failed AJAX fetches but that is more complexity and reinvention, it is redundant.
No caching is a big deal for me, without it proxies cannot work efficiently and caching has the greatest of all load reducing effects. Again, you could mimic some caching in your JS app but that is yet more complexity and redundancy, higher memory usage and poorer user experience overall.
Initial load times are greater. By loading so much Javascript on the first visit you are causing a longer delay.
More JavaScript complexity means more debugging in various browsers. Server-side processing means debugging only once.
Unfuddle (a bug-tracker) left a bad taste. One of my most unpleasant web experiences was being forced to use this service by an employer. On the surface it seems well suited; the JS-heavy section is private so doesn't need to worry about search engines, only repeat visitors will be using it so have time to turn off protections and shouldn't mind the initial JS library load.
But it's use of JS is pointless, most content is static. "Pages" were still being fetched (via AJAX) so the delay is the same. With the benefit of AJAX it should be polling in the background to check for changes but I wouldn't get notified when the visible page had been modified. Sections had different styles so there was an awkward re-rendering when traversing those, loading external stylesheets by Javascript is Bad Practice™. Ease of use was sacrificed for whizz-bang "look at our Web 2.0" features. Such a business-orientated application should concentrate on speed of retrieval, but it ended up slower.
Eventually I had to refuse to use it as it was disrupting the team's work flow. This is not good for client-vendor relationships.
Dynamic pages are harder to save for offline use. Some mobile users like to download in advance and turn off their connection to save power and data usage.
Dynamic pages are harder for screen readers to parse. While the number of blind users are probably less than those with NoScript or a mobile connection it is inexcusable to ignore accessibility - and in some countries even illegal, see the "Disability Discrimination Act" (1999) and "Equality Act" (2010).
As mentioned in other answers the "Progressive Enhancement", née "Unobtrusive Javascript", is the better approach. When I am required to make a JS-only site (remember, I don't object to it on principle and there are times when it is valid) I look forward to implementing the aforementioned AJAX crawling and hope it becomes more standardised in future.
Related
I'm rendering a news feed.
I'm planning to use Backbone.js for my javascript stuff because I'm sick of doing manual DOM binds with JQuery.
So right now I'm looking at 2 options.
When the user loads the page, the "news feed" container is blank. But the page triggers a javascript which renders the items of the news feed onto the screen. This would tie into Backbone's models and collections, etc.
When the user loads the page, the "news feed" is rendered by the server. Even if javascript was turned off, the items would still show because the server rendered it via a templating engine.
I want to use Backbone.js to keep my javascript clean. So, I should pick #1, right?? But #1 is much more complicated than #2.
By the way, the reason I'm asking this question is because I don't want to use the routing feature of Backbone.js. I would load each page individually, and use Backbone for the individual items of the page. In other words, I'm using Backbone.js halfway.
If I were to use the routing feature of Backbone.js, then the obvious answer would be #1, right? But I'm afraid it would take too much time to build the route system, and time should be balanced into my equation as well.
I'm sorry if this question is confusing: I just want to know the best practice of using Backbone.js and saving time as well.
There are advantages and disadvantages to both, so I would say this: choose the option that is best for you, according to your requirements.
I don't know Backbone.js, so I'm going to keep my answer to client- versus server-side rendering.
Client-side Rendering
This approach allows you to render your structure quickly on the server-side, then let the user's JavaScript pick up the actual content.
Pros:
Quicker perceived user experience: if there's enough static content on the initial render, then the user gets their page back (or at least the beginning of it) quicker and they won't be bothered about the dynamic content, because in all likelihood that will render reasonably quickly too.
Better control of caching: By requiring that the browser makes multiple requests, you can set up your server to use different caching headers for each URL, depending on your requirements. In this way, you could allow users to cache the initial page render, but require that a user fetch dynamic (changing) content every time.
Cons:
User must have JavaScript enabled: This is an obvious one and I shouldn't even need to mention it, but you are cutting out a (very small) portion of your user base if you don't provide a graceful alternative to your JS-heavy site.
Complexity: This one is a little subjective, but in some ways it's just simpler to have everything in your server-side language and not require so much back-and-forth. Of course, it can go both ways.
Slow post-processing: This depends on the browser, but the fact is that if a lot of DOM manipulation or other post-processing needs to occur after retrieving the dynamic content, it might be faster to let the server do it if the server is underutilized. Most browsers are good at basic DOM manipulation, but if you have to do JSON parsing, sorting, arithmetic, etc., some of that might be faster on the server.
Server-side Rendering
This approach allows the user to receive everything at once and also caters to browsers that don't have good JavaScript support, but it also means everything takes a bit longer before the browser gets the first <html> tag.
Pros:
Content appears all at once: If your server is fast, it will render everything all at once, and that's that. No messy XmlHttpRequests (does anyone still use those directly?).
Quick post-processing: Just like you wouldn't want your application layer to do sorting of a database queryset because the database is faster, you might also want to reserve a good amount of processing on the server-side. If you design for the client-side approach, it's easy to get carried away and put the processing in the wrong place.
Cons:
Slower perceived user experience: A user won't be able to see a single byte until the server's work is all done. Sure, the server is probably going to zip through it, but it's still a few extra seconds on the user's side and you would do them a favor by rendering what you can right away.
Does not scale as well because server spends more time on requests: It might be that you really want the server to finish a request quickly and move on to the next connection.
Which of these are most important to your requirements? That should inform your decision.
I don't know backbone, but here's a simple thought: if at all possible and secure, do everything on the client instead of the server. That way the server has less work to do and can therefore handle more connections and scale better.
But #1 is much more complicated than #2.
Not really. Once you get your hang of Backbone and jQuery and client-side templating (and maybe throw CoffeeScript into the mix, too), then this is not really difficult. In fact, it greatly simplifies your server code, as all the display-related functions are now removed. You could also even have different clients (mobile version, for example) running against the same server.
Even if javascript was turned off, the items would still show because the server rendered it via a templating engine.
That is the important consideration here. If you want to support users without Javascript, then you need a non-JS version.
If you already have a non-JS version, you can think about if you still need the "enhanced" version, and if you do, if you want to re-use the server-side templating you already have coded and tested and need to maintain anyway, or duplicate the effort client-side, which adds development cost, but as you say may provide a superior experience and lower the load on the server (although I cannot imagine that fetching rendered data versus fetching XML data makes that much of a difference).
If you do not need to support users without Javascript, then by all means, render on the client.
I think Backbone's aim is to organize a Javascript in-page client application. But first of all you should take a position on the next statement:
Even if javascript was turned off, the web-app still works in "post-back mode".
Is that one of your requirements? (This is not a simple requirement.) If no, then I'll advice you: "Do more JS". But if yes then I believe your best friend is jQuery load function.
A Note: I'm a Java programmer and there's a lot of server-side frameworks that bring the ability to write applications that work ajax-ly when js is enabled and switch on post-backs when it isn't. I think Wicket and Echo2 are two of them but it's meant they are server-side libraries...
The previous programmer left the website in pretty unusable state, and I am having difficulty modifying anything. I am new to web design so I don't know whether my skills are a mismatch to this kind of job or is it normal in the real industry to have websites like these
The Home page includes three frames
Each of these frames have their own javascript functions ( between <head>, and also call other common javascript functions (using <script src=..>
Excessive usage of document.all - in fact the elements are referred or accessed by document.all only.
Excessive usage of XSLT and Web Services - Though I know that using Web Services is generally considered a good design choice - is there any other way I can consume these services other than using xslt. For example, the menu is created using the data returned by a web method.
Every <div>, <td> and every other element has an id, and these id's are manipulated by the javascript functions, and then some appropriate web service and the xslt files are loaded based on these..
From the security perspective, he used T-SQL's for xml auto for most of the data that is returned by the web service - is it a good choice from the security standpoint to expose the table names and column names to the end user??
I am a lot confused about the state of the application itself. Should I learn about the intricacies that he has developed and continue working on it, or should I start rewriting everything? What I am perplexed a lot is the lack of alternatives - and whether this is the common way web projects are handled in the real world or was it an exception?
Any suggestions, any pointers are welcome. Thanks
No, it is not acceptable in this industry that people keep writing un-maintainable code.
My advice to you is to go up the chain and convince everyone that this needs to be rewritten. If they question you, find an external consultant with relevant web development skills to review the application (for 1 day).
Keeping this website as-is, because it 'works' is like keeping a working model Ford-T car on today's highways, very dangerous. Security and maintenance costs are likely the most persuading topics to convince anyone against keeping this site 'as-is'.
Next, get yourself trained, it will pay off if you can rewrite this application knowing the basics. Todays technology (asp.net MVC) allows you to implement core business value faster than trying to maintain this unconventionally written app.
Tough spot for an inexperienced developer (or any) to be left in. I think you have a few hard weeks a head of you where you really need to read up on the technologies involved to get a better understanding of them and what is best practice. You will also need to really dig down into the existing code to understand how it all hangs together.
When you done all that you really need to think about your options. Usually re-writing something from scratch (especially if it actually works) is a bad idea. This obviously depend on the size of the project, for a smaller projects with only a couple of thousand lines of code it might be OK. When looking at someone elses code it is also easy to overlook that all that weird shit going on could actually be fixes for valid requirements. Things often start out looking neat, but then the real words comes visiting.
You will need to present the business with time estimates for re-writing to see if that is an option at all, but I'm guessing you will need to accept the way things are and do your best with what you have. Maybe you could gradually improves things.
I would recommend moving the project to MVC3 and rewriting the XSLT portions to function using views and/or partial views with MVC. The Razor model binding syntax is very clean and should be able to quickly cleave out the dirty XSLT code and be left with just the model properties you would need.
I would then have those web services invoked from MVC serverside and for you to deserialize the object results into real objects (or even just use straight XQuery or Json traversing to directly pull stuff out for your model) and bind those to your views.
This could be a rather gargantuan leap for technology at your company though. Some places have aversion to change.
I'd guess this was written 6-7 years ago, and hacked on since then. Every project accumulates a certain amount of bubble gum and duct tape. Sounds like this one's got it bad. I suggest breaking this up into bite size chunks. I assume that the site is actually working right now? So you don't want to break anything, the "business" often thinks "it was working just fine when the last guy was here."
Get a feel for your biggest pain points for maintaining the project, and what you'll get the biggest wins from fixing. a rewrite is great, if you have the time and support. But if it's a complex site, there's a lot to be said for a mature application. Mature in the sense that it fulfills the business needs, not that it's good code.
Also, working on small parts will get you better acquainted with the project and the business needs, so when you start the rewrite you'll have a better perspective.
Ok this is a bit of a rant and a question combined - Why the hell is magento so reliant on javascript?? This goes agaisnt all usability guidelines. WHats so annoying is that it even uses buttons instead of correct form submit elements. Why? This makes no sense what sense at all to me.
Why is this and is there a way around it?
The past five years have seen an increase of web application developers eschewing the common wisdom of of the late 20th and early 21st century by creating applications and require javascript as a baseline technology. Magento is following this trend because they want to provide a moden, AJAX enabled experience, and providing both a Javascript and non-Javascript experience increases both development and testing time.
Most decisions in the e-commerce industry come down to the ROI of increased sales. Magento has calculated/bet/decided that sales lost due to people having Javascript off are less than the cost of developing both a javascript and non-javascript experience.
As for their use of the HTML button attribute, Magento isn't a web page, it's a web application. Their architecture takes a Java like approach, including a UI that's abstracted away from the browser. This means PHP is used to tame the browser rather than using PHP to work with the browser. In this context button elements (driven by Javascript) make more sense. Take a look at Google Web Tools for another example of this.
The way to "get around" this is to not use Magento, or to customize Magento such that it fits your model of what web development should be. If your first response to this is "woah, that would take way too much time", then congratulations, you're thinking exactly the same way that Magento is. Magento, the company, isn't Microsoft, or Oracle, or SAP. They're a 200 person company, and expecting them to solve all your problems (for free) isn't realistic.
Welcome to 2010.
Magento's JS reliance is unusable in exactly one way: you cannot use the store without it. That's a big one (losing 1/20 of your customers is not a small thing), but ultimately it's a tradeoff that they decided was worth it.
As an example of the flexibility that you get as a result of this decision, consider the case of configurable products, especially with pricing differences. Magento allows you to create products that are configurable over N axes, in a ragged manner (some color/size combinations of clothing can be missing, for example), with different pricing for every single option. Doing that without JS would be tough, doing it elegantly (which Magento has, for the most part), is nigh impossible. By enforcing JS, the developers at Magento, Inc can spend their time implementing these kinds of features more quickly, which is to everyone's benefit.
To answer the question at the end of your post, no you cannot get by without it -- at least without writing a new frontend theme that reimplements everything from scratch, which nobody so far seems to have been able to do. Personally, the number of JS libraries that Magento uses seems pretty heinous to me, but nobody seems to have solved that problem either. The app is too complex and tightly woven to unwind that far.
Sorry it's not better news, but I hope that at least clarifies some of the thinking for the way things are.
Thanks,
Joe
"Why is this and is there a way around it?"
Although the front end uses Javascript heavily it is only essential in a couple of places. Configurable products is one. The one-page checkout is another but that at least can be disabled in System > Configuration > Checkout > Checkout Options.
Buttons with event handlers can be rewritten as a matter of theming, in some cases their destination URL is not the same as their form submission so a little forethought is required. In some cases buttons are not in the form element they are submitting, that is why they use script.
I will assume when considering accessibility you are not concerned about luxuries like image zoom and search suggestions. I notice HTML5 provides the datalist element for input suggestions but some sort of script would still be needed to update it beyond the initial suggestion.
Overall Magento is quite functional without Javascript, just not as out-of-the-box. An 'accessible' theme would make a valid extension should someone want to develop it.
We've just been looking into this when I came across this post (first time we've used the magento platform and our first project with it).
Typically we'd ensure that every site we develop degrades gracefully without javascript, but this is looking like it might be too much work for us on this particular project at least for the first phase (tight deadline alongside steep learning curve).
While I agree that javascript can offer some great usability enhancements, providing a non-javascript fallback isn't just about supporting the odd akward person who insists on turning it off.
Some users using disabled access devices (screen readers etc) as far as I know, might not have the option to use javascript either (or may find javascript interfaces more troublesome to use if not impossible in some cases). In these cases if it doesn't degrade gracefully for them, then I'm a bit concerned that it may conflict with disability discrimination legislation in the UK/EU (where our client operates).
For this reason, I'm not sure we can take the position the magento developers have in the long run (we'll probably end up backtracking and resolving this ourselves ultimately and I'm guessing that will take us longer than if it degraded gracefully from the start and we could simply build upon that).
The admin area is less of an issue, but the front end should work without javascript imho and I was a bit surprised when I discovered that it didn't work without it (the client came to us specifying magento so there isn't much we can do but run with it at the moment).
I think you'll find that the Javascript in most cases significantly enhances the usability. Trying to implement something like the Manage Products grid, Manage Categories tree or Promotions editor without Javascript would be a usability nightmare. When you look at the stats, well over 95% of browsers have Javascript enabled, so what's the problem?
Try using this site with java-script disabled. It works but start counting the post backs and you will see why usability trumps the few folks who insist on disabling java-script.
Background: I'm working on an e-commerce website. It was my original intention to add JavaScript on top of regular html pages, so that users with JS support got the added benefits, but users without it could still use the basic html forms to add things to their cart, to search, etc.
I've run into a few situations though, where there simply isn't a sane way to implement certain functionality in a non JavaScript way.
One example is chained attribute selects on product pages (where the color choices change based on the size chosen, because not all sizes come in every color). Even if I didn't use AJAX, it would still require JavaScript to dynamically change the options.
The only alternatives to JavaScript that I can think of would be:
A. Have an add to cart "wizard" where you have to step through each attribute choice on a separate page (yuck!)
B. Put each size/color variation out as a separate product (and force the customer to wade through the category page to find the color size combo that they want)
...And while both of the above would work regardless of whether the user has JavaScript on or not, they both punish the JavaScript users by restructuring the page and forcing them to use an interface designed for the lowest common denominator.
So the question is, since JavaScript has taken a much larger role in web development than it did a few years back, and the design pattern for an AJAX/JS application/site is so much different now than a 'classic' web design pattern, do we still go out of our way to support non JS users? Or do we say, "To hell with you! Update your browser, turn on JavaScript or go shop elsewhere"?
I'd be interested to see other developer's take on this.
I think it really depends on your target audience. I work for a company that has several types of websites, some are focused on your avg guy or gal who's into gaming. And our stats show us that the vast majority of these people have javascript enabled.
We also have a site that's focused at developers, and many of these developers won't allow javascript to run on a site unless they trust it. I've seen as many as 20-30% of the browsers on that site don't run javascript.
So it's very subjective.
IMHO, it's very reasonable to use vast amounts of tasteful javascript to enhance an otherwise mundane experience. However, I also think that when possible it should gracefully degrade. This form of degradation isn't too hard to achieve (in most cases) as long as you consider it when you're designing things.
The most important non-javascript user is Google. Do not forget that.
When it comes to things like Ajax, or any javascript for that matter, I think it's best to:
Plan for Ajax from the start; Implement Ajax at the end -Jeremy Keith
This means Intercept (hijack) links and forms using (unobtrusive) JavaScript making your code degrade well for those that don't have javascript enabled. If you want to show a fancy slider, make it a link that tells the server to show the div when you reload the page and tell your javascript to do something differently when the link is clicked.
These ideas are your safest bet for a functional, but fun website.
I think that supporting non-Javascript users is absolutely necessary for any site aiming at some kind of "normal" target group (i.e. not gamers or techies).
There is an increasing number of mobile devices accessing, and trying to parse, normal content.
Many corporate networks still block scripting for security reasons - you don't want to lose the occasional employee shopping from work, either.
Javascript tends to screw any attempt at accessibility. In my mind, creating sites that are as accessible as possible is a service to our fellow human beings.
I'm not saying I'm lily white on this. I hate replicating functionality that I just managed to achieve in my JS framework in static HTML, or making it degrade gracefully. But I think it still really, really is a must, and not merely a question of profitability. This is something worth investing a bit extra, or putting a bit of unpaid work into.
If you can exclude users that don't use javascript, so this will be some mobile devices, or the truly paranoid, as well as lynx users, and any users not using the version of javascript you write for.
If you are willing to go with that then I would suggest you have a static html page that has some message that javascript is required.
When your javascript is loaded, and the DOM tree is ready then you can replace this message, so it is never seen, with the rest of the webpage.
But, you may want to see how you can get the functionality, even if limited, for non-javascript browsers.
For example, for colors you can use a horizontal dropdown that can work on all but older IE browsers: http://www.alistapart.com/articles/horizdropdowns/
If you want to use javascript to make your life simpler then that may be a poor reason, but, if you are doing a photoshop webapp then you will need javascript.
NOTE I would suggest having it work with and without javascript, as an e-commerce site will want to not exclude any customers, I expect.
Much of it depends on your audience. As you said years ago JavaScript was used in a different way, and a bit of an annoyance even. Now with AJAX and increased functionality it's a must, and most people have it turned on.
You could say that someone with Javascript disabled is used to stuff not working pretty regularly, and a small minority.
However, if you're building a site that will be frequented by older computers or people on limited bandwidth (such as foreign traffic) you might want to consider working around them. Also a site that is heavily visited by mobile browsers might be another one to focus on.
Take a look at your analytics and see what the current usage is, and profile your audience to really find out.
The best answer will depend on a simple comparison: Estimate the extra money you will spend creating the non javascript alternative site. Estimate the money you will make selling products to your non javascript enabled customers. Compare. If you are a huge shop, then getting sales from that last 2% or 10% of users might be worth it. If you are just one guy, maybe you have more profitable ways to spend your time.
I found this interesting and fact driven post, it might help. Why we should support users without Javascript. Following is a summary:
Some people choose to turn JS off.
JS fails occasionally, HTML/CSS does not.
JS is designed to and should be the icing on the cake, not a patch-job for bad HTML/CSS.
In theory, yes; but in practice, no.
In theory it's in the spirit of the web to support hardware and software with a range of capabilities and configurations, scaling site features appropriately.
In practice, even mobile browsers are converging on the sweet spot occupied by the current major desktop browsers. Users on the outside can typically switch to an alternate browser or device in a pinch.
While it seems logical, progressive, simpler, and more efficient to require Javascript for an e-commerce site, you should ask yourself if you are willing to forego x percent of the business that would be generated by non-Javascript users, and weigh that against lower development costs.
The percent of business lost is likely not the percent of non-Javascript users, because a smaller percentage of non-Javascript visitors are likely to purchase goods are services. The percentage of lost business will probably be somewhat less than the percentage of non-Javascript users.
focus on making advanced feature to the large audience is better than spending time to find work around for non-javascript user and ones who use obsolete platform.
In my opinion there 2 things you have to consider when thinking about using JavaScript on a website:
Is Google still able to crawl all the content
If some parts of the website are not usable without JavaScript then make a very clear message for the non JavaScript users, why you site is not working for them
I think we need to support non-javascript users again.
There are users including me who doesn't disable JS for any kind of paranoia, but because some sites are so JS heavy nowadays that my browser is slowed down to a grinding halt. And this is getting worse recently, so I expect more users will do this eventually. I wanted my performance back so I installed browser plugins that let me selectively enable only the absolutely necessary scripts on the site. So I can have a dozen of tabs open again without performance problems.
When even mobile browsers have JavaScript, is it really necessary to consider potential script-free users?
Yes. Your web pages aren't just consumed by people: they're consumed by search engines, and crawlers, and screenscrapers. Most of those automatic tools don't support Javascript, and essentially none are going to generate UI events or look at deeply nested AJAX data. You want to have a simple static HTML fallback, if nothing else then so that your web pages are well indexed by the search engines.
Forget the crazies who disable Javascript; think of the robots!
Yes.
People can (and do) browse with javascript disabled. If your site will work without users having to explicitly enable javascript for you, that makes them happy.
Exactly how relevant depends on your target audience, of course.
I would argue that you shouldn't go significantly out of your way to accommodate for non-JS users for the following reasons:
All Modern Browsers Support JS
This is a snapshot of browser usage
today:
http://www.w3schools.com/browsers/browsers_stats.asp
Even the oldest common browser, IE6,
supports basic JavaScript and AJAX.
If you decide not to integrate
certain features b/c of a JS
dependence, this proves that you are
essentially doing it for people who
started with JavaScript enabled and
explicitly chose to disable it. I
think these people should expect for
some features, and perhaps even
entire sites, not to work as a
consequence.
Few People Willingly Disable JS
Building on my point above, average
web users don't know or don't care
that JS can be disabled in browsers.
It's largely a tech savvy crowd who
knows how to do this (myself
included), and as tech savvy users we should know when to
turn it back on as well.
Cost of Support
In light of the above, consider that
choosing to accomodate users who have
primarily willingly disabled JS comes
with a very real cost. If you are
managing a large project with heavy
UI requirements, you can easily burn
a lot of developer hours
accommodating for what is a very
small user preference. Check your
budget. If it is going to take 2 devs
working 40 extra hours each on the project
to accomplish this feat, you are
easily going to burn a few thousand
dollars on what is essentially a
non-issue for the vast majority of
your users. How about using that time
and investment to further buff up
your core competency?
Precedence
I may very well be wrong on this, but
I think it would be difficult to find
major media or social sites that
don't rely on JavaScript for some
portion of their functionality to
work. If major businesses that rely
on the operation and accessibility of
their site to stay in business aren't
doing it, there's a good chance it's
because it isn't needed.
CAVEATS:
Know your market. Continue to build XHTML/CSS that is semantic (preferably by using the RDFa W3C recommendation). Still strive to make your sites accessible to the visually impaired. Don't believe everything you read. ;)
DISCLAIMER:
My argument above is largely dependent on how you define "graceful degradation." If you mean all the links still work, that's one thing, but if you mean all the links still work and so does the wombats game, that's another. I'm not trying to argue for making your site so JS dependent that non-JS users can't access any portion of it. I am trying to make an argument for the acceptability of certain features, even some core features, being reliant on JS.
It is relevant and it will be relevant even after 10-20 years when javascript might be supported everywhere. making things work without javascript is important development technique because it forces you to keep things simple and declarative. ideally javascript should be used only to enhance experience but your website shouldn't depend on it.
there is clear advantage from maintenance point of view to have most of the code in declarative format (html+css) and as little as possible in imperative (javascript).
My position:
I browse with NoScript, so if I come on your site it will be without benefit of Javascript. I don't expect the full user experience.
What I want, before turning on JS, is to be assured that you're reasonably competent and not malicious, and that I actually want what you're using JS for.
This means that, if you actually want me to use your site, you should allow me to look around, using links. (If I see a site that's totally useless without Javascript, I generally think the designers were incompetent.) You should let me know what sort of functionality I'll get from enabling Javascript, and you should present the site in a legitimate-seeming way.
I don't think that's too much to ask.
graceful degadation / progressive enhancement / unobstusive javascript is absolutely relevant!
as with all accessability issues: just imagine for one second what it's like to be the one on the outside who can't use the page.
imagine you're travelling around the world, you're in some hotel or internet café with really old computers, old software, old browsers, you want to look up your flight and you realize you can't because of some javascript incompatability in the old browser you're using.
(try 'old mobile phone' or 'stuck behind a corporate firewall' for different scenarios)
image what a world of possibilities opend up to blind people with screen readers and the web, and image what it's like to find these possibilties closed again because of javascript.
so much for appealing to your better nature.
you might also want to do it
to keep your site accessibly for search engines.
Yes, it's relevant. Mobile browsers in use today do not all have Javascript enabled. It's available on new phones, sure. But there are millions and millions of people like me, who have phones running older browsers, and for all of us, a JS-required browsing experience is just plain broken.
I don't even bother visiting sites that didn't have progressive enhancement in mind when they coded. I'm not technically behind the times. My phone is a year old. But I'm not going to re-up my contract and buy a new phone because of a crippled web experience.
It depends on who your target audience is. I have JavaScript turned off by default and turn it on when I know what the site's intent is.
It's generally much faster to browse with Javascript disabled (digg.com is lightning without JS), which is why it's popular.
In Opera it's really easy: you simply press F12 and untick the javascript option. I always browse without Flash, Java (not javascript), animated images and sound. I enable Flash on a per-site basis, eg YouTube. Sometimes I turn off JS temporarily if my system is slowing down.
And don't forget about:
Screen readers (I think they mostly have JS disabled)
Text browsers or other very old systems
Ad blockers (if your filename happens lands under their radar)
Any old browser that either doesn't support JS at all or the JS breaks (e.g. IE6 doesn't support some modern JS stuff).
The solution is to use progressive enhancement rather than graceful degradation, i.e. start with the basic HTML and add CSS. Then add Javascript and/or AJAX to parts of the site.
For example, if you had a site like Stack Overflow, voting up an answer could submit a form normally. If JS is enabled, it would do an AJAX request, update the vote count and cancel the form submission, without leaving the page. SO doesn't do this though...
I for one always have NoScript turned on unless I trust the site for a number of reasons including cross-site-scripting, click jacking, and HTML injection. It's not me being paranoid, it's because I know a lot of developers, and know most of them have no idea what web security is, never mind how to avoid vulnerabilities.
So until I trust a site there's no chance I'd let it do anything fancy.
For the unfamiliar, there are some interesting blog entries on the subject:
Protecting Your Cookies: HttpOnly
Cross-Site Request Forgeries and You
Sins of Software Security
Top 25 Most Dangerous Programming Mistakes
I'm going to have to make a case for the other side here. Peoples reasons for designing sites without javascript are largely idealistic. Given an enough time and money and the goal is achievable and will certainly open your website to the largest possible number of people. However in reality doing this will slow your development, increase the number of test cases that you have to deal with, and ultimately affect the quality of your application for those users that do use javascript.
In my opinion it is perfectly reasonable to choose to make your site only compatible with js enabled browsers and tell those users that dont have it that they are missing out. This allows you to concentrate on creating rich content that the majority of users will be able to view.
There are of course exceptions to this rule, but if you are looking to create a good website for the majority of users, or have a client who is after a flashy website with limited time or money then taking the decision that it is js enabled browsers only is a reasonable thing to do.
The real question is not whether it is relevant, but whether to use Graceful Degradation, or Progressive Enhancement as your scripting strategy.
I'm actually in an interesting position when it comes to graceful degradation of JS. I'm working on a web application that bots and crawlers have absolutely no business looking into. There's nothing they can gleam that should be indexed.
The informational site accompanying the web application, however, should be indexed, and therefore JS degrades gracefully there.
In the web application, if you don't have JavaScript enabled, you're probably not supposed to be there. It's intended to be a rich interactive experience. The web application actually requires JS to be enabled, and for you not to be sitting behind a corporate firewall.
We're not serving anything malicious, its just our intent and purpose for the web application that's different. The goals of our web application and those of our informational site are completely different.
I use JavaScript. I always keep my browser up-to-date. But sometimes, my Internet connection is so bad that scripts just don't load.
There are also cases when:
Some scripts load, but others fail, in which case parts of a website stop functioning
Scripts are loading, but I want to hit "submit" without waiting for that fancy frilly menu
A script malfunctions because it was partially loaded and then cached at that half-stage
I'm in such a hurry that I just decide to use Lynx.
Now, I'm not saying my Internet is bad all the time, or even most of the time, but it does happen. With the Internet expanding rapidly to many rural areas across the world, I'm sure I'm not the only one. So apart from bots as Nelson mentioned above, it's another thing to keep in mind. (Hint: check your demographics).
If you don't want the page to work when Javascript is off then just have that be the message in html, and if javascript is on, by using unobtrusive javascript you can get rid of that message and make visible the rest of the application.
Depending on what you write for, in terms of javascript version, you may need to degrade if the browser the user has doesn't not have the latest version, so gracefully handling that is also important.