JAOO 2006 Recap

http://www.nikhilk.net/JAOO2006.aspx
Slides, code and a demo video from my JAOO 2006 conference presentation - sort of a Lap around ASP.NET Ajax. Enjoy!

Last week, I attended the JAOO 2006 conference in Denmark, and presented a session on ASP.NET Ajax - sort a lap around the core feature set. I also presented an extended version of this talk at Microsoft, Copenhagen where there was a great turn out of customers from the area.

Basically the talk covered how I'd characterize what goes in an Ajax app, why you'd do it, some of the key patterns to try and incorporate, and of course how ASP.NET Ajax gets you there. Here is a video of the application I used to demonstrate various concepts - in terms of the before and after state (thanks to Channel 9 for hosting it on my behalf).

When presenting on stage, I go through it step by step adding one Ajax aspect at a time - you can see that in the download package containing the code as well as slide deck. The app is basically a set of typical ASP.NET scenarios, master-details and data entry/display using the DataList and FormView server controls, manifested in a hopefully interesting form, as a slide show. Specifically here are the Ajax features I demonstrated, that you'll find in the code ... actually there is one more feature in the code that I didn't demo ... see if you can spot it. :-)

1. Introduced ScriptManager, partial rendering, and UpdatePanel controls to divide a page into logical and incrementally updateable regions without using full post-backs.
2. Demonstrated what really was happening under the covers using the HTTP tracing feature of my Web Development Helper tool. I showed the response sizes and how partial rendering helps reduce response sizes. I showed how the page was still not as optimized as it could be, and how to do so by controlling specifically which UpdatePanels update and when using a feature called Triggers.
3. Demonstrated the ability to display progress using the UpdateProgress control.
4. Demonstrated the ability to indicate what parts of the page change during a partial rendering update using a couple of custom controls I wrote - FadeHighlight and CrossFadeExtender - both extender controls that extend UpdatePanel.
5. Demonstrated using and invoking Web services from client script using the ASP.NET Ajax service infrastructure of JSON serialization and client script proxies. Specifically I used a service to retrieve EXIF metadata on the selected picture. I also talked about I saw partial rendering and Web services to complement each other, and how they could be used within the same page.
6. Demonstrated how the client script framework enables writing unobstrusive JavaScript functionality that can be packaged into behaviors that can then be attached to DOM elements. Specifically I demonstrated the functionality of toggling the visibility of the photo caption by implementing it as script on the page, that I then factored out into a class.
7. Demonstrated packaging and exposing script functionality via server controls. I built the OverlayExtender control that packaged the script I just showed that could then be attached to a Panel server control, in order to slide the panel in and out, whenever the mouse hovered over the photo image control.
8. Finally, I showed how the ability to version and incrementally add functionality to classes became so much easier once script had been factored in that manner. I showed using the Glitz library to slide the photo caption in and out rather than simply hiding/showing it using an animation effect.

It was a long demo but a fun one... the goal being to show how it is simple to start enriching an application with ASP.NET Ajax, and then using the full power of the platform to really go to the next level with Ajax patterns, and new controls. Hope you find the samples useful.

Note I had to use a custom build of Atlas, but that is only required for the CrossFadeExtender scenario. However, the ability to implement that scenario is being taken into account for ASP.NET Ajax 1.0.

I also got a couple of questions, I've been asked a few times. I'll blog about those next.

As a side note... the pictures I used in the demo were all taken during one conference trip or another from the past. In fact the first one is that of a castle in Denmark I took the day before the presentation (still need to work through the pictures and hopefully publish them soon).

Another side note... I got a chance to talk to Ed Burns from Sun, who works on JSF, and it was interesting to seeing them solve a very similar set of problems to bring Ajax to the masses of Web developers using server frameworks. I also talked to Bruce Johnson from Google, who is responsible for the GWT. Both of their talks were very relevant and interesting, esp. given Atlas and Script# parallels.

Yet another side note... the inspiration for this app was SlideShowPro, which is a nice flash-based tool for creating photo galleries; my version tries to approximate some of the functionality, using just HTML/CSS and JavaScript.