Hello.World » AJAX

Google Gears Enables Disconnected Web-Apps

Matthew Delmarter — Thu, 31 May 2007 10:18:50 +0000

Google Gears is an open source browser extension, less than 1Mb in size, that lets developers create web applications that can run offline. There are two main ways the extension can be used – by embedding the API or runtime software in an application you distribute to end users, or by writing a web application which makes use of installations of Gears on end-users' computers.

What problem does it solve?

Web developers write software for … the web. For applications that run via a browser that is connected to the Internet. Google Gears will take web applications to the desktop – enabling Web applications to work offline. A user will not be required to be connected to the Internet to use the application.

How does it work?

First of all web applications will need to detect whether or not Google Gears is installed on a user's machine. If Gears is installed, then the application will be able to access the Google Gears APIs from JavaScript code. If Gears isn't installed, the user can be directed to a customized installation page.

The APIs can then be used to access Google Gears three core features:

A local server, to cache and serve application resources (HTML, JavaScript, images, etc.) without needing to contact a server.
A SQLite database, to store and access data from within the browser.The Database module is used to persistently store an application user's data on the user's computer. Data is stored using the same-origin security policy, meaning that a web application cannot access data outside of its domain. Standard SQL can be used to access the data, and full-text indexing is supported using SQLite's fts2 extension.
A worker thread pool, to make web applications more responsive by performing expensive operations in the background. In web browsers a single time-intensive operation, such as I/O or heavy computation, can make the UI unresponsive. The WorkerPool module runs operations in the background, without blocking the UI.

What browsers are supported?

The final release will run on the following browsers:

Apple Mac OS X (10.2 or higher)
- Firefox 1.5 or higher
- Safari
Linux
- Firefox 1.5 or higher
Microsoft Windows (XP or higher)
- Firefox 1.5 or higher
- Internet Explorer 6 or higher

What next?

To find out more about this project you can visit the Google Gears website. From there you can download Gears and then install some of the sample applications available.

Some developers are already playing with Google Gears and sharing their experience and their plans. For example you can listen to a podcast about Dojo Offline being ported to Google Gears, or take a look at RSS Bling moving to Google Gears.

This is definitely a project to watch. With Google obviously coordinating with the efforts of popular projects such as Dojo, as well as supporting all the major browsers, there are some interesting possibilities opening up for web applications.

Linus Upson, the engineering director at Google, stated that the goal of Google Gears is to "create a single, standardized way to add offline capabilities to Web applications." Google is certainly on the right track … I'm off to have a play!

Injecting JavaScript and CSS into Iframes

Matthew Delmarter — Sat, 14 Apr 2007 13:30:23 +0000

Introducing a new technique to allow efficient reuse of JavaScript and CSS – effectively allowing you to download the code once and then inject it into Iframes. This solution is targeted at Web Applications which commonly use Iframes for complex layouts and to control memory usage in larger apps without moving to the complexity of a Single Page Interface (SPI). Along the way we summarise and explain other methods available to developers for minimising their code and speeding up the loading time of their application.

With the next generation of Web Applications upon us the challenges faced by the average web developer have broadened. Understanding and confronting issues like memory leaks, bandwidth, load times and JavaScript processing time is becoming more of an everyday focus for web developers than ever before.

Fortunately we now have the tools available to help. On the developers machine the Web Developer Toolbar and Firebug for example are essential. And within the applications themselves we find increased usage of JavaScript libraries such as Dojo, jQuery, Prototype, YUI and widget frameworks like Ext, which provide a layer of abstraction and freedom for developers from some of these issues.

The increased usage of JavaScript however brings other challenges. Particularly in the world of Web Applications where the use of Widgets (tabs, grids, menus etc) is more likely, it is not uncommon for the volume of JavaScript and CSS to quickly accumulate from tens to a few hundred kb of code. This is a far cry from ideal, but is also to a certain extent unavoidable if that is the type of application you are supporting.

What can a developer do to minimise this issue? There are several very effective methods that can be explored:

Compacting Your Code
This is acheived by stripping out comments and unneccesary white-space which can drastically reduce the size of your files – sometimes cutting them in half. Recommended tools: Dean Edwards Packer or Douglas Crockford's JSMin. You could apply the same theory to your CSS as well.

File Compression
Using GZIP or Deflate can drastically reduce the downloaded file size (but should be used wisely). You can read more on this here.

Combining Multiple Files
In general browsers download only two or four files in parallel per hostname, depending on the HTTP version of the response and the userâ€™s browser. On top of that it seems that JavaScript files are loaded synchronously and sequentially as they appear in your code. This means that only one JavaScript file can be downloaded at a time – and each file must be completely downloaded and then interpreted before the next download can begin. Reducing the number of HTTP requests by combining your JavaScript and CSS files into single files will definitely help improve your applications response times. Using CSS Sprites to combine your images into a single file and re-use with CSS is also an extension of this principle and is a very effective technique.

Caching
Server-side caching can help speed the up the delivery of page content. Also understanding browser caching and how to control this using file headers can make a difference – but again should be used wisely.

These techniques have been around for quite a while now. But this leads me to the real point of this post!

"Injection" Introduced

When it comes to the world of Web Applications (as opposed to a "website") where the use of Iframes is more likely, there is another technique that can be explored – "Code Injection".

I became aware of this technique while trying to interpret some very lengthy posts from Choleriker on the Ext forums. I thank Choleriker for taking the time to explain the concepts. I thought I would share my interpretation of this technique, as well as provide some examples to see it in action as requested by other developers in the forums.

First of all – what is this "code injection" that I am referring to?

Explained
In breif, the technique basically involves loading your JavaScript and CSS only once and then re-using it inside any iframes without downloading it again. This is acheived by loading your code "inline" inside the top level page of the application. The top page then makes the JavaScript and CSS available as two variables that can be called from the iframes directly. So the code is passed or "injected" from the top level page into any iframes using JavaScript.

Benefits?
There are several benefits to this technique – the most obvious being that you only download your JavaScript and CSS once, no additional downloads required. If you normally compress your JavaScript files using GZIP you likely know that there is a performance hit in the client browser to decompress the code before it can be used. This is no longer an issue for the reused code. And there is no longer any concerns with browser caching issues. Another big plus is that the CSS and JavaScript is being loaded as part of your actual page – i.e. there are no other additional files to download, which will improve the response times as described above.

Downsides?
I guess that the technique requires iframes. In time I guess/hope the principles of the technique may be able to be used in other perhaps more elegant ways that I haven't thought of yet. Another downside is the need to load your JavaScript and CSS inline. This was initially repugnant to me, mainly due to my background in website development. But in an Application is it really a big deal? I have decided it does not outweight the benefits.

Another perceived downside is that you have to get all of your JavaScript and CSS into a format that is loaded inline – but of course you still want to work with your separate "clean" files as you are used to. This should be viewed as an opportunity! It is likely time to implement a number of techniques as discussed above. My recommended technique is to have a server-side script that does the following:

Combines the required JavaScript and CSS files

Compacts the code by stripped white-space, comments etc

Caches the output code to a file on the server

Include the code inline using PHP or some other scripting language

I may provide some code for doing this in PHP in the future. In the meantime you might want to look at the "Combine" script from Niels Leenheer to get started.

Sample Application
So – how about an example? Click on the image below to see this technique in action. The example is built using Ext 1.0 Beta 2. It is a top level page which generates an Ext Layout with panels. The right-hand panel contains an iframe which receives the JavaScript and CSS from the top level page – it has not downloaded any files except the required images.

The secret to this working is the following code in the Top Page:

// CSS loaded inline here document.write(['',document.getElementById('StyleProxy').innerHTML,''].join('r')); // JavaScript loaded inline here // define the variables for storing the JavaScript and CSS var _SCRIPTS = null; var _STYLES = null; // use jQuery to run the JS once HTML is loaded $(document).ready( function() { // place the JavaScript and CSS into the variables for reuse top.window._SCRIPTS = Ext.get("ScriptProxy").dom.innerHTML.toString(); top.window._STYLES = Ext.get("StyleProxy").dom.innerHTML.toString(); // create an iframe and add to the DOM // this should be always be done after the variables // for the JS and CSS are filled $main_container = Ext.get("iframe_main_container"); var $iframe_nav = Ext.DomHelper.append ( $main_container, { tag: "iframe", id: "iframeMain", name: "iframeMain", width: "100%", height: "100%", frameborder: "no", scrolling: "no", src: "ext_demo_iframe1.htm" } ); })

A look at the files downloaded reveals the benefits – the iframe had nothing to download but the basic page itself. The JavaScript and CSS were downloaded only once as part of the top page. This top page was a reasonable size – but Ext is not small, and we can see the GZIP compression kicking in:

Conclusion
So – should you use this technique? That depends on your application and your preference. The objective of this post was to simply introduce a concept that was new to me, and I am sure is new to many others. It is simply another technique to add to a developers toolbox.

PS: I am very interested what other developers think of this technique and what they perceive as the advantages and disadvantages. I also have a question – does this technique expose any security holes I should be aware of?

Firebug 1.0 – A “Must Have”

Matthew Delmarter — Mon, 04 Dec 2006 15:12:58 +0000

It's been over 10 months since I first started advocating Firebug, especially for developers working with AJAX. Since that time the tool has been rewritten from scratch and been given a lot more focus by the developer Joe Hewitt. The result is Firebug 1.0.

The core features of 1.0 include CSS editing, network load timing, box model visualization, JavaScript profiling, command line autocomplete, HTML change highlighting, debugger watch lists, DOM editing, separate window support, and per-site blacklists.

Firebug is now one of the most used and appreciated tools in my developer toolbox. If you have not downloaded the 1.0 beta then here are some compelling reasons why you should…

	Just the way you like it Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for. Learn more
	Inspect and edit HTML Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live. Learn more
	Tweak CSS to perfection Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly. Learn more
	Visualize CSS metrics When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you. Learn more
	Monitor network activity Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file. Learn more
	Debug and profile JavaScript Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast. Learn more
	Quickly find errors When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML. Learn more
	Explore the DOM The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly. Learn more
	Execute JavaScript on the fly The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities. Learn more
	Logging for JavaScript Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast. Learn more

Click here to download the Firebug 1.0 beta…

Issue One of Visual jQuery Magazine Released

Matthew Delmarter — Fri, 22 Sep 2006 21:05:27 +0000

I have posted a number of times about jQuery – a JavaScript (JS) framework that will revolutionise the way you write JS. The community uptake of this framework has been quite impressive. Now there is even a monthly magazine available, courtesy of Yehuda Katz. The first release of the magazine includes the following topics:

an editor's note about the magazine
a profile of jQuery's founder, John Resig
an introduction to jQuery's basic principles
an argument for jQuery's philosophy
an interview with the creator of the jqMinMax plugin, Dave Cardwell
a roundup of three plugins that are useful for creating rich web applications

Why is this framework worthy of so much attention? You need to be a JavaScript coder to really appreciate it's beauty. Basically jQuery allows web developers to write JS the way we think, the way we see the world within the context of the DOM. Not only is it logical and simple to work with, it will drastically reduce the amount of JS you write. That means smaller files, your code is easier to read and understand, and you spend less time coding. It enables you to easily work with AJAX, animations, forms, CSS, and the list goes on – all for including a file only 16k in size.

On top of that, the jQuery community is rapidly adding new plugins and widgets that work with jQuery. The mailing list is also extremely responsive and helpful.

Once upon a time the developer world went crazy about Prototype and Scriptaculous. For me jQuery and Interface leave such alternatives in the dust. Why? Apart from the fact that jQuery+Interface = 66k (16+50) and Prototype+Scriptaculous = 188k (50+128)? jQuery and Interface are just more intuitive to work with and offer the same core features.

Here are some links to get you excited:

jQuery.com – Official jQuery website

Visual jQuery Magazine – Issue One

Interface – enabling drag 'n' drop, autocomplete etc

Plugin Library – A list of all plugins

Tutorials - a list of community tutorials for jQuery

Mailing List – Searchable archive of the Mailing List

Visual jQuery – Interactive documentation for jQuery

Anyway – it is time for me to stop raving. If I keep posting only about jQuery this blog is going to get fairly monotonous! I will now leave you to form your own impressions…

Prototype.js Cheat Sheets

Matthew Delmarter — Tue, 21 Feb 2006 19:31:38 +0000

If you use the Prototype.js framework, or would like to learn more about it, Jonathan Snooks has created some very attractive "Cheat Sheets" that will definitely be of some help to you. Check them out here.

WordPress Plugin: Visual.SpellCheck

Matthew Delmarter — Sat, 04 Feb 2006 03:00:34 +0000

Current Version: 0.95

I don't use the WYSIWYG Editor that comes with WordPress 2.0, and as a result have been getting extremely frustrated with the lack of a spell-checker. So I decided to try and get one working, preferably using AJAX to make it as fast and user-friendly as possible.

I am now proud to present Visual.SpellCheck – an AJAX-based Spell Checker for WordPress. It includes the ability to:

Highlight incorrectly spelled words
List suggested words from the aspell dictionary
List suggested words from your custom dictionary
Allow new words to be added to your Custom Dictionary

The Spell Checker works in Firefox, Internet Explorer, Opera and Safari.

Demo

Here is a demo of Visual.SpellCheck. It should work fine in Mozilla browsers (including Firefox) and Internet Explorer. It will also function in Opera, although there are some small issues. Follow the instructions in the textarea itself, and feel free to edit it's contents and then test.

Installation

Follow these basic steps:

Download this file: Visual.SpellCheck.zip (37Kb)
Unzip the file on your computer.
Upload the complete folder "Visual.SpellCheck" to your WordPress plugins directory (found in "/wp-content/plugins")
Login to WordPress and go to the Plugins module
Find the line that says "Visual.SpellCheck" and click "Activate"
Change the permissions on the file Visual.Syntax/personal_dictionary/dict.txt" to "757″ so that the server can write to the file

Note: Pspell must be installed on the server for this to work. Also this plugin is not compatible with the WYSIWYG HTML Editor that comes with WordPress (TinyMCE comes with its own spellchecker anyway). You will have to disable the WYSIWYG and be using the old-style editor (textarea).

Credits

This project is based on code from Broken-Notebook. Thanks to Garrison who has modified his original code to allow the plugin to integrate with WordPress and minimise issues with future compatibility.

Known Minor Bugs

This is the only bug I am aware of – and it is pretty minor:

In Opera the popup menu that shows the suggested words always sits top-left of the textarea

If you are able to help with this that would be great.

ChangeLog

2006-02-04 - Firefox QuickTags conflict fixed. Now version 0.95
2006-02-04 - Public release of version 0.90

If you liked this plugin you can digg it here or please leave a comment.

IBM in the News: AJAX, DB2, LAMP

Matthew Delmarter — Fri, 03 Feb 2006 00:29:52 +0000

There have been some very exciting developments from IBM over the last few weeks. Here are four areas of major interest to me:

AJAX Toolkit Framework (ATF) Project

In January 2006 IBM announced the ATF Project. The goal is to extend the Eclipse platform to allow for extensible frameworks and exemplary tools for building IDEs (integrated development environments) for the many different AJAX runtime offerings such as Dojo, OpenRico, and Zimbra. These tools will contain features for developing, deploying, debugging and testing AJAX applications, which is not so easy to do using development tools of today.

The tools built upon these frameworks will include some very exciting features:

Enhanced JavaScript editing such as edit-time syntax checking;
An embedded Mozilla web browser;
An embedded DOM (Document Object Model) browser;
An embedded JavaScript debugger.

Open Ajax Initiative

On February 1st IBM and other industry leaders announced the "Open AJAX" initiative to promote the adoption of AJAX technology. This project is going to see collaboration between BEA, Borland, the Dojo Foundation, Eclipse Foundation, IBM, Laszlo Systems, Mozilla Corporation, Novell, Openwave Systems, Oracle, Red Hat, Yahoo, Zend and Zimbra.

The goal? To promote Ajax's promise of universal compatibility with any computer device, application, desktop or operating system, and easy incorporation into new and existing software programs.

DB2 Express-C

On January 30th IBM introduced a free version of its DB2 database. DB2 Express-C is the same database as IBM's commercial offerings but the company places limits on what kind of hardware it can run on. It can be deployed on systems with two processor cores or up to two dual-core chips on AMD or Intel-based servers. The memory limit is 4GB but there are no limits on the size of database or number of users.

This move really follows the footsteps of Microsoft with SQL Server Express, and Oracle with Oracle 10g Express Edition.

Already the LAMP-based community is showing interest in using DB2. For example ActiveGrid has just released an edition of its front-end development tool and server software to work with DB2 Express-C. DB2 offers some exciting functionality not found in PostGres or MySQL, such as the ability to combine PHP with DB2's native XML capabilities.

PHP Collaboration Project

This is now old news, but late last year IBM joined forces with Oracle, MySQL, Intel, Actuate, ADP, FileMaker, Schematic, StepUp Commerce, OmniTI, 100days.de, SugarCRM, bebe.com, and Marco Tabini (publisher of PHP Architect Magazine) in the PHP Collaboration Project. The initial objectives of the project are:

Zend PHP Framework: A Web application framework which will standardize the way PHP applications are built. The framework will accelerate and improve the development and deployment of mission-critical PHP Web applications
Engagement with the Eclipse Foundation: Zend is joining the IBM founded Eclipse Foundation as a Strategic Developer. Zend is now proposing to lead a project focused on PHP within Eclipse

I for one am enjoying seeing IBM partnering with other companies and projects to help formalise the future of AJAX and a PHP Framework / toolset. I haven't decided about DB2 yet for my everyday projects – but I will be taking a look for sure.

AjaxTK: The Ajax Toolkit from Zimbra

Matthew Delmarter — Wed, 01 Feb 2006 22:24:50 +0000

Zimbra released the AjaxTK JavaScript development library last year. Running under the Mozilla Public License (MPL) developers can use this toolkit in their browser-based applications. The toolkit is actively used by Zimbra in developing the Zimbra Collaboration Suite, one of the most full-featured AJAX applications I have ever seen. Because of it's development in conjunction with a real-world application, and because of the number of widgets and JavaScript utilities included, AjaxTK may well be one of the most advanced JavaScript toolkits available at the moment.

There is a problem however – there is basically no documentation for using AjaxTK, other than an extremely technical overview of the framework in PDF format. There are currrently no online examples of the widgets being used (other than the demo of the Zimbra Collaboration Suite itself). And while you can download the toolkit from Zimbra, their examples are heavily tied into JSP which is a major problem for me because I have no intention of using JSP.

So – here is a small step toward helping the community to get started. Full credit goes to Xiris, Chouser, Zuser and especially Smies for their posts on the Zimbra AjaxTK Forums.

AjaxTK Tree Example

open example here

This is a standard DHTML tree, but it also demonstrates Drag 'n' Drop and custom Tooltips. Try dragging a contact from the top branch onto the label of the second branch.

AjaxTK Grid Example

open example here

This is an extremely full-featured example. It demonstrates tabs and a grid that has resizable columns, movable columns and column sorting. You can filter the listings on the left (which is fully client-side). And the grid listings are paginated, allowing you to open 3 pages of listings in the grid.

Download Examples and AjaxTK Library

The above examples and the full source code are available for download in a ZIP file (466kb). Once again, thanks to Smies for getting this working.

So … what do you think? How does this compare to other AJAX libraries in your opinion? To be fair to Zimbra, they have only fairly recently released this toolkit to the community and it is yet early days (like most AJAX projects). They have some very positive thoughts on what AJAX libraries should be able to acheive in the future, so hopefully this is an indication of where they will take AjaxTK…

If you liked this post you can digg it here.

Useful AJAX Based Tools

Matthew Delmarter — Tue, 17 Jan 2006 19:55:55 +0000

This week I discovered three very useful tools built in AJAX. Here they are for my own future reference – and maybe you will enjoy these as well:

WizLite

Rex-V

phpFunctions

Are there any similar tools out there that you would like to share?

Prototype.js support in the Zend Framework

Matthew Delmarter — Wed, 04 Jan 2006 22:00:51 +0000

As the upcoming Zend Framework is going to implement AJAX functionality I really hope that they will integrate the prototype.js library. I realise that this is also used by Ruby on Rails which Zend is trying to avoid giving the impression they are ripping off. However it is a fantastic library and it would be great to see it become almost a standard. It can be relied on as it is being actively developed and is involved in major frameworks at this stage. In addition there are number of JS scripts and projects already implementing prototype.js. So … here's hoping!