Presentation “THE BREAK-UP - A user interface love story“ by Raphael Wegmueller, Damien Antipa and Alexandre Capt at CQCON2013 in Basel on 19 and 20 June 2013.

1. Raphael Wegmueller
Damien Antipa
Alexandre Capt
THE BREAK-UP
A user interface love story

2. A LONG STANDING RELATIONSHIP
CQ AND EXTJS
Declaration based
JSON store
Heavily client-sided
Rich library of widgets
Comprehensive browser support
Large developer community
Well documented








5. DISAFFECTION
SOMETHING'S MISSING
Not touch-friendly
Decreasing performance
Desktop vs web style
Limited control over source code
Upgrade gap (ExtJS 4.0)






6. ESCAPADES JUST HAPPENED
WE NEEDED TO TRY
Teach ExtJS to be touch-friendly
Sencha Touch
jQuery mobile




11. NEWFOUND LOVE
CORALUI
Home-brewed UI Framework
Open Development
Adobe Unification




12. THE BASIC CONCEPT
ARCHITECTURE

13. MAKES ALL SENSE, BUT ...
WHAT EXACTLY IS CORALUI?
UI framework for web applications
Backend agnostic
Implementation of the CloudUI initiative
Unification approach for Adobe apps
Open development driven






14. GOOD SOFTWARE NEEDS
A KILLER
USER INTERFACE
Responsive & scalable layout
Rich widgets
Mobile first
Accessibility
Cutting edge technologies






15. SCALABLE &
RESPONSIVE
LAYOUT
CSS3 Unit : rem (= root em)
Mono colored font icons
Multi colored embedded SVG
CSS on excellence
Markup-driven for fast rendering






16. RICH WIDGETS
Do not abuse JS to generate markup or styles
Enhancement through data attributes



17. 1. <!-- Date/time picker --><!-- Date/time picker -->
2. <div<div classclass=="datepicker""datepicker" data-initdata-init=="datepicker""datepicker" data-displayed-formatdata-displayed-format=="YYYY-MM-DD""YYYY-MM-DD">>
3. <input<input typetype=="datetime""datetime" valuevalue=="1987-04-06""1987-04-06">>
4. <button<button classclass=="icon-calendar small""icon-calendar small">>Datetime pickerDatetime picker</button></button>
5. </div></div>
1987-04-06 
MOBILE FIRST
Touch enabled
Finger friendly
Gestures
Responsive layout





18. ACCESSIBILITY
Screen reader & voice over friendly
Keyboard enabled
Semantic / Content first
WAI-ARIA (W3C)





19. CUTTING EDGE
TECHNOLOGIES
CSS3 / HTML5
jQuery for high performance
Automatic UI testing
Modern build system





20. WE DO OUR BEST TO BALANCE THIS
DEPLOYMENT DEPENDENCIES
Minimum: jQuery 1.8+
For datepicker: moment.js
For touch handling: toe.js
Feel free to use handlebars,
backbone and others





22. THE SERVER LAYER
GRANITE UI
Markup rendering & helpers
Component based
Sling resource resolution
OSGI bundle
Part of the platform (Granite)






23. MORE SPECIFIC
THE APPLICATION LEVEL
WCM, DAM, Social, Tooling, Marketing Cloud ...
Shared common platform
Extend existing components




30. CUSTOM DEVELOPMENT
EXTENSION POINTS
Components
Dialogs
Virtual resources
Client-side eventing





31. REUSABILITY
HIGH BACKWARD
COMPATIBILITY
Edit component model
Dialog definitions
JS handler may fail




32. AEM
CUSTOMIZE THE UI
Siteadmin: new actions
Custom content panels for authoring
Remaining component concept
Virtual resource override





33. QUESTIONS? COMMENTS?
Speaker 1 : Raphael Wegmueller | Senior Engineering Manager | rofe@adobe.com
Speaker 2 : Damien Antipa | Engineer | damien@adobe.com
Speaker 3 : Alexandre Capt | Engineering Manager | acapt@adobe.com
Designed by : Alexis Tessier | Experience Designer
FEEDBACK IS WELCOME