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:
- No dependencies
- Fast and lightweight
- Auto XSS protection and URL externalization
- Clear and simple feature set
- Enforce separation between logic and markup
- Potentially allows for same language for server-side logic and front-end client logic
- Faster time to market
- Simplified workflow between front-end designers and AEM Java developers
Sightly Overview
The Sightly framework is broken into three main sections:
- The Expression Language
- 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 an expression would be when accessing a property from the JCR:
${properties.jcr:title}
For those wanting an extensive list, again, refer to Adobe’s Documentation.
Block Statements
Sightly Block Statements are custom data attributes added to an element on the DOM. This allows the markup to exist 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 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 Blue Acorn iCi, can help you get your AEM 6 Sightly project off the ground and running, please feel free to reach out to us.
For more information about Sightly, check out this post: AEM Why Sightly?