I got to meet Aaron Newton at The Ajax Experience, and he is a thinker. He was really taking in the various talks, and interactions, and you could tell that he was trying to work out various angles on the frameworks. What makes them different? What makes them popular? Where are they going?
He wrote a really nice post on some of these thoughts that goes into detail on different patterns for JavaScript programing. The meme at the show was definitely “the frameworks all do the same thing, just with a different looking API” which makes it even harder to put your finger on differences sometimes. Aaron does a good job.
John Resig himself gave a talk comparing the frameworks. Considering that he is Mr. jQuery, I thought he was very unbiased and had some good thoughts:
alert('The this keywords works (even in IE!): ' + this.id);
});
and he has some nice commentary:
So some of you may be wondering: "Why another addEvent function. Haven't we been through this?" We have, but I think you'll find that this version does more than any other addEvent function you've seen. For example:
Works in all browsers that matter
Ensures one event wire up for any given element/event/handler combination (this is mostly for IE)
Forces IE to honor the this keyword from within event handler functions
Normalizes the wire up mechanism in all browsers (no need to include the "on" prefix for IE)
Forces IE to recognize the following properties/methods on event objects: .stopPropagation(), .preventDefault(), .target, .relatedTarget
Enhances Non-IE browsers to support mouseenter and mouseleave events
Provides an extension mechanism so developers can write their own custom events that plug right in ('mousewheel' or 'DOMContentReady' for example)
Azer Koculu has released his Pi.js framework, which is a lightweight system that includes a minimal set of modules, and the ability to use and provide plugins.
By default you get:
pi.env: browser detection
pi.get: DOM access
pi.util: Extensions to JavaScript (e.g. support currying, includes, viewport config, and more)
pi.base: OO subsystem
pi.element: Create and modify the DOM
p.xhr: Remoting
Extensions to native objects such as Array, Function, Number, and String
Matthias Georgi has posted the release of Patroon, his new templating system that uses JavaScript. It joins other solutions such as using Django via JavaScript (e.g. Dojo let's you do that), TrimPath, and more.
The way it works is simple. You setup the data that you will be able to access in the template:
I have seen the GWT team working very hard indeed on GWT 1.5, and they must be very happy to see the final release shipped and complete:
GWT 1.5 delivers what we think are an impressive number of improvements, about four hundred issues if you're counting. We're also happy that one of those is issue 168, our most-requested feature, Support for Java 5.
The high level new feature sets are:
Java 5 language support and enhanced JRE emulation
Performance optimizations and easier JavaScript interop
Prettier widgets, better DOM, accessibility, and bi-di
While at first qooxdoo 0.8 looks like a minor jump in version number
over the previous 0.7.3, the actual changes are huge. In particular the
UI capabilities as well as the developer tool chain were improved
substantially.
qooxdoo 0.8 features a complete rewrite of the GUI toolkit. It is state-of-the-art and supports all major browsers (IE, Firefox, Safari, Opera). The GUI toolkit has a layered architecture: on-top of a low-level DOM-oriented layer (that might be used as a separate library), it includes a large set of widgets and layout managers (perfect for building RIAs). Online demos are available.
Users can very easily implement additional custom widgets or layouts to fit their individual needs. Theming of widgets continues to be independent from the widget code itself, and now allows for virtually
unlimited styling possibilities, e.g. rounded borders, gradients, shadows. While qooxdoo comes with two new attractive themes, it is also easy to create custom themes, without any CSS knowledge required.
Besides the exciting changes in the GUI toolkit, the developer tool chain has also been improved to a large extend. It frees the developer from such tedious and complex tasks as compressing and optimizing the JS code, resolving dependencies between classes, using a JS linker to produce a custom build of the app ready for deployment. Some further highlights of the comprehensive, built-in tooling include: searchable API reference, internationalization, source code validation, unit testing, combined images, and much more. The entire tool chain is platform-independent: all that is needed is a working Python installation, which is trivial to setup on any operating system, including MS Windows.
While API documentation is quite complete already, wiki documentation is still being updated to account for all the changes and improvements. Download the qooxdoo 0.8 package, and see the
included index.html to get started quickly.
Creating a lot of HTML using DOM methods can be a real pain. This is what students of the Juku training course that I held two weeks ago found out quite quickly and complained about the verbosity of it all. I listened to their concerns and came up with a framework for JavaScript applications called ViewsHandler.
One of the tasks I had given the class is to create a thumbnail show with image information from a link pointing to Flickr using the JSON API. The following is a solution using and showing the options of ViewsHandler:
A flickr show created with ViewsHandler
ViewsHandler is not another JavaScript templating solution but works on the assumption that in most cases you'll have to create a lot of HTML initially but you'll only have to change the content of some elements dynamically as new information gets loaded or users interact with the app. So instead of creating a lot of HTML over and over again all I wanted to provide is a way to create all the needed HTML upfront and then have easy access to the parts of the HTML that need updating.
The first thing you'll need to do to define your application is to create an object with the different views and pointers to the methods that populate the views:
ViewsHandler then creates DIV elements for each of these views and hides them for you. In your methods you create all the HTML the different views need to have and apply it with an add() method. You then define the parts of the HTML that should change later on as fields using the define() method and you can use the set() method to change the content of these fields and the view() method to change between views.
The benefit is that for setting the data you don't need to access the DOM any longer or use innerHTML or nodeValue. ViewsHandler created a pointer to the element all of this is cached. The set() method also allows you to either add a new node as the value or a string. In the latter case it'll create a text node for you.
One convenience method is linkto() which creates links pointing to the different views for you. None of this is rocket science, but it helped the class to create large applications with complex views without losing track of what they are doing. Maybe it can help you, too.
Jacob Seidelin is up to more tricks, this time playing with the binary side of life and writing a library that can reading ID3 tags from MP3 files and such.
Of course, Jacob realises that this doesn't make sense for many use cases:
Of course, one big disadvantage of doing this on the client in JavaScript is that the you need to download the entire MP3 file before the tags are available, so it might be better to stick to server-side solutions in many cases if all you need is the tag info.
Have you ever wanted to be able to easily grab a thumbnail image that represents a website?
Eric Ferraiuolo has created Ajax-Alexa-Thumbnails on Google Code, a library that builds on YUI to do just that.
The project consists of a server-side component written in PHP which makes the cross-domain request to Amazon's Alexa Site Thumbnail web service, and a JavaScript component which makes Ajax requests to configured server-side component and caches the results.
Kent Johnson has released YPulse a simple open source wrapper for the YUI Animation library that makes creating highlight fades and pulsing button glows a bit easier.