The ASP.NET Single Page Interface and AJAX Patterns

Posted on MSDN, by Dino Esposito, “Single Page Interface and AJAX Patterns.”

What is it? From the article…

Single-Page Interface Model

To take full advantage of AJAX, you need to have all of your features, or at least most of them, in a single page. This is known as the Single-Page Interface (SPI) model. In the SPI model, all browser interactions with a Web application take place within the boundaries of just one page. This approach is revolutionary for the Web, but it is nothing new for Windows® and desktop development. In the end, the SPI model is just like having a Windows application with a main (and unique) window.

There are a number of frameworks that work this way (especially in the J2EE) camps. For all but the simplest of applications, all suffer from the complexity of either extreme-componentization or from an extremely complex single page implementation.

In the SPI model, the main page is a combination of visual elements that can be loaded, updated, and replaced independently (see Figure 3). In this way, the entire page doesn’t have to be reloaded following a user action. At any time, only visual elements and content that is relevant to the current stage of the application is displayed. Everything else is hidden; it will show up as soon as there’s any need for it in the application’s flow.

Instead of having multiple pages, a single page contains all of the application functionality. Although not impossible to create a large system utilizing this pattern, it has several downfalls which you should be aware of before jumping in…

  • You must create a hosting architecture — you won’t want to load and instantiate every component on the page (even if they are hidden) every time the page is loaded (remember, this happens when the page is first loaded, and for any “update panel” style UI you might use. So, you’ll be forced to create a system in which components are dynamically constructed based on demand.
  • Furthermore, the dynamic nature of the hosting pattern may make handling events and AJAX callbacks more complex.
  • If you take the approach of putting everything on a single page, and limiting the amount of componentization that you do, you’ve created a system which is only practical for only one or two developers to work on the UI at any one time. Often, this is not practical and will slow development down.
  • Of course, it may break the back button behavior (the ASP.NET Extensions Futures may help with this though).

Dino continues and provides a good explanation of how one could continue to preserve the user’s concept of the “back” button in the web browser using the window.location.hash and the onload event in the browser.

The timeout pattern he suggests though is less than ideal. Although it does prevent a browser from potentially hammering the web server when the user has left the browser, it comes at a cost of usability. He suggests that a modal message box is displayed after a period of time, asking if the user wants to continue. Unfortunately, depending on the nature of the web site, once the timeout has occurred, any session data associated with the active user has also likely timed out. Even if session state has not continued, it feels like a better solution is needed.

Although he suggests that keyboard and mouse activity monitoring might be “heavy”, I don’t think there are really any better, more user friendly options if you’re concerned about the impact of requests on your web servers. Here is a web page that details the various time out options and provides a demonstration of how to use mouse movement to reset a timeout automatically.

Sun’s JavaFX, Take 2.

I wrote about JavaFX last year about this time. It’s back again with an all new, AJAX-heavy, marketing web site.

image

One thing that I hope inspires Microsoft is this:

“JavaFX Desktop for desktop browsers and desktop applications (available fall 2008)”

I ask (appropriate) Microsoft representatives almost every time I talk about Silverlight with them when an Adobe AIR, or desktop installed version of Silverlight is coming … nothing concrete forms (nothing even close). Give me a Silverlight that can be run OUTSIDE of the browser, across platforms.

Back to JavaFX and their AJAX-heavy web site (it’s clear they intentionally avoided using Flash even though that meant embedding videos as Quicktime … which often chokes on my machine unfortunately).

“Advantages of JavaFX

There are a large number of RIA requirements that remain unmet by any RIA platform, and Sun is uniquely positioned to address these challenges. JavaFX will be provide a number of unprecedented advantages:

Built on Java. JavaFX is not starting from scratch; it is built on the Java platform (Java SE and Java ME) and leverages the power and capabilities of the Java platform. It also extends the Java platform to deliver on the original promise of client-side Java. For example, Java ME has been distributed to 3 billion devices, far exceeding the distribution of Adobe Flash Lite, and JavaFX Mobile will deliver rich client capabilities on top of the Java ME platform.”

Client side Java, on PCs and Macs, is essentially dead (anyone think otherwise?). I dread web pages that kick off the Java runtime about as much as I dread a web page wanting me to install a new browser plug-in.

The Java language is in need of an overhaul (many Java pundits are saying this, not just me). I understand why they tout it, but …, is it really the best language/platform for this new breed of applications? What do you think?

“Across Devices and Screens. JavaFX applications will run across multiple devices or screens – browser, mobile, TV, etc.

Reach and Distribution. Sun will leverage its unrivaled reach to distribute the JavaFX runtime across all devices and screens.”

It would be great if the same platform can be used across devices, etc. But the same application (especially UI) is unlikely to be portable. A TV app does not make a good mobile app does not make a good browser application. Unrivaled reach? Excuse me?

There’s a tutorial you can watch … (I’d love to link to it, but their web site is too “AJAX-y”).

image

What confuses me is that the syntax he shows doesn’t look like Java at all? It looks like JavaScript. (And that’s because it is — it’s called JavaFX Script).

So, although there are 8 million Java developers (their number), they are expecting 8 million developers to learn a new UI platform and a new language? Hmm. Doubly interesting that they tried to sell me how great it was that it was built on Java, yet not the Java language. With Silverlight I could learn just one language from Web Server to client application to desktop application.  It still looks unnecessarily difficult to create a set of tools as the UI is mixed in with the code.  That also means it may be more difficult to have a developer and designer contribute to the same user interface.

Although maybe the competition will help, I’m not sure it has a chance:

  • Adobe has a huge advantage — Flash developers (and new Flex developers).
  • Microsoft has a huge advantage – .NET developers (especially those with UI experience).
  • Java — J2EE developers … uh …, not so much — as this isn’t like anything else they’ve done unless they happen to be into Javascript.

I’ve signed up to be notified about the preview release, and will blog more when I get access. If you have any thoughts about JavaFX and its future, share them!

The ReaderWriterLock Slims down …. (in .NET 3.5)

I’ve been doing .NET 3.5 development for quite a few months, and didn’t realize until today that there’s a new “improved” ReaderWriterLock, called ReaderWriterLockSlim. (I never thought to look for a completely new class!).

From the documentation, it significantly improves the performance of uses of the old ReaderWriterLock, has simplified recursion rules, and simplifies changing lock state.  The bad news is that using the new class requires code changes (beyond just changing the type and the object instantiation). AcquireWriterLock becomes EnterWriterLock (or TryEnterWriterLock) for example. If you’re creating new code and need Reader-Writer lock behavior, use the new class.

Great Silverlight technology demonstration

I saw this demo a few weeks ago and was quite impressed (as was Tim)

Even if you’re not into healthcare software, Microsoft UK has produced a great demonstration of Silverlight 2.0 capabilities via the Patient Journey Demonstrator.

image

As a demonstrator, not everything works, but play around with some of the neat widgets:

image

image

If you don’t know what they want to show you, use the guide at the top:

image

image

image

image

The source is available. Of course, make sure the license works for you before downloading.