Three WEM Dev Tricks
5 likes2,375 views
The document discusses three developer tricks for CQ5/WEM: 1) front-end optimization techniques like concatenating, minifying, and gzipping client-side libraries, 2) mobile detection using the Wireless Universal Resource File to determine device capabilities and serve tailored content, and 3) mobile content synchronization to keep mobile versions of content in sync with their desktop counterparts.
Three WEM Dev Tricks
- 1. CQ5/WEM Developer Tricks Gabriel Walt © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
- 2. CQ5/WEM Developer Tricks Quick intro to a few mostly unknown new features: 1. Front-End Optimization 2. Mobile Detection 3. Mobile Content Synchronization © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2
- 3. 1. Front-End Optimization h p://www. ickr.com/photos/amorsiko/3355940427/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3
- 4. 1. Front-End Optimization h p://www. ickr.com/photos/amorsiko/3355940427/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 4
- 5. Front-End is about CQ5 structures well HTML: § HTML = Markup + Content § under the content node § under the component node § CSS = Layout Client Libraries § JS = Behavior © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5
- 6. Client Libraries Each project usually has: § Various CSS & JS libraries Framework Library A § Express relations between client libs § dependencies Library B § embed Component A Various optimizations Component B § concatenated Component C § mini ed Site Design § gzipped Publish ClientLib © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6
- 7. Client Libraries / Framework etc Library A clientlibs Library B designs Component A site Component B apps Component C site Site Design components Publish ClientLib © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7
- 8. Client Libraries Demo © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 8
- 9. Client Libraries – Cheat Sheet List ClientLib dependencies and embeds: h p://SERVER/libs/cq/ui/content/dumplibs.html Include JS and CSS in separate les: h p://SERVER/PAGE.html?debugClientLibs=true Show Firebug console: h p://SERVER/PAGE.html?debugConsole=true © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 9
- 10. 2. Mobile Detection h p://www. ickr.com/photos/mikecogh/4520411836/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 10
- 11. Why? We are facing: § ousands of devices – with varying capabilities § Rare so ware updates – still, for most devices Unequal capabilities § Screen size Serve a different design Need to abstract § JS support away capabilities § CSS support Server-side feature detection § Image support © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 11
- 12. Device Capabilities Abstraction Wireless Universal Resource FiLe § Con guration le for all known mobile devices on earth § Over 500 capabilities for each device that are broken up into 30 groups § Used by many others, such as Facebook § is Free and Open Source So ware – h p://wur .sourceforge.net/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 12
- 13. Mobile Page Rendering HTML Renditions Content in Repository HTTP request CQ5 Default Site Master Content Live Copy Touch Phone Site Mobile Content Device Capabilities (from WURFL) § Supports JS Smart Phone Site Different avors of same content § Supports CSS § Supports Image § Exact Screen Size § Supports Device Rotation § Etc. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
- 14. Mobile Page Rendering Web Path Node Path /site/news.html /content/site/news HTTP request CQ5 Default Site Master Content /site-mobile/news.touch.html Live Copy Touch Phone Site /content/site-mobile/news Mobile Content Device Capabilities (from WURFL) /site-mobile/news.smart.html § Supports JS Smart Phone Site Different avors of same content § Supports CSS § Supports Image § Exact Screen Size § Supports Device Rotation § Etc. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
- 15. Mobile Page Rendering with Dispatchers Visit site with Dispatcher forwards Lookup device mobile browser request to publish server list and evaluate device group Sends back URL to Dispatchers optimized version CQ5 Request mobile Render device-group optimized version speci c page © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 15
- 16. Mobile Page Rendering Demo © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 16
- 17. Improving the default solution Server A ention Span h p://xkcd.com/869/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
- 18. e default solution © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18
- 19. e default solution, improved We need JavaScript to improve it further! © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19
- 20. Adding a “check” selector © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20
- 21. e full solution © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
- 22. 3. Mobile Content Synchronization h p://www. ickr.com/photos/clemmac/3571171997/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22
- 23. What it does HTTP request with timestamp of latest sync CQ5 Redirects client to cache URL If needed: Req generates content package uest s co and stores it in cache Unpacks content nten t pa and merges it with ckag e previous content Cache App Content, can be: Content changes from time Y to time Z § Web UI: HTML+CSS+JS displayed in web frame Content changes from time X to time Z § Native UI: JSON or XML parsed and displayed Content changes from time X to time Y using native widgets © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
- 24. Mobile Content Synchronization – Bene ts § Optimized for low bandwidth consumption § Only diff is transferred § Content is ZIPed § Client Technology Agnostic: § Requires HTTP client § Requires ZIP library § Reuse of content for mobile app § Can synchronize any kind of content: HTML, XML, JSON, Images, PDF, les, … § App can be: § Web UI: HTML+CSS+JS displayed in web frame § Native UI: JSON or XML parsed and displayed using native widgets © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
- 25. Mobile Content Synchronization Demo © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25
- 26. Mobile Content Synchronization – Cheat Sheet Con guration: § copy – Copy les and folders parameters: path § content – Render content using standard Sling request processing parameters: path, extension, selector § clientlib – Package a Javascript or CSS client library parameters: path, extension § assets – Collect original renditions of assets parameters: path § pages – Render CQ pages and collect referenced assets parameters: path, extension, selector, deep Console to update the content of the ContentSync packages: h p://SERVER/libs/cq/contentsync/content/console.html Documentation: h p://dev.day.com/docs/en/cq/current/developing/mobile/contentsync.html © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26
- 27. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.