08.13.09
Real time roundup [Part 2] — responsive web applications
This is often a hard to appreciate aspect of the real time stack. But only till you experience it. Think about the instant delivery of notifications in Facebook or the character by character real time transmission in Google wave. On the face of it, it might look like a minor feature but from UX responsiveness, this is big. Once you use these apps, the rest of the world would look sluggish kind of like how a dial-up internet connection feels today. This is as much of a leap as the transition from refreshing web pages to see updates to letting the RSS reader do it for you.
This pattern can be applied to many web applications. This is the key that will bridge the gap that web applications have over desktop applications. Their ability to react to user/data events in real time. With HTML web sockets, this might be more standardized but even today, long poll/comet etc are pretty scalable and general purpose. Once the common web programming environments like ASP.NET/JSP/PHP etc embrace this concept fully, there is great potential here.
This could even be in the form of a generic pub-sub provided as a secure cloud service. As a web site developer, I need a pipe to transfer data to and from the browser in real time. But I dont want to invest in a pub-sub infrastructure which is very different from the HTTP programming model that I am used to and has entirely different scaling characterstics. If this is provided as a service on Microsoft Azure/Amazon ECS/Google AppEngine, if would be much easier to integrate into the current programming model. But what would such a reusable model include ? A few things off the top of my head :
- The long poll connection to the server with a javascript component that is embedded in the web pages. This will enable the duplex connectivity.
- A pub sub infrastructure that will provide some session storage and topic based subscriptions to the sessions. For example, when a user visits a rel time web page, a session will be created for it on the pub sub backend. Then the web site (instance) will register for topics that it is interested in. The web server could publish these topics to the pub-sub system and the pub-sub system would push these to the browsers.
- Topics can be transient entries in the pub sub system that are created as pages subscribe to them.
- An API exposed to the web site backend that would push arbitrary topic updates to teh pub sub system.
This kind of an infrastructure component provided as a piece of code to be reused or as a cloud service would make it easy to build real time responsive web sites.
06.18.09
HTML5 – the way ahead
For many web developers, even though web 2.0 and AJAX was a gaint leap, we were stuck in a place where the HTML 4 (and its many interpretations) was restrictive and there is still a difference between the look and feel of a well designed desktop app and a well designed web-app. Adobe flash, AIR, SilverLight etc attempt to bridge this gap. But what if HTML could do it all. Can JavaScript be powerful enough to do all the things that C#/ActionScript can do? Can HTML5 carry forward the experience and knowledge collectively gained in the last 20 odd years of UX programming? The HTML5 standardization process is going to take a few more years, but browsers are already implementing the draft standard. For developers and companies to invest in HTML5, we need a firm commitment from the browser makers. Especially since the last iteration did not go well.
Browser Alert
![]()
In the current imperfect world, HTML4 itself did not realize its potential because of the interpretations that different browsers made of the standard. The end result being all the browser specific quirks that developers are forced to learn. IE (6/7/8), Firefox, Opera, Safari and now Chrome all of them need to get their act together. The user has choice today. So better get your act together or people will move to a different browser. This is the biggest hurdle for HTML5 and also a key test for browsers.
Flashy without flash
I started looking at HTML 5 like many others after watching the google wave demo. The fluidity and interactiveness of the interface is amazing.
A few more examples of what HTML + Javascript could do. Here is a visual studio like editor in HTML developed by firefox.
Firefox 3.5 implemented the video tag of HTML5. This is a really awesome demo.
OTOY is a company trying to take your console into the cloud. It does all the graphics processing on a server and just renders the picture onto your browser with no plugins or downloads. How cool is that?
HTML 5
What does HTML5 have that makes it powerful? There are several new features in HTML5 (list from wikipedia). It brings many patterns of usage today into the language.
- New parsing rules oriented towards flexible parsing and compatibility
- New elements –
section,article,footer,audio,video,progress,nav,meter,time,aside,canvas,datagrid - New types of form controls – dates and times,
email,url,search - New attributes –
ping(onaandarea),charset(onmeta),async(onscript) - Global attributes (that can be applied for every element) –
id,tabindex,hidden - Deprecated elements dropped –
center,font,strike, frames
The canvas tag makes it possible to get flexible drawing into the realm of HTML. I have used other javascript apis that simulate a canvas. These work by drawing 1 pixel divs that are absolutely positioned. The canvas tag is way more economical and elegant.
At last there are combo boxes that are native in HTML using the datagrid tag.
The input tag now has many new types – datetime, datetime-local, date, month, week, time, number, range, e-mail, url, search, color. The progress tag will display a progress bar. It was so dumb that there were 100 different implementations for these. Many other new tags provide HTML native versions of elements that were not natively supported and resourceful javascript junkies had to hand code (figure, footer, header, meter etc)
The video/audio tag (as seen in the firefox demo above), provides rich video/audio embedding and manipulation capabilities natively in HTML.
WebSockets API that provides in-built support for two way communication. This is a good idea with the proliferation of real-time web applications with long-poll/COMET etc. This might take us to a true real-time duplex connectivity. An interesting comparision of AJAX/COMET to HTML5 can be found here.
The <script> tag has an async attribute that makes the page load to continue while the script is loading. This will speed up page loading and improve user experience. With the complexity and size of the scripts on the rise, this is very handy.
The browsing context defines the algorithm that browsers use for navigation and the related sessions history traversal. A browsing context is an environment in which Document objects are presented to the user.
Session history and navigation using javascript APIs.
Cross domain communication using Window.postMessage. This is already in most browsers and what a relief. The earlier cross domain communication techniques (hacks) relied on changing the hashes (the test that follows #) in a URL and a background timer. eeeks!
Offline web application caches. Google gears/Windows live mesh etc have build this with no browser support in a non standard way. Now HTML5 defines this as a standard. The ononline and onoffline events give javascript the ability to track connectivity and will enable the AJAX application to behave accordingly (detailed article).
DOM Storage as a way to store meaningful amounts of client-side data in a persistent and secure manner. John Resig of the jQuery fame wrote this article that explains this in detail. Looks very powerful and can be used to enable and optimize many desktop app like scenarios.
Editing API in combination with a new global contenteditable attribute and something called an UndoManager that will support undo/redo for content edits. Sounds good for a totally in browser content editors and development environments.
Support for spelling and grammar checking. Some drag and drop support. Many link types to give meaning to links. This looks like part of micro-format and semantic web support.
Frankly i thought there would be more to support semantic web, linked data and such. But may be there is. This spec is a work in progress (a mess). Somewhere it mentions that the HTML5 spec has a lot of things that should have their own specs but due to the lack of volunteers to own the specs, all the stuff got dumped into one. Sad for such an important piece of work.
With all these features and many more that i could not get to, HTML5 is aiming to bring the flexibility and performance of desktop applications to the web. I am sure over time, these features will get better defined so that they can be interpreted without ambiguity. This is important to make web application work cross browser. The more I read about this stuff, the more I am convinced that this will succeed and take over many of the scenarios that are served by Flash, AIR and SilverLight. There might still be some applications where these will stay relevant. But if you are looking for state of the art presentation and interactivity, HTML5 will do it.
Developer’s Woes
jQuery and prototype are two JavaScript libraries with a lot of promise. Take a look at jQuery Tools and what HTML4 can do. With HTML5, and all the new functionality, javascript now is a very complicated (and powerful) language. How do you handle your application complexity and size as yout javascript, HTML and CSS grow in size? There are many solutions for managing HTML like ASP.NET, JSP, PHP etc. How about your javascript? How would you unit test your javascript code? How would you make it reusable?
One option is to go with libraries like prototype and jQuery that make it very easy to do common tasks and if you buy into their design philosophy, its a very compelling was to design your code as well. JavaScript is powerful and elegant. If you know how to write good code that is. Its not very difficult to get a hang of it. The advantage of this approach is that you stay true and antive to JavaScript and can take advantage of the fast pace of innovation here. The prototype library has unit test support too. Never used it myself though.
The other option is to use the “more evolved” server side languages like java or C# to write your code and use a cross compiler to generate the javascript for you. GWT (Java -> JavaScript) and Script# (C# to JavaScript) are good examples here. There are also other cross compilers like pyjamas (Python -> JavaScript), Objective-J (Objective-C to JavaScript). The advantage of using one of these approaches is that you could use your native language (if its not already JavaScript). You can use a development enviroment that is built to handle size and complexity (like Visual Studio/Eclipse etc) and take advantage of features like intellisense and refactoring tools. You could also leverage existing unittesting frameworks. Quite a few complex AJAX applications on the web today use this model.
If HTML5 is to replace the other desktop application development technologies, it would need more powerful and integrated tools so that you dont have to be an expert to develop these apps. The HTML WYSIWYG tools have to evolve to support not only the language features but also the common patterns so well designed software will be easy to do.
Will update this blog with more exciting HTML5 thingies as I find them.
05.29.09
Google Wave and Live Mesh
Google released its new communication and collaboration tool called Google Wave today. Its an exciting piece of technology that could lead the web in the way we consume and contribute to social networks. It brings together e-mail, IM and social streams together into conversations managed and consumed from a single interface. Federating web conversations from third party sites gets to where friendfeed is today and what facebook wants to be. But the integration with email makes it instantly useful.
The most interesting thing for me was the real time nature of conversations. Characters are transferred as you type, photo sharing that looks very real time with thumb nails appearing before the pictures etc make the conversation seem real. Little things that will improve user experience. Real time collaboration is really cool and surely looks like the where things are going in Web 3.0.
Friendfeed does a good job of aggregating conversations from around the web. AlertThingy friendfeed edition uses the friendfeed API to provide a cool conversation interface in a desktop app. The wave conversation reminds me of that and then some.
Though not obvious on first look, there are many similarities between Google Wave and Microsoft’s Live Mesh. Live Mesh has a platform to collaborate and communicate. It lacks a compelling application that can demo its capabilities as well as the Wave demo. An application that is similar to the Google Wave could be built on top of Mesh. Would be interesting to see if something like that comes out.
Mesh works on top of entities called mesh objects. And the mesh platform provides a pub-sub platform for changes to the mesh object. This facilitates sharing and collaboration. Google Wave has the Wave entity and the blip entity that is a change to the wave. Both of them have some kind of pub-sub infrastructure behind them. Both of them provide a good abstraction to represent higher level entities in communication that will take social networking from being able to share blurbs and links to sharing objects with context.
05.14.09
Browser extensions as a service
I hate browser extensions. If you do too and you don’t need any more reasons to convince you they are evil, move on to the second part of my post.
PART I : EXTENSIONS ARE EVIL
I have been using Extensions/Add-ons for a long time to customize IE and Firefox and get more out of my browser. There are many good extensions out there that provide a lot of great functionality. But there are also a lot of malicious ones that caused havoc, the result being that extensions are viewed as security holes and people are wary of them. Add to that the fact that the IE extension programming model is primitive and gives every extension that you install the keys to the kingdom. Extension are a little better on firefox but either way they have a lot of downsides.
- [IE] No sandbox in which the extensions work. They can pretty much do as they please. Brings down the trust level. Much better in Firefox.
- [IE] Based on ActiveX. Yuck!. Again much better in Firefox with XUL and a JavaScript based programming model.
- [IE]Most browser crashes are induced by extensions. Once they crash, the user disables them and that’s the end of story.Again much better in Firefox. Much harder to crash Firefox from a JavaScript based extension.
- Makes the browser slow even when you are not using the extension. Applies to all browsers.
- Extension developers have to write multiple versions of their extension for each browser.
- Sucks to be in the old world of installed applications. Firefox again has an auto-update feature that can keep your extension up to date with new features. But still its not as good as being a service. IE leaves it to the extension writer.
- Extensions don’t roam. You will have to install the extensions you need to all of your machines.
- Extensions will not work on your mobile devices. Or even if your extension developer supports your mobile device, you will have to install each on your mobile phone.
Ok with so many headaches and low trust, people end up not installing (m)any extensions. Lets ignore the ones that come factory-installed for the moment. That’s a rant for another post. And remember its easy to disable extensions and toolbars even in IE from 7.0 onwards. So, pre-installing only elevates you to a spammer status.
PART II : SERVICE ORIENTED EXTENSION MODEL
Many of the same problems have been solved when desktop installed applications transitioned to web based services. If browser extensions can be provided as a service, it will be more acceptable to the end user and extensible for the extension (service) developer. Trust, distribution, ease of use, customization, roaming, discovery etc are problems that have been solved for the web.
Greasemonkey brought a new approach to extending the browser. Install one extension and add scripts that will enhance different sites. It has the potential of customizing different sites to your liking and mashing a few of them to see what you want, the way you want it. But I always felt that the experience Greasemonkey gave you is disjoint. There all these cool script that will work if you know that they exist and how to use them. But there is no common thread that will bring all these experiences together.
Bookmarklets are generally used to write one click helpers that extract data from the current page and process it in some way. For example,
- Press This : take text from the current page and post it to your blog.
- Readability : format the current page for readability (really good)
- Favelet suite : reverse engineer a web site using the bookmarklet tools
With a combination of JavaScript injection, HTML 5 features like DOM Storage, cross document messaging and bookmarklets, it is possible to implement “extension as a service”. What does this mean?
- Needs no installation when used as a bookmarklet
- Can download extension applets on demand and based on context
- Extension code hosted as a service
- User specific extension data stored on the service
- Can easily roam with the user
- Same functionality for all browsers with one code base
More on the architecture of this service in a later post.

