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&#x3a;content</a>

Example 2

<a href=“${'javascript:history.back()'}”>${'<script>alert()</script>'}</a>

Results in:

<a href=“”>&lt;script&gt;alert&#x28;&#x29;&lt;&#x2f;script&gt;</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!