June 28 th – July 1 st 2006 Implementing Usability: Insights to improve your chances  CFUnited 2007

June 28 th – July 1 st 2006 Agenda  Why we are here  What we did  What we learned  What we wished we had done differently  Where we are going from here

June 28 th – July 1 st 2006 Why we are here  We CF!  Our developers are having fun doing cool things!

June 28 th – July 1 st 2006 CMS gets with the times  We are a web application  We have been around for a long time (CF v. 1.5!)  A LOT has changed since we started  We wanted to build something to last  Didn’t want to reinvent the wheel  Needed to solve real world problems

June 28 th – July 1 st 2006 What was wrong  Interface icons/menus were outdated  Interacting with dialogs was difficult  Buttons were not consistent  Administration and Content were too separated  Using “window.open()” was slower  It wasn’t fun to play with

June 28 th – July 1 st 2006 What we needed  Faster access to tools Logically organized Common toolbars  Better dialogs Common interface  Extensibility More customization  Maximize available space without “clutter”  Scalable solution

June 28 th – July 1 st 2006 What we did  Focus on the backend first  XML Transport for Client/Server ColdFusion Custom Factory Extensible and exposed  JS frameworks on the front end Extended easily to suit our needs Open our UI code base  Took advantage of existing code base – when it made sense  Listened to our customers

June 28 th – July 1 st 2006 How we did this  We planned! What was the goal of the UI? What was the XML Format What were the commands How were they constructed How will we handle errors

June 28 th – July 1 st 2006 How we did this  We gathered information (tons of information)  Hired someone with usability experience  Built a STRONG back end model  Built a prototype  Integrated some frameworks  Had some fun

June 28 th – July 1 st 2006 Why Frameworks?  Development frameworks help you build cool stuff - faster  Reinvent the wheel?  Documentation  Learn from other’s experiences  Most have an open code base  Easy separation of successes and failures  Easier to test/debug

June 28 th – July 1 st 2006 Frameworks Will…  Help you build better things … faster  Sometimes hide complex coding  Help you do COOL things!

June 28 th – July 1 st 2006 Frameworks Will NOT…  Make you a better coder  Solve all of your problems

June 28 th – July 1 st 2006 From Back to Front  The “Woodward” Presentation Model

June 28 th – July 1 st 2006 Why is the back end SO important?  The data is your lifeline  Interface design is volatile Browser incompatibilities UI designers are constantly changing their mind The browsers were not designed for asynchronous applications  Building architectures/frameworks is what we do best  Scalability starts from the back end not the front end  Utilize resources: CF/Java skill set on back end | JS/Flash skill set on the front end

June 28 th – July 1 st 2006 Problems…  Not a lot of documentation on how to build a robust engine for Ajax in CF  Interacting with CFC’s through forms – not so fun CF 8 – “Thank you Adobe”  Constant “chatter” was a concern  Debugging

June 28 th – July 1 st 2006 Solutions  Built framework without concern for front end  Built test harness to guarantee results

June 28 th – July 1 st 2006 Popular Ajax Frameworks  jQuery (2006) Strong community backing Good Documentation Plugins  Yahoo UI Library (2006) Maintained by large organization Many implementations Soup to Nuts  Prototype Large Ruby on Rails community support Shorthand access to many common routines Supports OO programming styles

June 28 th – July 1 st 2006 Popular Ajax Frameworks (Cont.)  Mootools (2006) Object Oriented Good examples  DoJo Toolkit (2004) Open source Supported by IBM and Sun Large code base  AjaxCFC (2005) Built by Rob Gonda Delivers serialized data (not JSON/XML) to JS Easy  Spry (2006) Maintained by Adobe Different approach then other framework Doesn’t pollute global space

June 28 th – July 1 st 2006 How to choose  Are you good with JS?  Are you good with XML/XSLT?  What about the other developers/resources

June 28 th – July 1 st 2006 The front end  Started out as a prototype using Prototype XSLT on the client side (heavy browser caching) Constructed DOM objects manually  Implemented several Frameworks Spry Script.aculo.us Prototype  Overwrote/extend several standard properties/functions commonspot.spry.Dataset commonspot.spry.getRecordSetFromXMLDoc

June 28 th – July 1 st 2006 Problems…  Namespaces  HTTP Timeout  Spry Transport Layer  JSON and eval()

June 28 th – July 1 st 2006 What makes Spry so different?  Dynamic HTML/Templates (i.e. very similar to CF development) Dynamic HTML building vs. Native HTML  Focused heavily on the data (richer user experience)  Hooks well into “presentation” frameworks Script.aculo.us Yahoo UI Library  Open code base  Integrates nicely into ColdFusion Even nicer in 8!  Supports XML, HTML or JSON Data Objects

June 28 th – July 1 st 2006 Testing  Back end Automated testing (multi platforms, databases, CF versions etc…) Refactoring becomes easier  Front end Set up XML files to handle the “Post/Get” results instead of getting at the data directly

June 28 th – July 1 st 2006 Conclusion  Plan 2 Freight trains need to meet in the middle  Separate content from presentation Easy development/debugging  “A” framework will not solve your problems