Playing with Sightly outside of AEM

Having owned what used to be called Day CQ for some time Adobe have fully rebranded and launched the platform as Adobe experience manager in the 6.0 release. This sees quite a number of core changes and one of the biggest ones for those dealing with the styling and day to day use of the platform is the templating engine Sightly. In a sign of the times Adobe have donated this to the Apache Sling project too.

Sightly logo

Adobe provide a few Github repositories for showing a component and a REPL console but you'll need a running copy of AEM 6 to get going. If you just want to get a feel for the language but don't have access to the required jars you can use the packages provided on the Sling JIRA board for tracking the donation of the modules on SLING-3959 or directly from the Sling repository on Github.

Grab both the XSS and Sightly engine itself. Build the XSS module first as Sightly depends on it, then simply build the sightly package to get a REPL console to play with all outside of AEM.

I had some difficulty getting this to run at first, with 503 errors from the AuthenticationService. This all seemed related to CQ 5.x from Google so I cleared my existing maven repository in $HOME/.m2 and did a fresh install (which takes quite some time). This sorted out my authentication errors and all the tests passed.

To make sure there was ample memory available I launched using MAVEN_OPTS="-Xmx1024m" mvn launchpad:run. All being well you are greeted with this at http://localhost:8080/sightly/repl.html:

Sightly REPL

When you first try and amend the template the Jackrabbit server will force you to authenticate in order to write the data back as you type, the default for this is simply admin:admin. It's basic but it's a quick and painless way to try out the syntax for yourself and get aquiainted with it if you don't happen to have a 6.0 JAR lying around.

<dl data-sly-list="${currentPage.listChildren}">
    <dt>index: ${itemList.index}</dt>
    <dd>value: ${item.title}</dd>
</dl>

As for where this fits into previous CQ builds, rather than using JSP or ESP templates Sightly is the new preferred way to do things with a big (mandatory) focus on keeping logic out of the template. Adobe give three reasons for why this technology is so different to what is in use today, namely:

  1. Security by Default - to avoid XSS issues Sightly will escape and filter automatically content rendered. Previously in CQ the use of xssAPI was required with verbose calls to esapi.encodeforhtml throughout (easy to miss too).
  2. Separation of Concerns - here is where CQ/AEM is catching up with the mature template engines of open source projects such as that used in Django. By deliberatly limiting what the engine can and can't do it's far easier to enforce keeping business logic out of templates and in view code server side where it belongs. With JSP so easy to abuse many CQ installations have suffered from sloppy practises.
  3. Sightly is HTML5 - this is really for me the big thing that's nice about Sightly compared to many if not all other template engines in use today (and I mean not just within Sling). As everything is encoded within data-sly-* attributes a Sightly template really is 'just' HTML5.

Sightly is pushed as the primary way to create templates and components in AEM 6. A great guide to the creation of these can be found on slideshare for component development.