Introduction to new templating language Sightly, by adobe. This slide gives you an good idea about " what sightly is all about? ".

1. Introduction to Sightly
(By Ankit Gubrani)

3. Agenda :
lWhat is sightly ?
lWhy sightly ?
lsightly Expression Language
lsightly Data Attributes

4. What is sightly ?

5. Sightly is the new HTML templating system, introduced with
AEM 6.0. It is a new templating engine for apache sling.

6. Why sightly ?
WHY?!?!

7. Don't Mess with my Markup
lFirst reason would be to keep my presenstation logic away from my business logic.
lsightly is HTML5: A Sightly template is itself a valid HTML5 file.
lSecurity by Default : Sightly automatically filters and escapes all text
lbeing output to the presentation layer to prevent cross-site-scripting
lvulnerabilties.

8. But hey ! Why not any other template engine ?

9. lNo Other templating system forces developer to keep
lmarkup (Presentation) saperate from code (Business logic)
lAny other templating engine would not proivde felixibility to
luse extensive features of JCR.
lAny other templating engine would not provide felixibility
lto use SLING.

10. Current Scenario

11. After sightly

12. sightly Expression Language

13. lsightly expressions are delimited by characters ${ and }. At
l runtime, these expressions are evauated and their value is
l injected into the outgoing HTML stream. They can occur
lwithin the HTML text or within attribute values.
l Sample Code :
l <h1>Page Title</h1>
l <p>${currentPage.Title}</p>
lsightly expressions are used to access the data structures that
l provide the dynamic elements of the HTML output.

14. List of some useful objects available
lProperties
lpageProperties
lComponent
lcurrentDesign
lcurrentPage
llog
lout
lpageManager
lrequest
lresource
lresponse
lsling
lwcmmode

15. DEMO

16. sightly Data Attributes

17. To define structural elements within the template Sightly
employs the HTML data attribute, which is an HTML5
attribute syntax purposely intended for custom use by
third-party applications. All sightly-specific attributes are
prefixed with data-sly-

18. data-sly-list: Repeats the content of the host element for each enu
<ul data-sly-list="${currentPage.listChildren}">
<li>index: ${item.path}</li>
</ul>
List

19. Test
data-sly-test: Conditionally removes the host element and it's conte
<p data-sly-test.abc="${a || b || c}">is true</p>
<p data-sly-test="${!abc}">or not</p>

20. Use
data-sly-use: Initializes a helper object (defined in JavaScript or J
<div data-sly-use.nav="Navigation">${nav.foo}</div>

21. DEMO

22. Any Questions?

24. lAbout Me
.about-me{
name: Ankit Gubrani !Sr. AEM Developer;
email-id: ankit.gubrani@codebrains.co.in;
LinkedIn: in.linkedin.com/in/ankitgubrani;
twitter: @ankitgubrani90;
blog: codebrains.blogspot.in;
website : codebrains.co.in;
}

25. Thank You
Please contact me at : ankit.gubrani@codebrains.co.in