APACHE SLING & FRIENDS TECH MEETUP
BERLIN, 23-25 SEPTEMBER 2013
Don’t mess with your view!
Gabriel Walt, Product Manager, ...
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
§  ...
CSS	
  &	
  JS	
  
ClientLib	
  
New Component Model
adaptTo() 2013 4
CQ	
  Component	
  
HTML	
  template	
  
Logic	
  Co...
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...
XSS & URL Magic
adaptTo() 2013 8
Example 1
<a href=“${resource.path}”>${resource.name}</a>
Results in:
<a href=“/content/g...
HTML Extension Model
adaptTo() 2013 9
Component 1
<h1>${properties.jcr:title}</h1>
<!-- several things done here… -->
<ul ...
Sightly Core Engine
adaptTo() 2013 10
HTML	
  file	
   Lexxer	
   Compiler	
  
Language	
  
Compiler	
  
callbacks	
  
Java...
Why a new templating system
adaptTo() 2013 11
Main differentiators
§  Automatic state-of-the-art XSS protection
§  Well ...
adaptTo() 2013 12
Thanks!
Upcoming SlideShare
Loading in...5
×

adaptTo() 2013 – AEM Templating with Sightly (concept name)

5,519

Published on

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.

Published in: Technology, Education
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,519
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
102
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

adaptTo() 2013 – AEM Templating with Sightly (concept name)

  1. 1. 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
  2. 2. New Component Model adaptTo() 2013 2 HTML Template Library
  3. 3. 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
  4. 4. 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  
  5. 5. Architecture adaptTo() 2013 5 JSP
  6. 6. Markup Annotation adaptTo() 2013 6 HTML
  7. 7. 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>
  8. 8. 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=“”>&lt;script&gt;alert()&lt;/script&gt;</a> Example 3 ${'<p>Some HTML is ok</p> <script>alert()</script>' @xss='html'} Results in: <p>Some HTML is ok</p>
  9. 9. 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>
  10. 10. Sightly Core Engine adaptTo() 2013 10 HTML  file   Lexxer   Compiler   Language   Compiler   callbacks   Java   PHP   JavaScript   Node.js   Ruby   ASP.NET  
  11. 11. 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)
  12. 12. adaptTo() 2013 12 Thanks!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×