Slides of my hands-on lab at MAX 2011. They explain how to optimize an HTML5 site running on a WEM instance, first quickly introducing HTML5 an WEM. Then, optimizing the CSS and JS inclusions, using the new Client Library feature. And finally, setting up the Dispatcher cache to deliver the right HTTP headers.

1. Develop HTML5 Sites
Optimized with Web Performance
Best Practices on WEM
Gabriel Walt | Enterprise Community Evangelist
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

2. Who am I?
Gabriel Walt
§ Enterprise Community Evangelist
§ Front-End Developer
§ Joined Adobe through the Day acquisition
§ CQ5 / WEM web developer
§ h p://friendfeed.com/gabrielwalt
§ gwalt at adobe dt com
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2

3. Lab Overview
Plan
§ HTML5 & WEM intro
§ Exercise 1 – Learn how to author & develop on WEM
§ Exercise 2 – Learn how to use an Author-Publish setup
§ Exercise 3 – Optimizing HTML
§ Exercise 4 – Optimizing HTTP
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3

4. What is HTML5?
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 4

5. What is HTML5?
§ Follows HTML 4.01 and XHTML 1.1
§ Pragmatic approach developed by both, the WHATWG and the W3C
§ Final speci cation is under progress…
Exercise 0:
§ Go to h p://ishtml5readyyet.com/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5

6. What is HTML5? h p://slides.html5rocks.com/ (use chrome)
Semantics & Markup Offline Storage Graphics / Multimedia
§ More semantic tags § Web Storage § Audio + Video
(section, article, header, footer, nav, aside, hgroup, …) § Web SQL Database § Canvas 2D & 3D
§ New form types & Form eld types on mobile
§ IndexedDB § Inline SVG
§ Markup for applications
§ Application Cache
(datalist, menu, command, meter, progress, …)
§ Link metadata a ributes
Realtime / Communication
(link[rel=alternate], link[rel=prefetch], a[rel=external], …)
§ Web Workers
§ Microdata (aka microformat)
§ WebSocket
§ A ributes for Accessible Rich Internet Applications
§ Noti cations
CSS3
File / Hardware Access
§ Powerful selectors
§ Native Drag & Drop
§ Transitions & Animations
§ Desktop Drag-In (File API)
§ Webfonts, Text wrapping, Columns, Text stroke
§ Desktop Drag-Out
§ Opacity, HSV colors, Gradients, Shadows, Re ections,
Background enhancements, Rounded corners, Border § FileSystem APIs
Images, Flexible Box Model § Geolocation
§ Device Orientation
§ Speech Input
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6

7. What is WEM?
§ Web Content Management
§ Mobile Web Content Collaboration Marketing Development
§ Digital Asset Management Management & Pro les Campaigns Tools
§ Marketing Campaigns
§ Social Collaboration Shared Framework:
Components, Work ow, Mobile, Digital Assets,
§ Targeting (Test&Target) Multi-Site Manager, Tagging, Analytics & Optimization
§ Work ow
§ Multi-Site Manager OSGi Runtime
§ Tagging
Content Repository
§ Analytics & Optimization
§ Active Clustering Web Experience Management
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7

8. Hands-On!
Exercise 1.1
Ge ing started with Web Experience Management
1. Launch a WEM author instance
2. Login as admin
User: admin
Pass: admin
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 8

9. Hands-On!
Exercise 1.2
Authoring web content with WEM
Logged-in as admin
User: admin
Pass: admin
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 9

10. Web Experience Management – Web Stack
Client
Web Experience Management Interacting with any client runtime
HTTP[S], WebDAV, CIFS SMB, CMIS
REST Web Framework + JSR 223 Scripting Host Scripting (JSP, server-side JS, Scala, etc.)
Server
OSGi Runtime Modern Application Stack
Extensible and Modular
JCR 2.0 API (JSR 170 + JSR 283)
Featuring
- Structured and unstructured data
Content Repository - Access Control
- Search
- Query (SQL, XPath)
Java VM - Versioning
- Clustering
- Observation
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 10

11. Hands-On
Exercise 1.3
Exploring the Content Repository
It’s a database that looks like a le system and
features all the good stuff like unstructured,
versioning, observation, access control…
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 11

12. Sling URL Decomposition
/geometrixx/en/products.html
the path de nes the resource the selectors de ne the rendition
/geometrixx/en/products.teaser.html
sling:resourceType
geometrixx/components/contentpage
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 12

13. Hands-On
Exercise 1.4
Edit website markup
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 13

14. Semantic Markup
<div id=“header”> <header>
<div id=“nav”> <nav>
<div class=“article”> <article>
<div id=“sidebar”> <sidebar>
<div class=“section”> <section>
<div id=“footer”> <footer>
Test your semantic markup
h p://gsnedders.html5.org/outliner
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14

15. Hands-On
Exercise 2.1
Launch a WEM publish instance
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 15

16. WEM Instances and Deployment
QA PROD * PackageSVN,
Manager,
Vault &
Replication
Application Deployment *
Publish
Author/Publish
WEM
WEM
Application Deployment *
Author
WEM
DataCenter1
DataCenter2
Author Publish
WEM WEM
Subversion, Build Server, Selenium, LDAP
DEV Firewall Firewall
Internal Network DMZ
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 16

17. Hands-On
Exercise 2.2
Publish content changes
Exercise 2.3
Publish component changes
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17

18. Optimization
Exercise 3
Optimize Front-End
§ Merge CSS & JS
§ Include JS at the bo om of the HTML
§ Minify CSS & JS
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

19. Client Libraries
categories
Client Libraries
§ We have various CSS & JS libraries cq.jquery (Frameworks)
§ Express relations between client libs enterprise-dev.libs (Libraries & Site Design)
§ dependencies
enterprise-dev.layout (Page Component A)
§ embed
enterprise-dev.layout (Page Component B)
§ Various optimizations
§ concatenated enterprise-dev.content (Content Component A)
§ mini ed
enterprise-dev.content (Content Component B)
§ gzipped through HTTP
§ ClientLib dependencies and embeds
/libs/cq/ui/content/dumplibs.html enterprise-dev.all (Publish ClientLib)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 19

20. Client Libraries
/ Frameworks
etc Site-speci c Libraries
clientlibs Component A
designs Component B
site Component C
apps
site Publish ClientLib
components
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20

21. Hands-On
Exercise 4
Add a Caching Layer
§ HTML Caching
§ Optimize the HTTP requests
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21

22. What is REST?
§ REST is a term coined by Roy T. h p://domain/path/company.html
Fielding in his PhD dissertation to
describe an architecture style of Client Server
network systems. Our company was
founded in 545 BC
by Pythagoras of
Samos. Since then
[…]
§ Describes desired Web architecture
§ e Web is an example of REST system company.html
§ Stateless
§ Cacheable
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22

23. Hands-On
Exercise 4.2
Enable HTTP gzip compression
1. Uncomment line 87 of h pd.conf
LoadModule deflate_module libexec/apache2/mod_deflate.so
2. h p://bit.ly/h p-gzip
# Insert filter
SetOutputFilter DEFLATE
# Don't compress images
SetEnvIfNoCase Request_URI
.(?:gif|jpe?g|png)$ no-gzip dont-vary
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23

24. Hands-On
Exercise 4.2
Enable HTTP gzip compression
1. Uncomment line 92 of h pd.conf
LoadModule expires_module libexec/apache2/mod_expires.so
2. h p://bit.ly/h p-cache
ExpiresActive On
ExpiresDefault "access plus 1 month”
FileETag None
AddDefaultCharset utf-8
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

25. WEM Deployment – Delivery Setup
Cache Invalidation
Publish Dispatcher
WEM
Visitor Traffic
Author
Load
WEM Balancer
Publish Dispatcher
WEM Visitor Traffic
CDN*
Cache Invalidation
App Delivery
* Content Delivery Network
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25

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