Mocking CQ5 HTML

© 2013 Cognifide Limited. In commercial confidence only.

Mocking CQ5 HTML An efficient way to deliver CQ5-compatible designs

by Jan Kuźniak


Agenda

• To Mock, Or Not To Mock?

• How To Mock CQ5?

• Demo

© 2013 Cognifide Limited. In commercial confidence only. © 2013 Cognifide Limited. In commercial confidence only.

To Mock Or Not To Mock?


Why does it happen?

Creative ≠ Technical • Working with external creative agency

− That didn’t hear about CQ before

• Customer has completed a design before engaging

developers

• Replatforming existing sites

• UI developers are unable to test their code, until integration is

finished


CQ5-Compatible HTML

Kathy Sierra and Bert Bates

Sun Certified Programmer & Developer

for Java 2 Study Guide (2003)

“Code as if the developer

that integrates your

markup is a homicidal

maniac who knows where

you live.”


„It’s your fault”

• CQ developers couldn’t be bothered with CSS

− And if they could – they would mess it up anyway

− And it’s a waste of their time

− „Why do I have to fix UI dev’s bugs?”

• UI team couldn’t be bothered with JSP

− And if they could – they would mess it up anyway

− And it’s a waste of their time

− And integration with CQ5 changed their markup

− „It’s not my fault, they broke it”

− „I cannot reproduce your issues”


Solution

• Engage UI developers early in the project

− And teach them what „CQ5-compatible markup” means

• Test if a design is compatible with CQ5 before integration

− Mock CQ5 markup, classes and scripts

• Enable bug reproduction and collaboration


How To Mock CQ5 Markup


CQ5 HTML Mocks 101

• Get your plain HTML page

• Add WCM markup in the <head> and around components

− Add WCM JavaScript and CSS to your project

• Voilà!

− Well, almost

− WCM JavaScript makes some requests you’ll have to mock


HTML Mocks in practice

• Plain Apache HTTP Server

• WCM-specific files under /mock

− mod_redirect takes care of requests

• WCM decoration markup added using Server Side Includes

− WCM initialisation (<head>)

− Component start / end

− Paragraph system start / end


Where to go next?

• Collaborate your UI devs

− Share Git / SVN

− Pass CSS / JS ownership

• Build use cases / test cases

− UI devs provide a list of component’s variants

− CQ devs implement and demo exactly same variants

• Demo to customer using CQ HTML-mocks

− You can mock dialogs too!

− Keep it lightweight, keep it cheap


Thank you!

Mocking CQ5 HTML

Business

Transcript of Mocking CQ5 HTML