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


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


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


What is HTML5?

4


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


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)


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


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


Hands-On!

9

Exercise 1.2

Authoring web content with WEM

Logged-in as admin User: admin

Pass: admin


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)


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…


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


Hands-On

13

Exercise 1.4

Edit website markup


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>


Hands-On

15

Exercise 2.1

Launch a WEM publish instance


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 *


Hands-On

17

Exercise 2.2

Publish content changes

Exercise 2.3

Publish component changes


Optimization

18

Exercise 3

Optimize Front-End §  Merge CSS & JS §  Include JS at the bo"om of the HTML §  Minify CSS & JS


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


Client Libraries

20

Frameworks

Site-speci!c Libraries

Component A

Component B

Component C

Publish ClientLib

/

etc

clientlibs

designs

site

apps

site

components


Hands-On

21

Exercise 4

Add a Caching Layer §  HTML Caching §  Optimize the HTTP requests


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


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


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


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