Dev Dives: Streamline document processing with UiPath Studio Web
Coding 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”
