Wednesday, December 10th, 2008
Category: Dojo
We heard from Will of the Psych Desktop project as he ran across our coverage of other Web desktop apps. He shared with us his project that is part of the Dojo Foundation which you can check out here.
He had some good thoughts, so I thought I would pass them along below:
Psych Desktop is an open source web desktop licensed under the AFL. We’re a part of the Dojo Foundation, and have been around for around two years I believe. We’re going to rename the project as Lucid when we finish our new site.
Anyways, there are two main ideas behind Lucid. The first is that we aren’t just building a clone of a desktop environment, but rather a desktop that was built for the web. For example, in 1.1 we plan on providing an alternate UI made for mobile devices such as an iPhone. Another example of what we want to accomplish would be a photo manager that would easily allow you to publish photos to a public photo gallery. We also want to do the typical things, like a word processor and email, but that’s not the main idea behind the desktop.
The second idea behind it is that we should provide a nice, clean set of APIs for developers to use in their apps. For example, we’ve got a Registry that is based off of a dojo.data store, so you can plug it directly into a dojox.grid.DataGrid, and you instantly have an editable grid that writes back to the store. Another neat API is the crosstalk API, which allows intercommunication between users. The Messenger app is using this. There’s also a sound API that can be used to playback audio. The apps are written in javascript, and don’t require any server-side code at all. And of course, there’s also a filesystem.
Right now we’re in beta, but we’re coming close to our 1.0 release. There’s still a bit of work to be done, but it’s stable enough for developers to start playing with it. 1.1 is going to be a lot more innovative, but I think 1.0 will be good starting grounds for our expedition.
It is cool to see the Will is passionate about the area and is “in it for the long term.”
Category: Dojo, Utility
WaveMaker, the IDE that Dojo helped build (with a ton of work from the team) has added support for cloud deployment to Amazon:
The biggest problem with cloud development platforms to date has been lack of portability. For example, what if I want to move my cloud application from Coghead to some other platform? Answer - you can’t.
WaveMaker changed that today by releasing the first open-source IDE for the cloud. With WaveMaker, you are no longer locked in to developing for a particular cloud. You can access our studio by downloading our open source version or access the cloud version of the studio directly (hosted on Amazon EC2).
On EC2, we are using Rightscale to manage scaling, load balancing and failover for our multi-tenant studio. We have also integrated with Elastra to provide scalable database connectivity.
Here are some things you can do with WaveMaker’s cloud edition
- On-site or on demand development: create applications with the open source studio (download to your desktop).
- Portable cloud deployment: with one click, deploy applications to the cloud, to the desktop or to the data center.
- Open source cloud IDE: migrate applications from the hosted cloud version to the free open source version whenever you want.
The WaveMaker cloud edition beta is free for development. Deployment will be through a paid Amazon machine image (AMI), with pricing starting at $0.30 per hour.
Very nice indeed! Give it a butchers!
Wednesday, December 3rd, 2008
Category: CSS, Dojo, JavaScript, Library, Prototype, jQuery
Voting has started in Dojo land to take in John Resig’s Sizzle next-gem CSS selector engine.
This is incredibly exciting, as it shows how Ajax libraries are working together more and more. Instead of reinventing the wheel in different ways for each project, is it possible to find some core pieces that can be nicely shared? Of course, if our world was nicer and we could share code by linking in a nice way maybe this would happen more.
As I mentioned in my thanksgiving note, the work that the Ajax library developers do is hugely important and impactful, and having them work together can only be great news.
Take a look at this public email to the Dojo Foundation on the vote:
Overview
The Sizzle project is a JavaScript library for performing selections
across a DOM tree using CSS selectors. The library is designed to be
standalone (have no external dependencies), lightweight, fast, and
extensible. This culminates in a library that is perfectly suited for
integration into other libraries. While it’s feasible that a developer
may use Sizzle directly the target audience for it is other library
authors.
The code for Sizzle can be found in the following Git repository:
http://github.com/jeresig/sizzle/tree/master
All of the code for the project has been written by John Resig and is
released under an MIT license. There are some patches pending from
some other contributors (namely Prototype).
Right now the following libraries are adopting or are looking to adopt
Sizzle as their primary CSS selector engine:
It’s likely that Sizzle will become the unified engine behind a
majority of the JavaScript libraries on the market (if not in numbers
then certainly in market share).
The project is owned by John Resig who will serve as BDFL/Project lead
if the project is accepted. There is no formal voting process, as of
yet, but it’s likely that one will come about, considering the number of
projects using the codebase.
If the project is accepted to the foundation then all contributors to
the project will be required to have a CLA and follow the policies of
the Dojo foundation.
It’s very likely that Sizzle will eventually expand into other areas
of JavaScript libraries (such as DOM manipulation and event binding).
That last line excites me too! It is interesting to see this happen in the Dojo Foundation. Remember, Dojo was founded out of toolkits coming together to aggregate forces. Kudos to everyone involved, and good luck!
Tuesday, November 11th, 2008
Category: Debugging, Dojo
Tom Trenka has a nice posting on Dojo and Firebug Tricks for Development where he shares two of his own:
Trick #1: using window.location.search to enable Firebug Lite on the fly
With the Dojo Toolkit, I find this trick indispensable. The basic concept is to use the original version of the djConfig variable—the object-based one—using a boolean to enable or disable debugging.
In a single line of code, here’s the trick:
JAVASCRIPT:
-
-
var djConfig = { isDebug: (window.location.search.indexOf("debug")>-1) };
-
Trick #2: setting up a simple HTML file that just enables the console
Once you drop in the simple HTML file below, you can bookmark it, load up your Dojo world, and then start to use Firebugs "Run" command to access Dojo-ness.
Start with this:
HTML:
-
-
-
-
<title>Dojo Console Testing
</title>
-
-
src="dojo/dojo.js" djConfig="isDebug: true">
-
</script>
-
</head>
-
-
-
This is a quick and dirty file you can use
-
to do console-based development.
-
</p>
-
</body>
-
</html>
-
And then "Run" something like this:
JAVASCRIPT:
-
-
dojo.require("dojox.xml.DomParser");
-
-
var xml='<?xml version="1.0"?>'
-
+ '<root><node>My first node</node>'
-
+ '<node>My second node</node>'
-
+ '</root>';
-
var doc=dojox.xml.DomParser.parse(xml);
-
console.log(doc);
-
What tips and tricks do you have?
Monday, November 3rd, 2008
Category: Dojo
I remember a time where it was hard to get content out of the Dojo crew :) Times have changed, the community is a lot bigger, and now we get to see a ton of content. Sometimes the irony behind this is that when you see a lot, you don't want to overwhelm people so you pass on stuff that you would have posted in the past.
To rectify this a little, here is a bit of a roundup on some of the interesting news from Dojo land in recent weeks:
JSON Schema in Dojo
JSON Schema provides a portable language-agnostic definition for describing object data structures. JSON Schema can be used for documenting, validating, and constraining data to facilitate interoperability and data integrity, and now Dojo provides a straightforward module for leveraging JSON Schema within the browser.
Dojo 1.2 now includes a JSON Schema validator module, dojox.json.schema, under the dojox.json project (which also includes JSON Referencing and JSONQuery). The validator can be used to determine if an instance object or value is valid against a given schema.
Automatic Dojo Builds
The build system that is part of the Dojo Toolkit is an incredibly powerful tool. Making sure that your custom build is always up-to-date in your web application can be time consuming and error prone if done manually. This post will demonstrate how to quickly add custom Dojo builds into any web application that uses Apache Ant.
Inside Dojo DnD: Drag Handles
A frequently overlooked and underused feature of Dojo’s Drag-and-Drop (DnD) module is drag handles.
DOM Attributes and The Dojo Toolkit 1.2
The Dojo Toolkit 1.2 has landed and I’ll be talking about a new feature — dojo.attr — and its closely related cousin, dojo.style. In a given block of HTML, not all attributes are created equally. Take the following example:
HTML:
-
-
-
tabindex='1"
-
onmouseover="onOver();"
-
name="nameAtt"
-
style="background:#ffff00;">
-
New Content
-
</div>
-
New Features in Dojo Grid 1.2
The last article about the Dojo Grid focused on what has changed when creating a grid using Dojo 1.2. In this article we will be covering five new features of the Dojo 1.2 Grid: Dijit interoperability, selection modes, reorderable columns, header context menus, and column hiding. The examples in this article can be downloaded in a tarball (which includes the build profile I used) so you can play along from home!
Thursday, October 30th, 2008
Category: Dojo
With the rich JavaScript library ecosystem, it can be extremely difficult to make informed decisions when choosing which libraries to use for your own projects. Because no one has time to analyze each library in detail themselves, such decisions are usually made by getting a feel for what the "street" thinks and making the safe choice. Unfortunately, sometimes the word on the street doesn't map to reality as the echo chamber arrives at a false consensus.
Dylan Schiemann recently wrote a blog entry to debunk some of the inaccuracies he's seen crop up about Dojo, the toolkit he co-founded, addressing such points as:
- Dojo is Undocumented
- Dojo is Slow
- Dojo is Bloated, Larger and More Complex than Prototype, jQuery, MooTools, YUI, etc.
- Dojo Requires Java
- Dojo is Verbose and is "Java for JavaScript"
- Dojo is only Useful for Enterprise Apps and not for Small Sites or Blogs
- Dojo is Just About Widgets
- Interest in Dojo is Waning
- Dojo is Ugly
It's a great high-level update on the state of Dojo today.
Wednesday, October 22nd, 2008
Category: Dojo, JavaScript
Kevin Dangoor from SitePen recently announced the release of a small pet project: Reinhardt. From the blog:
A typical server-side web framework today includes three main components: a URL dispatching to some controller object scheme, a template engine, and a data mapping facility. Currently in Dojo, you’ll find that the latter two items already exist. dojox.dtl provides the first one, and dojo.data provides the second.
Given that Dojo already offers an implementation of the Django template engine, and that regular expression-based URL dispatch was a good fit for our problem at hand, I decided to [create a] URL dispatch on the model provided by Django.
Reinhardt is the name I gave to this client-side web framework.
Using Reinhardt, you pair regular expressions to method calls:
JAVASCRIPT:
-
var patterns = reinhardt.urldispatch.patterns("demo.code",
-
[/^list\/(\d*)$/, "showMovieList", ["year"]],
-
[/^search$/, "search"],
-
);
(The first argument to the patterns function provides the URL prefix required for Reinhardt to dispatch a URL.)
Hacking Support for Groups
Because JavaScript regular expressions don't support named groups, you can pass in a group name as a third parameter:
JAVASCRIPT:
-
[/^movie\/(\d+)\/$/, "whatyear", ['id']],
-
[/^movie\/([\w ]+)\/$/, "whatyear", ["name"]],
Kevin explains further about this feature:
These two entries show that the patterns are matched in order. movie/10/ would match both of the expressions. But, movie/Cars/ will only match the second. If the first one is a match, demo.code.whatyear is called with an ‘id’ attribute on the parameters object. If the second matches, there will be a ‘name’ attribute passed to that same function.
Kevin imagines a future where this hack could go away:
JavaScript regular expressions do not support named groups as Python’s do. Adding named groups would likely be a fairly simple extension to the syntax, but is not something that I’ve done. At some point in the future, there may be the option to pass in a string that can include named groups rather than just a standard regex object. Similarly, since Reinhardt does not do any parsing of regular expressions, it has no way of putting values back into a URL pattern to generate a URL.
Not Quite a Project Yet
At this point, it simply offers URL dispatch. I can imagine a client-side framework offering tools to help you organize large Dojo-based applications in easy to understand, simple to grow manner. The built-in URL dispatch could also provide automatic history and back button support. For now, however, it is just a small bit of code to make client-side URL dispatch clean and simple.
I should note at this point that Reinhardt is more of a demo than a real open source project. However, it is a straightforward implementation and includes unit tests, so you can confidently use it for real URL dispatch work.
Thursday, October 16th, 2008
Category: Dojo
Bill Higgins of IBM Rational has written up some thoughts on componentization and packaging for Ajax applications based on work that his team did on the Rational Jazz platform.
Some of what he built was:
- A nice component model based on OSGi bundles and the Dojo module system
- Request-time “building” of many fine-grained JavaScript files into monolithic files for faster download based on the introspected relationships between the files - i.e. no developer effort required for fast code loading other than writing good code
- Making a subset of the Eclipse extension registry available in the web page and queryable via JavaScript APIs modeled off of the
org.eclipse.core.runtime extension registry Java APIs, allowing for open-ended extensibility using the Eclipse extensibility model
- A simple framework for demarcating UI states that made the back button, history, and page titles work seamlessly within the Ajax page, even when a user gesture resulted in crossing a component boundary (e.g. loading and displaying a new virtual “page” from a different component)
- Dynamic, transparent loading of missing code in response to a user gesture that required it
He then goes on to explain the architecture of reusable building blocks, and a realization:
My recent realization (which seems obvious in hindsight) is that the useful functionality provided by frameworks and libraries need not be mutually exclusive. For instance, in our Ajax framework’s dynamic build system, rather than requiring applications to run within our framework to enjoy this capability, we could have created a simple callable library to perform dynamic optimization on a set of files, and then created a framework that simply used this same library.
Over the past month or so we’ve been refactoring our Ajax framework to extract the useful building blocks into simple callable libraries and making the framework proper smaller by delegating to these libraries. We’ve done this in the hopes that our code will be useful to other IBM teams but as a result of the exercise, we’ve gained a deeper knowledge of our software and the software’s quality has improved as we’ve decoupled the framework aspects from the building blocks aspects.
Going forward, it’s my intention that our team will generally start with building blocks first and then consider if we should provide some higher-level framework that uses these building blocks. I only wish we had taken this approach from the beginning but you know, live and learn.
Any kind of heavy packaging systems haven't done hugely well in the Ajax community as a-whole, but there is a huge problem with components and being able to reuse them. The fact that someone builds a great jQuery plugin, that then gets ported to Prototype and Dojo and .... is frustrating (one example, it happens N times, with the original framework changing).
Tuesday, October 14th, 2008
Category: Dojo
James Burke gave a great presentation in Boston on the Dojo build system, and how he is able to get the core down to 5.5k.
With Dojo 1.2, the build system can generate a 5.5KB gzipped (13KB ungzipped) dojo.js file, via the customBase layer option. Useful for iPhone development if you want to get under the 25KB uncompressed size limits for the Mobile Safari cache. That small dojo.js is basically just the loader and some bootstrap functions, but it allows you then to tune your build layers to meet the 25KB and dynamically load what you need as you go.
Also, the djConfig options afterOnLoad/require/addOnLoad allows loading Dojo after the page is loaded. Great for making progressively enhanced pages render even faster.
Category: Dojo, Showcase
I have seen some of the great applications that SitePen produces, but unfortunately too many of them are for companies behind the firewalls.
It is great to see Sensei a really compelling Dojo application that SitePen wrote for their training class. This isn't one of those simple training examples that you normally get though. This says quality.
Revin Guillen explains:
When conducting Dojo training courses, we’ve found it to be very valuable to go beyond simple code snippets to demonstrate APIs, patterns, and other key concepts. Snippets and demos are useful, but they often lack a very important quality: context. Nothing beats having a full application in front of you—with code available to read and modify as you learn the ropes—so we built the Dojo Sensei Reader, a rich, powerful RSS reader realized as a single-page web application.
We designed Sensei specifically for training sessions. We wanted something that demonstrates the major areas of functionality Dojo offers, but as a single cohesive application rather than a collection of unrelated demos. We wanted something small enough that training groups could easily grasp the entire codebase, yet large enough to be worth using as a real-world application. We wanted something that shows the development process from start to finish, to demonstrate the level of polish you can achieve in a Dojo-based application. Beautiful as well as functional, it does all of this while providing a great, fast user experience.
One of the beautiful things about Sensei is that it proves that you don’t have to sacrifice maintainability to build a fast application. One key goal in our development process was to create an easy way for training groups to introspect the code, follow the app as it works, and even modify or augment its behavior at run-time by swapping code in and out. To deliver on this, we designed and integrated what we call Blox, a small JavaScript package with the power to make it all possible (it’s Sensei’s flux capacitor; we’ll cover it later). The result is a codebase that is very easy to work with but incurs negligible performance impact for its trouble.
Check out the screencast to see it in action
Friday, October 10th, 2008
Category: Dojo
Kevin Dangoor of SitePen has introduced Reinhardt a dispatch engine on the client side:
A typical server-side web framework today includes three main components: a URL dispatching to some controller object scheme, a template engine, and a data mapping facility. Currently in Dojo, you’ll find that the latter two items already exist. dojox.dtl provides the first one, and dojo.data provides the second.
Given that Dojo already offers an implementation of the Django template engine, and that regular expression-based URL dispatch was a good fit for our problem at hand, I decided to base our URL dispatch on the model provided by Django.
You can see an example using the framework which uses these patterns:
JAVASCRIPT:
-
-
var patterns = reinhardt.urldispatch.patterns("demo.code",
-
[/^list\/(\d*)$/, "showMovieList", ["year"]],
-
[/^search$/, "search"],
-
[/^movie\/(\d+)\/$/, "whatyear", ['id']],
-
[/^movie\/([\w ]+)\/$/, "whatyear", ["name"]],
-
[/^luke$/, "whatyear", [], {name: "Cool Hand Luke"}]
-
);
-
To get this all going you do something like this:
JAVASCRIPT:
-
-
dojo.addOnLoad(
-
function() {
-
if (!patterns.dispatch()) {
-
renderContent("../../default.dtl",
-
{movieCount: demo.database.movies.length});
-
}
-
}
-
);
-
-
function renderContent(templatename, variables) {
-
var template = new dojox.dtl.Template(new dojo.moduleUrl("demo",
-
templatename));
-
var context = new dojox.dtl.Context(variables);
-
dojo.byId("content").innerHTML = template.render(context);
-
pagecount++;
-
dojo.byId("pagecount").innerHTML = pagecount;
-
}
-
Read the full article for details, and download the entire sample, for perusal.
Thursday, October 9th, 2008
Category: Dojo, Showcase
Shane O'Sullivan has built a nice search mashup experience called Chofter. It uses all things Dojo, including:
- Layouts, Dialogs, Menus and ContentPanes for the user interface.
- dojo.data and dojo.rpc for data transfer.
- dojox.dtl (Django Templating Library) for transforming search data into visuals.
- dojo.fx and FisheyeLite for eye candy
Tuesday, October 7th, 2008
Category: Dojo
Pete Higgins released Dojo 1.2 the first version under his command. There are a ton of subtle improvements such as:
New Datastores
- dojox.data.JsonRestStore
- dojox.data.CouchDBRestStore
- dojox.data.GoogleFeedStore: A Google AJAX API powered data store for retrieving RSS and Atom feeds from Google.
- dojox.data.GoogleSearchStore: Data stores to interface Google's AJAX search services.
- dojox.data.PersevereStore: dojox.data.PersevereStore is an extension of JsonRestStore to Persevere's special features.
- dojox.data.S3Store: an extension of JsonRestStore to handle Amazon's S3 service using JSON data
New Projects in DojoX
dojox.analytics.Urchin
- A Google-analytics helper, which supports lazy-loading the Google Analytics API at any point during a page lifecycle.
- Allows you to post-onload include Google Analytics helper, and track Ajax-y pages via a simple API, with a very small overhead.
dojox.av
- New project for Audio/Video elements
- dojox.av.FLVideo: a player for Flash video files
- dojox.av.widget.Player: Dijit-based object for playing Flash media
dojox.embed
- A set of utilities that allow you to load/include Objects such as Flash and Quicktime.
- dojox.embed.Flash for Flash movies
- Create proxy information for Flash movies implementing ExternalInterface through dojox.embed.Flash.proxy
- dojox.embed.Quicktime for Quicktime movies
- dojox.embed.Object—a Dijit that can be used via markup for any dojox.embed objects available.
dojox.io.windowName
- Provides secure cross-domain request capability. Sends a re
