the break-up - a user interface love story
TRANSCRIPT
Raphael Wegmueller
Damien Antipa
Alexandre Capt
THE BREAK-UPA user interface love story
A LONG STANDING RELATIONSHIP
CQ AND EXTJSDeclaration basedJSON storeHeavily client-sidedRich library of widgetsComprehensive browser supportLarge developer communityWell documented
DISAFFECTION
SOMETHING'S MISSINGNot touch-friendlyDecreasing performanceDesktop vs web styleLimited control over source codeUpgrade gap (ExtJS 4.0)
ESCAPADES JUST HAPPENED
WE NEEDED TO TRYTeach ExtJS to be touch-friendlySencha TouchjQuery mobile
NEWFOUND LOVE
CORALUI
Home-brewed UI FrameworkOpen DevelopmentAdobe Unification
THE BASIC CONCEPT
ARCHITECTURE
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
GOOD SOFTWARE NEEDS
A KILLER
USER INTERFACE
Responsive & scalable layoutRich widgetsMobile firstAccessibilityCutting edge technologies
SCALABLE &
RESPONSIVE
LAYOUT
CSS3 Unit : rem (= root em)
Mono colored font icons
Multi colored embedded SVG
CSS on excellence
Markup-driven for fast rendering
RICH WIDGETS
Do not abuse JS to generate markup or styles
Enhancement through data attributes
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
ACCESSIBILITY
Screen reader & voice over friendly
Keyboard enabled
Semantic / Content first
WAI-ARIA (W3C)
CUTTING EDGETECHNOLOGIES
CSS3 / HTML5
jQuery for high performance
Automatic UI testing
Modern build system
WE DO OUR BEST TO BALANCE THIS
DEPLOYMENT DEPENDENCIESMinimum: jQuery 1.8+For datepicker: moment.jsFor touch handling: toe.jsFeel free to use handlebars,
backbone and others
THE SERVER LAYER
GRANITE UI
Markup rendering & helpers
Component based
Sling resource resolution
OSGI bundle
Part of the platform (Granite)
MORE SPECIFIC
THE APPLICATION LEVELWCM, DAM, Social, Tooling, Marketing Cloud ...Shared common platformExtend existing components
CUSTOM DEVELOPMENT
EXTENSION POINTS
ComponentsDialogsVirtual resourcesClient-side eventing
REUSABILITY
HIGH BACKWARDCOMPATIBILITY
Edit component modelDialog definitionsJS handler may fail
AEM
CUSTOMIZE THE UISiteadmin: new actionsCustom content panels for authoringRemaining component conceptVirtual resource override
QUESTIONS? COMMENTS?Speaker 1 : Raphael Wegmueller | Senior Engineering Manager | [email protected]
Speaker 2 : Damien Antipa | Engineer | [email protected]
Speaker 3 : Alexandre Capt | Engineering Manager | [email protected]
Designed by : Alexis Tessier | Experience Designer
FEEDBACK IS WELCOME