optimizing html5 sites with cq5/wem

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

Upload: gabriel-walt

Post on 28-Nov-2014

6.064 views

Category:

Technology


1 download

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

Page 1: 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

Page 2: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 3: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 4: Optimizing HTML5 Sites with CQ5/WEM

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

What is HTML5?

4

Page 5: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 6: Optimizing HTML5 Sites with CQ5/WEM

© 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)

Page 7: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 8: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 9: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 10: Optimizing HTML5 Sites with CQ5/WEM

© 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)

Page 11: Optimizing HTML5 Sites with CQ5/WEM

© 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…

Page 12: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 13: Optimizing HTML5 Sites with CQ5/WEM

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

Hands-On

13

Exercise 1.4

Edit website markup

Page 14: Optimizing HTML5 Sites with CQ5/WEM

© 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>

Page 15: Optimizing HTML5 Sites with CQ5/WEM

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

Hands-On

15

Exercise 2.1

Launch a WEM publish instance

Page 16: Optimizing HTML5 Sites with CQ5/WEM

© 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 *

Page 17: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 18: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 19: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 20: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 21: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 22: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 23: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 24: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 25: Optimizing HTML5 Sites with CQ5/WEM

© 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

Page 26: Optimizing HTML5 Sites with CQ5/WEM

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