CQ 5.4 Deep-Dive

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

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

2

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

What’s New in CQ 5.4 – For Developers

§  Mobile Device Capability API

§  Mobile Device Groups con!guration and redirect !lter

§  Read IMAP/POP3 accounts with Polling Importer

§  ClientLibs for web sites

§  Video transcoding with FFmpeg with con!gurable pro!les

§  HTML5 Video Component

§  Extended Work%ow API (Java & REST)

§  Con!gurable roll-out con!guration for LiveCopy

§  Background Tasks API

§  Replication to static !les

§  Reporting Framework

§  Work%ow-based reverse-replication

§  Rendition and Proxy Asset API

§  Wild-card ACLs

§  User Activity Stream API

§  Content Sync Framework

§  Apple Push Noti!cation service

§  jQuery & jQuery Mobile UI Toolkit

§  Updated ExtJS 3.1.1 UI Toolkit

§  Cookie-based authentication (Token-auth)

§  Work%ow-based Form Actions

§  User Pro!le Self-service Form Actions

§  Forum component

§  Work%ow-based UGC moderation

§  Enhanced Portlet to run CQ5 in Portal Server

§  Improved SQL2 query engine

§  Be$er streaming over HTTP for assets

§  Link externalizer service

§  API to implement Mailing Gateways

§  Vault can move nodes with RCP mode

§  Extensible ClickstreamCloud

§  Events Tracking API for SiteCatalyst

3

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

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

4

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

Mobile Page Rendering

5

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

Mobile Page Rendering

We are facing:

§  "ousands of devices – with varying capabilities

§  Rare so#ware updates – still, for most devices

6

Unequal capabilities

§  Screen size

§  JS support

§  CSS support

§  Image support

Serve a different design

Server-side feature detection

Need to abstract

away capabilities

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

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/

7

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

Mobile Page Rendering in CQ 5.4

? HTTP request

Unknown Device

CQ5

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

Live Copy

Different %avors of same content

Master Content

Mobile Content

Content in Repository

Mobile Page Rendering in CQ 5.4

Touch Phone Site

Smart Phone Site

Default Site CQ5

HTML Renditions

HTTP request

Device Capabilities (from WURFL) §  Supports JS

§  Supports CSS

§  Supports Image

§  Exact Screen Size

§  Supports Device Rotation

§  Etc.

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

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 in CQ 5.4

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

Different %avors of same content

HTTP request

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

Mobile Page Rendering with Dispatchers

11

Visit site with mobile browser

Dispatchers CQ5

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

Mobile Page Rendering with Dispatchers

12

Visit site with mobile browser

Dispatcher forwards request to publish server

Sends back URL to optimized version Dispatchers CQ5

Lookup device list and evaluate device group

Request mobile optimized version

Render device-group speci!c page

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

Mobile Page Rendering

13

Demo

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

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/

14

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

Front-End is about:

§  HTML = Markup + Content

§  CSS = Layout

§  JS = Behavior

Optimize your Front-End

15

CQ5 structures well HTML: §  under the content node §  under the component node

Client Libraries

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

Optimize your Front-End

Client Libraries

§  We have various CSS & JS libraries

16

§  Express relations between client libs

§  dependencies

§  embed

Various optimizations

§  concatenated

§  mini!ed

§  gzipped

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.

Optimize your Front-End

17

Framework

Library A

Library B

Component A

Component B

Component C

Site Design

Publish ClientLib

/

etc

clientlibs

designs

site

apps

site

components

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

Optimize your Front-End

18

Demo

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

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

19

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

User Generated Content – Reverse Replication

20

1

CQ5 Publish

CQ5 Publish

Comment, rating, forum post

2 Stored in repository & in Replication Outbox

3 Check & fetch Outbox content

4 Work"ow-based moderation & spam check

CQ5 Author

Replication to all publish

Internal Network DMZ

5

5

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

User Generated Content - Work%ow-based Reverse Replication

21

1

CQ5 Publish Any user generated

content

2 Stored in repository and add cq:distribute=true !eld

5 Check & fetch Outbox content

6 Optional: Work"ow-based handling & spam check

CQ5 Author

Replication to all publish

7

3 Start ReverseReplication work"ow based on Launcher Con!guration

4 Store in Replication Outbox (this removes cq:distributed)

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

Work%ow-based User Generated Content Handling

22

Demo

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

Targeted Content Delivery with CQ5

23

Request personalized ClickstreamCloud CQ5

Disp

atch

ers

Browser Cookie

Evaluate the ClickstreamCloud

Request page

Request targeted content snippet

Tracking request

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

CQ5 and Adobe Online Marketing Suite

24

SiteCatalyst

Test&Target

CQ5

Fetch PageView stats via WebService

Load pages and context cloud

Send tracking info incl. context and events

ClickMap

Send context and fetch targeted mbox content from offers

Publish offers

Browser [Context JS]

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

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

§  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

25

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>

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

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

"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

26

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