Some thoughts on ASP.NET AJAX Roadmap
July 19th, 2008
Coming from a vacation, I have just discovered a new ASP.NET AJAX roadmap. A post by Matt Berseth starts with a summary of discussion done so far.
I have some personal opinions on the question of ASP.NET AJAX since our team worked with it a lot. So I decided to write a post instead of just commenting existing discussion.
I think I have a slightly different approach to this framework, as compared to other posters. I do not have to choose jQuery/prototype/mootools over ASP.NET AJAX. It is obvious that chaining in jQuery makes life easier, and extending element whenever possible is also a friendly approach.
However, I will still use ASP.NET AJAX for the interoperability with ASP.NET architecture — I can have a JavaScript part for any control I have, and pass values between C# and JavaScript. Also the component lifecycle (being able to handle component references easily) is a large win for me.
What I do not like is the cumbersome get_/set_ requirement without a built-in shortcut (I described one solution earlier) and cumbersome event subscription.
Event Subscription
So, let’s start with this roadmap sample:
1: $query("textarea.rich")
2: .addHandler("focus", function(e) {
3: Sys.Debug.trace("focused into " + (e.eventTarget.id || "?"));
4: })
5: .setStyle("width", function() {
6: return (document.body.clientWidth — 10) + "px";
7: })
8: .create(Contoso.UI.RichTextBehavior, {
9: showToolbar: true,
10: fonts: ["Arial", "Times", "Courier"]
11: });
What we have now in our project for event subscription is similar to this
1: with (Auto.Events) {
2: when(textarea).gets('focus').call('textarea_got_focus').on(this);
3: when(list).has('changed').call(function() { alert('list_changed'); })
4: }
Which also alters dispose to remove the event handler (which is something very tedious to do manually).
So the thing I most dislike in new ASP.NET AJAX syntax is that it is not readable (just plain chaining). I see Event.Behavior as a beautiful solution, jQuery’s as acceptable one (not a language, just more precise naming shortcuts), and ASP.NET AJAX as not really usable.
Same goes to $listen — I just can not remember the correct order of arguments unless looking directly to the documentation or IntelliSense.
But I think that $listen is a great idea, and the solution should be very interesting (considering that IE does not support DOM mutation events).
Templates
Most popular post in my blog is about client-side databinding. I can not show a solution that we have built to solve this issue (we have built it specifically for a project which sources I can not show), so this post is somewhat useless.
I am very hopeful about ASP.NET AJAX’s UI Templates, but I am also thinking about several problems we encountered. The first one is performance — it is absolutely necessary to pre-cache template binding function. The second one is binding repeated template with server controls.
There is a sample in the roadmap document:
1: <!--* for (var i = 0; i < features.length; i++) { *-->
2: <span>{{ features[i].name }}</span>
3: <!--*
4: $create(Contoso.Tooltip, {
5: text: features[i].description
6: }, {}, {}, $element);
7: *-->
8: <!--* } *-->
but I am not sure if it is possible to do this:
1: <!--* for (var i = 0; i < features.length; i++) { *-->
2: <my:Label Text="{{ features[i].name }}" />
3: <!--* } *-->
where my:Label is a ASP.NET AJAX control. It was one the most complex problem for our client:Repeater, so I am interested if this would be implemented.
Now, in contrary to Matt Berseth, I am not really concerned with INotifyPropertyChanged, because it is extremely easy to write a meta-helper to auto-implement it for any given object or prototype in JavaScript.
What I am concerned with with is an idea to “expose methods such as insertRow” for Client DataSource. I do not have any rows in presentational model or my JavaScript arrays, so I strongly dislike this terminology.
The dream feature for me would be a Continuous LINQ for JavaScript, where you can dynamically bind to a dynamically filtered collection, bind to products.where(function(p) { return p.Cost > 5; }). We did a basic implementation for this kind of thing, and found it extremely useful for rich web application. You can have a live model behind a complex page, and never explicitly think of updating any part of the page when some collection in the model got changed.
Animation
I am not really interested in that — other frameworks do this kind of thing easier. And if ASP.NET AJAX is going to imitate jQuery syntax, as some people want, why not just use jQuery or mootools?
Other features
I think that built-in Drag&Drop may make my life easier, looking forward to it. Also, ASP.NET MVC integration has always been a must, it is nice to see it is coming.
All IDE changes are also very welcome.
Summary
In general, I like the proposed changes.
I have a feeling that Microsoft should add more meta helpers as Auto.properties. It is easy to do, but not obvious for the people who are not doing a lot of JavaScript. Also the auto-INotifyPropertyChanged and built-in ObservableCollection would fix databinding cumbersomeness in the same situation.
Also, I am interested in how are the specific technical challenges solved, but it too early to think about that right now.