Unobtrusive javascript
Download as PPT, PDF0 likes377 views
The document discusses the challenges of the browser environment for JavaScript development and principles of unobtrusive JavaScript. It notes that JavaScript encounters many errors due to the complex browser environment, inconsistent support across browsers, and potential for user scripts to be disabled. The document advocates building sites primarily with HTML and CSS according to standards and using JavaScript to enhance usability instead of as the sole means of interactivity. It provides an example where Google broke its download button for Chrome due to improper unobtrusive JavaScript practices.
Unobtrusive javascript
- 2. ïŹ JavaScript guru Douglas Crockford calls the browser âthe most hostile programming environment in the world.â ïŹ He said this before mobile browsing was even a thing at which point he said: ïŹ âI used to say that the web browser was the most hostile programming environment ever devised, but that was before I found out about Mobile.â ïŹ Infinite combinations of hardware and software The front end stack
- 3. HTML ïŹ HTML is forgiving and browsers can deal with invalid markup ïŹ Markup that doesn't meet the spec will still give you a mostly working page
- 4. CSS ïŹ CSS is aloof. If it encounters something it doesn't understand, it just shrugs and moves on ïŹ Some IE CSS hacks take advantage of CSS quirks (It's not a bug, it's a feature)
- 5. Javascript ïŹ Javascript is a quitter. If it encounters a problem it just gives up and goes on strike. ïŹ Some browsers may ignore your script completely ïŹ Even when a browser can support JavaScript, users may turn it off for security reasons, or their corporate firewall may block it ïŹ Even when a browser supports JavaScript, it may not understand parts of your script because it has a proprietary implementation of some parts of the DOM specification (usually IE) ïŹ Even when the script is interpreted correctly, it may depend on HTML that is very complicated and/or might change in unpredictable ways.
- 6. A lesson from history
- 7. First world problems ïŹ Last February the download button for google chrome broke. ïŹ Nobody could download chrome for 12 hours ïŹ It was caused by a javascript error ïŹ This was an easy problem to avoid
- 8. What went wrong? ïŹ Somebody broke an unrelated javascript library used by the google chrome website and included in all pages ïŹ Uncaught TypeError: Cannot read property 'value' of undefined ïŹ Because google did not include a href, the browser could do nothing except sit there looking embarrassed
- 9. No href
- 10. What google did wrong ïŹ Didn't follow the rules of unobtrusive javascript ïŹ Created a single point of failure ïŹ Ignored web standards ïŹ Trusted core functionality to the most fragile part of the front end stack
- 11. Why do you hate javascript? ïŹ Javascript is great ïŹ But don't start with it ïŹ It's like building a house by choosing the wallpaper first ïŹ The purpose of JavaScript is to add a layer of usability to your site. If the script is the entire usability layer (in other words, if the site is unusable without JavaScript), your javascript is not unobtrusive.
- 12. Principles of unobtrusive javascript ïŹ Your site should work without JavaScript. ïŹ If JavaScript happens to be enabled, you can present your users with an extra layer of usability; a layer that allows them to perform their tasks more quickly, and that avoids jarring page reloads where possible. ïŹ JavaScript is unsafe. That is, you should *never* trust in JavaScript-only routines for crucial tasks such as checking user input in a form.
- 13. p.s. Google still don't have a href on that link. Maybe they invested in better functional tests instead?