Post on 24-Jan-2015
description
© 2013 Cognifide Limited. In commercial confidence only.
Mocking CQ5 HTML An efficient way to deliver CQ5-compatible designs
by Jan Kuźniak
© 2013 Cognifide Limited. In commercial confidence only.
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?
© 2013 Cognifide Limited. In commercial confidence only.
© 2013 Cognifide Limited. In commercial confidence only.
© 2013 Cognifide Limited. In commercial confidence only.
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
© 2013 Cognifide Limited. In commercial confidence only.
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.”
© 2013 Cognifide Limited. In commercial confidence only.
© 2013 Cognifide Limited. In commercial confidence only.
„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”
© 2013 Cognifide Limited. In commercial confidence only.
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
© 2013 Cognifide Limited. In commercial confidence only. © 2013 Cognifide Limited. In commercial confidence only.
How To Mock CQ5 Markup
© 2013 Cognifide Limited. In commercial confidence only.
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
© 2013 Cognifide Limited. In commercial confidence only.
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
© 2013 Cognifide Limited. In commercial confidence only.
© 2013 Cognifide Limited. In commercial confidence only.
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
© 2013 Cognifide Limited. In commercial confidence only.
© 2013 Cognifide Limited. In commercial confidence only. © 2013 Cognifide Limited. In commercial confidence only.
Thank you!