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