Developing Matt

My Technical Journal

Taking Ajax to the next level

leave a comment »

 

I attended ‘Taking Ajax to the next level’ by Steven Walther.  I met Steven last year at the conference where he was stuck for 30 minutes in a shuttle from the airport to the hotel.  That’s right, he was trapped in a van with me and Carol from Greece.  We talked food and wine and Greece and Carol’s new home in New York and then we talked technology.  After 30 minutes of grueling questions and pressure from me I followed him to his hotel room and grilled him for 2 more hours until he paid me to leave and admitted that I was smarter. 

If you ask him about some of that stuff he might deny it.

The nice thing about Steven Walther is that he is genuinely passionate about his area of expertise.  When you experience this it is refreshing and motivating.  It makes you more interested in your job and makes you want to kidnap more smart people.  

There are different kind of Web apps

  • Asp.net server side
  • Asp.net server side ajax (renedered on server updated through ajax requests)
  • Asp.net client side ajax: rendered on client updated through ajax requests for json

The first is old.  Don’t do it.  The second is getting old quickly.  Stop it.  The third is the best new way to develop.  Reloading the page or the page elements when all you need is data creates a bad client experience and it’s FAT.

My notes were quick and dirty, so code examples are raw estimations of the truth.  In fact, anything that I ever say about anything is really just that: raw estimations of the truth.  That statement alone is an abstract of something somewhere that bears reality.  (that paragraph was for you George Berkeley)

With the second one all of the html tags are passed back and forth. Is it really necessary to pass back and forth all the body tags? Before this class I said most emphatically, yes. But Mr. Walther told me otherwise.  He used json, removed his gridview, and replaced it with an html table with a tbody tag that looks something akin to this

tBody id = ‘moviebody’ class = ‘sys-template’
Tr
Td {{title }} /td
Td {{director}} /td
Td {{datereleased.localeformat(“D”) }} /td       (What is he doing here? He is calling a javascript function here. you can call any javascript function you want with this.)

AMAZING, EH?  He also set a little javascript above with .sys-template {display = none} and stated that you always want to do this and noted that you need to include asp.net ajax javascript libraries:

  • Microsoftajax.debug.js
  • Microsoftajaxtemplates.debug.js

Also we referenced this webservice, in case you want to pull your data from a webservice use something like:  Script src = ‘services/movieservice.asms/jsdebug’ type = ‘text’

In page load creates a client side control

Movieview = #create(sys.ui.dataview,{},{},{}, $get(“moviebiody))

This is a combination between a listview and a form view. It is a javascript call. use it to show any data you want whenever you use a template.  And then you can call it with

Showmovies()

Showmovies is a function that calls a web serverice and then sets the data

Function showmovies
Callse web service
Function showmoviescomplete(data)
{moviewview.set_data(data)}

Benefits of this is responsiveness and performance. clean separation of content and behavior. only necessary data is passed: none of even the <tr> tags, etc.

Templates are good as you have minimal code: sample above.

Complaints against this approach

  • Back/forward button. How do we handle the losing of this data? in 3.5 sp1 enabled a history options so that you can call it from your client side app to enable history.
  • Accessibility: RES standards of accessibility: the original guidelines were around you need to make sure your site works without javascript turned on.
  • Search engine optimization: make sure your website is accessible to search engines
  • Javascript turned off

These last two issues can be handled with a separate template. in that template…he showed the difference but I didn’t see it. But this enables you to turn off javascript.. then you can check to see what browser is being used and set the template accordingly.

====================================

ADVANCED FEATURES OF CLIENT SIDE AJAX

Declarative controls:

He had to import the javascript libraries but no javascript.

He added

Tbody

Sys.attach = ‘dataview’

Dataview:dataprovider = ‘servies/moveiservice.asmx’

Dataview: autofetch = ‘true

Dataview:fetcoperation = ‘getmovies

Getchparamters”{{categoried:1}}

And In body tag

Xmlns:sys = ‘javascript:sys’

Xmlns:dataview…

Sys:activate

Live clientside bindings

A way to update an underlying data item and it updates everything on the page.  One way one time: use {{ }} . The value is updated only the first time that the data binding is invoked

One way: live. if the data item is modified the rendered data value {}

DatacontextClass

If you use this class it provides read/write access to data and sends multiple changes in a single batch.  You can use Linq (or entity framework at least).

On his page he Added a little code

Ussys.data.datacontext

{serviceuri:”servies/movieservie.asmx:

…………..:”savechanges”

You might consider using ado.net data services.  It creates the logic for saving,updating,deleting.  In order to complete this example he had to bring in one more library (the Microsoft ado.net data services):  Instead of a sys.data….. he used a sys.data.adonetdataservice

Jsonp

Smlhttplrequest does not work across domains

Json does.  Using json he called out to a delicious bookmark: Feeds.delicious.com/v2/json/popular and updated page with that data

Advertisements

Written by matt

March 31, 2009 at 8:46 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: