Showing posts with label Teaching JavaScript COP451. Show all posts
Showing posts with label Teaching JavaScript COP451. Show all posts

Wednesday, May 11, 2011

AJAX UpdatePanel in ASP.net fully explained!

Tip: avoid the ASP.NET update panel whenever you can!

Update Panel is a quick and (very) dirty way to enable some AJAX on an asp.net webpage. Simply put one or several Update Panels onto a page, with one scriptmanager for the page, usually you'll want to set UpdateMode of the Update Panel(s) to "Conditional", and in case you have user-controls on your page, you might need to set EnablePartialRendering="true"  (this is by default set to true I believe) and it often seems to work just great, you get those famous flicker free partial page postbacks that are soo characteristic of AJAX. Unfortunately under the hood the updatepanel causes a full reinstantiationation of the Page’s control tree and every single control runs through its life cycle events.

Problems

I can understand that this abstraction offers certain amount of familiarity and simplicity that maybe some naive programmers will welcome very much, however it is misleading and utterly non-"ajaxy". Just imagine that you generate request and other parameter specific HTML for the same resource on the fly (this is altogether not at all uncommon with many dynamic web 2.0 applications), and you need some AJAX functionality on that HTML-page then the update panel will be an utter nightmare. Since the so called AJAX update-panel actually re-instantiates the entire control tree and runs plugs into the page-life cycle behind the scenes so that all the control events can be accessed nicely from code-behind, your dynamically generated page would need to be re-loaded from the viewstate or session state manually (kinda sucks)!!! See this post, but especially this post to illustrate the extra overhead on your side to achieve this.

Try... get this :-)

Obviously this seems too much work on server side, when all you wanted to do is send/retrieve a little bit of data to your web/db-server asynchronously. The whole idea of AJAX is that you update a small area of the page that needs updating since most of the HTML can stay the way it is a lot of bits on the wire & server processing time can be potentially saved. The side effect of which is a flicker free, quick, responsive web-page. With the asp.net update-panel it seems the main goal of the control is a flicker free update. I found a post that highlights the common mistakes with the update panel where some comments sadly point out the misleading opinion that this is a down to earth logical design. The truth is that once you know what the update-panel does exactly you can live with it, in some basic situations it might be quite alright to use it, but  it certainly isn't good AJAX by design by any standard.

The illustration below illustrates the desired AJAX scenario:


So problems begin if for example you generate controls dynamically based on the first page load, or by user-interaction, this is very common in todays dynamic web. If an update panel is used in such a common scenario then it is necessary to keep track of the controls that have been generated - usually this has to be done in the viewstate, and the framework doesnt do it for you, you do have to code up the viewstate state preservation (i.e. saving / retrieving from viewstate at the right time of the page lifecycle) yourself. This can bring a great deal of unexpected and most importantly unneeded complexity.

Of-course you can decide to stick with the update panel [for some very, highly, extremely strange reason :-)], and you can take care of the state management of dynamically generated controls as it is described in this stackoverflow.com post, or this one. Have fun ;-)...

The Solution (page methods, etc...):

Fortunatelly we can simply use direct AJAX calls. As Microsoft engineers realised that update panel (in most non-trivial scenarious) simply sucks and provided us with alternatives, specifically page methods, these are great, essentially a webservice type of method that can be declared as a static public method in my webpage class, raher than having to create a new web-service to expose the method. Page-methods allow to keep code in one place and I love them. Data is by default returned in JSON, but the format can easily be changed to XML for example (since JSON, isn't capable of representing certain complicated self-referential data-item). Check out this page for a good example of pagemethod in use.... Of course standard webservices can also be used, the options are discussed in some detail withing this great MSDN Magazine article written by Jeff Prosise on some options, other than the UpdatePanel.

JQuery or for that matter any other ajax supporting javascript library can be used instead (quite easily) to take care of asynchronous server communications, the guy from Encosia shows in a neat short article how to do this in jQuery - check it out.

Finally don't forget that if you use any postback controls, such as HTML Buttons, or ASPButton, ASPLink, the OnClientClick must contain something like "return false;" otherwise a page post-back occurs anyway as the server-side generated button click-event triggers. If you follow up these resources above, you will find that using AJAX instead of the update panel is actually very easy once you've done it a few times.

Conclusion

In conclusion update panel is nasty, it costs a lot of bandwidth and a lot of control is lost due to the nature Microsoft decided to hook it up with a pages's lifecycle. Some of that control can be regained by using the client side page-scrip-manager object as described on this page, however it doesn't resolve need for manual state-management of dynamically generated controls!

Thursday, April 22, 2010

MSc Courseworks

I have now finished teaching the MSc module at Loughborough, so I thought it would be fitting to write about my impressions on the blog. As always teaching can be intimidating at first but in my case I felt very much at ease having taught the BSc class last semester. Rightly so, lets compare the BSc with my MSc experience:

MSc. vs. BSc.

  • BSc. class was huge (150 students) compared to 16 students in my MSc class. The great thing is that I could build a more personal relationship with the individual students. You can actually remember their names and very soon you get a good idea how good every individual is.

  • Since the group was much smaller I found that; the dynamics in the class were less formal (Students asked more questions and I encouraged them to). It was a small and enjoyable class to teach.

  • In a way I hate to say this but the MSc students were certainly brighter and hence the material could be covered at the lightning speed of 2 weeks. When you have bright students it's a pleasure to teach. On the other hand I should say many of my BSc students were also pretty decent and I did have lecture time to cover XSS and all kinds of funky JavaScript, including some JQuery.

  • Big negative with the MSc class. There's just too little time to cover everything to my unilateral ideal of great learning in 2 weeks that is alloted for a fat-module. Then again I can't fight the system and the class was supposed to teach strong foundations but it wasn't meant to make superstar programmers out of my students in 2 weeks, but of-course I would have loved that challenge!


The assessment for the MSc course consisted of a 40 minute in-class test on paper and an programming coursework (over a week). The coursework was to build a sudoku JavaScript board game skeleton that allows a player to load puzzles (81 long integers) and play on the 9x9 board with the basic 3 sudoku rules enforced. In addition the possible numbers for board elements had to be suggested.

A number of solutions were done very well to the specification and showed good understanding of my students. Here is an example coursework by Tomas Kavaliauskas.

Tuesday, March 2, 2010

I'm teaching MSc students!

Next to my current research and various part time work (I am consulting two companies at the moment in web system design and data mining applications), I am about to start teaching the Client Side programming course COP451 for the MSc course.

This will be a fat module course, and a much more intensive version of the COA122 JavaScript/DHTML undergraduate course that I taught last semester. Since there are only 2 weeks, this course will be very intensive in terms of a lot of new material being covered over a short term span.

I favour an alternative teaching style to engage my audience by justifying the need of particular methods and technology! This is facilitated by communicating abstract and clear concepts in a down to earth, easy to understand manner!

Procedural Programming Concepts
- Basic Operands and Operators
- Loops / Repetion
- Branching
- Methods (Divide and Conquer)
- Fundamental Data Structures (arrays, dictionaries...)

Client / Web UI Programming
- Basic Webdesign (HTML/CSS/JS-includes)
- JavaScript in a web architecture context (conceptual keypoints)
- DHTML: addressing page elements via DOM with JS
- Building DHTML client-side applications and board games

The goal of the course is to educate the students on fundamentals for programming and bring the world of the web alive through applications of JavaScript at the same time. I also focus on issues regarding proper coding and testing practices, code team-work, time complexity and a number of other things.

Last semester has shown on a group of ~150 students that teaching fundamental programming with JavaScript is a very effective method for three reasons.

- Simple language (basic subset of JS)!
- Ready interpreter in the form of a standard Browser (IE, Mozilla, Chrome, Safari...)!
- Visual results (DHTML pages) and can be used by students straight away for all kinds of applications!