This session takes a deeper look at the AJAX paradigm by discussing key development patterns. It demonstrates implementing them using a combination of out-of-the-box features and as well as features built by leveraging the extensibility of the platform. Patterns covered range from fundamentals such as networking, search optimization, navigation, and unobtrusive script attachment to user interface usability techniques such as visual notifications, and customization. The demonstrations are illustrated in the context of a simple scenario, but are designed to be applied directly to real-world applications.

2. Nikhil Kothari
Software Architect
Microsoft Corporation

3. Look at Ajax scenarios beyond the basics
Run through a sequence of patterns and solutions
Solve real-world problems
Create better user experiences
Demonstrate how ASP.NET enables these scenarios

4. From Wikipedia…
Design pattern: General repeatable solution to commonly
occurring problem in software design.
Various categories of patterns
Foundational patterns
Separation of code and behavior, data access, searchability
User experience patterns
Notifications, intuitive navigation, …

5. Patterns at Play…

6. Script attachment to enable interactivity (eg. accordion)
Logical navigation to provide optimal back/forward
behavior and bookmarkability
Update indicators and gestures to provide feedback in
dynamic user interfaces
Smart data access to enable rich visualization and
indexability
Mashing up to enhance application content

7. - Separation of content and behavior
- Enhancing semantic markup with script

8. Attaching script functionality to static content
Separation of content (HTML+CSS) and behavior (Script)
Include scripts as referenced files and attach event handlers dynamically
Benefits
Facilitate designer/developer workflow
Independently work on content and functionality at the same time
More likely to work in script-disabled environments
ASP.NET AJAX offering
Client-side behaviors and controls are first class concept
Class pattern for script to enable encapsulating data and logic
ExtenderControl allows extending existing UI controls on server

9. - Controlling or “fixing” the back button
- Adding support for bookmarking

10. Implement logical views and associated back/forward navigation
Define logical views
Be selective about which views and user interaction end up in history
Benefits
User model is preserved – back takes user to previous view
Back through form entry can be prevented
Different views of the page can be bookmarked
AJAX actually enables a better navigation model
ASP.NET AJAX offering
History server control and client-side API
API supports multiple parts of the page participating in history

11. - User gestures and feedback for dynamic UI

12. Use UI gestures to indicate changes and updates to pages as a result
of user actions
Highlighting, scrolling, focus, progress, …
Be subtle, use simple animations, don't be annoying
Benefits
Ability to guide user
Add additional pizzaz to your application
AJAX can actually enable a better UI model for dynamic UI
ASP.NET AJAX offering
UpdateAnimation control in Ajax Control Toolkit
UpateIndicator prototype control

13. Data access in Ajax applications without sacrificing
indexability

14. Accessing data in an Ajax application without sacrificing indexability
Don't send empty pages
Embed initial data in page as semantically correct markup
Client-side script might completely alter the visualization to create a rich experience
Include additional pages of data in sitemap
Benefits
Use of semantic markup aids indexability
Works well with script-disabled environments
Saves initial Ajax request for data
ASP.NET Ajax offering
Enables leveraging the server programming model
Data controls infrastructure

15. - Enhancing content with external content
- Accessing services using JSONP and server
proxies

16. Lots of interesting scenarios for integrating services
One is content enhancement
Typically mashups are written using server-side proxies
Require cross-domain calls
Enables use of configuration (eg. for API key), local caching, throttling calls
JSONP enables use of services directly from the client
Service needs to support it
Uses script tags to enable cross-domain calls
Implied trust in service API and service provider
ASP.NET AJAX networking stack allows plugging in JSONP
ScriptExecutor instead of default XMLHttpExecutor

17. There are many more interesting and relevant patterns
Richer Plugin
Diagnostics
…
Patterns on the Web
http://ajaxpatterns.org
Yahoo! Design Patterns site:
http://developer.yahoo.com/ypatterns

18. DEV08 – Go Deep with AJAX
DEV19 – High-Speed Development with the AJAX
Control Toolkit
BD007 – Search Capabilities for ASP.NET Web Content
DEV05 – Developing ASP.NET AJAX Controls with
Silverlight

19. ASP.NET AJAX site
http://ajax.asp.net - Download bits, read docs/quickstarts, watch how-to
videos, participate in forums and community
Just released: ASP.NET Futures CTP
ASP.NET AJAX Control Toolkit
http://www.codeplex.com/AtlasControlToolkit - Open source community
project, 30+ controls
Blogs
http://www.nikhilk.net
http://weblogs.asp.net/scottgu
http://weblogs.asp.net/bleroy
http://weblogs.asp.net/elipton

20. Think about the set of problems at the app infrastructure
and user experience
How can Ajax help improve and differentiate?
Patterns provide terminology to talk about these problems
and solutions
Check out ASP.NET AJAX
Extensible platform for building and scaling to broad range of
applications
ASP.NET AJAX Control Toolkit has a number of out-of-box
controls to get you started

23. © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,
it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24. This session takes a deeper look at the AJAX paradigm by
discussing key development patterns. It demonstrates
implementing them using a combination of out-of-the-box
features and as well as features built by leveraging the
extensibility of the platform. Patterns covered range from
fundamentals such as networking, search
optimization, navigation, and unobtrusive script attachment
to user interface usability techniques such as visual
notifications, and customization. The demonstrations are
illustrated in the context of a simple scenario, but are
designed to be applied directly to real-world applications.