AEM: Why Sightly? Part II

Sightly is Adobe’s HTML templating engine, meant to replace JSP and ESP. It can produce more readable, maintainable, and secure code while separating logic and mark up. It also improves efficiency by being able to easily manage and maintain your code.  You are able to split development into the component front-end design and the business server-side logic.

But what if you want to start using Sightly, and don’t want to convert all of your already implemented components?  The answer is simple, don’t. You can mix JSP and HTML with Sightly.  

For example, using the data-sly-include attribute:

<div data-sly-include=”footer.jsp”></div>

There are many benefits that Sightly provides, here is a condensed list of the main benefits:

1. No dependencies
2. Fast and lightweight
3. Auto XSS protection and URL externalization
4. Clear and simple feature set
5. Enforce separation between logic and markup
6. Potentially allows for the same language for server-side logic and front-end client logic
7. Faster time to market
8. The simplified workflow between front-end designers and AEM Java developers

Sightly Overview

1. The Sightly framework is broken into three main sections:
2. The Expression Language
3. Block Statements

Use API

Together these allow for extensive AEM functionality combined with a simple and easy to use syntax and structure. We will briefly discuss the three main sections. A more extensive list and description of each of these sections can be found on the Adobe Documentation.

Expression Language

Sightly expressions are used to access the server-side data and models and bind them to the client-side markup. Expressions are made up of literals, variables, operators, and options.  They are wrapped in the following delimiters:

${ expression }

A prominent example of expression would be when accessing a property from the JCR:

${properties.jcr:title}

For those wanting an extensive list, again, refer to Adobe Documentation.

Block Statements

Sightly Block Statements are custom data attributes added to an element on the DOM.  This allows the markup to existing as it normally would, resulting in a design that will adhere to a quick prototyping development paradigm. Adding dynamic functionality is as simple as adding a ‘data-sly-context’ attribute block to bind custom server-side data and logic to that element’s block scope. The ‘Use’ API described next is a good example of a Sightly Block Statement.

Use API

The Sightly Use API is implemented by invoking the Sightly Block Statement functionality.  It initializes an external helper object and binds that scoped data to the DOM. A quick example is shown below:

<div data-sly-use.speak=”speak.js”>${speak.greeting}</div>

This creates an object scope called ‘speak’. Assuming ‘speak.js’ has a property called ‘greeting’ i.e. speak.greeting, it will be rendered to the DOM via the express output delimiter ‘${speak.greeting}’.  

 

One of the key features of the Use API is that you can make use of it with javascript and java, in fact, they have their own API’s. The Javascript Use API enables a Sightly file to access the helper code written in JavaScript. This is extremely powerful as it allows the server-side logic to be included in the JavaScript code.

Thinking Ahead

Sightly is a powerful and welcoming addition to AEM.  Stay tuned for future posts, where we focus more on the technical side providing more extensive use cases and implementation examples. If you have any questions about your AEM 6 Sightly design/implementation, or how we, here at iCiDIGITAL, can help you get your AEM 6 Sightly project off the ground and running, please feel free to reach out to us.