dynamic components using spa concepts andon sikavica ... fileapache sling & friends tech meetup...
TRANSCRIPT
![Page 1: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/1.jpg)
APACHE SLING & FRIENDS TECH MEETUPBERLIN, 22-24 SEPTEMBER 2014
Dynamic Components using SPA ConceptsAndon Sikavica, Bojana Popovska
![Page 2: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/2.jpg)
adaptTo() 2014 2
Dynamic Components
![Page 3: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/3.jpg)
Dynamic vs Static Components
adaptTo() 2014 3
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
![Page 4: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/4.jpg)
Dynamic Component Development
adaptTo() 2014 4
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*" }
![Page 5: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/5.jpg)
Server Side Includes
adaptTo() 2014 5
Browser Dispatcher AEM
GET Page
return complete Page
GET dynamic component HTML
return component HTML with dynamic data
Generate HTML
<!--#include virtual=“${c.resourcePath}.dynamic.html}”-->
![Page 6: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/6.jpg)
AJAX
adaptTo() 2014 6
Browser Dispatcher AEM
GET Page
return Page with Placeholders
GET dynamic component HTML
return component HTML with dynamic data
Generate HTML
Create Markup
$.ajax({url: '${c.resourcePath}.dynamic.html',success: function(data) {$(“#${c.identifier}").replaceWith(data);
}});
![Page 7: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/7.jpg)
Summary
adaptTo() 2014 – https://www.flickr.com/photos/fabrisalvetti/489593502 image by Fabrizio Salvetti 7
Sling Concepts component-path selectors sling:resourceSuperType
Aspect-Oriented Solution Sling Dynamic Include
![Page 8: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/8.jpg)
What if…
adaptTo() 2014 8
… 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
![Page 9: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/9.jpg)
Why were the usual approaches Tricky?
adaptTo() 2014 - https://www.flickr.com/photos/15708236@N07/2754478731 photo by jphilipg 9
They were meant to be used with page reloads
They work with pre-loaded Markup from server
![Page 10: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/10.jpg)
adaptTo() 2014 10
Single Page Application
![Page 11: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/11.jpg)
SPA Component
adaptTo() 2014 11
Rendering Script (JSP) Cached, Inherited
Module (JS) Cached, Composition
Controller Handles all dynamic calls
Table
Abstract
Paging
Sorting
![Page 12: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/12.jpg)
Page Load
adaptTo() 2014 12
Browser Dispatcher AEM
GET Page
return Markup Skeleton
POST for Dynamic Data
return Dynamic Data as JSONSerialize Data as JSON
Render HTML using Template
with dynamic data
![Page 13: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/13.jpg)
Technologies
adaptTo() 2014 13
jQuery jQuery loadTemplate GSON Spring (MVC, AOP)
![Page 14: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/14.jpg)
Benefits
adaptTo() 2014 - https://www.flickr.com/photos/mishism/5370473007 photo by Mish Sukharev 14
Perceived User Experience Separation of front- and
back-end engineering easier development prototype mocked data
![Page 15: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/15.jpg)
adaptTo() 2014 15
Showcase
![Page 16: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/16.jpg)
Rendering Script
adaptTo() 2014 16
<script type=“text/html”
id=“scheduleTableTemplate”>
<tr>
<td data-content=“talkName”></td>
<td data-content =“time”></td>
</tr>
</script>
<script type=“text/javascript”>
aemdemo.scheduletable.init(
‘http://localhost:4502/bin/mvc.do/scheduletable/getresult’);
</script>
$(‘.scheduleTable tbody’).loadTemplate(
$(‘#scheduleTableTemplate’),
data.talks);
<table
class=“scheduleTable”>
<th>
<td>Talk Name</td>
<td>Time</td>
</th>
<tbody></tbody>
</table>Template
Static Markup
Initialization script
Inject data
![Page 17: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/17.jpg)
Module
adaptTo() 2014 17
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));
![Page 18: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/18.jpg)
Controller
adaptTo() 2014 18
@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);
}
}
![Page 19: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/19.jpg)
Identify and Control POSTs
adaptTo() 2014 19
Add Header$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
jqXHR.setRequestHeader('X-Request-Source', ‘spa-ajax');
});
Check HandlerServlet servlet = servletResolver.resolveServlet(slingRequest);
if (“SlingPostServlet”.equals(servlet.getClass().getSimpleName()
&& isDynamicRequest() ) {
// ups
}
![Page 20: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/20.jpg)
adaptTo() 2014 20
http://bit.ly/aemspademo
Demo Project
![Page 21: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/21.jpg)
Questions
adaptTo() 2014 21
![Page 22: Dynamic Components using SPA Concepts Andon Sikavica ... fileAPACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 SEPTEMBER 2014 Dynamic Components using SPA Concepts Andon Sikavica, Bojana](https://reader030.vdocuments.us/reader030/viewer/2022040715/5e1ed53e048e21398815650c/html5/thumbnails/22.jpg)
Thank You!
adaptTo() 2014 22