Sightly Component Development
@GabrielWalt, Product Manager
@RaduCotescu, Product Developer
Adobe Experience Manager
Development Workflow
Web Developer
Design
HTML/CSS
– HTML
– CSS/JS
Inefficiency
Static HTML being
handed over… Component
Java Developer
– Java/OSGi
Business
– Business logic
Logic
Adobe Experience Manager
Development Workflow
Design
HTML/CSS
Web Developer
– HTML
– CSS/JS
Component
Efficient
APIs to OSGi bundles Java Developer
Business
Logic
– Java/OSGi
– Business logic
Adobe Experience Manager
Development Workflow
Can be edited by Web Developer:
✕ JSP (HTML markup & component logic)
Component
✓ Client Libraries (CSS & JS)
Adobe Experience Manager
Development Workflow
Can be edited by Web Developer:
✓ HTML markup (Sightly template)
✓ Component logic (server-side JS)
✕ JSP (HTML markup & component logic)
Component
✓ Client Libraries (CSS & JS)
Adobe Experience Manager
Adobe Experience Manager
Sightly
Lightweight
No dependencies, fast and lean
Secure
Automatic contextual XSS protection and URL externalization
Code-less
Enforce separation of concerns between logic and markup
Powerful
Straight-forward API for logic, allowing to do virtually anything
Intuitive
Clear, simple & restricted feature set
Adobe Experience Manager
Sightly VS JSP
Sightly
<a href="${properties.link || '#'}" title="${properties.jcr:title}">
${properties.jcr:description}
</a>
JSP
<a href="<%= xssAPI.getValidHref(properties.get("link", "#")) %>" <%
String title = properties.get("jcr:title", "");
if (title.length() > 0) {
%>title="<%= xssAPI.encodeForHTMLAttr(title) %>"<%
} %>>
<%= xssAPI.encodeForHTML(properties.get("jcr:description", "")) %>
</a>
Adobe Experience Manager
Building Blocks
Expression Language
${properties.myProperty}
Block Statements
<p data-sly-test="${isVisible}">${text}</p>
Use-API
<p data-sly-use.obj="script.js">${obj.text}</p>
Adobe Experience Manager
Expressions
Literals
${42}
${true}
${'Hello World'}
${[1, 2, 3]}
Variables
${myVar}
${properties.propName}
${properties.jcr:title}
${properties['my property']}
${properties[myVar]}
Adobe Experience Manager
Expression Operators
Logical operations
${!myVar}
${conditionOne || conditionTwo}
${conditionOne && conditionTwo}
${properties.jcr:title || conditionTwo}
Equality / Inequality (only for same types)
${varOne == varTwo} ${varOne != varTwo}
Comparison (only for integers)
${varOne < varTwo} ${varOne > varTwo}
${varOne <= varTwo} ${varOne >= varTwo}
Adobe Experience Manager
Expression Operators
Conditional
${myChoice ? varOne : varTwo}
Grouping
${varOne && (varTwo || varThree)}
Adobe Experience Manager
Expression Options
Everything after the @ is an option
${myVar @ optOne, optTwo}
${myVar @ optOne='value', optTwo=[1, 2, 3]}
Parametric expression, containing only options
${@ optOne='value', optTwo=[1, 2, 3]}
Adobe Experience Manager
Expression Options
String formatting
${'Page {0} of {1}' @ format=[current, total]}
Internationalization
${'Page' @ i18n}
${'Page' @ i18n, hint='Translation Hint'}
${'Page' @ i18n, source='user'}
${'Page' @ i18n, locale='en-US'}
Array Join
${['one', 'two'] @ join='; '}
Adobe Experience Manager
Display Context Option
Offers control over escaping and XSS protection
Allowing some HTML markup (will apply XSSAPI.filterHTML)
<div>${properties.jcr:description @ context='html'}</div>
Adding URI XSS protection to other fields than src or href
<p data-link="${link @ context='uri'}">text</p>
In script or style contexts, the context option is mandatory
<script>trackId="${id @ context='scriptString'}";</script>
Adobe Experience Manager
Use Statement
Initializes a helper object
<div data-sly-use.nav="navigation.js">${nav.foo}</div>
Output
<div>Hello World</div>
Adobe Experience Manager
Server-side JavaScript logic
<!--/* template.html */-->
<div data-sly-use.nav="navigation.js">${nav.foo}</div>
<!--/* navigation.js */-->
use(function () {
return {
foo: "Hello World"
};
});
Adobe Experience Manager
<!--/* template.html */-->
Java logic <div data-sly-use.nav="Navigation">${nav.foo}</div>
<!--/* Navigation.java */-->
package apps.site_name.component_name;
import com.adobe.cq.sightly.WCMUse;
public class Component extends WCMUse {
private String foo;
@Override
public void activate() throws Exception {
foo = "Hello World";
}
public String getFoo() {
return foo;
}
}
Adobe Experience Manager
Server-side Java-Script VS Java
Server-side JavaScript
– Can easily be edited by web developers
Java
– Fast We are working on improving
– Easy to debug that for server-side JavaScript
– Can be located in the component folder, or in an OSGi bundle
Adobe Experience Manager
Unwrap Statement
Removes the host element while retaining its content
<div data-sly-use.nav="navigation.js" data-sly-unwrap>
${nav.foo}</div>
Output
Hello World
Use unwrap with care, the template should correspond as much as
possible to the output.
Adobe Experience Manager
Text, Attr & Elem Statements
Replaces the content, attribute or element name
<div class="active" title="Lorem ipsum"
data-sly-element="${elementName}"
data-sly-attribute.title="${className}"
data-sly-text="${content}">Lorem ipsum</div>
Output
<span class="active" title="Hi!">Hello World</span>
Use element with care, it can make the template confusing when the
element name gets changed.
Adobe Experience Manager
Test Statement
Conditionally removes the element and it's content
<p data-sly-test="${properties.showText}">text</p>
<p data-sly-test.abc="${a || b || c}">is true</p>
<p data-sly-test="${!abc}">or not</p>
Output
<p>text</p>
<p>is true</p>
Adobe Experience Manager
List Statement
Repeats the content for each enumerable property
<ol data-sly-list="${currentPage.listChildren}">
<li>${item.title}</li>
</ol>
Output
<ol>
<li>Triangle Page</li>
<li>Square Page</li>
</ol>
Adobe Experience Manager
Resource Statement
Includes the result of the indicated resource
<article data-sly-resource="path/to/resource"></article>
Output
<article><!-- Result of the rendered resource --></article>
Adobe Experience Manager
Resource Statement Options
Manipulating selectors (selectors, addSelectors, removeSelectors)
<article data-sly-resource="${'path/to/resource' @
selectors='mobile'}"></article>
Overriding the resourceType
<article data-sly-resource="${'path/to/resource' @
resourceType='my/resource/type'}"></article>
Changing WCM mode
<article data-sly-resource="${'path/to/resource' @
wcmmode='disabled'}"></article>
Adobe Experience Manager
Include Statement
Includes the rendering of the indicated template (Sightly, JSP, ESP, etc.)
<section data-sly-include="path/to/template.html"></section>
Output
<section><!-- Result of the rendered resource --></section>
Adobe Experience Manager
Template & Call Statement
<!--/* template.html */-->
<template data-sly-template.one="${@ class, text}">
<span class="${class}">${text}</span>
</template>
<!--/* other-file.html */-->
<div data-sly-use.tmpl="template.html"
data-sly-call="${tmpl.one @ class='example',
text='Hi!'}"></div>
Output
<div><span class="example">Hi!</span></div>
Adobe Experience Manager
Sightly FAQ
Why didn’t you choose an existing template language?
– We want it to be coding language agnostic (also client/server agnostic)
– We want it to have just the right feature set (with a strong focus on security)
– We want it to naturally lead developers towards best practice
Do I need to migrate my components to Sightly?
– No, we want Sightly to help you to be more efficient on the new components you build,
not loose time on migrating components that already work.
Can I still use JSP, or will JSP get deprecated?
– Sightly and JSP can very well be mixed, even within the same component
– Today, we have no plan to deprecate JSP-based components
Adobe Experience Manager
Development Workflow
Two developer roles
Web Developer
Component
Business
Java Developer
Logic
Adobe Experience Manager
Development Workflow
An IDE plugin for each developer role
Brackets plugin
!
– Sightly code completion & syntax highlighting
– Content nodes & properties manipulation
Eclipse plugin
!
– Content nodes & properties manipulation
– Bundle development & hot deployment
Adobe Experience Manager
IDE Sync
Work on file system + transparent sync & content editing
auto push
Brackets / Eclipse hot deploy Content
IDE Repository
manual pull
IDE works on
the File System
Version Control sync
File System
System (Git / Svn)
Adobe Experience Manager
Component Development
Cost
Design
Template Logic
Project
JSP
HTML/CSS JSP Java Management
Design
Template Logic
Project
~25%
Sightly
HTML/CSS Sightly HTML Use-API Management
Adobe Experience Manager
Resources
Documentation
http://dev.day.com/content/docs/en/aem/6-0/develop/sightly.html
Java Docs
http://docs.adobe.com/content/docs/en/aem/6-0/develop/ref/javadoc/index.html?com/adobe/
cq/sightly/WCMUse.html
Experience Delivers blog posts (http://experiencedelivers.adobe.com/)
– Sightly intro part 1
– Sightly intro part 2
– Sightly intro part 3
– Sightly intro part 4
– Sightly intro part 5: FAQ
Adobe Experience Manager
