18

When I first read the principle of unobtrusive JavaScript in the Web Standard Curriculum I thought it's a really great thing.

Unobtrusive JavaScript is more of a programming philosophy than a technique. By far its most important component is a clear sense of which functionality belongs in which layer. All absolutely crucial site functions should be coded in plain HTML, but once you’ve created that base you can add a JavaScript layer on top of the basics in order to give browsers that support it a nicer, cleaner, faster-seeming interface.

Further, unobtrusive JavaScript:

  1. separates structure and behaviour, in order to make your code cleaner and script maintenance easier

  2. pre-empts browser incompatibilities

  3. works with a clean, semantic HTML layer

For my current project I use this approach. When I turned JavaScript off for some other kind of work I had to do I was surprised how many websites are completely broken without JavaScript: missing functionality, as well as absent of a lot of important information, which were not present at all in the whole DOM.

These were especially social network sites. It should be no surprise that this were the case, the required development time and user experience might be a lot more important than the accessibility.

Still I am asking myself, whether unobtrusive JavaScript is not out of date. I mean which browser does not support JavaScript already natively? Is it still an approach which fits for the year 2012? I started doubting it.

Konrad Reiche
  • 27,743
  • 15
  • 106
  • 143
  • 14
    I think it depends on the type of site. A news site should show news without javascript enabled. I wouldn't expect a rich interactive site like google docs or facebook to work. More importantly, I wouldn't spend the extra money to make an interactive site work for the small proportion of people who disable JavaScript. – Ben Clayton May 03 '12 at 09:46
  • 1
    @BenClayton that should be an answer – Joseph May 03 '12 at 09:53
  • But what are user bases which do not have JavaScript available nowadays? – Konrad Reiche May 03 '12 at 09:56
  • 1
    Unobtrusive javascript is alive but a lot of webdevs just don't get it: "If I can't use your site on my mobile phone I won't make a purchase." Sites with unobtrusive javascript work well on my phone, the ones laden with trivial functionality don't. – Pieter B May 03 '12 at 09:56
  • I use it as more of a design philosophy. If my site is built to work when Javascript is disabled, it stops me from putting core pieces of functionality inside fragile Javascript files – Gareth May 03 '12 at 09:58
  • This question gets rehashed every couple of weeks. The answer is, 'it depends'. Most often, people write sites because it's easier and better with javascript, and they don't care about the miniscule number of people without javascript. Writing sites that work without javascript takes longer than doing both, and a company won't want to justify the cost just for 'web standards'. – NibblyPig May 03 '12 at 10:10
  • I have to disagree with @BenClayton re: expecting facebook to work. If you think about it, facebook is a basic site, you type in a form field, and press reply/share/etc. The only interactive (besides games) part is you get to see new comments, posts, and such without having to press refresh. I know it wouldn't kill me to have to press refresh. – Ryan B May 03 '12 at 15:03
  • 1
    Question has been closed, so I can't post this as an answer but: even where JS is required, the unobtrusive approach still has value as a code organization technique - see the three points mentioned in your quote above. It's far preferable to use that approach than to have unrelated fragments of code scattered through a HTML document. This is true *regardless* of whether one is also taking a Progressive Enhancement approach. (Think of it as the JS counterpart to keeping styles in a separate .css file as opposed to having them all inline in the HTML.) – BrendanMcK May 03 '12 at 21:13
  • 1
    I think the accepted answer is excellent, and I have to ask, why on earth was this question closed as "not constructive"? It's extremely constructive and increasingly relevant, and good on the asker for challenging some oft-repeated and oft-misunderstood mantras. – Tom W Hall Jul 25 '12 at 04:48
  • @TomHall I guess because the question could lead to a discussion without clear answer and many, many different opinions. Though I don't think this is the case here. – Konrad Reiche Jul 25 '12 at 09:41

2 Answers2

18

There are two ways of approaching a website and the use of JS:

  1. JS as an enhancement

    These types of sites are like "documents" in a sense that they are analogous to newspapers, books and letters. You don't need fancy effects to read and use the content. And with this comes progressive enhancement: Building a basic functionality and add on complexities without sacrificing the purpose.

    Most (large) websites use this scheme to preserve its usefulness even when using a non-capable browser. An example is StackOverflow, which even works on a lynx command-line browser!

     ______
| JS   | - JavaScript for (optional) enhancements
|------|
| CSS  | - CSS for (optional) style
|------|
| HTML | - (mandatory) HTML with base content
'------'

  2. JS as a platform

    For web apps, it's reasonable (more like mandatory) that they are build upon JS for real-time, dynamic content and functionality while HTML and CSS serves as the view. It's synonymous to other programming languages, where you can go "headless" with your program (no UI) like libraries and plugins.

    Graceful degradation comes with this approach: "Backwards support only to a certain extent, otherwise you get none at all"

     ____________
| HTML | CSS | - (optional) HTML and CSS view
|------------|
|     JS     | - (mandatory) JS platform
'------------'

It generally boils down to a question of "Is it a document, or an app?"

Joseph
  • 117,725
  • 30
  • 181
  • 234
3

Different companies take different approaches. For example Google for their search uses unobtrusive javascript which degrades gracefully, but for GMail they maintain a separate HTML only site which they developed later after GMail JS version.

To me it depends on

  1. Complexity
  2. Functionality,
  3. Cost
  4. Impacted user count

to decide whether to do Graceful degradation using unobtrusive JS or to build a dedicated HTML only site or to ignore that user base completely.

Ramesh
  • 13,043
  • 3
  • 52
  • 88