A Modern Approach to Mobile Friendly
Widget Development in CQ
Andy Czerwinski
British Gas
Deepan Aiyasamy
Cognizant Techno...
Potted History of CQ in britishgas.co.uk
•Using CQ 5.4
•Implemented initial phase of development in 2011
•Hosts 600+ stati...
Widgets
•“In computing, a web widget is a software widget for the web. It's a
small application with limited functionality...
Components & Widgets in CQ
Widget essentials
Data Presentation
Behaviour
Communication
Frameworks
Presentation
•Merge adaptive presentation and author generated content by
generating underscore templates dynamically on t...
Behaviour
•Encapsulated into the jQuery widget specification providing
organization, lifecycle and instance management cap...
Communication
•Event based communication model for interaction with other
widgets
Appointment_slot_selected
Filter_enabled...
Data
Client-side API Gateway
Get
Subscribe
Get Restful
/data
Get SOAP Response XML
Response
JSON
Populate
Model
Retrieve
M...
Live Demo
Thank You
Upcoming SlideShare
Loading in …5
×

A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy

506 views
372 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
506
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy

  1. 1. A Modern Approach to Mobile Friendly Widget Development in CQ Andy Czerwinski British Gas Deepan Aiyasamy Cognizant Technology Solutions
  2. 2. Potted History of CQ in britishgas.co.uk •Using CQ 5.4 •Implemented initial phase of development in 2011 •Hosts 600+ static content pages •80+ “functional” journeys/pages •White labelled sites include www.sainsburysenergy.com and www.mobileenergy.co.uk •Completed a responsive retrofit in 2013 •Can’t migrate to new versions due to CQ CRX now an OSGi bundle
  3. 3. Widgets •“In computing, a web widget is a software widget for the web. It's a small application with limited functionality that can be installed and executed within a web page by an end user. A widget has the role of a transient or auxiliary application, meaning that it just occupies a portion of a webpage and does something useful with information fetched from other websites and displayed in place.” – Wikipedia •"a piece of software that is used on a page of a website to give the user changing information of a particular type in a small area of the computer screen" - Cambridge dictionary
  4. 4. Components & Widgets in CQ
  5. 5. Widget essentials Data Presentation Behaviour Communication
  6. 6. Frameworks
  7. 7. Presentation •Merge adaptive presentation and author generated content by generating underscore templates dynamically on the server •Dependency management using clientlibs
  8. 8. Behaviour •Encapsulated into the jQuery widget specification providing organization, lifecycle and instance management capabilities •Self contained and highly reusable •Lends itself naturally to communication with RESTful APIs
  9. 9. Communication •Event based communication model for interaction with other widgets Appointment_slot_selected Filter_enabled Refresh_appointment_slots
  10. 10. Data Client-side API Gateway Get Subscribe Get Restful /data Get SOAP Response XML Response JSON Populate Model Retrieve Model
  11. 11. Live Demo
  12. 12. Thank You

×