Dynamic Components using Single-Page-Application Concepts in AEM/CQ
6 likes5,246 views
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.
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
- 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