Upload
gabriel-walt
View
5.061
Download
1
Embed Size (px)
DESCRIPTION
OUTDATED: please have a look at following newer presentation on the same topic: http://www.slideshare.net/GabrielWalt/component-development Don’t mess with your view! An HTML Template Library for: - Clean component development with a clear separation of concerns. - Valid and readable markup through HTML5 annotation. - Security with HTML context aware XSS protection.
Citation preview
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
New Component Model
adaptTo() 2013 2
HTML Template Library
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
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
Architecture
adaptTo() 2013 5
JSP
Markup Annotation
adaptTo() 2013 6
HTML
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>
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>
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>
Sightly Core Engine
adaptTo() 2013 10
HTML file Lexxer Compiler
Language Compiler callbacks
Java
PHP
JavaScript
Node.js
Ruby
ASP.NET
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)
adaptTo() 2013 12
Thanks!