Sightly New Features vs JSP in AEM

In this tutorial, We are going to see what are the sightly new features vs jsp that has been introduced in AEM to optimize and increase the productivity of web developers. Below are the topics that are covered in this tutorial.

1. Advantages of using Sightly.
2. Difference between Sightly vs JSP.
3. What are the Building Blocks of Sightly.
4. What are Sightly Implicit Objects.
5. Sightly Plugin for Ecllipse and Brackets.
6. Component Development Sightly vs JSP.

Advantages of using Sightly
Below advantages of using Sightly make you to code sightly easier and faster :
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

Difference between Sightly vs JSP
Sightly Offers below advantages over JSP for better development in AEM :

• Protection against cross-site scripting injection.
• Easily development of AEM Projects by front-end developers.
• Flexible and powerful templating and logic binding features.
• Strong connection to Sling use case.
• Slightly only Supports HTML5.
• Using sightly components development becomes a part of Web Developer instead of a java developer.

• Need to write less code in Sightly thus productivity increases.
• Wider range of implicit objects as compared to JSP.

Comments in Sightly:
<b><!--/* I am a Sightly Comment */--></b>

Sightly Code:
<a href="${properties.link || '#'}" title="${properties.jcr:title}">;
${properties.jcr:description}
</a>
JSp Code:
<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>
Building Blocks of Sightly

Sightly Expression Language
${properties.myProperty}

Sightly Block Statements
<span data-sly-test="${isVisible}">${text}</span>

Sightly Use-API
<span data-sly-use.obj="script.js">${obj.text}</span>

Expression Operators in Sightly
Sightly 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}
Sightly Conditional Operator
${myChoice ? varOne : varTwo}

Sightly Grouping Operator
${varOne && (varTwo || varThree)}

Expression Options
Everything after the @ is a paameter
${myVar @ optOne, optTwo}
${myVar @ optOne='value', optTwo=[1, 2, 3]}
Sightly String formatting (Concatenation)
String concatenation can be done in sightly using @ format
<div
data-sly-test.concat="${ 'This is page {0}, with title {1}' @
format=[currentPage.name,currentPage.title]}">
${concat}
</div>
Internationalization in Sightly
${'Page' @ i18n}
${'Page' @ i18n, hint='Translation Hint'}
${'Page' @ i18n, source='user'}
${'Page' @ i18n, locale='en-US'}
Array Join in Sightly
${['one', 'two'] @ join='; '}

Sightly Implicit Objects
Below are the most frequently used Implicit objects of Sightly:
Sightly Use Statement implicit object

Slightly Use statement : Initializes a helper object.
<!--/* template.html */-->
<div data-sly-use.nav="navigation.js">${nav.foo}</div>
<!--/* navigation.js */-->
use(function () {
return {
foo: "Hello World"
};
});
Output
<div>Hello World</div>

Sightly Unwrap Statement Implicit Object
Slightly 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

Sightly Test Statement Implicit Object
Slightly Test Statement object : Conditionally removes the element and it’s content.

<span data-sly-test="${properties.showText}">text</span>
<span data-sly-test.abc="${a || b || c}">is true</span>
<span data-sly-test="${!abc}">or not</span>
Output:
<span>text</span>
<span>is true</span>
Sightly List Statement Implicit Object
Sightly 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>
Get size of list in HTL (Sightly):-
<ol data-sly-list="${currentPage.listChildren}">
<li>${item.title} ${currentPage.listChildren.size}</li>
</ol>
Sightly Include Statement Implicit Object
Sightly 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>

Sightly Resource Statement Implicit Object
Sightly 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>

Component Development Sightly vs JSP
As we have seen above using sightly component development becomes a part of web developer instead of java developer. It reduces development time and cost for template designing a lot as you can see in below diagram.