CQ 5.4 Deep-Dive

What’s New in CQ 5.4 – Developer Deep-dive
Cédric Hüsler | Gabriel Walt

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Welcome – Goal of this Session

§  anks for your interest to learn more about CQ5 from Adobe
§  e content of this session is targeted to developers and so ware architects
with advanced experience in CQ5.

§  New to CQ5? We recommend this session 1st: h p://adobe.ly/cq54intro
§  Upcoming CQ5 Trainings – check out: h p://bit.ly/cq5training

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2

What’s New in CQ 5.4 – For Developers

§  Mobile Device Capability API §  Apple Push Noti cation service
§  Mobile Device Groups con guration and redirect lter §  jQuery & jQuery Mobile UI Toolkit
§  Read IMAP/POP3 accounts with Polling Importer §  Updated ExtJS 3.1.1 UI Toolkit
§  ClientLibs for web sites §  Cookie-based authentication (Token-auth)
§  Video transcoding with FFmpeg with con gurable §  Work ow-based Form Actions
pro les
§  User Pro le Self-service Form Actions
§  HTML5 Video Component
§  Forum component
§  Extended Work ow API (Java & REST)
§  Work ow-based UGC moderation
§  Con gurable roll-out con guration for LiveCopy
§  Enhanced Portlet to run CQ5 in Portal Server
§  Background Tasks API
§  Improved SQL2 query engine
§  Replication to static les
§  Be er streaming over HTTP for assets
§  Reporting Framework
§  Link externalizer service
§  Work ow-based reverse-replication
§  API to implement Mailing Gateways
§  Rendition and Proxy Asset API
§  Vault can move nodes with RCP mode
§  Wild-card ACLs
§  Extensible ClickstreamCloud
§  User Activity Stream API
§  Events Tracking API for SiteCatalyst
§  Content Sync Framework


What’s New in CQ 5.4 – Topics covered in this Session

§  Mobile Device Capability and Device Group

§  Con gurable roll-out con guration for LiveCopy

§  ClientLibs for web sites

§  HTML5 Video Component and Transcoding Pro les

§  Work ow-based reverse-replication

§  Work ow-based UGC moderation

§  Integration with SiteCatalyst and Events Tracking JS API


Mobile Page Rendering



We are facing:
§  ousands of devices – with varying capabilities
§  Rare so ware updates – still, for most devices

Unequal capabilities
§  Screen size Serve a diﬀerent design
Need to abstract
§  JS support
away capabilities
§  CSS support Server-side feature detection
§  Image support


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/


Mobile Page Rendering in CQ 5.4

?
Unknown
Device
HTTP request
CQ5



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 Diﬀerent avors of same content
§  Supports CSS
§  Supports Image
§  Exact Screen Size
§  Supports Device Rotation
§  Etc.



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 Diﬀerent avors of same content
§  Supports CSS
§  Supports Image
§  Exact Screen Size
§  Supports Device Rotation
§  Etc.


Mobile Page Rendering with Dispatchers

Visit site with
mobile browser

Dispatchers CQ5


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



Demo


Optimize Rendering Page Speed – Score be er!

•  Yahoo! YSlow: h p://developer.yahoo.com/yslow/
•  Google Page Speed: h p://code.google.com/speed/page-speed/


Optimize your Front-End

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



Client Libraries
§  We have 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



/ Framework

etc Library A

clientlibs Library B

designs Component A

site Component B

apps Component C

site Site Design

components Publish ClientLib



Demo


ClientLibs cheetsheet

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


User Generated Content – Reverse Replication

5 CQ5
Publish 1 Comment, rating,
forum post

3
CQ5 Check & fetch
Outbox content
2 Stored in repository
& in Replication Outbox
Author

5
Replication to
all publish
CQ5
4 Work ow-based
moderation & Publish
spam check

Internal Network DMZ


User Generated Content - Work ow-based Reverse Replication

7 Replication to
all publish CQ5
Publish 1 Any user generated
content

5
CQ5 Check & fetch
Outbox content
2 Stored in repository and
add cq:distribute=true
Author eld

3 Start ReverseReplication work ow
based on Launcher Con guration
6 Optional: Work ow-
based handling & 4 Store in Replication Outbox
spam check (this removes cq:distributed)


Work ow-based User Generated Content Handling

Demo


Targeted Content Delivery with CQ5

Request page

Dispatchers
Browser
Request personalized ClickstreamCloud
Cookie
CQ5
Evaluate the Request targeted content snippet
ClickstreamCloud

Tracking request


CQ5 and Adobe Online Marketing Suite

CQ5
Load pages and
context cloud

Fetch PageView stats
via WebService
Browser
ClickMap

[Context JS]
Send tracking info incl.
context and events
SiteCatalyst Publish oﬀers

Send context and fetch
targeted mbox content from
oﬀers
Test&Target


Send custom events from your component

§  If you want to track events on page load
§  use the record a ribute
§  pass event name as rst parameter, then a JSON object carrying payload (variables and de nition)
§  this will increase the page view count

41 <form action="${currentPage.path}.html" !
42 record="'search', {'keyword': '<c:out value="${search.query}"/>’, 
'results':'${result.totalMatches}',  
'executionTime':'${result.executionTime}'}">!
43 <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/>!
44 <input value="<fmt:message key="searchButtonText"/>" type="submit"/>!
45 </form>

§  If you want to track events on user interaction
§  use the track() function, if available
§  pass event name as rst parameter, then a JSON object carrying payload (variables and de nition)
§  this will not increase the page view count

49 if (typeof record == "function") {!
50 record("ajaxload", {!
51 url: "http://example.com/ajax",!
52 button: "submit"!
53 })!
54 }


ank You

§  Next steps:
§  Download CQ 5.4 and play with it
§  Update your instance to CQ 5.4

§  Existing Customers / Partners – visit DayCare
§  Partners and AEDP members get in on Partner Portal

§  Our contacts:
§  chuesler@adobe.com
§  gwalt@adobe.com


CQ 5.4 Deep-Dive

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to CQ 5.4 Deep-Dive

Similar to CQ 5.4 Deep-Dive (20)

More from Gabriel Walt

More from Gabriel Walt (6)

Recently uploaded

Recently uploaded (20)

CQ 5.4 Deep-Dive