1. Raphael WegmuellerDamien AntipaAlexandre CaptTHE BREAK-UPA user interface love story

2. A LONG STANDING RELATIONSHIPCQ AND EXTJSDeclaration basedJSON storeHeavily client-sidedRich library of widgetsComprehensive browser supportLarge developer communityWell documented

3. DISAFFECTIONSOMETHINGS MISSINGNot touch-friendlyDecreasing performanceDesktop vs web styleLimited control over source codeUpgrade gap (ExtJS 4.0)

4. ESCAPADES JUST HAPPENEDWE NEEDED TO TRYTeach ExtJS to be touch-friendlySencha TouchjQuery mobile

5. NEWFOUND LOVECORALUIHome-brewed UI FrameworkOpen DevelopmentAdobe Unification

6. THE BASIC CONCEPTARCHITECTURE

7. MAKES ALL SENSE, BUT ...WHAT EXACTLY IS CORALUI?UI framework for web applicationsBackend agnosticImplementation of the CloudUI initiativeUnification approach for Adobe appsOpen development driven

8. GOOD SOFTWARE NEEDSA KILLERUSER INTERFACEResponsive & scalable layoutRich widgetsMobile firstAccessibilityCutting edge technologies

9. SCALABLE &RESPONSIVELAYOUTCSS3 Unit : rem (= root em)Mono colored font iconsMulti colored embedded SVGCSS on excellenceMarkup-driven for fast rendering

10. RICH WIDGETSDo not abuse JS to generate markup or stylesEnhancement through data attributes

11. 1. 2.

>3. >4. >Datetime pickerDatetime picker5.

1987-04-06 MOBILE FIRSTTouch enabledFinger friendlyGesturesResponsive layout 12. ACCESSIBILITYScreen reader & voice over friendlyKeyboard enabledSemantic / Content firstWAI-ARIA (W3C) 13. CUTTING EDGETECHNOLOGIESCSS3 / HTML5jQuery for high performanceAutomatic UI testingModern build system 14. WE DO OUR BEST TO BALANCE THISDEPLOYMENT DEPENDENCIESMinimum: jQuery 1.8+For datepicker: moment.jsFor touch handling: toe.jsFeel free to use handlebars,backbone and others 15. THE SERVER LAYERGRANITE UIMarkup rendering & helpersComponent basedSling resource resolutionOSGI bundlePart of the platform (Granite) 16. MORE SPECIFICTHE APPLICATION LEVELWCM, DAM, Social, Tooling, Marketing Cloud ...Shared common platformExtend existing components 17. CUSTOM DEVELOPMENTEXTENSION POINTSComponentsDialogsVirtual resourcesClient-side eventing 18. REUSABILITYHIGH BACKWARDCOMPATIBILITYEdit component modelDialog definitionsJS handler may fail 19. AEMCUSTOMIZE THE UISiteadmin: new actionsCustom content panels for authoringRemaining component conceptVirtual resource override 20. QUESTIONS? COMMENTS?Speaker 1 : Raphael Wegmueller | Senior Engineering Manager | rofe@adobe.comSpeaker 2 : Damien Antipa | Engineer | damien@adobe.comSpeaker 3 : Alexandre Capt | Engineering Manager | acapt@adobe.comDesigned by : Alexis Tessier | Experience DesignerFEEDBACK IS WELCOME