When Orbitz Worldwide released a new generation of its global technology platform there were some lofty goals for the UI. They wanted to build a presentation tier (HTML, CSS, JavaScript) that would meet the goals of internationalization, accessibility, have rich Ajax interactions, and be faster and easier to develop in. This session will explore the key challenges in achieving these goals, including what worked, what didn\'t, and what\'s next.
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Coding the UI
1. Coding the UI:
Lessons Learned from
ebookers and Orbitz
Mark Meeker AjaxWorld
Architect, UI Engineering San Jose, California
Orbitz Worldwide October 21, 2008
10. Experience
Single JSP files measuring in thousands of lines
Massive amounts of repeated markup
561 files with <html> tag
Minimal re-use
66 tables on one page
11. “Good judgement is the
result of experience …
Experience is the result
of bad judgement.”
—Fred Brooks
29. Follow Web Standards
P.O.S.H.
plain old semantic HTML
Constant balancing act
Reduces display defects
Reset Styles
Validate CSS
Reminder that it is an evolving code base
36. Progressive Enhancement
Content is KING!
Start with semantic markup
Get working functionality with HTML only
Enhance display with CSS
Enhance behavior with JavaScript
37. Separation of Layers
No in-line styles or in-line JavaScript
If it only works with JavaScript, create it with JavaScript
41. High Quality
Validation
Build time tests (automated)
static code analysis
CSS validation
JSP compile
Constant developer vigilance
Sometimes constraints are good
42. Constraints
Custom tags for some HTML elements
anchors, images, form elements
Only allow subset of attributes
no: onclick, id
required: various content
Able to enforce all inputs have labels
Free CSS and JS support
Free shared functionality
49. Composite View
Separates “layout” of page from content
Allows to plug in different modules into page
Used in Apache Tiles
Leverage in-house framework
Try and gain as much re-use of JSP code
56. DRY
Avoid targeting IDs for CSS or JS
Custom attribute for JavaScript Data
Separation of Layers
Helper code for small “controls”
with the CSS to go with them
Take advantage of lazy developers
58. Consistent Experience
Make learning how to use the site easier for users.
Reduce the number of patterns.
Stick with the ones that work best.
Meet users expectations on...
messaging
error placements
interfaces
59.
60.
61.
62.
63. Consistent Experience
Review the site for common patterns
Introduce a Pattern Library
Build common “controls”