Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
APACHE SLING & FRIENDS TECH MEETUP 
BERLIN, 22-24 SEPTEMBER 2014 
Dynamic Components using SPA Concepts 
Andon Sikavica, B...
Dynamic Components 
adaptTo() 2014 2
Dynamic vs Static Components 
Initial and form-based components 
take big chunk of the statics 
We spend more than 90% of ...
Dynamic Component Development 
 Placeholder for dynamic component in dispatcher 
 think about what you will have in the ...
Server Side Includes 
Browser Dispatcher AEM 
GET Page 
return complete Page 
<!--#include virtual= 
“${c.resourcePath}.dy...
AJAX 
Browser Dispatcher AEM 
GET Page 
return Page with Placeholders 
GET dynamic component HTML 
$.ajax({ 
url: '${c.res...
Summary 
 Sling Concepts 
 component-path 
 selectors 
 sling:resourceSuperType 
 Aspect-Oriented Solution 
 Sling D...
What if… 
 … you have high number of dynamic components on a single 
page? 
 … your components need to communicate betwe...
Why were the usual approaches Tricky? 
SSI was meant to be used with page 
reloads 
AJAX works with pre-loaded Markup from...
Single Page Application 
adaptTo() 2014 10
SPA Component 
 Rendering Script (JSP) 
 Cached, Inherited 
 Module (JS) 
 Cached, Composition 
 Controller 
 Handle...
Page Load 
Browser Dispatcher AEM 
GET Page 
return Markup Skeleton 
POST for Dynamic Data 
return Dynamic Data as JSON 
S...
Technologies 
 jQuery 
 jQuery Template 
 GSON 
 NEBA (Spring MVC, AOP) 
adaptTo() 2014 13
Benefits 
 Perceived User Experience 
 Separation of front- and back-end 
engineering 
 easier development 
 prototype...
Showcase 
adaptTo() 2014 15
Rendering Script 
<script type=“text/html” 
id=“scheduleTableTemplate”> 
<tr> 
<td data-content=“talkName”></td> 
<td data...
Module 
aemdemo.persondetailstable = (function($, paging, sort){ 
var params; 
function init (dataUrl){ 
params.dataUrl = ...
Controller 
@Controller 
public class ScheduleTableController { 
@RequestMapping(value = "/scheduletable/getresult", 
prod...
Identify and Control POSTs 
 Add Header 
$.ajaxPrefilter(function (options, originalOptions, jqXHR) { 
jqXHR.setRequestHe...
Demo Project 
https://github.com/andon/spademo 
adaptTo() 2014 20
Questions 
adaptTo() 2014 21
Thank You! 
adaptTo() 2014 22
Próxima SlideShare
Cargando en…5
×

Dynamic components using SPA concepts in AEM

2.027 visualizaciones

Publicado el

A presentation given at the adaptTo() 2014 tech meetup on the topic of developing dynamic AEM components using concepts borrowed from the SPA philosophy.

Publicado en: Software
  • Sé el primero en comentar

Dynamic components using SPA concepts in AEM

  1. 1. APACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana Popovska - Netcetera
  2. 2. Dynamic Components adaptTo() 2014 2
  3. 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. 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. 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. 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. 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. 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. 9. Why were the usual approaches Tricky? SSI was meant to be used with page reloads AJAX works with pre-loaded Markup from server adaptTo() 2014 - https://www.flickr.com/photos/15708236@N07/2754478731 photo by jphilipg 9
  10. 10. Single Page Application adaptTo() 2014 10
  11. 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. 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. 13. Technologies  jQuery  jQuery Template  GSON  NEBA (Spring MVC, AOP) adaptTo() 2014 13
  14. 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. 15. Showcase adaptTo() 2014 15
  16. 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. 17. Module aemdemo.persondetailstable = (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. 18. Controller @Controller public class ScheduleTableController { @RequestMapping(value = "/scheduletable/getresult", produces = {"application/json; charset=UTF-8" }, method = POST) @ResponseBody public String getResult(@RequestParam int pageNumber) { ConferenceDay conferenceDay = getDataFromService(); return serializeData(conferenceDay); } adaptTo() 2014 18 }
  19. 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() && … ) { // ups } adaptTo() 2014 19
  20. 20. Demo Project https://github.com/andon/spademo adaptTo() 2014 20
  21. 21. Questions adaptTo() 2014 21
  22. 22. Thank You! adaptTo() 2014 22

×