Professional Documents
Culture Documents
Gabriel Walt
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
1. Front-End Optimization
h p://www. ickr.com/photos/amorsiko/3355940427/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
1. Front-End Optimization
h p://www. ickr.com/photos/amorsiko/3355940427/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Front-End is about
CQ5 structures well HTML: under the content node under the component node Client Libraries
= Behavior
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Client Libraries
Each project usually has:
Framework Library A Library B Component A Component B Component C Site Design Publish ClientLib
dependencies embed
Various optimizations
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Client Libraries
Framework Library A Library B Component A Component B Component C Site Design Publish ClientLib
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Client Libraries
Demo
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
2. Mobile Detection
h p://www. ickr.com/photos/mikecogh/4520411836/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
10
Why?
We are facing:
ousands of devices with varying capabilities Rare so ware updates still, for most devices
Unequal capabilities
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
11
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
CQ5
Default Site
Live Copy
Touch Phone Site
Supports JS Supports CSS Supports Image Exact Screen Size Supports Device Rotation Etc.
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Node Path
/content/site/news
CQ5
Default Site
Master Content
/site-mobile/news.touch.html
Live Copy
/content/site-mobile/news
Mobile Content
/site-mobile/news.smart.html
Supports JS Supports CSS Supports Image Exact Screen Size Supports Device Rotation Etc.
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Dispatchers
Request mobile optimized version
CQ5
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
15
Demo
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
16
h p://xkcd.com/869/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
17
e default solution
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
18
19
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
20
e full solution
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
21
h p://www. ickr.com/photos/clemmac/3571171997/
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
22
What it does
HTTP request with timestamp of latest sync Redirects client to cache URL
Req uest
CQ5
If needed: generates content package and stores it in cache
ckag e
s co
nten
t pa
Cache
Content changes from time Y to time Z Content changes from time X to time Z Content changes from time X to time Y
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.
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
Demo
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
25
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
2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.