Upload
marlene-lee
View
215
Download
1
Tags:
Embed Size (px)
Citation preview
June 28th – July 1st 2006
Implementing Usability: Insights Implementing Usability: Insights to improve your chancesto improve your chances CFUnited 2007
June 28th – July 1st 2006
AgendaAgenda
Why we are here What we did What we learned What we wished we had done
differently Where we are going from here
June 28th – July 1st 2006
Why we are hereWhy we are here
We CF! Our developers are having fun
doing cool things!
June 28th – July 1st 2006
CMS gets with the timesCMS 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 28th – July 1st 2006
What was wrongWhat 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 28th – July 1st 2006
What we neededWhat we needed
Faster access to toolsLogically organizedCommon toolbars
Better dialogsCommon interface
ExtensibilityMore customization
Maximize available space without “clutter” Scalable solution
June 28th – July 1st 2006
What we didWhat we did
Focus on the backend first XML Transport for Client/Server
ColdFusion Custom FactoryExtensible and exposed
JS frameworks on the front endExtended easily to suit our needsOpen our UI code base
Took advantage of existing code base – when it made sense
Listened to our customers
June 28th – July 1st 2006
How we did thisHow we did this
We planned!What was the goal of the UI?What was the XML FormatWhat were the commandsHow were they constructedHow will we handle errors
June 28th – July 1st 2006
How we did thisHow 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 28th – July 1st 2006
Why Frameworks?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 28th – July 1st 2006
Frameworks Will…Frameworks Will…
Help you build better things … faster Sometimes hide complex coding Help you do COOL things!
June 28th – July 1st 2006
Frameworks Will NOT…Frameworks Will NOT…
Make you a better coder Solve all of your problems
June 28th – July 1st 2006
From Back to FrontFrom Back to Front
The “Woodward” Presentation Model
June 28th – July 1st 2006
Why is the back end SO important?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 28th – July 1st 2006
Problems…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 funCF 8 – “Thank you Adobe”
Constant “chatter” was a concern Debugging
June 28th – July 1st 2006
SolutionsSolutions
Built framework without concern for front end
Built test harness to guarantee results
June 28th – July 1st 2006
Popular Ajax FrameworksPopular 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 28th – July 1st 2006
Popular Ajax Frameworks (Cont.)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 28th – July 1st 2006
How to chooseHow to choose
Are you good with JS? Are you good with XML/XSLT? What about the other
developers/resources
June 28th – July 1st 2006
The front endThe front end
Started out as a prototype using PrototypeXSLT on the client side (heavy browser caching)Constructed DOM objects manually
Implemented several Frameworks SpryScript.aculo.usPrototype
Overwrote/extend several standard properties/functionscommonspot.spry.Datasetcommonspot.spry.getRecordSetFromXMLDoc
June 28th – July 1st 2006
Problems…Problems…
Namespaces HTTP Timeout Spry Transport Layer JSON and eval()
June 28th – July 1st 2006
What makes Spry so different?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 28th – July 1st 2006
TestingTesting
Back endAutomated testing (multi platforms,
databases, CF versions etc…)Refactoring becomes easier
Front endSet up XML files to handle the “Post/Get”
results instead of getting at the data directly
June 28th – July 1st 2006
ConclusionConclusion
Plan2 Freight trains need to meet in the middle
Separate content from presentationEasy development/debugging
“A” framework will not solve your problems