AEM · Sightly

AEM | Sightly Template – What and Why?


What is Sightly?


  • Sightly is the new AEM templating system.
  • It is the preferred script for developing new components.
  • Sightly is different from other templating systems:
    • HTML5
    • Giving back the markup, and not mixing it with code
      • Allows for a smoother transition between designer and developer
    • Secure by default
  • Sightly is recommended Template engine from AEM for component development.

Why do we need Sightly?


Sightly has two main goals:

  1. Simplified development
    • Beautiful markup (HTML only, unlike JSP where we write scriptlet in same file)
    • Cleaner & More intuitive code.
    • Separation of concerns & responsibilities b/w Web Designer v/s CMS Developer.
  2. Security
    • Cross-site scripting protection (OOB xxs Protection)
    • Link externalization

Are we going away from JSP?


In simple words, Sightly is recommended template engine by Adobe, but Adobe will continue supporting JSP template in near future. For development prospective, Its advisable to use Sightly as primary template and if you face challenge to achieve some requirement in Sightly (which i am sure you wont be as Sightly is powerful enough), then move back to JSP. But your development approach should be Sightly First !

Sightly > JSP


AEM recommend to use Sightly as rendering template. If you have both files (Sightly and JSP) in your component, then Sightly template engine will be invoked first and will render sightly template. So Sightly template will take priority on JSP template.

Does Sightly Support all AEM concepts?


Sightly is a template rendering engine to render author configured data. Which means all AEM concepts will be supported without any change. Though at development level, you might see some changes like including component tag, sling include tag … but all these are template level changes.

Will there be any process change for QA/Authors/Editors?


No.

Sightly Components


AEM 6 OOB provide several components created using Sightly template engine. Sightly components located at libs/wcm/foundation/components/

Sightly Documentation


  1. https://docs.adobe.com/docs/en/aem/6-1/develop/sightly.html
  2. http://blogs.adobe.com/experiencedelivers/experience-management/sightly-intro-part-1/

Leave a comment