Advanced Guide to Develop Ajax Applications using Dojo

CHENG Fu

A Brief History of Web Applications

Web 1.0 Web 1.5 Web 2.0 Web 3.0

Static web pagesDummy terminal

Dynamic web pagesForm interaction

Single web pageRich interaction

Semantic dataStructured data

Interactivity

Rich Internet Applications

Ajax

Why Ajax

Standards-compliant (to some degree) HTML 4.01, HTML 5 ECMAScript 3rd/5th edition XMLHttpRequest CSS 2.1, CSS 3

Require no browser plug-ins/add-ons Avoid vendor lock-in Easy to integrate with legacy web applications Low learning curve for front-end developers

Ajax Application Flavors

Ajax Lite More like a old fashion web application Only use Ajax in certain areas for better user

experience Form validation, toggleable areas

Simple, fast Ajax Deluxe

More like a desktop application Provide rich interaction with users

Menus, drag-and-drop, tree, grid Complex, slow, powerful

Find more at http://ajaxpatterns.org/Ajax_App

How Ajax Changes Web Applications

Logic Logic

Client Server Client Server

Increasing Power of Client

Part of logic has been moved to the Client

Anatomy of Ajax Applications

HTML

CSS

JavaScript

Structure

Presentation

Behavior

Skeleton

Flesh

Brain

HTML - March to Semantics

HTML original draft Describe scientific documents Describe document's structure

, , ~ HTML 2.0

Images and forms , , ,

HTML 3.2 Presentational elements are included

, , , , HTML 4.01

Deprecate presentational elements Three flavors : Strict, Transitional and Frameset

HTML 5 More semantic elements: , Remove deprecated elements

Semantic HTML

Use structural and semantic elements to author HTML documents ~ : headings : paragraph , : emphasis , : abbreviation and acronym , : quote , , : list , , : definition : citation : source code

Semantic HTML

HTML documents should only describe the structure Content that matters

Accessible Search engine friendly Graceful degration

Representation should be handled by CSS -> {font-weight : bold;} -> {font-styel : italic;} -> {text-decoration: underline;} -> {text-decoration: line-through;}

Best Practices

Choose a proper DTD HTML 4.01 transitional

Validate the HTML documents Use W3C validator

Use the right elements Avoid common elements ( and ) when other

semantic elements are more suitable Don't use elements for presentation styles

Indention of Use meaningful class names

CSS

Elements of CSS @ rule

@import, @media, @charset Style rule set

Style rule set Rule = Selector + Declaration

Selector Select elements in current DOM tree

Declaration Name-value pair

Apply style declaration to elements selected by selector

Selectors

Universal selector : * Type selector : span, div Descendant selector : div span Child selector : div > span Adjacent sibling selector : div + span Attribute selector : div[title]

Class selector : .content ID selector : #myId Pseudo-elements and pseudo-classes : :first-child, :hover

Cascading Order

The order of a style rule is determined by the selector it uses and the stylesheet position it appears

Selector order (high -> low) !important Declared in style attribute ID selector Class selector, attribute selector, pseudo-elements and pseudo-

classes Type selector Universal selector

Position order (high -> low) element @import in element element @import in element User-provided stylesheet Browser's default stylesheet

!import in user-provided stylesheet has the highest priority

Browser Compatibility

Now CSS has a lot of browser compatibility problems Especially in layout and positioning

Prepare a base stylesheet for layout and positioning that works on standard-compliant browsers (FF, Safari) Make sure the layout and positioning work well in these

browsers Test the stylesheet on other browsers (IE) and apply hacks or

use JavaScript to handle style problems IE conditional comments Hack

Use browser bugs to sniff browser type and apply different style rules

JavaScript Use JavaScript to sniff browser type and modify style

directly

Maintainable CSS

Object-oriented CSS Divide CSS files into multiple components

Heading, buttons, menus Single responsibility

Separate structure and visual style Organize multiple CSS files using @import

Advanced JavaScript (1/2)

JavaScript is not a object-oriented programming language JavaScript uses prototype-based object construction

Each object in JavaScript has a reference to its prototype This prototype object is used when searching for properties To some degree, a object inherites properties from its

prototype A object created by new operator has a reference to its

creator's prototype Function is first-class citizen in JavaScript

Functions can be used as parameters and return values JavaScript uses function scope for variables

Advanced JavaScript (2/2)

thisthisthisthis keyword points to what? Depends on how a function is invoked

myObj.func() : this -> myObj func() : this -> global object new User() : this -> newly created object func.apply / func.call : this -> first argument

Use another variable to reference thisthisthisthis var that = this;

Use dojo.hitch(obj, func) Closure

Only use closure to encapsulate internal state True private properties

Functional v.s. Object-oriented

Try to write stateless functions When state is required, use closure to encapsulate it

DOM Query and Manipulation

DOM = Document Object Model DOM defines document's logic structure Use DOM API to traverse in the document and

insert/update/delete nodes

Query using native API Locate elements

getElementById()

getElementsByTagName()

Query parent/sibling/child nodes parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling

Native DOM API is not easy to use

dojo.query()

dojo.query(selector, node) Use CSS selectors

Return value of dojo.query() is dojo.NodeList Functions of dojo.NodeList

forEach(), map(), filter(), slice(), splice(), indexOf(), lastIndexOf(), every(), some()

style(), addClass(), removeClass(), toggleClass() append(), prepend(), after(), before() appendTo(), prependTo(), insertBefore(), insertAfter()

wrap(), wrapAll(), wrapInner() Chaining of dojo.query()

Most of dojo.NodeList's functions return dojo.NodeList Functions can be chained together to write concise code

dojo.query(".item").children().addClass("subItem").end()end()end()end().parent().addClass("itemContainer")

DOM Manipulation

Use native API createElement(tagName)

appendChild(newChild)

insertBefore(newChild, refChild)

replaceChild(newChild, oldChild)

setAttribute(name, value)

Use dojo API dojo.create(tag, attrs, refNode, pos)

dojo.place(node, refNode, pos)

dojo.attr(node, name, value), dojo.removeAttr(node, name), dojo.hasAttr(node, name)

Efficient DOM Manipulation

Use document fragment Steps

Create a document fragment Do DOM manipulation in the fragment Append the fragment to the main DOM tree

Reduce page reflow Use innerHTML

Construct a HTML string and set to a DOM node using innerHTML

Use cloneNode() Create a node as template and clone it to create other

nodes Bind event listeners for each node separately

dojo.NodeList plug-in

Extend dojo.NodeList with other functions

dojo.behavior

Describe elements' behavior declaratively Use dojo.behavior.add() to declare behaviors

Declare selected elements using selectors The same as dojo.query()

Declare trigger condition Found a element Events : onclick, onmouseover, onmouseout

Declare behavior itself A JavaScript function

Use dojo.behavior.apply() to apply behaviors Incrementally apply

A typical usage scenario Use XMLHttpRequest to get new data and dojo.behavior.apply() to apply behaviors

Events

Register event listeners DOM level 0

Handler function as DOM node's property W3C event model

addEventListener(type, listener, useCapture)

IE event model attachEvent(type, listener)

Use dojo.connect()

Event Propagation

An event propagates in current DOM tree Capture phase

From document root to target node Target phase

Target node Bubble phase

From target node to document root IE doesn't support capture phase Browser's default behavior

Clicking on an anchor () will navigate to another document

Use dojo.stopEvent(e) to stop event propagation and prevent default behavior

Event Handling

Event object Contains contextual information Contains different properties

Dojo fixes the event object Using dojo.connect(), event handlers receive a

normalized event object as the parameter

this keyword points to what in event handlers DOM level 0 : current node W3C event model : current node IE event model : window object

Efficient Event Handling

Use event propagation to reduce event listeners Use the bubble phase Add event listener to ancestor nodes

Memory Leak and Event Handler

Best practices to avoid memory leak Use dojo.connect() Simple handler Don't add extra properties to

DOM node Delete object references

explicitly

A memory leak pattern

Dojo

Dojo base Basic features for Ajax applications

Dojo core Core features useful for many Ajax applications

Dijit Dojo widgets

Dojox Dojo extensions

Utilities

Array process dojo.forEach() dojo.every() dojo.some() dojo.map() dojo.filter() dojo.indexOf()

String process dojo.trim() dojo.replace() : A simple template implementation

JSON dojo.toJson() dojo.fromJson()

dojo.Deferred

Asynchronous operation abstraction Return a dojo.Deferred if the function is asynchronous Add callback to dojo.Deferred

addCallback() : success callback addErrback() : error callback addBoth() : both

Notify an asynchronous operation is completed callback()

errback()

Multiple dojo.Deferred can be nested and chained

Extend Dojo XHR Content Handlers

Object-oriented JavaScript

Declare classes Looks like Java classes dojo.declare("com.example.Sample", [com.example.AbstractSample], {})

Mixin properties dojo.mixin({}, defaultOptions, userOptions)

dojo.extend Extends a object's prototype

dojo.delegate Delegate the properties search to another object

dojo.getObject Get a property using dot expression

dojo.setObject Set a property using dot expression

dojo.exists Check property existence

dojo.data

A data access/manipulation layer Key concepts

Data store Item Attribute

APIs dojo.data.api.Read dojo.data.api.Write dojo.data.api.Identity dojo.data.api.Notification

A data store can choose the APIs to support Many out-of-box data store implementations A lot of dijits consume data stores

Tree, grid, combo box

Advanced I/O

Script Use JSONP Can access data from other domains

iframe Useful for file uploading

window.name Multi-part

Dijit Creation

Template method design pattern Override interesting functions

postMixInProperties(), buildRendering(), postCreate()

Dijit Destroy

Put customized destory behavior in uninitialize() Always use destroyRecursive() to destroy a dijit

Create Dijits

Declaratively Use HTML markup and custom attributes

dojoType attribute is the dijit's class name Other attributes are mapped to dijit's properties

Properties in dijit's prototype, excluding those in Object.prototype and name starts with "_", are mapped

DOM node attributes are transformed according to properties' data type

Use element to declare functions dojo.parser.parse() is used to create the dijits behind

the scene Programmatically

Use new operator

Set/Get Attributes

dojo.attr() is the standard API to set and get attributes Provide custom setter/getter functions

Setter functions : _setXXXAttr() Getter functions : _getXXXAttr() For the attribute email : _setEmailAttr() and _getEmailAttr()

Use attributeMap to map attributes to DOM nodes Updating an attribute modifies the DOM node

automatically

Template, Container and Registry

Template Mixin dijit._Templated to support building dijit UI using

templates Use dojoAttachPoint and dojoAttachEvent to reference DOM

node and add event listeners Container

Mixin dijit._Container to support managing children dijits Container's startup() function calls children dijits' startup() Removing a child dijit from the container doesn't destroy it

Registry All dijit references in current page can be found at

dijit.registry

An instance of dijit.WidgetSet Be careful when creating dijits with specified IDs

The infamous error : Tried to register widget with id==myId but that id is already registered

Remove the old dijit from dijit.registry first before creating a new dijit with the same ID

Dojox Components

dojox.grid A comprehensive data grid

dojox.fx Effects

dojox.gfx Drawing

dojox.gfx3d 3D drawing

dojox.charting Charting

dojox.layout UI layout

dojox.mobile Create mobile web applications

Dojox Components

dojox.lang dojox.lang.async : Manage asynchronous operations

with dojo.Deferred dojox.lang.aspect : AOP support

dojox.html Dynamic CSS style rules Font metrics

dojox.collections ArrayList, Set, Stack, Dictionary, Queue, SortedList, BinaryTree

JSON dojox.json.query : Query JSON objects dojox.json.schema : Validate JSON objects

Data stores XML, CSV, Name-value pair, HTML table, server-side query

Build Process

JavaScript code check JSLint

Combine/Minify/Obfuscate JavaScript code Apache Ant JSMin, YUI Compressor Dojo Shrinksafe

Combine/Minify CSS code YUI Compressor

Compress images PNGcrush

Security

XSS - Cross-site scripting A script from other domain is executed in your web page The script can do anything that your script can do How to solve it

Don't trust any user input Escape everything for output and only unescape those

known to be secure (whitelisting) CSRF - Cross-site request forgery

A request originates from other domain Only workable when current user has a valid session in

target site Add special tokens in the request to make sure it comes

from your own site

JSON Hijacking

Many Ajax applications use JSON as the representation JSONP is used to allow other sites to use your data

tag is not constrained by Same-origin Policy Make sure your data can only be accessed by those you trust JSON data can also be stolen even it's only used between your

client and server Redefine JavaScript Array object

Performance

Performance that matters Take performance into account in the firstfirstfirstfirst day of the project Front-end performance is the determining factor Improve front-end performance

Reduce HTTP requests and page weight Combine JavaScript and CSS files Minify JavaScript and CSS files Compress images

Page's progressive enhancement HTML and CSS files first JavaScript files loaded later of lazily

High performance JavaScript and CSS

Read Two Books

High Performance Web Sites Even Faster Web Sites

Thank you!