Dynamic components display content dependable on context, hence they cannot be cached. Out of the box, Adobe Experience Manager doesn't give us many options for granular caching on a component level. When faced with this problem, we usually resort to developing components that are leveraging Server-Side Includes or AJAX to get the HTML with dynamic data. As an alternative solution, we have also developed dynamic components that use Single Page Application concepts, by using templates and JSON-responses, to provide the same dynamic behavior. In this presentation we will cover all of the dynamic components types, compare the benefits and drawbacks of each, and state the use-cases where each can be effectively applied. We will take a deeper look at the dynamic components done with SPA concepts, as they are rarity in the AEM world, and also provide a walk-through of the technologies used, how some common problems were solved, as well as the benefits that have been gained by their usage.

1. APACHE SLING & FRIENDS TECH MEETUP
BERLIN, 22-24 SEPTEMBER 2014
Dynamic Components using SPA Concepts
Andon Sikavica, Bojana Popovska

2. Dynamic Components
adaptTo() 2014 2

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

7. Summary
 Sling Concepts
 component-path
 selectors
 sling:resourceSuperType
 Aspect-Oriented Solution
 Sling Dynamic Include
adaptTo() 2014 – https://www.flickr.com/photos/fabrisalvetti/489593502 image by Fabrizio Salvetti 7

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

10. Single Page Application
adaptTo() 2014 10

11. SPA Component
 Rendering Script (JSP)
 Cached, Inherited
 Module (JS)
 Cached, Composition
 Controller
 Handles all dynamic calls
Abstract
Table
Paging
Sorting
adaptTo() 2014 11

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

13. Technologies
 jQuery
 jQuery loadTemplate
 GSON
 Spring (MVC, AOP)
adaptTo() 2014 13

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

15. Showcase
adaptTo() 2014 15

16. Rendering Script
<script type=“text/html”
id=“scheduleTableTemplate”>
<tr>
<td data-content=“talkName”></td>
<td data-content =“time”></td>
</tr>
Static
Markup
</table> Template
</script>
class=“scheduleTable”>
<th>
<td>Talk Name</td>
<td>Time</td>
</th>
<tbody></tbody>
$(‘.scheduleTable tbody’).loadTemplate(
$(‘#scheduleTableTemplate’),
data.talks);
<table
<script type=“text/javascript”>
aemdemo.scheduletable.init(
‘http://localhost:4502/bin/mvc.do/scheduletable/getresult’);
</script>
Inject data
Initialization script
adaptTo() 2014 16

17. Module
aemdemo.schedulestable = (function($, paging, sort){
var params;
function init (dataUrl){
params.dataUrl = dataUrl;
}
function getDataByPage (pageNumber) {
$.ajax {
data : {. . .},
url : params.dataUrl,
success : function (data){paging.update (data)}
}
}
return {
init:init
}
}(jQuery, aemdemo.paging, aemdemo.sort));
adaptTo() 2014 17

18. Controller
@Controller
public class ScheduleTableController {
@RequestMapping(value = "/scheduletable/getresult",
produces = {"application/json" }, method = POST)
@ResponseBody
public String getResult(@RequestParam int pageNumber) {
ConferenceDay conferenceDay = getDataFromService();
return serializeData(conferenceDay);
}
adaptTo() 2014 18
}

19. Identify and Control POSTs
 Add Header
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
jqXHR.setRequestHeader('X-Request-Source', ‘spa-ajax');
});
 Check Handler
Servlet servlet = servletResolver.resolveServlet(slingRequest);
if (“SlingPostServlet”.equals(servlet.getClass().getSimpleName()
&& isDynamicRequest() ) {
// ups
}
adaptTo() 2014 19

20. Demo Project
http://bit.ly/aemspademo
adaptTo() 2014 20

21. Questions
adaptTo() 2014 21

22. Thank You!
adaptTo() 2014 22