adaptTo() 2013 – AEM Templating with Sightly (concept name)
-
Upload
gabriel-walt -
Category
Technology
-
view
5.061 -
download
1
description
Transcript of adaptTo() 2013 – AEM Templating with Sightly (concept name)
![Page 1: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/1.jpg)
APACHE SLING & FRIENDS TECH MEETUP BERLIN, 23-25 SEPTEMBER 2013
Don’t mess with your view! Gabriel Walt, Product Manager, AEM
Senol Tas, Sr. Computer Scientist, A@A Honwai Wong, Developer, adobe.com
![Page 2: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/2.jpg)
New Component Model
adaptTo() 2013 2
HTML Template Library
![Page 3: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/3.jpg)
New Component Model
adaptTo() 2013 3
Make AEM projects more efficient § Valid HTML5
§ Intuitive and easy to learn § Secure by default (built-in XSS protection) § Enable front-end web developers to build
components for AEM § Simplify and enforce separation of
concerns between logic and markup
![Page 4: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/4.jpg)
CSS & JS
ClientLib
New Component Model
adaptTo() 2013 4
CQ Component
HTML template
Logic Code
CSS & JS
ClientLib
CQ Component sling:resourceSuperType
HTML template extends
Logic Code extends
![Page 5: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/5.jpg)
Architecture
adaptTo() 2013 5
JSP
![Page 6: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/6.jpg)
Markup Annotation
adaptTo() 2013 6
HTML
![Page 7: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/7.jpg)
Building Blocks
adaptTo() 2013 7
Expression
<h1>${properties.jcr:title}</h1>
<h1>${“My title” @i18n}</h1>
<h1>${properties.richText @xss=filterHTML}</h1>
Block Elements
<p data-htl-test=“${wcm.edit}”>Edit mode…</p>
<ul data-htl-list=“${currentPage.listChildren}”><li>${item.name}</li></ul>
<section data-htl-include=“myTemplate.html”/>
Use-API
<div data-htl-use-foo=“MyPojo”><h1>${foo.title}</h1></div>
<div data-htl-use-bar=“classPath.MyClass”><h1>${bar.title}</h1></div>
![Page 8: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/8.jpg)
XSS & URL Magic
adaptTo() 2013 8
Example 1
<a href=“${resource.path}”>${resource.name}</a>
Results in:
<a href=“/content/geometrixx/_jcr_content.html”>jcr:content</a>
Example 2
<a href=“${'javascript:history.back()'}”>${'<script>alert()</script>'}</a>
Results in:
<a href=“”><script>alert()</script></a>
Example 3
${'<p>Some HTML is ok</p> <script>alert()</script>' @xss='html'}
Results in:
<p>Some HTML is ok</p>
![Page 9: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/9.jpg)
HTML Extension Model
adaptTo() 2013 9
Component 1
<h1>${properties.jcr:title}</h1>
<!-- several things done here… -->
<ul data-htl-list=“${currentPage.listChildren}”>
<li data-htl-id=“item”>${item.properties.jcr:title}</li>
</ul>
Component 2
<template data-htl-extend=“component1”> <li data-htl-id=“item”>
<a href=“${item.path}.html”>${item.properties.jcr:title}</a>
</li>
</template>
![Page 10: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/10.jpg)
Sightly Core Engine
adaptTo() 2013 10
HTML file Lexxer Compiler
Language Compiler callbacks
Java
PHP
JavaScript
Node.js
Ruby
ASP.NET
![Page 11: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/11.jpg)
Why a new templating system
adaptTo() 2013 11
Main differentiators § Automatic state-of-the-art XSS protection
§ Well integrated in the Sling component model § No need to write code for simple output
§ Programming language independent
§ Intended to be open source (Apache License)
![Page 12: adaptTo() 2013 – AEM Templating with Sightly (concept name)](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bbca9b4c90530298b4d32/html5/thumbnails/12.jpg)
adaptTo() 2013 12
Thanks!