Menu
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:
separates structure and behaviour, in order to make your code cleaner and script maintenance easier
pre-empts browser incompatibilities
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.
970
There are several benefits of using Unobtrusive JavaScript. Separation of concerns i.e the HTML markup is now clean without any traces of javascript. Page load time is better. It is also easy to update the code as all the Javascript logic is present in a separate file.
The reasons are the same: it separates your concerns, keeps your code clean, and allows you to work on the JavaScript without touching either HTML or CSS.
Unobtrusive JavaScript is a general term that conveys a general set of guidelines or margins to the term REST. REST is nothing but the Representational State Transfer. We can explain Unobtrusive JavaScript as- it is not your particular JavaScript code that you generally use in your markup page.
Unobtrusive Validation means without writing a lot of validation code, you can perform simple client-side validation by adding the suitable attributes and including the suitable script files. These unobtrusive validation libraries need to be added: jquery.validate.min.js. jquery.validate.unobtrusive.js.
The idea of unobtrusive JavaScript is to turn old school design on its head: instead of making 100% JavaScript-powered, dynamic web pages ... make 100% regular, static web pages and then, almost as an afterthought, add an "also" layer of JavaScript. The result are web pages that can work 100% in any browser at any time.
This defines which event handlers (JavaScript functions) should run when a certain event takes place. What we have to do to make this unobtrusive is port the event handler assignment to a separate script file. That means the external script first has to find the correct element, and then assign an event handler to it.
Not true: In order to be unobtrusive to browsers, your script should steer clear of plain errors and compatibility problems, and take special devices such as speech browsers or mobile phones into account. Assumption: everybody else will understand my code.
Ideally, to be truly unobtrusive, you’d write some more code to fall back on to with older browsers, or alternatively use something like jQuery. In the case of connectivity, JavaScript files should be included at the bottom of the page, giving more weighting to the HTML document and stylesheets to be downloaded first.
There are two ways of approaching a website and the use of JS:
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
'------'
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?"
101
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
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
