Download - Optimizing HTML5 Sites with CQ5/WEM
© 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