IBM has embraced the Dojo Ajax toolkit for the development of web-based user interfaces (UIs). In this presentation towards the end of IBM Impact, Chris Mtichell from IBM’s Websphere group explains what the Dojo toolkit is and how it can be used by developers.

Chris points out that more and more of us are using browsers to interact with more and more complex applications. This calls for more advanced UIs, and here is where Ajax can play a big part. Rather than having to refresh the whole page when some new information is required from the server, Ajax allows for the update of a single element (whether it be a number, an image, a piece of html etc.). Add DHTML to the equation and you can build rich interfaces approximating those found in software applications.

Toolkits such as Dojo have emerged to simplify code for common functions and to deal with issues such as cross-browser compatibility. The service-based nature of Ajax and these toolkits provides a great fit for SOA. The Dojo Toolkit itself is a set of common Javascript libraries used for creating Ajax and DHTML web applications. It has been around for almost 5 years.

Key features of this open source toolkit include a large collection of widgets (called ‘Dijit’), a data abstraction layer (useful for dealing with data coming from different sources, eg. Amazon, Yahoo or other APIs), event management handling and a debugging interface all in an extensible modular architecture. This means it only pulls in what it needs when it needs it, making it smaller and faster than just about any other toolkit out there.

The toolkit is divided up into base and core components:

Beyond that there is a widget/plugin approach for additional functionality:

Dojo ‘base’ features

It is worth looking at the rich feature-set provided as the base functions that are always available to developers (the lightweight dojo.js which weighs in at under 60kb):

• Cookie functions
• Lang utils and array extras (compatibility between IE6 and Firefox)
• JSON serialization
• Fast CSS manipulation
• Events (simple connect)
• Fast CSS style manipulation (for positioning elements)
• Browser detection
• URL functions
• Doc load, unload hooks
• Animation and effects (fade, slide, css colors)

Loading the Dojo Toolkit is as simple as referencing the Javascript in your HTML page and setting a few configuration options:

Most Dojo functions are tied to the dojo.addOnLoad event. Furthermore, a set of actions can be chained together. A key use of the Dojo Toolkit is to add styling to data pulled from an Ajax call. For instance, if a figure in a table has been updated, you might want to highlight this via CSS and then fade back to the normal state. You also have direct access to the DOM, with the potential to remove or add nodes (or HTML fragments).

When it comes to making an Ajax call, the dojo.xhr mechanism is simple and easy to use. It is based on XMLHTTPRequest and follows the standard REST conventions (get, put, post delete). Here’s an example of grabbing a subscription using JSON, and displaying the output:

Dojo ‘core’ libraries

The libraries contain modules that are extremely useful, but not always needed. They are not loaded by default (for performance reasons) but can be accessed using dojo.require().

Some examples:

• Extended animation
• Date parsers
• Drag ‘N Drop
• Regular expressions
• Extended I/O

Widgets and plugins

In the Dojo world, core widgets are handled by a system called Dijit. As well as being a set of pre-packaged skinnable, template-driven widgets, Dijit also contains a powerful, flexible architecture for building your own widgets.

Dijit in action:

DojoX, another set of widgets could be termed the ‘Las Vegas of widgets’: it contains everything under the sun. Extended animation effects, date parsers, presentation tools including graphs and charts, 3d vector graphics and even an offline mode incorporating Google Gears.

DojoX also handles all cross-browser compatibility issues around displaying images:

Best practice for Dojo development

When it comes to actual development, Chris had a few pointers:

• Firebug, the Firefox plugin is great for debugging Dojo
• Make sure you test in Internet Explorer upfront: don’t wait until the last moment
• Initialize Javascript code only once
• Understand the DOM methods
• Learn RegExp and CSS Selectors

Helpful resources

Dojo community: http://dojotoolkit.org/community/, http://dojotoolkit.org/forum
Blogs, tutorials and more: http://dojotoolkit.org/key-links
Documentation: http://dojocampus.org, http://docs.dojocampus.org

More from IBM on Dojo

In this session from IBM Impact 2009 I’m hoping to get some insights from Sandy Carter (Vice President, SOA & WebSphere Marketing, Strategy, and Channels), social media advocate and author of The New Language of Marketing 2.0. Thankfully, she doesn’t disappoint and she even sets us ‘homework’ to improve our social media standing.

Sandy is introduced by Carolyn Leighton (Founder of Women in Technology International, or WITI) and to put this in context Sandy says there are more women on social networking sites (Facebook, Myspace, LinkedIn) than men… generally in the region of 61-68%. This breaks down the popular notion that these sites are frequented by young mail teens. Indeed, most of the crowd at this well-attended session are women.

Much of this lively presentation concentrates on discussions around personal branding – a vital ingredient to achieving success in the world of social networking.

How exactly do you define and manage your brand?

The whole thorny subject of branding is one that is analyzed in detail in the corporate world and so Sandy uses her own experience as brand owner for Websphere, one of the top-rated brands in existence. As for definition, you need to consider the following:

• The image of a brand and the perception of it
• Experience of the brand: end to end, including everything from the sales person who sold the product to your ongoing experience with the product (which touches on many areas of the organization, including customer service)
• Trust: is the brand delivering on its promise? This is of key importance because if trust falters, rebuilding it is a considerable effort
• Relationship: the emotional connection your constituency has towards you (Sandy uses the example of her love of Diet Coke even though she’s failed taste tests with Pepsi in the past!)

So, what does that mean for us as individuals? All these principles can be applied on a personal basis and come into play the minute we interact with others, either on- or offline. In person you can ask people what they think of you. Online this can mean looking at your appearance: whether it be on Google, Technorati or your profile picture on Twitter. Do you offer total continuity across your brand? For everything you do, think whether this is consistent with the brand image you want to project.

On the subject of image, remember that this is about perception, not about reality. Therefore you really need to make the effort to find out how you are viewed by others. Sandy gives the example of how she used to curl her hair, but on questioning her peers she found that they considered it disrespectful when they were speaking to her. She didn’t mean it that way: that’s just how it was often interpreted. So, beware and look for traits that could be perceived in a negative light.

One area that is particularly relevant in the current climate is job-hunting and what Sandy calls the Resume 2.0. You need to remember that prospective employers could well Google you and see a part of your life you’d rather they didn’t. To get round this, make sure you professional-ize your image. For instance, use your own domain on which to host your online portfolio and offer a blended resume: a paper version with links to your online appearance.

Building trust

How do you maintain your personal trust? Make sure you follow through on commitments, make sure you walk the walk and act with integrity and honesty. Don’t over-promise. When it comes to mistakes, make sure you are honest and transparent. Fake profiles can be detected and you’ll attract negative press if these are discovered.

Sandy talks of the Streisand effect: where Barbara Streisand took the heavy-handed approach of issuing a legal letter to a fan who photographed her house. This incensed the online community and within days 100s of pictures of her house appeared online. The crucial point here is the way you handle a mistake is very important. If you handle a mistake in a good way, this can actually improve your brand image (although she doesn’t recommend running out and making mistakes just to improve your image!). Whatever you do, make some effort to recover from a mistake. Don’t bury your head in the sand.

Building relationships

In terms of building relationships: Sandy talks of the wheel of influence. The wheel reflects all the groups with which you interact and who you need to take into account. At a corporate level, IBM does this for each product, with the groups including employees, sales, customers, other marketers, partners, suppliers, business leaders.

You should think of your own personal wheel of influence. Sandy offers this example:

As you build up relationships Sandy makes the point that there is no such thing as a neutral interaction with another individual. This will always be either positive or negative. Bear this in mind particularly when you interact with others on the web. Also remember that relationship is not just one way: you need to build a dialogue and you need to listen. In the online context, here are some example tools you can use for listening:

• Tweetscan
• Google Alerts
• Backtype

Which social networks are right for you?

There are so many networks out there, make sure you don’t fall victim to social media fatigue! Only use the networks you find value with – if you start seeing this interaction as a chore you will lose interest over time. Once you pick a network, spend some time seeking out your existing contacts on these properties. Some more in-depth tips:

Facebook/Myspace:

• Actively manage what is posted on your wall
• Share through groups
• Be prepared to make mistakes

LinkedIn:

• Leverage groups
• Stay in touch regularly: link back to your blogs
• Discover the connections
• Contrast the business setting with friendliness

It’s important to interact on social networks as often the last place someone goes to look for you now is on your site.

Steps to improve your personal brand

Now we get to the homework Sandy is setting us. These are intended to look at how we are perceived and learn how we can build our own personal skills and networks.

Emphasis:
I am currently known for these: (list 2 to 4 things)
But by next year, I want to be known for these things: (2 to 4 things)

Excitement:
My public visibility program includes: (list 3 sites/areas you can concentrate on)

Extensions:
My current project is leveraging my skills, but is challenging me in the following ways: (list 4 things)

More on Sandy Carter

I’ve tried to capture some of the excellent points Sandy touched on in this presentation. You can access the full presentation on the IBM website and searching for presentations from Sandy Carter.

You can follow Sandy on Twitter, where she is highly active.

This presentation only touches the surface of many subjects that Sandy covers in more detail in The New Language of Marketing 2.0.

(In the interest of disclosure, I should point out that I am an IBM employee)

IBM is currently hosting its annual SOA event at the Venetian in Las Vegas. In order to promote the event and to encourage collaboration between attendees and those who couldn’t make it this year, IBM have launched a number of social media iniatives.

One promotion that particularly caught my eye is the social media game, whereby anyone who actively shares content around the event is entered in a competition to win free entrance to next year’s conference. So whether you blog, post videos on Youtube, pictures on Flickr or engage in any one of the following social media tools, you have the chance to win.

A leaderboard around the event lets participants know where they stand and the winners will be announced on the last day of the conference.

This looks like a great idea to encourage participation in social networks and I look forward to following up with the team after the event to gauge the success of this initiative. For more on this and to see how else IBM is using social media the Impact event, check out the Impact Communities page.

(In the interests of disclosure, I should point out that I am an IBM employee)