Browser Spring is full of great browsers, only one will be kingpin!

Standard

It’s amazing how the web has been ignited again in the name of the best JavaScript engine and browser layout engine. Everywhere I turn, there is talk of Ajax, JavaScript frameworks etc. The web has entered another phase; were application are heavily rendered on the client-side instead of the server-side; hence; the need for better JavaScript and rendering engines. The cloud is everywhere and people want to access it from many different devices. The browser war has even made its way to the mobile platform with contenders like Mobile IE, Safari, Opera etc. All these exciting work comes with the duty to support if not all, the major browsers in our applications.  There are lots of browsers but I will concentrate on the major ones in this post. With that said, Let introduce our contenting fellows.

Meet Mater (alias Internet Explore)

popc3

Take your time to absorb his looks. Not handsome but has been around the block for a long time. Internet Explore 1.0 debuted in 1995 to facilitate the growing hunger of the mass to access the world wide web. The use-to-be-great Netscape battled it out with IE till around 1999. IE won hands down not because of Microsoft strategy to include IE in its OS, but because IE stayed on the edge and was the only browser at that time to support a large part of of W3C Dom and CSS standards. After its success over Netscape, Internet Explorer basically stood still from 1999 to 2003 with not much activities except for the usual patches and updates here and there. It was the kingpin of Browser Spring till 2003 when Apple rebelled with Safari. By then most users were sick and tired of the old IE, for nothing had happened to it in a period of 3 years.

Meet   Lightning McQueen ( Firefox )

popc1

Catchewwww, yep, that’s the sound of spend and beauty. It’s lightning mcqueen zipping through browser spring. First released on November 9th 2004, Firefox was the resurrection/rebirth of Netscape but engineered without all the mistakes made by its predecessor. It packed the goody’s on W3C Dom and CSS  standards. Better yet, it was free; not like its father, Netscape. The Netscape/Mozilla team had learnt their lesson and had created a monster, formidable to stand toe to toe with IE. Firefox 2.0 push the game much further, introducing great features such as tab browsing which has now become the standard to most browsers and the extension manager, which by far; has become the most used feature set of Firefox. Firefox boost of both rendering speed (using Gecko) as well as JavaScript execution speed. It made it’s mark, and is hear to stay.

Meet Sally (Google Chrome)

popc2

Fed up with the timeline it takes to release new standards by W3C to support the modern use of browsers, Google decide to spit out Sally with her V8 cafe. V8(Chromes JavaScript engine) and Chrome have been touted as the fastest browser and JavaScript engine as of early 2008 (inception of chrome). Chrome took a different route with JavaScript by building its engine to compile JavaScript to native machine code making it fast. My first impression with Chrome was that of –“here goes another browser for developers to worry about”. Well, I will have to say, I have been very impressed with chrome and look forward to more in the future. After all, Google’s cash making machine primarily comes from search and it’s web apps. Thus, the better the browser,the better their applications’ performance.

Meet  iHudson (Safari)

popc4

Safari was developed by Apple in 2003, to ship with their flagship OS X 10. Apple boasted that Safari was the fasters browser there was but there had actually been no proof. In 2007, a windows version was released, becoming the second Apple product to trend on Microsoft territory after iTunes. Team Safari just announced a couple of months ago, their new JavaScript engine named SquirrelFish; to be the fastest JavaScript engine at present beating Google chrome’s V8. Sally must not be pleased.

Javascript Benchmarks

On same computer, an average of 10 test run on each browser


Browsers

V8 Benchmark Suite-v1 Sunspider  Javascript Benchmark
Internet Explorer 8 beta 70 7890.8ms +/- 1.3%
Safari (Windows) 3.0 71 browse froze everytime
Firefox 3.0 231
3361.6ms +/- 1.5%
Google Chrome 1.0 3200
1250.4ms +/- 8.8%

War in Browser Spring

Its amazing how all these enhancement to the web has suddenly sprung up. Every browser has to stay on the edge just to be competitive. I, for one, I’m no one to complain. Competition breads the best in everything. In the end, the end user benefits. As a developer for the web (sometimes), I’m pleased to see such excitement. IE has itself to blame; for it stayed in dormant state for way to long. Microsoft has the tendency to do that. They lack innovation in some area and I fear the browser is one of them. I could be wrong with IE 8.  MS is slated to release IE 8 sometime next year which is suppose to be more standard compliant  and supports CSS 2.1.

Who do you think will be kingpin? Let me know your thoughts.
Advertisements

Google Gears

Standard

Google  gearslogo_153x43    which has been greatly talk about since its release by the web giant Google has spurred a lot of talk about how web application will be in the current and near future. Gears offers to provide features that are currently needed to speed up “heavy” (memory and data) intensive web application as well as provide off-line abilities.  Gear provides the following accents for web applications :

Local Database

This is used to stored user application data locally on the users computer, providing if not exactly, close off-line db store to OS desktop applications. Gears uses the open-source db SQLite for this functionality and supports normal SQL query.

 

Local Server

The local Serve allows you to cache application information on the client and and serve them locally instead of going back to the server. It can also to automatic updates for URL resource behind the scene.

  

Applications manage the cache using two classes:

  • ResourceStore – for capturing ad-hoc URLs using JavaScript. The ResourceStore allows an application to capture user data files that need to be addressed with a URL, such as a PDF file or an image.
  • ManagedResourceStore – for capturing a related set of URLs that are declared in a manifest file, and are updated automatically. The ManagedResourceStore allows the set of resources needed to run a web application to be captured.

For both types of stores, the set of URLs captured is explicitly controlled by the web application.

Serving and updating cached resources

The LocalServer intercepts HTTP/HTTPS requests and serves them from the cache when all of these conditions are met:

  • The URL is cached in a ResourceStore or ManagedResourceStore,
  • The store’s enabled attribute is set to true, and
  • If the store has a requiredCookie attribute, the request must have a cookie that matches. For further details read Cookies and the LocalServer.

The LocalServer always serves a cached resource when the conditions are met, regardless of the network connection. The URLs contained in a store are eligible for local serving without requiring the application to open the store.

To disable local serving of stored resources and force URLs to be served using the regular network connection, the application can set the store’s enabled attribute to false.

 

WorkerPool

This allows you application to spin off asynchronies processes (with JavaScript) without halting the browser or slowing its responsiveness.

 

These are all great features that web developer have  been wanting for many year now.  A co-worker asked “This is all great news but why do we need another 3rd party engine in our browser to make this happen. We already have flash and the upcoming Silverlight from MS “. Well, flash and Silverlight offer’s similar features like local data store but they also add the extra hefty runtime engine to make it all happen instead of improving the existing and most widely used tools (HTML , CSS, JavaScript etc) .

That’s not to say that Flash, Silverlight and others are about to be left in the dust. If the is one thing they “still” have over Goggle gears, it’s the fact that the UI presentation is the same in any browser. That take away the hustle of testing web application in multiple browsers due to different implementation of the W3C standards. This might change as  like IE (with IE 8 coming up) are becoming more compliant then ever.

There is a lot of speculation as to what will happen to Gears or flash /Silverlight etc, but for now, a better solution for developing off-line web application (using our long existing knowledge of JavaScript, CSS, HTML ) have arrived and should be well noted. Gears is not for every application but if the features fits what you are looking for in your app, take a good look at it.

Data Visualization Controls on the Web

Standard

The web is accessible to more audience than any other medium in our current time. That makes the web a good medium to push different kinds of information. We have succeeded so far in many aspect of using the web as a communication tool using textual communication (web content), image communication  etc. The one aspect of the web we have fail and still continue to fail is data visualization. The ability to show data in pie graphs, bar graphs etc. If you are in the same situation as I am, you find yourself in an abyss in which all solution have major disadvantages. Lets take a look at some of these solutions:

 

Adobe Flash/Flex
Using Adobe flash for charting on the web ensures that the chart looks the same on all machine. The developer doesn’t have to worry about how the different browsers will translate fonts and all that jazz. The visual aspect is preserved but to the disadvantage of the user. They  have to have the flash runtime installed on their machine. Flash is currently present on about 90% of machines so this might be a decision we can live with (unless majority of your customer base fall in the remaining 10%, then you have to look for another alternative). adobes flex charting controls  is a great examples of great flash/flex charting controls. 

 

Microsoft Silverlight

You fate is the same as in flash except that you are even worse of now because Silverlight is new and isn’t present on majority of machines out there. MS is trying hard to spread the Silverlight runtime but who know when it will be available on majority of the machines out there. Examples of some charting libraries based on Silverlight are Freesilverlightchart and

Visifire

 

Ajax Component / DHTML

Your reach in this department is very high since this relies on the  JavaScript/DOM  engine baked in the browser.  But even with JavaScript and the DOM , we have issues.

1. Some people have JavaScript turned off in their browser obliterating any Ajax charting controls in your web site.

2. With all the effort placed on standardization, most of the dominating browsers do not process pages the same way. Monzilla Firfox users blame MS IE for not complying with standards and visa-versa. Thus, you have to test your Ajax control/component in most, if not all browsers out there to make sure its “works”.

3. Even if you have it working just right in all browsers, an update on a browser as to how its engines work could affect your control.

 

Canvas from HTML 5

The HTML canvas is becoming more and more popular for drawing charts but still in its infancy. Its not supported by IE even though there is a workaround to make it work in IE. It also doesn’t have the robustness to support the many different charting needs such as events on chart elements and chart element composition.  That said, if you are building serious charting controls, this is definitely not for you.

 

All in all, there is not one solution that solved all the problems. They each have their disadvantages as well as advantages. Your choice purely depends on your target audience, their browser medium and what your business is willing to live with.

Functions first, then User experience

Standard

I use Flash off and on depending on my needs and today, was one of those days. Today, I caught a UX mishap in Flash which should have been caught. How?   So here I am, after importing images into flash, I started laying  my application on the stage. Then oops, I made a mistake placing the the wrong image in a specific frames so I clicked on the image, swap and then pop’s up my swap dialog box. Great!, then the “OOH NO”. I cannot expand my swamp window.I have about 20 images with the same first 15 characters or so. How can this happen, I have to manually check each image to find out which one I’m looking to swap. It was a pain. How could they have missed something like this a colleague asked? It seems that features came first before UX. A common mistake in our industry unfortunately.