sightly a beautiful template language

How to get the most out of Marketing Automation?
August 23, 2017

SIGHTLY

 (A BEAUTIFUL TEMPLATE LANGUAGE)

 

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. Now-a-days, slightly has been gaining importance because of its various advantages for developing websites in AEM.

 

 

Although languages like of 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 as “Sightly”.

Sightly, is also referred as server side template language, it enables development teams to distinctly separate logic and markup. This flexibility allows 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 migration of a site to AEM  using Sightly, one can view results such as reduction in developments 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 shorter learning curve
  • Easy to maintain project with cleaner code
  • Introduces, 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 for integration. Therefore, sightly often reduces coordination issues, as the frontend development might not be a primary skill for every Java developer.

 

SAMPLE CODE IN JSPSAMPLE CODE IN SIGHTLY
<%
%><%@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>
<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>

Coding Standards in Sightly

Sightly allows the developers to leverage its wider choice of global variable as well as flexible Use of API. It also enables the developers to prepare a 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, 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 in many websites. It does include HTML to highlight changes in different versions of the page directly in the author 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.

 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 to separate 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 and environment for HTML developers to work directly on 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, 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.

 

 

 

Request Consultation by Submitting the form