optimizing html5 sites with cq5/wem
DESCRIPTION
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.TRANSCRIPT
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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.
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
2
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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
3
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
What is HTML5?
4
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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/
5
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
What is HTML5?
Semantics & Markup § More semantic tags
(section, article, header, footer, nav, aside, hgroup, …) § New form types & Form !eld types on mobile § Markup for applications
(datalist, menu, command, meter, progress, …) § Link metadata a"ributes
(link[rel=alternate], link[rel=prefetch], a[rel=external], …) § Microdata (aka microformat) § A"ributes for Accessible Rich Internet Applications
CSS3 § Powerful selectors § Transitions & Animations § Webfonts, Text wrapping, Columns, Text stroke § Opacity, HSV colors, Gradients, Shadows, Re#ections,
Background enhancements, Rounded corners, Border Images, Flexible Box Model
6
Offline Storage § Web Storage § Web SQL Database § IndexedDB § Application Cache
Realtime / Communication § Web Workers § WebSocket § Noti!cations
File / Hardware Access § Native Drag & Drop § Desktop Drag-In (File API) § Desktop Drag-Out § FileSystem APIs § Geolocation § Device Orientation § Speech Input
Graphics / Multimedia § Audio + Video § Canvas 2D & 3D § Inline SVG
h"p://slides.html5rocks.com/ (use chrome)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
What is WEM?
7
§ Web Content Management § Mobile § Digital Asset Management § Marketing Campaigns § Social Collaboration § Targeting (Test&Target) § Work#ow § Multi-Site Manager § Tagging
§ Analytics & Optimization § Active Clustering
Web Content Management
Development Tools
Collaboration & Pro"les
Marketing Campaigns
Shared Framework:
Components, Work#ow, Mobile, Digital Assets, Multi-Site Manager, Tagging, Analytics & Optimization
Web Experience Management
OSGi Runtime
Content Repository
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hands-On!
8
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.
Hands-On!
9
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.
Featuring - Structured and unstructured data - Access Control - Search - Query (SQL, XPath) - Versioning - Clustering - Observation
Modern Application Stack Extensible and Modular
Interacting with any client runtime HTTP[S], WebDAV, CIFS SMB, CMIS Scripting (JSP, server-side JS, Scala, etc.)
Web Experience Management – Web Stack
10
Content Repository
Serv
er
Clie
nt
Java VM
OSGi Runtime
Web Experience Management
REST Web Framework + JSR 223 Scripting Host
JCR 2.0 API (JSR 170 + JSR 283)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hands-On
11
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.
Sling URL Decomposition
12
/geometrixx/en/products.teaser.html
sling:resourceTypegeometrixx/components/contentpage
the path de!nes the resource the selectors de!ne the rendition
/geometrixx/en/products.html
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hands-On
13
Exercise 1.4
Edit website markup
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Semantic Markup
14
Test your semantic markup h"p://gsnedders.html5.org/outliner
<div id=“header”>
<div id=“nav”>
<div class=“article”>
<div class=“section”> <div id=“sidebar”>
<div id=“footer”>
<header>
<nav>
<article>
<section> <sidebar>
<footer>
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hands-On
15
Exercise 2.1
Launch a WEM publish instance
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
WEM Instances and Deployment
16
Package Manager, Vault & SVN, Replication
* PROD
DEV
QA
Firewall Firewall
DataCenter2
DataCenter1
Internal Network DMZ
Author/Publish
WEM
Author WEM
Author WEM
Publish WEM
Publish WEM
Subversion, Build Server, Selenium, LDAP
Application Deployment *
App
licat
ion
Dep
loym
ent *
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hands-On
17
Exercise 2.2
Publish content changes
Exercise 2.3
Publish component changes
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Optimization
18
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.
Client Libraries
19
Client Libraries § We have various CSS & JS libraries
§ Express relations between client libs § dependencies
§ embed
§ Various optimizations § concatenated
§ mini!ed § gzipped through HTTP
§ ClientLib dependencies and embeds /libs/cq/ui/content/dumplibs.html
cq.jquery (Frameworks)
enterprise-dev.libs (Libraries & Site Design)
enterprise-dev.layout (Page Component A)
enterprise-dev.layout (Page Component B)
enterprise-dev.content (Content Component A)
enterprise-dev.content (Content Component B)
enterprise-dev.all (Publish ClientLib)
categories
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Client Libraries
20
Frameworks
Site-speci!c Libraries
Component A
Component B
Component C
Publish ClientLib
/
etc
clientlibs
designs
site
apps
site
components
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hands-On
21
Exercise 4
Add a Caching Layer § HTML Caching § Optimize the HTTP requests
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
What is REST?
22
§ REST is a term coined by Roy T. Fielding in his PhD dissertation to describe an architecture style of network systems.
§ Describes desired Web architecture § %e Web is an example of REST system
§ Stateless § Cacheable
Client Server
h"p://domain/path/company.html
Our company was founded in 545 BC by Pythagoras of
Samos. Since then […]
company.html
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hands-On
23
Exercise 4.2
Enable HTTP gzip compression
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
1. Uncomment line 87 of h"pd.conf LoadModule deflate_module libexec/apache2/mod_deflate.so
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hands-On
24
Exercise 4.2
Enable HTTP gzip compression
2. h"p://bit.ly/h"p-cache ExpiresActive On ExpiresDefault "access plus 1 month” FileETag None AddDefaultCharset utf-8
1. Uncomment line 92 of h"pd.conf LoadModule expires_module libexec/apache2/mod_expires.so
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
WEM Deployment – Delivery Setup
25
Author WEM
CDN*
Load Balancer
Dispatcher
Dispatcher
Visitor Traffic
Publish WEM
Cache Invalidation
Publish WEM
Content Delivery Network * Delivery App
Cache Invalidation
Visitor Traffic
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 26