Advertisements

Introducing ChocolateChip – A Mobile JavaScript Framework

Desktop Safari, Desktop Chrome, Desktop Firefox, Desktop Opera, Desktop IE9, iPhone, iPad, Android.

After using practically every mobile Web framework out there, I finally threw in the towel and decided to create a JavaScript library for mobile that was light weight and fast and easy to use. To this end I would like to introduce you to ChocolateChip. It’s small, a little chip, and tasty like chocolate. Minified, it weights in at 8k. It’s syntax is similar to jQuery. Unlike jQuery and other libraries, nodes are not obfuscated by object wrappers. Everything is always normal JavaScript. No need to relearn how to write JavaScript according to a library. Write it the way it’s supposed to be written.

Because I’m not dealing with old or non-standard browsers and their quirks, I could concentrate on implementing only what was necessary and doing so optimally. ChocolateChip has a $ function, like jQuery, which returns the first instance of a node identified by a valid CSS3 selector. It also has a $$ function which returns an array of nodes matching the CSS3 selector. Most methods are attached directly to the base Element object. That means those methods are available to all nodes in a document, making it unnecessary to wrap the returned nodes in an object to provide extended functionality. This means that you can use normal JavaScript functions directly on the nodes. And the keyword “this” really is this. You don’t have to do $(this). The library allows you to chain load functions when the document finishes loading, or fire blocks of code when the document’s markup is ready for parsing.

Here is what ChococlateChip looks like in action:

$.ready(function() {
	$("#aboutDownButton").onclick = function() {
		$("#About").addClass("down");
	};
	$("#aboutUpButton").onclick = function() {
		$("#About").removeClass("down");
	};
	$$(".menuList li").forEach(function(item) {
		item.onclick = function() {
			$(navigation[navigation.length-1]).removeClass("current");
			$(navigation[navigation.length-1]).addClass("reverse");
			if (!$("#Home").hasClass("reverse")) {
				$("#Home").addClass("reverse");
			}
			$(this.getAttribute("rel")).addClass("current");
			navigation.push(this.getAttribute("rel"));
			hideURLbar(); 
		};
	}); 
	$$(".menuList li").forEach(function(item) {
                item.ontouchstart = function() {
		    this.addClass("hover");
                };
	});
	$$(".menuList li").forEach(function(item) {
                item.ontouchend = function() {
		    this.removeClass("hover");
                };
	});
	$$(".button.back").forEach(function(button) {
		button.onclick = function() {
			var parent = navigation[navigation.length-1];
			navigation.pop();
			$(navigation[navigation.length-1]).addClass("current");
			$(parent).removeClass("current");
			$(navigation[navigation.length-1]).removeClass("reverse");
			hideURLbar();
		};
	});
	$$(".button").forEach(function(button) {
		button.ontouchstart = function() {
			this.addClass("hover");
		};
	});
	$$(".button").forEach(function(button) {
		button.ontouchend = function() {
			this.removeClass("hover");
		}
	});
}); 

Update October 15, 2010
You can now learn about and download ChocolateChip from it’s own site: ChocolateChip-Mobile.net. The following paragraph refers to an early, developmental version.

Without further ado, here is ChocolateChip. Download the library with some samples. Remember, this is for mobile development on advanced devices like iPhone, iPad and Android, so on your desktop use a modern browser like Safari or Chrome, or test directly on an iPhone, iPad, or Android device.

Because the minified version is only 8k, you can include it in your document instead of as an external dependency. This means one less server hit to reduce latency and avoids the possibility of the library not being found and loaded.

One last thing, I’m sure some of you are scratching your heads wondering why I didn’t provide any namespacing to prevent collisions with the use of $ and $$ by other libraries. Well, that’s the point. Mobile is all about file size and memory constraints. You really shouldn’t be using ChocolateChip with any other library. They were not designed for mobile use, ChocolateChip was. You don’t need jQuery and its plugins, Prototype/Scriptaculous/ Dojo, YUI or any of the other big boys. Take a bite out of ChocolateChip and realize how good a developer’s life can be.

UPDATE: ChocolateChip 1.01 August 30, 2010
OK, I added in support for event binding using the methods “bind” and “unbind” and some basic initialization functions built in for forward and backward navigation. If you build out your Web app using my coding conventions, this will give you automatic forward and backward navigation without writing any code yourself. Here’s the uncompressed version with comments, and a minified version, which now weighs in at 12k. And here’s a sample document showing the new bind event in action.

UPDATE Oct 15, 2010: ChocolateChip now has it’s own blog
That’s right. ChocolateChip has it’s own blog with posts about how to use it. Learn how the little guy and help you get big stuff done. ChocolateChip will also soon have it’s own site dedicated to downloads of source code, controls, layouts and other goodies.
Visit ChocolateChip-Mobile.net and check out how 8k of JavaScript can help you create light weight mobile Web apps.

Advertisements

About Robert Biggs
Front end Web developer skilled at creating interactive, dynamic interfaces using HTML5, CSS3, JavaScript, SVG. Passionate about developing awesome user experiences in the mobile space.

Comments are closed.

%d bloggers like this: