Ajax Fundamentals – Part 4

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

5. Development and Debugging Tools

5.1. Documenting JavaScript

JSDoc is an open source tool used to add inline documentation to JavaScript source files.   JSDoc is based on the javadoc tool.   Many of the javadoc characteristics have been included in JSDoc.   An example of using JSDoc can be found here.

5.2. Firefox Tools & Extensions

DOM Inspector is included in the Mozilla Suite and Firefox browser.   This tool provides a graphical user interface that enables a user to brows the document object model of any site.   One can view, update and insert DOM attributes dynamically.   In order to assist JavaScript developers, DOM Inspector can be switched to JavaScript Object mode.   This shows all the properties and methods available to a JavaScript for a particular mode.   DOM Inspector provides a JavaScript evaluation window that allows the user to execute JavaScript against selected nodes.   There is the option to use CSS Style Rules and Computed Style information.   This allows a user to examine the CSS attributes associated with different page elements.

Firefox JavaScript Console is a tool that logs JavaScript errors found on a page when the page is rendered.   The Firefox JavaScript Console gives ‘compiler-type’ messages.   It describes the error that occurred and the gives the line number.

Firebug integrates with Firefox and provides many development tools.   Firebug has a version of a DOM inspector that enables a developer to find elements.   CSS support allows settings to be altered and viewed.   Firebug allows one to monitor the network activity in order to determine how long it takes for different sections of a page to download.      A JavaScript Debugger allows one to debug and step through the JavaScript at runtime.

HTML Validator is a Mozilla extension that performs HTML validation within Firefox and Mozilla.   HTML Validator validates the HTML locally and does not use a remote third party.   The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.   HTML Validator offers a set of tools to assist in validating and correcting HTML tags.

Checky is Firefox extension tool for validating HTML.   In addition to HTML, Checky can validate XHTML, CSS, RDF, RSS, XML and many more formats.   Checky sends the source to third-party cites to be validated.   The third-party cites may be free or commercial services.

Pederick’s Firefox Web Developer extension offers a large set of tools for a website developer.      Web Developer provides an extensive set of tools, from highlighting table cells to converting ‘GET’ requests to ‘POST’ requests.   This toolbar contains more than 80 tools and is an essential commodity.

5.3. JavaScript Syntax Checking

JSLint is an online tool that evaluates JavaScript code.   JSLint scans the JavaScript code and identifies syntax errors, structural problems and questionable coding-style conventions.

5.4. Compression and Obfuscation

MemTronic’s FREEWARE HTML/JavaScript Cruncher-Compressor  is a freeware tool that can perform both compression and obfuscation.   The MemTronic’s website provides the following information.   The tool can Crunch, Compress and Obfuscate.   Crunching removes all comments and whitespace.   Crunching has a bandwidth saving between 20%-50%.   Compressing will compress the script with a real compression-scheme, with auto decompression added to the file.   This results in bandwidth savings between 40% – 90%.   The obfuscator has not been released at this stage.   Once complete this tool will encode the script into a format that humans can not easily read.   When using Compress, the file will undergo a level of obfuscation.

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Ajax Fundamentals – Part 3

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

3. Security Issues

The XMLHttpRequest object is restricted to run within the browser’s security sandbox. Any resources requested by the XMLHttpRequest object must reside within the same domain from which the calling script originated. Therefore the XMLHttpRequest object is constrained to requesting resources that reside within the same domain from which the script was originally served. The W3C states, that in the future The XMLHttpRequest Object specification will define a way of doing cross-site requests.

There is an overabundance of online documentation stating that Ajax introduces multiple security threats. These threats include fake requests, denial of service, cross-site scripting (XSS), reliance on client-side security, and more. Jeremiah Grossman’s article, Myth-Busting AJAX (In)security, maintains that these security issues existed before Ajax and the recommended security best practices remain unchanged. Part of internet security basics is to distrust the client. Ajax is a client side technology and requests need to be treaded with the same caution as all other calls.

4. Disadvantages

4.1. Usability Problems

Web users have become familiar with using classic web pages. Users have become accustomed to using browser features such as the back and next buttons. Ajax calls are not loaded onto the browsers navigation stack. Therefore the back button will not undo the last ‘Ajax operation’. Developers need to explicitly cater for undo operations.

Ajax enabled pages have a notion of state; this state is altered as the user navigates through the site. The browser is unaware of this state, and it is not reflected in the address bar. Therefore users are not always able to book mark a certain page state. Developers need to consider this when deciding on when to use Ajax.

The asynchronous nature may make page updates difficult for the user to notice. The developer needs a way of drawing the user’s attention to the modified section of the page. The ‘yellow-fade technique’ has become common practice. In this technique the changes are highlighted with a yellow background, and the yellow fades gradually. These and other techniques are becoming familiar to web users.

4.2. JavaScript Disabled

If a user has disabled JavaScript no JavaScript will be executed and certainly no Ajax requests will be sent. A site that relies too heavily on JavaScript will be crippled if the user disables JavaScript, Gucci is an example of this. This site used to show a blank white page if a user browsed to it after disabling JavaScript. Now it explains that you need to have JavaScript enabled to use the site.

A site that relies on JavaScript for core functionality restricts its users to those who have JavaScript enabled. Having said that we should look at how many users are allowing JavaScript to run in there browsers. The following statistics from The Counter show JavaScript statistics.