THE BREAK-UP - A user interface love story
-
Upload
connectwebex -
Category
Business
-
view
797 -
download
3
Transcript of THE BREAK-UP - A user interface love story
![Page 1: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/1.jpg)
Raphael Wegmueller
Damien Antipa
Alexandre Capt
THE BREAK-UPA user interface love story
![Page 2: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/2.jpg)
A LONG STANDING RELATIONSHIP
CQ AND EXTJSDeclaration basedJSON storeHeavily client-sidedRich library of widgetsComprehensive browser supportLarge developer communityWell documented
![Page 3: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/3.jpg)
![Page 4: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/4.jpg)
![Page 5: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/5.jpg)
DISAFFECTION
SOMETHING'S MISSINGNot touch-friendlyDecreasing performanceDesktop vs web styleLimited control over source codeUpgrade gap (ExtJS 4.0)
![Page 6: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/6.jpg)
ESCAPADES JUST HAPPENED
WE NEEDED TO TRYTeach ExtJS to be touch-friendlySencha TouchjQuery mobile
![Page 7: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/7.jpg)
![Page 8: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/8.jpg)
![Page 9: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/9.jpg)
![Page 10: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/10.jpg)
![Page 11: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/11.jpg)
NEWFOUND LOVE
CORALUI
Home-brewed UI FrameworkOpen DevelopmentAdobe Unification
![Page 12: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/12.jpg)
THE BASIC CONCEPT
ARCHITECTURE
![Page 13: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/13.jpg)
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
![Page 14: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/14.jpg)
GOOD SOFTWARE NEEDS
A KILLER
USER INTERFACE
Responsive & scalable layoutRich widgetsMobile firstAccessibilityCutting edge technologies
![Page 15: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/15.jpg)
SCALABLE &
RESPONSIVE
LAYOUT
CSS3 Unit : rem (= root em)
Mono colored font icons
Multi colored embedded SVG
CSS on excellence
Markup-driven for fast rendering
![Page 16: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/16.jpg)
RICH WIDGETS
Do not abuse JS to generate markup or styles
Enhancement through data attributes
![Page 17: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/17.jpg)
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
![Page 18: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/18.jpg)
ACCESSIBILITY
Screen reader & voice over friendly
Keyboard enabled
Semantic / Content first
WAI-ARIA (W3C)
![Page 19: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/19.jpg)
CUTTING EDGETECHNOLOGIES
CSS3 / HTML5
jQuery for high performance
Automatic UI testing
Modern build system
![Page 20: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/20.jpg)
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
![Page 21: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/21.jpg)
![Page 22: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/22.jpg)
THE SERVER LAYER
GRANITE UI
Markup rendering & helpers
Component based
Sling resource resolution
OSGI bundle
Part of the platform (Granite)
![Page 23: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/23.jpg)
MORE SPECIFIC
THE APPLICATION LEVELWCM, DAM, Social, Tooling, Marketing Cloud ...Shared common platformExtend existing components
![Page 24: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/24.jpg)
![Page 25: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/25.jpg)
![Page 26: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/26.jpg)
![Page 27: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/27.jpg)
![Page 28: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/28.jpg)
![Page 29: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/29.jpg)
![Page 30: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/30.jpg)
CUSTOM DEVELOPMENT
EXTENSION POINTS
ComponentsDialogsVirtual resourcesClient-side eventing
![Page 31: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/31.jpg)
REUSABILITY
HIGH BACKWARDCOMPATIBILITY
Edit component modelDialog definitionsJS handler may fail
![Page 32: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/32.jpg)
AEM
CUSTOMIZE THE UISiteadmin: new actionsCustom content panels for authoringRemaining component conceptVirtual resource override
![Page 33: THE BREAK-UP - A user interface love story](https://reader034.fdocuments.us/reader034/viewer/2022042701/55c87da0bb61ebcf6c8b45d6/html5/thumbnails/33.jpg)
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