Why AJAX?
The Web has gone through a series of evolutionary steps. Beginning with the display of static text and pictures, it progressed through dynamic pages generated from a database, multimedia, powerful searching capabilities, and into broad creation of information through Blogs, Wikis and Portals.
The Web is largely a “read only” media. Creation and manipulation of information has been the domain of desktop applications installed on each user’s computer. Attempts to do more than simple data entry have involved building specialized client/server applications or tolerating large delays and high overhead to run in a standard browser.
AJAX has changed the rules by showing how to use Web technologies and standard browsers to deliver applications that rival traditional desktop applications in interactivity. By combining a set of tools which have been available for years you can deliver new levels of user experience.
In this seminar we delve into client side technologies using JavaScript, communications tools and widget libraries. We also address server side development, using highly productive Web frameworks that support rapid development and easy modification. By the end of the seminar you will have a new toolbox filled with techniques for rapidly building the rich applications that are driving the next generation of Web usage.
Seminar Topics
AJAX – How Did We Get Here?
AJAX is an overnight success – but all of it’s components are at least 10 years old, which is multiple eternities in Internet time! This brief introduction explains what AJAX is, how it works, and how the underlying technologies have been combined to deliver a new user experience. The key message is the benefits and payback of delivering a rich interactive user experience through standard browsers, without the problems of developing, installing and updating client side applications. This is the “why” of AJAX, with the rest of the seminar covering “how”.
Web Design On a Journalists Schedule
Adrian Holvaty
Before diving into the nuts and bolts of AJAX, it is useful to look at a rich web experience from a user perspective. Adrian notes “The most innovative project I've been lucky enough to work on was lawrence.com, the local entertainment site for Lawrence, Kansas. So much automated subtlety is happening behind the scenes of that site. For example, in the event calendar, an event that takes place at a bar will automatically pull out the drink specials for the day of the event. Similarly, if an event features a local band, the system automatically pulls out sound clips and creates an "If you go, you might hear these songs" sidebar. Lawrence.com has a ton of little innovations that go way beyond what most other entertainment sites do, even though the site has had these little innovations for more than three years.”
AJAX Core Technologies
Alex Russell and Simon Willison
Several mature technologies power AJAX. Despite being available for many years, the power of these tools – especially in combination – has not been appreciated.
To state the obvious, “the secret to interactivity is avoiding delays”. And delays are an inherent part of the Web experience, with all changes in a Web page requiring a round trip from the browser to the Web server and back again, often over a slow connection to a heavily loaded server. A simple command, XMLHttpRequest, provides the solution by allowing browser-based applications to interact with the Web server asynchronously. This means that an AJAX application doesn’t have to wait for the server to respond and can deliver a smooth, interactive user experience.
Often derided as a toy language, JavaScript can be used to develop sophisticated applications. This session digs into the techniques and approaches for taking advantage of the full capabilities of this under-appreciated workhorse.
Key to taking advantage of JavaScript and browsers to write applications is a good understanding of the browser DOM (Document Object Model). The DOM is a description of how an HTML or XML document is represented in a tree structure. The DOM provides and object oriented API that allows parsing HTML or XML into a well defined tree structure and operating on its contents.
AJAX Data Communications
Simon Willison
Of course, a discussion of moving data needs to consider the data itself. AJAX supports multiple data formats, including http fragments, plain text, XMP and JSON.
JSON (JavaScript Object Notation) is a subset of the object literal notation of JavaScript and is a common way to represent data structures in JavaScript. JSON is a text format that is completely language independent, but uses conventions that are familiar to programmers of the C family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language for Ajax clients. JSON's simplicity has resulted in its widespread use, especially as an alternative to XML in AJAX.
JavaScript Libraries
Simon Willison
Large JavaScript applications need some kind of library - even if it's one built especially for that application. There are a number of problems in JavaScript (most of them originating with browser incompatibilities) that any moderately complex application will need to deal with - things like normalised event handling, DOM node selection, sane animation or drag and drop. Solve these problems once so you can get on to the interesting task of building the application. If you can find a library that solves them for you so much the better!
The Dojo Toolkit
Alex Russell
Dojo enables you to easily build dynamic sites. It provides a rich widget library you can use to compose your pages. You can use Dojo's aspect-based event system to attach events to components to create a rich interaction experience. In addition, you can use several Dojo libraries to make asynchronous server requests, add animation effects, browser storage utilities, and many more.
Django
Adrian Holovaty
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Developed and used over two years by a fast-moving online-news operation, Django was designed to handle two challenges: the intensive deadlines of a newsroom and the stringent requirements of the experienced Web developers who wrote it. It lets you build high-performing, elegant Web applications quickly. Key elements of Django’s design philosophy include:
- Loose coupling. A fundamental goal of Django's stack is loose coupling and tight cohesion. The various layers of the framework shouldn't "know" about each other unless absolutely necessary.
- Less code: Django apps should use as little code as possible; they should lack boilerplate. Django should take full advantage of Python's dynamic capabilities, such as introspection.
- Quick development: The point of a Web framework in the 21st century is to make the tedious aspects of Web development fast. Django should allow for incredibly quick Web development.
- Don't repeat yourself (DRY): Every distinct concept and/or piece of data should live in one, and only one, place. Redundancy is bad. Normalization is good.
- Explicit is better than implicit: This, a core Python principle, means Django shouldn't do too much "magic." Magic shouldn't happen unless there's a really good reason for it. Magic is worth using only if it creates a huge convenience unattainable in other ways, and it isn't implemented in a way that confuses developers who are trying to learn how to use the feature.
- Consistency: The framework should be consistent at all levels. Consistency applies to everything from low-level (the Python coding style used) to high-level (the "experience" of using Django).
YUI!
Simon Willison
The Yahoo! User Interface Library is a collection of JavaScript components that help developers enrich web applications with desktop-style, event-driven interactions. Yahoo! focused on creating a lightweight and modular library with an a la carte deployment style, minimizing the pageweight associated with this move toward greater richness. These are industrial-grade components. Their design has benefited from the input of more than 100 web engineers at Yahoo!, who are working hard to make usage both clear and flexible. Each utility and widget in the library has been battle-hardened in the browsers of millions of users and in the aggregate this code provides the foundation for some of Yahoo!’s most heavily trafficked applications, including Flikr and the My Yahoo! customizable news portal.
Each member of the library supports the full suite of A-grade Browsers within the Graded Browser Support scheme, providing a consistent cross-browser platform for developing richly interactive features. In the spirit of other excellent libraries in the JavaScript ecosystem, the Yahoo! User Interface Library is free for all developers to implement and deploy thanks to a wide-open BSD license.
Special Topics: Accessibility and Unobtrusive JavaScript
Alex Russell, Simon Willison
Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Accessibility requirements – and how to implement them – should be a part of every Web application.
Unobtrusive Javascript is a new approach to adding enhanced functionality to web pages with Javascript. It follows the lead of CSS, which allowed styling to be extracted from HTML into a separate layer, by moving Javascript out of the main HTML document and assigning it via structural hooks. This leads to more readable, maintainable and re-usable code.
Javascript, and particularly AJAX, are often seen as incompatible with the goals of accessibility. On the contrary, as long as the various related best practice are followed then the opposite is the case and these technologies can make web apps more usable and accessible. Unobtrusive Javascript can certainly aid this process, though use by itself does not guarantee accessibility.
Case Studies
Adrian Holvaty, Simon Willison, Alex Russell
All of our presenters have developed leading Web sites/Web applications using AJAX – and they have the scars to prove it! Not only have they developed these sites, they have developed new technologies, tools and techniques to deliver unprecedented user experiences. Now that they have told you how to build Web systems, they will share their own experiences.
This session is dedicated to the old description of the difference between intelligence and genius: “Intelligence is learning from your mistakes. Genius is learning from other peoples mistakes!”
Speakers
Alex Russell
Alex is Project Lead for The Dojo Toolkit, serves as President of the Dojo Foundation, and is a Senior Engineer at SitePen, a consultancy specializing in Dojo application development. Alex has been fighting browsers since the late 90's and together with a growing group of contributors is helping to build the Dojo Toolkit into the preferred way to engineer dynamic web application interfaces.
Prior to SitePen's sponsorship of his full-time Dojo work, Alex helped improve the responsiveness and user experience of JotSpot, the application platform cleverly disguised as a wiki. Alex also has done stints improving the experiences for diverse and data-intensive web applications in business intelligence, security system reporting, and medical data entry and reporting.
Adrian Holvaty
In his day job, Adrian is editor of editorial innovations at Washingtonpost.Newsweek Interactive (washingtonpost.com). The job involves coming up with ideas for site improvements and special projects, and implementing them. Before this, he was lead developer at World Online, a highly-renowned news Web operation in Lawrence, Kansas. The three primary sites there are LJWorld.com, KUSports.com and Lawrence.com. They all won all of the major industry awards while he worked there. Read about it in The New York Times, NPR and IT Conversations.
He enjoys using and contributing to open-source software. He is lead developer of Django, an open-source programming framework that makes Web development fun and fast while maintaining high standards and adhering to best practices. Python is his favorite programming language. He is passionate about making useful information easily available to people.
Simon Willison
Simon Willison works for Yahoo! on the Technology Development team. He is an experienced client- and server-side developer with and maintains a long running technical weblog. He is one of the hackers behind Django, the open-source Python web framework aimed at "web developers on journalism deadlines".