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.

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.