mocking cq5 html

Download Mocking CQ5 HTML

Post on 24-Jan-2015

1.542 views

Category:

Business

8 download

Embed Size (px)

DESCRIPTION

Presentation “Mocking CQ5 HTML - An efficient way to deliver CQ5-compatible designs“ by Jan Kuźniak at CQCON2013 in Basel on 19 and 20 June 2013.

TRANSCRIPT

  • 1. 2013 Cognifide Limited. In commercial confidence only.Mocking CQ5 HTMLAn efficient way to deliverCQ5-compatible designsby Jan Kuniak

2. 2013 Cognifide Limited. In commercial confidence only.Agenda To Mock, Or Not To Mock? How To Mock CQ5? Demo 3. 2013 Cognifide Limited. In commercial confidence only. 2013 Cognifide Limited. In commercial confidence only.To MockOrNot To Mock? 4. 2013 Cognifide Limited. In commercial confidence only. 5. 2013 Cognifide Limited. In commercial confidence only. 6. 2013 Cognifide Limited. In commercial confidence only.Why does it happen?Creative Technical Working with external creative agency That didnt hear about CQ before Customer has completed a design before engagingdevelopers Replatforming existing sites UI developers are unable to test their code, until integration isfinished 7. 2013 Cognifide Limited. In commercial confidence only.CQ5-Compatible HTMLKathy Sierra and Bert BatesSun Certified Programmer & Developerfor Java 2 Study Guide (2003)Code as if the developerthat integrates yourmarkup is a homicidalmaniac who knows whereyou live. 8. 2013 Cognifide Limited. In commercial confidence only. 9. 2013 Cognifide Limited. In commercial confidence only.Its your fault CQ developers couldnt be bothered with CSS And if they could they would mess it up anyway And its a waste of their time Why do I have to fix UI devs bugs? UI team couldnt be bothered with JSP And if they could they would mess it up anyway And its a waste of their time And integration with CQ5 changed their markup Its not my fault, they broke it I cannot reproduce your issues 10. 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 11. 2013 Cognifide Limited. In commercial confidence only. 2013 Cognifide Limited. In commercial confidence only.How To MockCQ5 Markup 12. 2013 Cognifide Limited. In commercial confidence only.CQ5 HTML Mocks 101 Get your plain HTML page Add WCM markup in the and around components Add WCM JavaScript and CSS to your project Voil! Well, almost WCM JavaScript makes some requests youll have to mock 13. 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 () Component start / end Paragraph system start / end 14. 2013 Cognifide Limited. In commercial confidence only. 15. 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 components 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 16. 2013 Cognifide Limited. In commercial confidence only. 17. 2013 Cognifide Limited. In commercial confidence only. 2013 Cognifide Limited. In commercial confidence only.Thank you!