Client-Side Javascript Notes

Client-Side Compatibility

The author of JavaScript: The Definitive Guide discusses client-side compatibility and comments that "Compatibility issues are simply an unpleasant fact of life for client-side JavaScript programmers." (JS:TDG 5th ed., page 257). Because of those compatibility issues, some web developers target only a certain browser and ignore others. For purposes of this class, however, you should assume that the user is using any of the "current" browsers and write your code accordingly. There are a number of JavaScript libraries and resources that can help you write code that will run in many browsers.

Two ways of addressing browser incompatibility are using the Can I Use web site and doing feature testing.

Can I use...

The Can I use..." website is very helpful for seeing which browsesrs support which features. You can find that web site at http://caniuse.com) Knowing which browsers have implemented which features is extremely useful. I encourage you to take a look at the site, especially the HTML5 and JS API categories.

Here's the Can I use... ECMAScript 6 compatibility table: http://kangax.github.io/compat-table/es6/

Feature testing

Feature testing is the idea of using JS code to see if a particular feature is available in a browser. For example, a web site might use an HTML5 canvas to draw graphics on a page if it's available. The feature-testing code can attempt to create a canvas element and then set a flag based on the result. You can see some examples of feature testing code at http://kangax.github.io/cft/

Modern JavaScript uses the term object detection to describe the same idea. There is an example of using feature testing on page 50. That example tests for getElementById, which is not something which you would normally test for, since it has been well-supported for a long time.

Here's a link to an MDN (Mozilla Developer Network) article about feature testing: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection

If you wonder what people mean when they talk about browser sniffing (and you want a good laugh), read this: History of the browser user-agent string

Same-origin policy and JavaScript security issues

You can read about the same-origin policy on page 327 of Modern JavaScript. Another important JavaScript security issue is cross-site scripting, where JavaScript is embedded in user input. It's best to remove HTML tags from user input to avoid problems with cross-site scripting.

Model View Controller (MVC)

Model View Controller (MVC) is a design pattern that is used in many different kinds of programs. The basic idea is to separate the model from the view so that they only communicate indirectly through a controller.

The model contains application-specific objects (or functions and data) and does not contain any information about how that information will be displayed to the user. For our purposes, that means that the model does not contain or generate any HTML, CSS, or images. You can think of the model as representing the rules of the game and the current state of a game being played. For example, the model for chess could include functions that determine what is a legal move, along with the positions of the pieces on the board. That model can be used with any chess set (view).

The view displays the model to the user. In our case, the view will generate HTML that the player sees in a browser window.

The controller acts as a go-between for the model and view.

Some advantages of MVC are:

Here are some slides that I made about the MVC design pattern, along with a video presentation of the slides:
slides (PDF)      video      video script

You can read about MVC in Chapter 10 of the book Learning JavaScript Design Patterns. The book is available at http://addyosmani.com/resources/essentialjsdesignpatterns/book/ That chapter goes into a lot more detail than we need for this class. The chapter mentions several JavaScript libraries, like Backbone.js. Although we aren't using those kinds of libraries for our assignments in this class, they are very important in web programming and it's good to know what libraries are available.

There are many different interpretations and variations of the MVC pattern, but for this class the most important concept is to separate the model from the rest of the application. That gives many of the advantages of MVC without getting into the complexity and details of some descriptions of MVC.

Unobtrusive JavaScript and progressive enhancement

You can read about graceful degradation, unobtrusive JavaScript, and progressive enhancement on pages 39-43 of Modern JavaScript. The author of MJS writes about unobtrusive JavaScript as separating JavaScript from HTML. However, some writers combine the ideas of progressive enhancement and unobtrusive JavaScript and refer to unobtrusive JavaScript as meaning that a web site works well even when JavaScript is not available.

Threads and web workers

There is no threading mechanism in core JavaScript, so it's single-threaded. However, in a browser, you can use timers to handle some situations that you might otherwise handle with threads. You can read about that in this sitepoint article: http://www.sitepoint.com/multi-threading-javascript/

More importantly, there is a new feature called web workers that provide a way to run scripts in the background. It's fairly well supported by current browsers, as you can see on this page at caniuse.com: http://caniuse.com/#feat=webworkers. You can read about web workers here: http://www.html5rocks.com/en/tutorials/workers/basics/