THE BREAK-UP - A user interface love story

Uploaded on

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.

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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
  • 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. <!-- 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 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