Unobtrusive JavaScript

Unobtrusive JavaScript is a general approach to the use of client-side JavaScript in web pages so that if JavaScript features are partially or fully absent in a user's web browser, then the user notices as little as possible any lack of the web page's JavaScript functionality.^[1] The term has been used by different technical writers to emphasize different aspects of front-end web development. For some writers, the term has been understood more generally to refer to separation of functionality (the "behavior layer") from a web page's structure/content and presentation,^[2] while other writers have used the term more precisely to refer to the use of progressive enhancement to support user agents that lack certain JavaScript functionality and users that have disabled JavaScript.^[3] Following the latter definition, unobtrusive JavaScript contributes to web accessibility insofar as it helps ensure that all users—whatever their computing platform—get roughly equal access to all of the web page's information and functionality.^[4][5]

Overview

A typical client-side dynamic web page can be conceived as consisting of four parts: the marked-up content (HTML), the style sheet (CSS), client-side JavaScript, and embedded objects such as images.^[6]: 5 The client-side JavaScript part can be conceived as enhancing the other parts by adding features or functionality that would not be possible without JavaScript.^[6]: 3

The concept of "unobtrusiveness" in relation to client-side JavaScript was coined in 2002 by Stuart Langridge^[7] in the article "Unobtrusive DHTML, and the power of unordered lists".^[8] In the article Langridge argued for a way to keep all JavaScript code, including event handlers, outside of the HTML when using dynamic HTML (DHTML).^[7] He said that the purpose of this kind of organization of code was "providing a better user experience for people whose browsers can support it, and not affecting those whose browsers cannot", while also making scripting easier for web developers.^[7] Langridge later expanded upon this thought and emphasized that the core meaning of "unobtrusive" is that "if a given Web browser doesn't support the DHTML features you're using, that absence should affect the user experience as little as possible".^[1] In other words, for Langridge, "unobtrusive" principally refers to users' experience of the absence of JavaScript features in a given situation.^[1]

Variant definitions

Other authors have described variations on the essential elements of unobtrusiveness.

David Flanagan's book JavaScript: The Definitive Guide (2006) said that while there is no specific formula, there are three main goals of unobtrusive JavaScript:^[4]

• To separate JavaScript from HTML markup, as well as keeping modules of JavaScript independent of other modules using basic conventions such as the use of namespaces to prevent namespace collisions and the use of module initialization code;
• To degrade gracefully—all content should be available without all or any of the JavaScript running successfully;
• To not impede the accessibility of the HTML, and ideally to improve it, whether the user has personal disabilities or are using an unusual, or unusually configured, browser.

The Web Standards Project, in its JavaScript Manifesto (2006), said that the "purpose of JavaScript is enhancing the usability of web pages by adding interaction to them", and described four benefits of unobtrusive DOM scripting:^[9]

1. Usability: An unobtrusive DOM script does not draw the attention of the user—"visitors just use it without thinking about it."
2. Graceful degradation: Unobtrusive DOM scripts never generate error messages, in any browser, even when they fail. If features cannot be presented properly, they silently disappear.
3. Accessibility: If any script fails, the page still delivers its core functions and information via the markup, stylesheets and/or server-side scripting.
4. Separation: For the benefit of other and future web developers, all JavaScript code is maintained separately, without impacting other files of script, markup or code.

For the Paris Web Conference in 2007, Christian Heilmann identified seven rules of unobtrusive JavaScript, some of which were wider in scope than other narrower definitions of "unobtrusive":^[10]

1. "Do not make any assumptions": Defensive programming techniques should allow for the possibilities that JavaScript may not run, the browser may not support expected methods, the HTML may have changed, unexpected input devices may be in use and other scripts may either not be present or may be encroaching on the global namespace.
2. "Find your hooks and relationships", such as IDs and other aspects of the expected HTML.
3. Leave traversing individual DOM objects to the experts, such as to the CSS handler built into the browser where possible.
4. "Understand browsers and users", particularly how browsers fail, what assumptions users make, and unusual configurations or usages.
5. "Understand events", including how they 'bubble' and the features of the Event object that is passed to most event handlers.
6. Play well with other scripts by avoiding global function and variable names.
7. "Work for the next developer" by using self-explanatory variable and function names, creating logical and readable code, making dependencies obvious, and commenting any code that still might confuse.

The broader definitions of unobtrusive JavaScript have much in common with general programming best practices, such as encapsulation and abstraction layers, avoidance of global variables, meaningful naming conventions, use of appropriate design patterns, and systematic testing.^[11]

References

1. Langridge, Stuart (2005). DHTML Utopia: Modern Web Design Using JavaScript & DOM. Collingwood, VIC, Australia: SitePoint. p. 75. ISBN 9780957921894. OCLC 60690615. An important design constraint when adding DHTML to your Websites is that it should be unobtrusive. By 'unobtrusive,' I mean that if a given Web browser doesn't support the DHTML features you're using, that absence should affect the user experience as little as possible. Errors should not be shown to the user: the site should be perfectly usable without the DHTML enhancements. (Reference to the first edition, since it shows how the author pioneered the concept.) The same passage is in an article excerpted from the book: Langridge, Stuart (2005-06-01). "DHTML Utopia: Modern Web Design Using JavaScript & DOM". articles.sitepoint.com. Archived from the original on 2010-04-21. Retrieved 2016-10-18.
2. Keith, Jeremy (2006-06-20). "Behavioral Separation". www.alistapart.com. Retrieved 2007-01-27. Separating out behavior from markup like this is called unobtrusive JavaScript.
3. Olsson, Tommy (2007-02-06). "Graceful Degradation & Progressive Enhancement". accessites.org. Archived from the original on 2017-05-17. Retrieved 2009-01-03. Progressive enhancement when it comes to JavaScript is becoming more common these days. The key to this is known as unobtrusive JavaScript. An unobtrusive script is silently ignored by user agents that do not support it, but is applied by more capable devices. Just like an external style sheet.
4. Flanagan, David (2006). "Unobtrusive JavaScript". JavaScript: The Definitive Guide (5th ed.). O'Reilly Media. p. 241–242. ISBN 9780596101992. OCLC 64313259.
5. Connor, Joshue O. (2012). "Unobtrusive JavaScript". Pro HTML5 Accessibility: Building an Inclusive Web. Berkeley, CA: Apress. pp. 71. doi:10.1007/978-1-4302-4195-9_3. ISBN 9781430241942. OCLC 757486357.
6. Goodman, Danny; Morrison, Michael; Novitski, Paul; Rayl, Tia Gustaff (2010). "JavaScript's Role in the World Wide Web and Beyond". JavaScript Bible (7th ed.). Indianapolis, IN: Wiley. pp. 3–13. ISBN 9780470526910. OCLC 435731997.
7. "Building dynamic websites". www.netmag.co.uk. 2006-08-09. Archived from the original on 2010-12-05. Retrieved 2010-05-18.
8. Langridge, Stuart (November 2002). "Unobtrusive DHTML, and the power of unordered lists". www.kryogenix.org. Archived from the original on 2002-12-04. Retrieved 2008-08-07.
9. "The JavaScript Manifesto". www.webstandards.org. Web Standards Project. Archived from the original on 2006-06-14. Retrieved 8 Feb 2011.
10. Heilmann, Christian (2007). "The seven rules of Unobtrusive JavaScript". icant.co.uk. Archived from the original on 2 May 2011. Retrieved 8 February 2011. See also: Heilmann, Christian (2006). "Unobtrusive JavaScript". In Thatcher, Jim; Burks, Michael R.; Heilmann, Christian; Henry, Shawn Lawton; Kirkpatrick, Andrew; Lauke, Patrick H.; Lawson, Bruce; Regan, Bob; Rutter, Richard; Urban, Mark (eds.). Web Accessibility: Web Standards And Regulatory Compliance. Berkeley, CA: Friends of Ed; distributed by Springer-Verlag. pp. 301–331. doi:10.1007/978-1-4302-0188-5_10. ISBN 1590596382.
11. White, Alexei (2009). "Unobtrusive JavaScript". JavaScript Programmer's Reference. Wrox Programmer to Programmer. Chichester, UK; Hoboken, NJ: Wiley. p. 311. ISBN 9780470344729. OCLC 421783941.

Further reading

• Amery, Luke (March 2009). "Unobtrusive JavaScript Explained". APC. 29 (3). Bauer Media Group: 89.
• Brinzarea-Iamandi, Bogdan; Hendix, Audra; Darie, Cristian (2009). "Unobtrusive JavaScript". AJAX and PHP: Building Modern Web Applications (2nd ed.). Birmingham, UK: Packt Publishing. pp. 205–206. ISBN 9781847197726. OCLC 607690639.
• Johansen, Christian (2011). "Unobtrusive JavaScript". Test-driven JavaScript Development. Developer's Library Series. Upper Saddle River, NJ: Addison-Wesley. pp. 177–196. ISBN 9780321683915. OCLC 613420202.
• Kyrnin, Jennifer (2015). "Unobtrusive JavaScript". Sams Teach Yourself Responsive Web Design in 24 Hours. Sams Teach Yourself in 24 Hours. Indianapolis, IN: Sams. pp. 95–101. ISBN 9780672338380. OCLC 872430002.
• Skinner, Jesse (2007). Unobtrusive Ajax. O'Reilly Short Cuts. Sebastopol, CA: O'Reilly Media. ISBN 9780596510244. OCLC 172622153.
• Smith, Peter (2013). "Unobtrusive JavaScript". Professional Website Performance: Optimizing the Front-end and Back-end. Indianapolis, IN: Wiley. p. 120. ISBN 9781118487525. OCLC 809561237.
• "The Principles of Unobtrusive JavaScript". www.w3.org. W3C Web Standards Curriculum. 2011. Retrieved 2021-07-05.
• Vora, Pawan (2009). "Unobtrusive JavaScript". Web Application Design Patterns. Amsterdam; London: Morgan Kaufmann Publishers. pp. 347–349. ISBN 9780123742650. OCLC 255902089.