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.

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-side 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.
    component-development-aem-sightly-vs-jsp-aemcq5tutorials
  • 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.

component-development-time-aem-sightly-vs-jsp-aemcq5tutorials

 

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.