dddIt’s been awhile since I last Blogged on rockstarapps.com.  In between my last Blog on May 26th and Today, I have been spending much of my time working on building the dojo.E library and traveling around the world (Koren, San Fransisco).  This week is the Ajax Experience Conference, which is one of my favorite conferences and one I have attended three times and talked at twice.  In coordination with the conference were two dojo developer day meetings.

Each day was filled with great information and a lot of cool demos. I was extremely impressed with what I saw. The things people are doing are way more advanced then simple Ajax enhancements. The are truly pushing the Browser, DOM, JavaScript to the edge. I saw fully native and cross browser charting and graphics; get these features right will mean Ajax over the next several years will be able to compete with the plugins (once IE6 is put to pasture).

Below are my take-a-ways from the two days listening to Dojo talks.

Why would an Enterprise or Individual Developer choose Dojo:

  1. Covers the complete spectrum of Ajax applications.
  2. Provides a well thought out foundation to build on
    1. Packaging
    2. Extensibility
    3. Unit testing framework
  3. Has enterprise backing (IBM…) Check out projectzero.org
    1. Large companies provide developers to the dojo foundation?
  4. Lots of widgets, not just quantity but quality
  5. Internationalization and accessibility are core to the dijit library not an after thought.
  6. Support options through Sitepen.
  7. Strong core team – I met a bunch of them previously but everyone else was just as strong and passionate about dojo.
  8. It’s really the only open “foundation” in the Ajax market.
  9. Now back the development of DWR.
  10. Commercial Friendly License.
  11. Commercial products like Nexaweb are built on top of dojo.

Even though I have been using dojo for two years, over the last two days I learned quite a bit. Any developers out there that may not have gotten into Dojo yet, may find it quite a large and unwieldy project. To make it simpler to get your arms think of Dojo along its four major pieces of functionality.

dojo:

If you are looking for that little Ajax library to add to your web page, which can do all the “Ajax” things easily, the dojo package contains all the stuff you need.

  • CSS Selector functionality – dojo.query(”#myDiv”); //returns you an array of nodes that match your css selector.
  • Animations - dojo.fadeIn | fadeOut | aminateProperty- Plus more effects in the dojox.fx package.
  • DOM Manipulation – dojo.style | place | attr | addClass | removeClass | toggleClass.  This is the one area that is under valued in the Dojo library. Most Ajax application need a complete set of DOM manipulation functions and dojo has the basics as well as the more complex functionality that you will need once you get your hello world application finished.
  • Browser functions – dojo.isFF | isIE | isSafari – Once you step out on your own, you may ;) need to know if you are in IE. These properties make it easy figure that out.
  • Eventing - dojo.connect | disconnect | stopEvent – Need to capture events on DOM nodes or want to supply events on your own object, these functions will make it easy to do just that.
  • Object Oriented Programming – dojo.declare | mixin | extend – This is where I think that Dojo adds huge benefits and why I use dojo for my applications. Using these functions along with the dojo.require and dojo.provides means that your application and knowledge will scale easily to more complex functionality.
  • Packaging - dojo.require | provides – Provides functionality “similar” to the Java package and import functionality.  These functions make it possible to partition large applications into separate JavaScript files. If you are dealing with a large codebase this is the only functionality I have seen that will reduce packaging time and increase maintainability.
  • Language Enhancements  – dojo.isString | isArray | isFunction | isObject| trim – You may need these when building your application or handling data in a generic way.
  • Array Operations – dojo.forEach | lastIndexOf | indexOf | map | filter -Extra Array functions are always nice to make code simpler.
  • XHR - dojo.xhrGet | xhrPost | rawXhrPost |formToObject | objectToQuery | formToQuery | formToJson – I almost forgot about these until I went to the dojocampus.org website.
  • Console and logging features – console.info | debug | error | warn … – You can use these functions to debug your application. The messages will go either to firebug’s console or if you are using a browser other than Firefox add “debug:true” to djConfig and you will get a console window in your application.
  • Drag and Drop – dojo.dnd.* – Built in support for dragging and dropping just about anything.
  • Data - dojo.data.* – has a fully extensible framework creating data driven applications.  Developers can extend the dojo.data functionality to add there own custom data types. Widgets can use the dojo.data functionality to make applications more MVC like.  Pull data from the server and let the widget and dojo.data take care of the rest.

dijit:

Have the need for Widgets?  The dijit package is you.  Not only does Dojo come with a large set of widgets that will meet most of your application needs.  The architecture behind the widgets is well-thought out and easy for developers to leverage in their own widgets.

  • The widgets – I will try to list them all, but a simple list won’t do them justice.
    • Widgets - Dialog, Menu, ProgressBar, ColorPalette, Tree, TitlePane, Toolbar
    • Layouts - Accordian, Content, Link, SplitPane, TabControl, Stack, Border
    • Forms - Button, CheckBox, ComboBox, CurrencyTextBox, DateTextBox, FilteringSelect, Form, NumberSpinner, Slider, TextBox, TimeTextBox…
  • Theming - Dojo includes three themes for the building applications: Tundra, Soria, Nihilo and they can be applied to all widgets in the dijit package by including the css file and setting the class name on the body tag: <body class=”tundra”>  This needs to be set somewhere, I usually do the body tag. Not doing this will mean no styling.
  • Build your own – If there isn’t a widget that you need, creating your own can be done in just a few lines of code.


dojo.declare("rockstarapps.Concert", [dijit._Widget, dijit._Templated], {

myDiv: null,
bandName: “”,
//You will want to use a templatePath and externalize the template in
//separate file and make it more maintainable.

templateString:  ‘<div dojoAttachPoint=”myDiv”    dojoAttachEvent=”onclick:_onClick”>${bandName}</div>’,

_onClick: function(e){
this.onTicketPurchased();
dojo.style(this.myDiv, “fontSize”, 24);
} ,

onTicketPurchased: function(){}

});

  • Using the Widgets – Widgets are easy to embed directly into your HTML. Do the following three steps:
    • Add parseOnLoad: true to your djConfig.  <script src=”dojo.js” djConfig=”parseOnLoad:true”></script>
    • Require the dojo.parser functionality – dojo.require(”dojo.parser”);
    • Add a dojoType attribute to a div with the “rockstarapps.Concert” as the value.

<div dojoType=”rockstarapps.Concert” bandName=”RollingStones” onTicketPurchased=”alert(’You are going!!!!’)”></div>

Developers can also add widgets programmatically

new rockstarapps.Concert({bandName:”RollingStones”, hostDiv);

  • Internationalization and Accessibility -  Some people won’t get a big benefit from this, but for those of us that need to build “Enterprise” applications, this is a must.  All widgets in the dijit package are fully internationalized and accessible.

For a complete writeup the dojo widgets go to dojocampus.org/explorer/, it has a full set of documentation and a widget explorer that makes finding the widgets easy.

dojox: 

The dojox package is where you can find a little of everything.  I watched Tom Trenka go through dojox and was trying to write down all the things in their – but could only get some of them.

  • dfx - Cross browser graphics package.
  • charting - Building on the dfx package, dojox has is a set of charts that can all be run natively in the browser.
  • off - Actually what is says, provides offline capability to applications.
  • ddt - Dojo django Templates, Alex Russell got on stage and showed off the power of the django templates in creating a widget.  It was extremely cool. That is where I got an idea to add the ddt package to the dojoe.Macro capability.  In three lines of code I was able to make dojoe.Macros ddt compatabile.


<dojoe.Macro id="sweet" format="dojox.dtl._Templated">
<dojoe.Place query="#host" blendMode="append">
<div><ul>
{% for item in items %}
<li class="{{ item|length }}">{{ item }}</li>
{% endfor %}
</ul></div>
</dojoe.Place>
</dojoe.Macro>

Now developers can execute macros and format the content with django templates and place it into the DOM anywhere anytime.  dojoe.marcos.sweet.execute({items:["Applet", "Pear", "Carrot"]});

  • widgets -My favorite thing in all of dojox may be the dojox.widget.SortList. It is super simple but an extremely cool. What is it? A Single Column Table that is sortable.
  • grid - More more complex than the SortList is dojox.grid. Looking to build that enterprise application with tables,tables,tables dojox.grid might be a good choice. The grid component will be moving into the dijit library soon.
  • wires - I haven’t got into dojo.wires yet, but my Co-worker (Angel) is big on this. Its a complete MVC framework building ajax applications.
  • cometd - “Cometd is a scalable HTTP-based event routing bus that uses a Ajax Push technology pattern known as Comet.” leveraged from the cometd.com
  • dojox.data – Lots and Lots of dojo.data implementation for different types of data: Flickr, Picasa, Opml, CSV, Atom, ….

I am sure there are things I missed, but as it was stated during the talk “if you can think it… it may already be in there, if not create it and submit a patch to the dojo trac system.”

utils:

All web applications need to be optimized no matter which library you are using. Dojo has created a not-so-easy but robust way to build highly optimized web applications.  Using the Dojo build system developers can segment their application into multiple JavaScript files that can be lazily loaded through out the lifecycle of thier application.   This will decrease latency of the initial loading, reduce bandwidth requirements and make your end users happy.

A little self promotion – Need to optimize a web application check out jsLex’s Plugins for Eclipse.

I wrote down the build system isn’t easy because it will take a bit of time to get it up and running.  Not sure if the following rules are absolute but they have helped my reduce time getting up and running.

  • Use the raw source and not the already packaged distribution. I have run into issues with the packaged files not building cleanly.
  • Place the build system in the utils directory at the same level as dijit, dojo, dojox.  This was the one that I ran into over and over.  I kept trying to run the build from an external directory and had a problem every time. Put the utils directory in the right place and Bam! it worked.
  • Use the layers capability in the profile files, it will create a much more optimized application.

Community:

One of the things that impressed my at the Dojo Developers Day were all the community members demo.

  • ESRI a did a demo of their use of the dojox.gfx package to build some really cool mapping applications.
  • A demo of nxExplore a search engine application that uses dojo (I think).
  • IBM’s projectzero.org web-based application builder. This was extremely slick. Want to take the power of dojo to the masses this application may be the way.
  • dojo.E – I will include the stuff we have been working on – it may not be sexy but it does make things easier for those who like XML and markup. Getting together with other smart people and just listening is always a great idea.  I was able to pick up a lot of useful information and got a couple of cool ideas to boot.
  • A cool password Strength widget was demoed
  • Mathew Russell author of “Dojo: The Definitive Guide” did several cool demos. The one that caught me eye the most was the “Graph” that used dojox.gfx to create a network topology.
  • Angel (Co-worker) – Wasn’t demoed publicly but got lots of “ohs” and “ahs” – his tab control that has the tab buttons sliding left and right instead of wrapping.  It is really sweet.

Things to improve apon:

None of these things are new, just need to balance the good with the bad; the ying with the yang.

  • Documentation – It is an issue with all things dojo is working hard in this area and the dojocampus.org.
  • Single file package of dojo – This would make is drop dead simple to include dojo into any application.
  • Simplification of the build system.  Demos that I saw of a new build system will help greatly in creating custom builds.
  • Wordpress like plugin explorer – I have created a couple wordpress plugins and like the way they manage the extensions.  They are easy to find and are consistently packaged.  I think dojo could use something like this to make finding functionality easier.  I know I find my self look for things and not finding them with out a bunch of effort.

I need to get home so I can get up tomorrow and get back to the conference. Thankfully I didn’t have to travel to get to the conference other than the 15mile 1:30 commute.  I would have thought $10 billion for the new road would have cut down on the time.

dojo.bob(Buffone)