Overview of Sightly and Sightly vs JSP.

Sightly, Beautiful Markup Language and More

Sightly is a Hypertext Template Language (HTL) specifically designed for AEM. It was introduced with AEM version 6.0 about two years ago. Nowadays, slightly has been gaining importance because of its various advantages for developing websites in AEM.

Although languages like JSP (Java Server Pages) and ESP (ECMA Script Server Pages) serve well for website development in AEM, sightly is emerging to be a preferred templating language for HTML because HTML developers can participate better in AEM project without any JAVA knowledge.

In addition, this language seems pleasing to the eye of any web developer. It is made easily understandable with its simple syntax, and efficient maintainability. Therefore, it is called “Sightly”.

Sightly, is also referred to as server-side template language, it enables development teams to distinctly separate logic and markup. This flexibility allows for faster and easier CMS customization. It helps businesses to pursue not only broader but also comprehensive business strategy and faster time to market.

During the last two years, with an increased support base for tools, Sightly has become more performant and standardized. After successfully completing the migration of a site to AEM using Sightly, one can view results such as a reduction in development efforts over traditional JS-based development. The code came out to be cleaner and the maintenance is much easier. This blog describes Sightly’s advantages, its implementation factors, and its Cost reduction features.

The following are the main advantages of Sightly.

Advantages

• New AEM developers have a shorter learning curve
• Easy to maintain the project with cleaner code
• Introduces, the new way of component development
• Elimination of UI/AEM integration issues
• Increased developer productivity
• Secure: URL Externalization and XSS Protection
• Finally helps you forget about JSP Scriptlets, with embedded business logic.
• Offers pure view and help move the business logic to Java classes (externalizing the business logic)
• Addresses problems in AEM such as lack of separation of concerns

On the other hand, sightly shows its significance in enabling Java developers to focus on the backend code independently. This specific feature distinguishes sightly from other templating systems where Java developers should have little front-end knowledge of integration. Therefore, sightly often reduces coordination issues, as the frontend development might not be a primary skill for every Java developer.

SAMPLE CODE IN JSP
  <% %>
<%@include file=”/libs/foundation/global.jsp”%><% %>
<%@page session=”false” %>
<% %>
<cq:includeClientLib css=”test.css” />
<cq:includeClientLib js=”test.js” />
<div>
<h1>Hello World!!</h1>
<h2>I am using JSP!!</h2>
<h2>properties</h2>
<%
String title = properties.get(“jcr:title”, “default title”);
String text = properties.get(“jcr:text”, “default text”);%>
Title: <%= title %> <br/>
Text: <%= text %> <br/><br>
<h2>currentPage</h2>
Title: <%= currentPage.getTitle() %><br>
Name: <%= currentPage.getName() %><br>
Path: <%= currentPage.getPath() %><br>
Depth: <%= currentPage.getDepth() %><br>
<h2>currentNode</h2>
Name: <%= currentNode.getName() %><br>
Path: <%= currentNode.getPath() %><br>
Depth: <%= currentNode.getDepth() %><br><br>
<c:if test=”${properties.name}”>
<c:set var=”test” value= “target=’_blank'”/>
</c:if>
<a class=”btn btn-primary-outline”
href=”<%=testurl%>”
${test} role=”button”>${properties.name}
</a>
</div>

SAMPLE CODE IN SIGHTLY
 <div>
<sly data-sly-use.clientlib=”/libs/granite/sightly/templates/clientlib.html”
data-sly-call=”${clientlib.js @ categories=’clientlib1,clientlib2′}”
data-sly-call=”${clientlib.css @ categories=’clientlib1,clientlib2′}” >
</sly>
<div data-sly-include
script=”/libs/foundation/global.jsp”>
</div>
<h1>Hello World!!</h1>
<h2>I am using Sightly!!</h2>
<h3>Properties</h3>
<!—fetch property values from the dialog — >
<p>Title: ${currentPage.properties.jcr:title}</p>
<h3>Page Details</h3>
<p>Title: ${currentPage.Title}</p>
<!—fetch property values with currentPage object– >
<p>Name: ${currentPage.Name}</p>
<p>Path: ${currentPage.Path}</p>
<p>Depth: ${currentPage.Depth}</p>
<h3>Node Details</h3>
<!—fetch property values with currentNode object– >
<p>Name: ${currentNode.Name}</p>
<p>Path: ${currentNode.Path}</p>
<p>Depth: ${currentNode.Depth}</p>
<!—testing if the properties are present (similar to if condition)– >
<div data-sly-test.valid=”${pageProperties.name}”>
${pageProperties.name}
</div>
</div>

Tricks with Sightly:

• How to print Url of the current page in sightly: Although we can fetch URL using javascript model, it is preferable to directly use it in sightly as it improves the performance.

Example: You can print the URL using ${request.requestURL.toString} Url can be composed and printed as below:

<sly data-sly-test.scheme="${request.scheme}"/>
<sly data-sly-test.servername="${request.serverName}"/>
<sly data-sly-test.serverport="${request.serverPort}"/>
<sly data-sly-test.val="${request.requestURI}"/>
${scheme}://${servername}:${serverport}${val}

Access Values from a String[] in Json:
Example:

<div
data-sly-use.multi="${'com.project.sightly.MultiField' @ json=properties.items}">
<div data-sly-repeat="${multi.values}">
<h2>${item['linkLabel']} - ${item['anchor']}</h2>
</div>
</div>

Where MultiField is a class and uses an identifier called ‘json’ to map the properties stored in a Jason object.

multi.values – will fetch all the keys from the json object.

Item: will iterate key-value pairs within the json object.

Coding Standards in Sightly
Sightly allows the developers to leverage its wider choice of a global variable as well as flexible use of API. It also enables the developers to prepare customized data for the templates utilizing both Java and JavaScript.

Sightly Implementation Overview
Beyond the MVC (Classic Model-View-Controller), the above architecture does have the following characteristics

• Presence of a sling post servlet does mean that no code must be written to handle POST requests
• The client not necessarily should know about structuring data for the Sling Post Servlet
• A simple server-side JavaScript file is essential to trigger the specific template handling that part of the view. To retrieve the HTML fragment of what must be updated on the page.

Few points to know about Sightly, ranging from technical odds and ends to more general considerations

Integrations with sling models:
Sightly does not require Sling models, there are different ways to get your logic into Sightly. Still, the sling models are considered as the perfect way to set the Java logic up.

Templates-Define reusable:
In Sightly, Templates tend to define re-usable and potentially recursive methods that can be defined locally or in separate files.

Separation of concerns:
Separation of concerns defines the separation of the frontend from the business logic in different files. Initially, the business would require writing all templates in JSTL, because JSP logic tends to sneak into the views. Another disadvantage is, JSTL can become rather unwieldy and produce lots of clutter. This was very much reduced in Sightly and it helps bridge the gap between back end as well as front-end development.

Localizing Terms:
Sightly localize terms provided in dictionaries in an easy and beautiful manner by just adding the context i18n.

Version diffing:
This is a core feature of AEM and it is used on many websites. It does include HTML to highlight changes in different versions of the page directly in the author's environment. By inserting HTML into text, the text becomes enriched with content, that is automatically escaped by Sightly. So, one must skip all encoding, which again takes away a core feature of Sightly. Abode is working to find a solution.

Easy to adopt:
Sightly is easy to adapt because it allows the front-end developers to directly work with templates in Abode Experience Manager and not have the visual clutter of JSTL or the power (and responsibility) of JSP. Thus, it becomes much easier to use it, in all the projects for web development on AEM.

How to add
Help Reduce Total Cost of Ownership(TCO) and Time-to-Market”
Sightly is preferred by numerous technical managers because of its templating system that allows separating the business logic from the front end markup. It also enabled the users to leverage JCR’s extensive features for flexible sling integration.

Potentially 25% of the development cost is saved utilizing Sightly.

The front-end designs need not be implemented separately from the AEM project anymore as Sightly(HTL) provides an environment for HTML developers to work directly on the HTL template without any back-end knowledge. The java development is benefitted as Sightly provides a simple to use USE-API to separate logic from the markup.

In conclusion, the Sightly templating engine is a powerful, versatile tool with many benefits for web development in AEM platforms. Additionally, it improves time-to-market and reduces the Total Cost of Ownership of Your AEM 6.x projects. It also helps in introducing a clean separation of concerns and prevents developers from writing business logic and the markup, thus reduces the load time of the webpage.