Top Banner
Unobtrusive javascript
13
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Unobtrusive javascript

Unobtrusive javascript

Page 2: Unobtrusive javascript

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

Page 3: Unobtrusive javascript

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

Page 4: Unobtrusive javascript

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)

Page 5: Unobtrusive javascript

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.

Page 6: Unobtrusive javascript

A lesson from history

Page 7: Unobtrusive javascript

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

Page 8: Unobtrusive javascript

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

Page 9: Unobtrusive javascript

No href

Page 10: Unobtrusive javascript

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

Page 11: Unobtrusive javascript

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.

Page 12: Unobtrusive javascript

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.

Page 13: Unobtrusive javascript

p.s. Google still don't have a href on that link. Maybe they invested in better functional tests

instead?