Andy Li’s Blog - web 2.0

Deep Linking for AJAX

2009-04-08T10:28:00+08:00

I have just made a independent study on “deep linking for AJAX” for the course Web 2.0 technology. Seems that most of the info on the web about deep linking implementation are for Flash web site but not AJAX’s, so I release my report and presentation slide here hoping can help somebody.

Deep Linking For Ajax Presentation from Andy Li

What is Deep Linking

Deep Linking is a URL that point to a specific resource like a web page or a file. User can access the resource directly through the URL without further navigation (i.e.. bypassing “home” or “portal” page).

Why is Deep Linking Important

Deep linking is originally a build-in function of the web, enabling the web pages to be interconnected, letting the users go to a specific resource easily by clicking on the links from any web page. Without deep linking, the web sites will become too separated and cannot be called as a “web”.

Moreover, deep linking is the basic requirement for bookmarking. Since bookmarking is keeping the URL of a specific web page (or any other resources), if the page itself do not have its own URL, there is no way to bookmark it.

Search engines, which index the web pages like we bookmark them, require heavily on deep linking too. Search engines find the links on a page and follow the links to index the pages. Texts or other resources that can only be triggered to shown by script will be ignored by (most of the) search engines. So deep linking has its value of SEO.

To conclude, it is the matter of usability. Wherever the deep links are presented, e.g.. bookmark menu, search results, they are more usable since they are more likely to satisfy users’ needs and nearly all web-related software works with deep links since it is the architecture of the web.

The Situation of AJAX

Since the contents of AJAX sites are loaded by script in client side, they do not own a URL by default. i.e.. There is no deep link to that loaded content. It is a product of what AJAX intended to do: to prevent reloading of the whole page.

What is worse is when the user click the back button in the browser, the page would not reload the previous content but go the page before visiting the site. It is because the back button is implemented to track the change of URL but not the change of content.

Most of the time it does not matter since the loaded content is very small and subtle, for example validation of forms or log in result or hot posts. They are not the main content of the page so no deep link is reasonable. But if there are some cases that the main content is loaded by AJAX, deep linking should be implemented.

How to Implement Deep Linking for AJAX

Low Level Concept

There is a trick that use ‘#’ in the URL. The ‘#’ is known as a hash, which is originally used for links that link to the same page. For example:

&lt;a href="#C4"&gt;See also Chapter 4.&lt;/a&gt;

The above link will link to the anchor tag with attribute ‘name’ equals to ‘C4’. When clicked, the page will scrolled to the element.

It is used for implementing deep linking for AJAX because the browser would not refresh the page when the link is clicked.

What we need to do is when the page loaded, check the URL to see if there is any hash value, do the loading if needed. After that, listen for the change of the hash in the navigation bar. When it is changed, get the value and do the according operation.

For the links, simply append some hash like ‘http://someURL/#info’ to let JavaScript to detect the values.

The above actions can be done trivially by using the following property:

window.location.hash

Use of Libraries

There are quite a few libraries for deep linking. They are already stable and widely used in commercial projects. We can use these libraries to avoid reinventing the wheel.

I coded two minimal demos for the two libraries (which are different from below), which can be viewed at here.

SWFAddress (http://www.asual.com/swfaddress/)

It is originally made for Flash, since Flash is facing the same deep linking problem. The library is supporting both Flash and AJAX, sharing the same core JavaScript to detect and change hash values.

The most simple example is first link the library in head:

&lt;script type="text/javascript" src="swfaddress/swfaddress.js"&gt;&lt;/script&gt;

And then declare a function to handle the change of hash value and add the listener.

&lt;script type="text/javascript"&gt;
function handleChange(evt){
    if (evt.pathNames[0] == 'info'){
        //load info page
    } else if (evt.pathNames[0] == 'contact') {
        //load contact page
    } else {
        //load default page
    }
}

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);
&lt;/script&gt;

More examples can be found on http://www.asual.com/swfaddress/samples/.

History, JQuery plug-in (http://plugins.jquery.com/project/history)

This is a the plug-ins written for jQuery.

To use it, similar to SWFAddress, first link to the JavaScript file after jQuery:

&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.history.js"&gt;&lt;/script&gt;

And then declare a function to handle the change of hash value. This plug-in unlike SWFAddress, it do not auto listen the change of URL. So we need to set up our own function to do so or as below bind the function to the anchor tags.

&lt;script type="text/javascript"&gt;
function pageload(hash) {
    if(hash) {
        //load some page
    } else {
        //load default page
    }
}

$(document).ready(function(){
    // Initialize history plugin.
    $.history.init(pageload);

    $("a").live("click",function(){
        if ($(this).attr("href").charAt(0) == '#'){
            var hash = $(this).attr("href");
            hash = hash.replace(/^.*#/, '');
            $.history.load(hash);
            return false;
        } else {
            return true;
        }
    })
});
&lt;/script&gt;

Limitation

Note that although using the above technique, the user can now bookmark the deep link and using the ‘back button’ as normal, SEO problem is still not solved. It is because the technique require use of JavaScript, which is ignored by most of the search engines.

The workaround is making a non-AJAX version of the web site. Not only it can solve the SEO problem, it can provide a fall-back when JavaScript is disabled.

Reference

“Deep Linking” in the World Wide Web, W3C
http://www.w3.org/2001/tag/doc/deeplinking.html
Deep Linking is Good Linking, useit.com
http://www.useit.com/alertbox/20020303.html
Deep Linking in Flash and AJAX Applications, Christian Cantrell
http://weblogs.macromedia.com/cantrell/archives/2005/06/deep_linking_in.html
Unique URLs - Ajax Patterns
http://ajaxpatterns.org/Unique_URLs
SWFAddress, Asual
http://www.asual.com/swfaddress/
History, JQuery Plug-in
http://plugins.jquery.com/project/history
Deep Linking, Wikipedia
http://en.wikipedia.org/wiki/Deep_linking

Multimedia element in the web, without sound and video?

2009-03-27T09:02:00+08:00

Recently JavaScript and CSS is becoming more and more powerful. Like the experiment shown in Chrome Experiment, we can see that the browser is now really capable to handle all those texts, images and animations (at least in the near future, since there is still IE need to catch up). But yes, multimedia means not only these three but also sound and video. As I can see there is no really “standard” way to handle that currently.

It is funny that sound and video can only be presented in a web page with the help of plug-ins. For videos, most of them are served by Flash Player, like YouTube and Vimeo. And very popular among the design agencies and artists, mov files are used, which presented by Quicktime player. Without the plug-ins, no browser can show video. Sound is most likely embed in Flash and actually not many website make use of sounds (I’m not talking about those annoying background music okay?).

I don’t understand why the browsers/web standards seem to be not interested to have native support of sound and video. If they care about those animations, image manipulations, round corners, vector graphics etc., they should support sound and video too.

Actually I have an idea, seems so crazy but it works - making Flash player built into the browser. Maybe not using Adobe’s Flash Player, if anybody mind that is not open source, or Adobe crazily disallow to do so. But there are other open source ones, like Gnash and swfdec, although they may not support all the features but better than nothing.

What do you think?

Multi-threading simulation

2009-03-12T02:59:00+08:00

JavaScript performance is becoming more and more critical since we are all obsessed with developing CPU-hungry stuff like pixastic (manipulate image in JavaScript), Box2D.js (2D physic simulation). Sometime these computational expensive calculations will block the user from interacting with the UI and freeze the screen. So, some developer start asking for multi-threading in JavaScript.

Multi-threading is a technology that let a program split into several threads and let them run in parallel. For example the visual part including the UI is running in one thread and some other work like zipping a file is run in another thread. In that case the UI will not need to wait for the zipping process and able to respond to user input.

Sadly, this is not implemented in JavaScript (or we should say not implemented in the browsers?). But there are still some developers finding ways to simulate multi-threading. Although the tricks may not really solve the problem completely, but still are very useful to be learned. Here are two of them:

And recently, there is a threading library for Flex, which use similar techniques as above to simulate threading.

Meanings behind the fancy transition effects

2009-03-02T22:59:00+08:00

It is quite popular that websites have more and more “AJAX animation effects”(which should be JavaScript animation effects actually…). Many AJAX learners are obsessed with adding fancy animated effects on there web page, and sometimes, adding it without thinking the particular effect’s meaning, will actually confuse or disturb the end users.

In the following, I will follow script.aculo.us‘s effect naming. You may see the live effects in its wiki.

There are quite a few animation effects that are common, like fade in/out, blind up/down, slide up/down. They can be seen easily over the web and their meanings are obvious: to bring things in or out. But there is still some different among them.

For fade, the transition is much smoother then the others since there is no moving part. It should be applied on things that do not need much attention, like changing top banner’s background image, just let the users focus on what they are reading.

For blinding/sliding, the sense of changing is stronger. One of their special usages is to resize things, like panels. Since resizing panels often leads to change of layout, if there is no transition, the user may not be able to catch up with the movement of the page elements.

Some less popular effects like puff, shake are more easily to be used wrong.

For puff, since the animation ends with zero alpha, some developers may use it as disappearing effect, but that’s wrong. Since Mac OSX is using puff for a visual effect on opening files/programs, many Mac user may be confused if you use it on removing elements.

For shake, some developers may think that it can draw user’s attention effectively. Really, but we should use it carefully since shaking will cause the user not able to see the elements inside the shaking area easily. So, it takes time to let the shake stop and refocus on the element’s details and it may disturb the user’s work.

The right way to work with a web service

2009-02-23T00:51:00+08:00

Mash-up is certainly a big feature of web 2.0. It make use of different open web services to create creative apps, or even artworks. But creative is creative, “hacking” open APIs with some way might not be so appropriate.

Let say here is a blogging API

The API lets people write and read blogs in the server. For security reason, the web service do not allow HTML appears in the post content. Certainly, as a user, we hate this feature since plain text is boring and a text-only blog is likely nobody would like to read. So, developers (and even bloggers) will try their best to create some workarounds.

One developer thinks that he might encode the blog content in his software before sending to the web service, so the server will not recognize the HTML stuff and store the whole content. When retrieving back, the content is decoded before showing up to the users.

What’s wrong?

Firstly, the security problem that “patched” by filtering out HTML is come back again, like we are back to the starting point. Secondly, since the API is open, that means there are other software/programs that will make use of the API, and they all do not know the decoding method used by the developer. So, the end users of that developer’s software will be likely blogging encoded posts that no one can read without using the same software. Thirdly, this may break the terms of use of the API.

There is no hope in that case?

If you want HTML, no, there is no hope. But you might still implement other methods to work with the API.

For example, Twitter is very similar to this case, micro blogging with plain text, but there is TwitPic, which store the picture in other server and insert the link of the picture to the tweet. Users of TwitPic is certainly seeing their picture displayed beautifully. And the normal Twitter users can still see the picture by clicking on the links. The idea is similar to “graceful degrading”.

Some research on JavaScript benchmark

2009-02-16T14:02:00+08:00

Since I am going to make a benchmark for ActionScript performance across different browser/platform, I take a look into the JavaScript benchmark to see if I can simply port one to be used in ActionScript.

The most famous ones should be Apple’s SunSpider, Google’s V8 Benchmark Suite, Mozilla’s Dromaeo. All the benchmarks are compose of several test areas, basically including some basic JavaScript operation test like Array manipulations, some more practical based test like regular expression, ray-tracing etc.

V8 Benchmark Suite consist 6 tests which has the least tests among the three. But when I take a look into the source code, the testes are very long. It even overrides Math.random() to a seeded random generator.

SunSpider’s structure seems to be more simple and the tests inside are more easy to read (although less documented compares to V8’s). I think it should be not that hard to port to AS.

I still do not have time to look into Dromaeo’s source but it has quite a lot of tests. And some of the tests includes DOM and use of library like jQuery and Prototype, which is not quite appropriate to be ported.

My target should be porting SunSpider. But there is still some things to be considered like whether to use AS’s build-in library, coverage of Graphic manipulation etc. More researches are needed ;-) .

Here is another reason Flash is better than AJAX for web apps

2009-02-05T00:56:00+08:00

AppleInsider | IE8’s JavaScript performance lags well behind Safari, Chrome

Above is a recent article on the JavaScript performance of the next-generation web browsers/rendering engines, including IE8, Firefox 3.1, Webkit r40220, Chrome 2.0.158.0 and Opera 10.

From the test result in the article, we can see that the performance of JS varies a lot across the browsers (up to 1:10). This make developing cross-platform web apps using AJAX much more difficult since you need to make it as lightweight as possible.

Developing in Flash would not face this problem because swf content runs inside the virtual machine. Although it has been claimed that Flash content runs relatively slower under Mac, but the different is not noticeable in most cases. And the performance of ActionScript (3) is A LOT higher than JavaScript in any browser.

When developing large scale CPU hungry web apps, you better use Flash instead of AJAX. (for other stuff, AJAX may be better, or a lot better…)

PS. I’ve googled around for some benchmarks on AS/JS to prove my point, but seems that there is no recent benchmark that aims for this (only a 2007 one). Hopefully I will have time to do it by myself in this week.

Quick way to put desktop apps online

2009-01-25T01:02:00+08:00

I do not know if my idea have already been used somewhere. Anyway I would share the idea here to see if it can inspire anybody.

Nowadays desktop apps and web-based software (or SaaS or anything similar) are emerging. Google works hard to let its docs, reader to work offline. Many innovative web-based apps are coming, like Aviary, the web-based design tools. And there are desktop version of Twitter, eBay, Flickr. Netbooks are targeted to serf the net, which is making use of SaaS to compensate netbooks’ low computing power. And there are already people asking for a web-based OS.

But it is hard to put all the things in the cloud, at least it needs a lot of money to get that storage to store all your music and video… And the private stuff, transferring through the Internet is already taking risk. So how to make them available to you anywhere like SaaS?

The answer is a web interface of a software. It isn’t a new thing since VLC Player, eMule, Winamp(slightly different approach) and possibly more software already have this function. The software itself has a build-in web server, that make you access the service from anywhere by typing the computer’s IP address. And yup, it is like telnet that let you control the computer and the files, but even more like remote desktop that give you a better interface, and with less bandwidth dependency.

My idea is one step forward, not only to provide a web interface but also a web service, like some REST API. This can let developer make their own web interface and host the interface elsewhere, further reduce bandwidth dependency. It can also let developers make some mash up, which is now between the desktop and the Internet but not only the Internet itself.

What we developer should do is to remember to provide such Internet accessible API when developing desktop software. And it is even better to draft a standard for other developers.

Time for me to start blogging on web 2.0

2009-01-17T18:36:00+08:00

For this semester, I am attending the course “Web 2.0 Technologies” and I am required to blog things. The first post will come very soon! Stay tuned!