Recent Weblogs

Links I like

Search and Display

An example of Ext.js coupled with Google Ajax search services

I began on this example to learn more about the Ext framework. I've recently started a new job, the web firm that now employs me uses it Ext-tensively. Ext is done very well, it provides remote request and UI functionality in a very flexible code base. Google Ajax Search provides a great library of classes to retrieve Google search results for any medium, image, news etc. Coupling these two together made for a great example on how we can mash code together to come up with truly rich and responsive user interfaces provided right across the wire.

Ext-ellent or Ext-essive?

Ext is a very comprehensive library, and its abstract patterns make for fantastic flexibility. The UI library makes quick work out of common place components, such as a window, or an accordion menu, tab menu. These components are all canned functionality that are trivial to implement. They've approached the observer pattern with phenomenal attention to detail, written in a very similar sense as my EventDispatcher class but I admit, with even more functionality and focus on abstraction. With this class in their tool belt, they've also set up a great package to make short work out of the complicated cross-browser XHR. All too often I see the common prototype approach of sending an XHR a single call back, when in reality it is rare the component that requested the data also needs to receive the response. With a pattern more oriented on the "Hollywood Pattern" you can strive for truly decoupled objects and maximize your reusability. Now that I've praised their accomplishments I must also lament over their shortcomings or at least the hurdles that I had to jump during the learning process. Ext's abstraction is a good thing I do admit but does make things more complicated for a new developer, their data store and readers are hard to grasp. The level of their abstraction is intense and takes a bit of time to load into the mind. I also had a bit of trouble with adding components and accessing DOM elements. I understand this may seem hypocritical after I've lavished the idea of proper namespacing but the Ext.Element seems to me more of a headache than a helping hand, I suppose that goes with coming from prototype where the Element is extended with so many friendly functions.

Google Ajax Search

Google's javascript library for handling XHR requests to their servers is a true gift. These classes are easy, well documented and overall intuitive. They're truly setting the standard for client based data services. My only gripe is their lack of concrete classes. They set things up in a very defined way with the Control packages. This is a nice canned implementation but I feel as if its too much in one direction. I was just really hoping for something like an Ajax Service that one can execute any method to search for video or images and it retrieve that information and fire event when the response is ready. In their defense, setting something like this up wasn't very difficult and you can take a look at the javascript I used to do exactly this.

Bringing it All Together

With the observer pattern running at full speed in my implementation it wasn't hard to mash this all together. The GoogleDataService object handled all of my data requests and my Ext components handled requesting and handling the response. The example that I built is an excellent example of two components working together but independently. The Accordion Menu on the left handles executing the requests while the Tab Menu receives the response and works to display that information inside the appropriate tab.

Resources

  • View the Demo in action Take a gander at the example right now, no need to load a new page
  • A Pure demo this will send you to my project page where I developed the example, cut out the fat of the rest of this page to view just the bare necessities of what is needed to get it running
  • Learn More about Ext.js The fantastic library that handles all the UI fun of the demo
  • Research Google Ajax Search Services Google provides an API to allow Javascript developers to harness their search results, from anything from groups to the globe

Comments are Disabled.