Use of DHTML to provide a better user experience
Please read these articles on
javascript performance and
javascript memory leaks. Also
take care of
Graceful Degradation,
The A of Ajax means asynchronous. These
best practices help avoid deadly bugs.
Drag and drop ordering and assignment
We are looking at several features that need a rich interact to be very usable:
- Plan: order story tasks
- Plan: order iteration stories (note order is different than priority)
- Plan: move/continue story to iteration
- Plan assign story to iteration
- Project setup: assign people to project
- Project setup: assign role to people for a project
Candidates
- openrico
- http://dhtmlkitchen.com has a nice DragLib that provides out of the box an example of reordering of a list
- DragDrop library provides a very robust set of features
- Laszlo
- http://tool-man.org/examples/: Great reordering list and in-place editing
- http://script.aculo.us/: Sortable list, D&D
- Confluence dynamictasklist macro:
| Tasks: |
|
||
|---|---|---|---|
- http://uitags.sourceforge.net/: transfer tag allows a dual list with transfer button and reordering of list
Tables
- ActiveWidget Great table
Multiple view/tabs per entities
Some entities like iteration and story provide an increasing number of views. We need to separate actions and views. A simple mechanism to do that is to provide a tab display with a tab per view.
- DHTMLKitchen provides a nice DHTML Tabs library
- Ditchnet JSP Tabs Taglib
- Yahoo group has a nice tab behavior
- ActiveWidget (commercial product. Don't know if they have a OS license. Look native)
- DynArch (another commercial product. Looking good though!)
Easier navigation
Recent links, Iteration list for a project... are example of information that could be displayed on a left/right nav in a collapsible tree.
- DHTMLKitchen provides AnimTree library
- X library provides a floater box
- X library has also a nicer menu than the currently used and a floating menu bar here and here that can always be in view removing the need to scroll down to read actions
Show element details/children
We can use accordion to show the content of an iteration in a list for release planning.
- openrico has a nice accordion
We can also use a tree view to open the content. This could be a total project view
- Subversion Insurrection has a nice AJAX based tree and a nice changeset log that could be the base of our release planning view (can d&d stories across iterations, can expend/collapse iteration to only show the summary and their stats (total budget, budget left...)
Scalable/Resizable progress bar
Using the jsgraphic library, the progress bar could be drawn client side with better support for resizing and font drawing.
Using rich tool tip to show element details
Using Walter Zorn's Javascript Tooltip, details of a story or the list of its tasks could be just a mouse hovering away...
In-place editing
Directly been able to change the value of field is invaluable to reduce the click count.
- http://tool-man.org/examples/: Great reordering list and in-place editing
Others
- Nice menus
- http://www.dynarch.com/products/dhtml-menu: best looking menus free for OS projects
- http://www.youngpup.net/2004/transmenus
- http://ypslideoutmenus.sourceforge.net
- http://dhtmlkitchen.com/scripts/glidemenus/index.jsp
- X library
- http://webfx.eae.net/dhtml/dhtmlmenu4/menu4.html
- http://www.scbr.com/docs/products/dhtmlxMenu/index.shtml
- http://webfx.eae.net/dhtml/dhtmlmenu4/menu4.html
- Tree
- http://www.scbr.com/docs/products/dhtmlxTree/index.shtml: Nice reordering parent/sibling, drag between frame...
- http://webfx.eae.net/dhtml/xtree
- Misc
- http://www.dyn-web.com : custom scrollbar, tooltip...
- http://sarat.xcelens.co.uk/jaxWidgets: graphic validators, misc
- WebFX: plenty of good js widgets ( table, tree, menu and grid) and a bunch of links to js/dhtml references
- http://dynamicdrive.com/ : A nice repository of javascript scripts
- [www.dynarch.com/products] : nice collections of js controls (not all free for os though)
Javascript frameworks
- Prototype provides effects, ajax wrapper, nice extension a la "extend"
- Dojo toolkit provides widgets (combox...) and ajax wrapper
- openrico built on top of prototype supports D&D, accordian, nice effects...
- X library great effects
XMLHTTPRequest javascript object to update page w/o reloading
- http://jibbering.com/2002/4/httprequest.html
- http://developer.apple.com/internet/webcontent/xmlhttpreq.html
- http://jpspan.sourceforge.net/wiki/doku.php?id=javascript:xmlhttprequest:behaviour#http_caching
- http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html: A good treatment of how to use it with POST instead of GET, how to handle errors
- http://dojotoolkit.org: cross browser toolkit
- http://www.ajaxian.com: ajax blog
- http://www.theserverside.com/news/thread.tss?thread_id=33319
Server side validation
This remove the duplication of validation logic between the server and the client. A simple javascript calls the server side validation on onBlur event
Server side creation of DOM
[ excerpt from Ruby on Rails 0.11]
This is done by off-loading the creation of DOM elements to the server side, which returns complete constructs that are then injected live through innerHTML. While this method is slightly more verbose than just peddling data across the wire, it's immensely easier to develop.
And especially the ease of development is critical to the success of Ajax. I used the old style of hand-crafting the DOM on the client-side with Ta-da List and was quite disillusioned at the mess of browser differences and the sheer effort it took. Basically, each sliver of Ajax was a project in itself.
With Honey, though, I've been all over the new Ajax style that Rails affords. And what a difference it makes! It's basically no harder to make something Ajaxed than it is not to, which means that the decision is based on whether its a good fit for the user interface ??" not on whether we have time to another Ajax project.
