A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy
-
Upload
aemhub2014 -
Category
Technology
-
view
293 -
download
1
description
Transcript of A Modern Approach to Mobile Friendly Widget Development in CQ by Andy Czerwinski and Deepan Aiyasamy
A Modern Approach to Mobile Friendly Widget Development in CQAndy CzerwinskiBritish Gas
Deepan AiyasamyCognizant Technology Solutions
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
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
Components & Widgets in CQ
Widget essentials
Data Presentation
BehaviourCommunication
Frameworks
Presentation
•Merge adaptive presentation and author generated content by generating underscore templates dynamically on the server
•Dependency management using clientlibs
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
Communication
•Event based communication model for interaction with other widgets
Appointment_slot_selected
Filter_enabled
Refresh_appointment_slots
Data
Client-side
API Gateway
Get
SubscribeGet Restful/data Get SOAP Response XML
ResponseJSON
PopulateModel
Retrieve Model
Live Demo
Thank You