This document summarizes a presentation on developing dynamic components in AEM using single-page application concepts. It discusses how traditional approaches to dynamic components can be tricky when components need to communicate and update frequently. An SPA approach treats each component as a module that handles its own data fetching and updating independently via AJAX calls. On page load, the server returns only static markup and components get dynamic data by making POST requests to a controller returning JSON. This allows for perceived faster interactions and easier front-end/back-end separation compared to full page reloads. Examples demonstrate rendering templates, initialization scripts, and a sample controller class to retrieve and return dynamic component data.
3. Dynamic vs Static Components
Initial and form-based
components take big chunk
of the statics
We spend more than 90%
of the time developing
dynamics
Count of Dynamic vs Statics
(in hundreds)
Dynamic Static
adaptTo() 2014 3
4. Dynamic Component Development
Placeholder for dynamic component in dispatcher
think about what you will have in the dispatcher
Request dynamic component via URL
/content/page/_jcr_content/par/comp.dynamic.html
Instruct dispatcher not to cache based on selector
#/0042 { /type "deny" /glob "GET *.dynamic.html*" }
adaptTo() 2014 4
5. Server Side Includes
Browser Dispatcher AEM
GET Page
return complete Page
<!--#include virtual=
“${c.resourcePath}.dynamic.html}”-->
GET dynamic component HTML
return component HTML
with dynamic data
Generate
HTML
adaptTo() 2014 5
6. AJAX
Browser Dispatcher AEM
GET Page
return Page with
Placeholders
GET dynamic component HTML
$.ajax({
url: '${c.resourcePath}.dynamic.html',
success: function(data) {
$(“#${c.identifier}").replaceWith(data);
}});
return component HTML
with dynamic data
Generate
HTML
Create
Markup
adaptTo() 2014 6
8. What if…
… you have high number of dynamic
components on a single page?
… your components need to communicate
between themselves and update their state?
… you need to do notifications for the user?
…basically need SPA
adaptTo() 2014 8
9. Why were the usual approaches Tricky?
They were meant to be used
with page reloads
They work with pre-loaded
Markup from server
adaptTo() 2014 - https://www.flickr.com/photos/15708236@N07/2754478731 photo by jphilipg 9
12. Page Load
Browser Dispatcher AEM
GET Page
return Markup Skeleton
POST for Dynamic Data
return Dynamic Data as JSON
Serialize
Data as
JSON
Render HTML
using Template
with dynamic data
adaptTo() 2014 12
14. Benefits
Perceived User Experience
Separation of front- and
back-end engineering
easier development
prototype
mocked data
adaptTo() 2014 - https://www.flickr.com/photos/mishism/5370473007 photo by Mish Sukharev 14