Optimizing HTML5 Sites with CQ5/WEM
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Optimizing HTML5 Sites with CQ5/WEM

on

  • 5,946 views

Slides of my hands-on lab at MAX 2011. ...

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.

Statistics

Views

Total Views
5,946
Views on SlideShare
5,918
Embed Views
28

Actions

Likes
5
Downloads
151
Comments
0

5 Embeds 28

http://paper.li 12
http://www.linkedin.com 11
http://a0.twimg.com 2
https://www.linkedin.com 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Optimizing HTML5 Sites with CQ5/WEM Presentation Transcript

  • 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 # Dont 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