the break-up - a user interface love story

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 | 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