a modern approach to mobile friendly widget development in cq by andy czerwinski and deepan aiyasamy
DESCRIPTION
TRANSCRIPT
![Page 1: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/1.jpg)
A Modern Approach to Mobile Friendly Widget Development in CQAndy CzerwinskiBritish Gas
Deepan AiyasamyCognizant Technology Solutions
![Page 2: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/2.jpg)
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
![Page 3: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/3.jpg)
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
![Page 4: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/4.jpg)
Components & Widgets in CQ
![Page 5: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/5.jpg)
Widget essentials
Data Presentation
BehaviourCommunication
![Page 6: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/6.jpg)
Frameworks
![Page 7: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/7.jpg)
Presentation
•Merge adaptive presentation and author generated content by generating underscore templates dynamically on the server
•Dependency management using clientlibs
![Page 8: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/8.jpg)
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
![Page 9: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/9.jpg)
Communication
•Event based communication model for interaction with other widgets
Appointment_slot_selected
Filter_enabled
Refresh_appointment_slots
![Page 10: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/10.jpg)
Data
Client-side
API Gateway
Get
SubscribeGet Restful/data Get SOAP Response XML
ResponseJSON
PopulateModel
Retrieve Model
![Page 11: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/11.jpg)
Live Demo
![Page 12: A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy](https://reader033.vdocuments.net/reader033/viewer/2022051816/54713c7bb4af9fb40a8b4b23/html5/thumbnails/12.jpg)
Thank You