Download - 2011 Cq Dev Tricks 2
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 1/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
CQ5/WEM Developer TricksGabriel Walt
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 2/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
CQ5/WEM Developer Tricks
Quick intro to a few mostly unknown new features:
1. Front-End Optimization
2. Mobile Detection
3. Mobile Content Synchronization
2
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 3/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
1. Front-End Optimization
3
hp://www.ickr.com/photos/amorsiko/3355940427/
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 4/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
1. Front-End Optimization
4
hp://www.ickr.com/photos/amorsiko/3355940427/
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 5/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
§ HTML = Markup + Content
§ CSS = Layout
§ JS = Behavior
Front-End is about
5
CQ5 structures well HTML:§ under the content node
§ under the component node
Client Libraries
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 6/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Client Libraries
Each project usually has:
§ Various CSS & JS libraries
6
§ Express relations between client libs
§ dependencies
§ embed
Various optimizations
§ concatenated
§ minied
§ gzipped
Framework
Library A
Library B
Component A
Component B
Component C
Site Design
Publish ClientLib
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 7/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Client Libraries
7
Framework
Library A
Library B
Component A
Component B
Component C
Site Design
Publish ClientLib
/
etc
clientlibs
designs
site
apps
site
components
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 8/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Client Libraries
8
Demo
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 9/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Client Libraries – Cheat Sheet
List ClientLib dependencies and embeds:hp://SERVER/libs/cq/ui/content/dumplibs.html
Include JS and CSS in separate les:
hp://SERVER/PAGE.html?debugClientLibs=true
Show Firebug console:hp://SERVER/PAGE.html?debugConsole=true
9
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 10/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
2. Mobile Detection
10
hp://www.ickr.com/photos/mikecogh/4520411836/
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 11/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Why?
We are facing:
§ ousands of devices – with varying capabilities
§ Rare soware updates – still, for most devices
11
Unequal capabilities
§ Screen size
§ JS support
§ CSS support
§ Image support
Serve a diff erent design
Server-side feature detection
Need to abstract
away capabilities
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 12/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Device Capabilities Abstraction
Wireless Universal Resource FiLe
§ Conguration 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 Soware – hp://wur.sourceforge.net/
12
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 13/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Live Copy
Diff erent avors of same content
Master Content
Mobile Content
Content in Repository
Mobile Page Rendering
Touch Phone Site
Smart Phone Site
Default SiteCQ5
HTML Renditions
HTTP request
Device Capabilities (from WURFL)
§ Supports JS
§ Supports CSS
§ Supports Image
§ Exact Screen Size
§ Supports Device Rotation
§ Etc.
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 14/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Live Copy
Touch Phone Site
Smart Phone Site
Default Site
/site/news.html
Master Content
/content/site/news
Mobile Content
Web Path Node Path
Mobile Page Rendering
CQ5
Device Capabilities (from WURFL)
§ Supports JS
§ Supports CSS
§ Supports Image
§ Exact Screen Size
§ Supports Device Rotation
§ Etc.
/site-mobile/news.smart.html
/site-mobile/news.touch.html
/content/site-mobile/news
Diff erent avors of same content
HTTP request
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 15/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Mobile Page Rendering with Dispatchers
15
Visit site withmobile browser
Dispatcher forwardsrequest to publish server
Sends back URL tooptimized version
Dispatchers CQ5
Lookup devicelist and evaluatedevice group
Request mobileoptimized version
Render device-groupspecic page
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 16/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Mobile Page Rendering
16
Demo
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 17/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Improving the default solution
17
Server Aention Span
hp://xkcd.com/869/
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 18/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
e default solution
18
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 19/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
e default solution, improved
19
We need JavaScript to improve it further!
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 20/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Adding a “check” selector
20
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 21/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
e full solution
21
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 22/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
3. Mobile Content Synchronization
22
hp://www.ickr.com/photos/clemmac/3571171997/
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 23/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
What it does
CQ5
HTTP request with timestamp of latest sync
Cache
Content changes fromtime Y to time Z
Content changes from
time X to time Z
Content changes fromtime X to time Y
If needed:generates content packageand stores it in cache
Redirects client to cache URL
R e q u e s t s c o n t e n t p a c k a g e
Unpacks contentand merges it withprevious content
App Content, can be:
§ Web UI: HTML+CSS+JSdisplayed in web frame
§ Native UI: JSON or XMLparsed and displayedusing native widgets
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 24/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Mobile Content Synchronization – Benets
24
§ 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
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 25/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Mobile Content Synchronization
25
Demo
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 26/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.
Mobile Content Synchronization – Cheat Sheet
Conguration:
§ copy – Copy les and foldersparameters: path
§ content – Render content using standard Sling request processingparameters: path, extension, selector
§ clientlib – Package a Javascript or CSS client libraryparameters: path, extension
§ assets – Collect original renditions of assetsparameters: path
§ pages – Render CQ pages and collect referenced assetsparameters: path, extension, selector, deep
Console to update the content of the ContentSync packages:hp://SERVER/libs/cq/contentsync/content/console.html
Documentation:hp://dev.day.com/docs/en/cq/current/developing/mobile/contentsync.html
26
5/14/2018 2011 Cq Dev Tricks 2 - slidepdf.com
http://slidepdf.com/reader/full/2011-cq-dev-tricks-2 27/27
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Condential.