This document discusses how Sightly and Slice can work together in AEM projects. Sightly provides a clear presentation layer for markup, while Slice leverages the Guice dependency injection framework. Models built with Slice can be used directly in Sightly templates via the data-sly-use attribute. This allows fine-grained control over objects while keeping Sightly templates clean. The key benefit of Slice is the standardized Guice dependency injection approach it provides.

1. When Sightly Meets
Slice
Tomasz Niedźwiedź
Software Engineer

3. <%@ include file="/libs/foundation/global.jsp" %>
<% // Some Java %>
<script> //JavaScript anyone? </script>
<style> /* Inline CSS rules! */ </style>
<% // Some more Java %>
<h1>If you’re careful enough, you can find HTML</h1>
<c:if test="someVariableSetSomewhere">
<p>HTML elements are best mixed with JSP tags</p>
</c:if>
Java Server Pages – The Good, the Bad
and the Very Ugly

4. <%@ include file="/libs/foundation/global.jsp" %>
<% // Some Java %>
<script> //JavaScript anyone? </script>
<style> /* Inline CSS rules! */ </style>
<% // Some more Java %>
<h1>If you’re careful enough, you can find HTML</h1>
<c:if test="someVariableSetSomewhere">
<p>HTML elements are best mixed with JSP tags</p>
</c:if>
Java Server Pages – The Good, the Bad
and the Very Ugly

5. • Almost plain HTML
• Iteration
• Hiding/showing elements
• Including scripts
• Access to bindings
• Calling backend code
A sightly, minimalistic beauty

6. <h1 data-sly-test="${properties.jcr:title}">
${properties.jcr:title}
</h1>
${inheritedPageProperties.twitterHandle}
<h1>
${properties.jcr:title || "Default title"}
</h1>
A sightly, minimalistic beauty
Access to JCR data, really basic logic

7. <ul data-sly-list="${ currentPage.listChildren }">
<li>${item.name}</li>
</ul>
<div data-sly-repeat="${currentPage.listChildren}">
${item.name}
</div>
data-sly-list
data-sly-repeat (AEM 6.1)
A sightly, minimalistic beauty
Iteration

8. <template data-sly-template.validateBlank="${@validatableWithBlank, name}">
<sly data-sly-test="${!validatableWithBlank.blank}"
data-sly-call="${validate @ validatable=validatableWithBlank,
name=name}"
data-sly-unwrap />
<div data-sly-test="${validatableWithBlank.blank && wcmmode.edit}"
data-sly-include="blank.html"
class="blank">
</div>
</template>
data-sly-template
data-sly-call
data-sly-include
data-sly-resource
A sightly, minimalistic beauty
Code reuse

9. • Markup is clearly visible and easy to understand
• Easy to learn, simple, with just the necessary set of features
• Cannot affect the state of the application
• Good momentum, regular improvements
What I like about it

10. Sightly
Use interface
WCM Bindings
Adapter Factories
Sling Models
SliceJSP

11. Slice
CQ 5.3
CQ 5.4
CQ 5.6
AEM 6.0
AEM 6.1
...and onwards

12. Repository access
@SliceResource
public class ArticleModel {
@JcrProperty("jcr:title")
private String title;
@JcrProperty
private String text;
//getters
}
Mapping content to POJOs...

13. Repository access
@SliceResource
public class ArticleModel {
@JcrProperty
private PublicationMetadata publicationMetadata;
@JcrProperty
@Children(Author.class)
private List<Author> authors;
//getters
}
Slice

14. Repository access
@Model(adaptables = Resource.class)
public class ArticleModel {
@Inject
private PublicationMetadata publicationMetadata;
@Inject
private List<Author> authors;
//getters
}
Sling Models

15. Repository access
Neat! But...

16. Repository access
Neat! But...

17. Slice – Does it still count?
The landscape has changed
Sling Models provide an excellent way to
supply components with data
Using Java classes in scipts is easier than
ever

18. Simple models are
not really the point!

19. The killer feature of Slice?

20. The killer feature of Slice?
It’s built around Guice

21. • The focus is not on repository access.
• It’s about a clear, well-established dependency
injection model based on industry standards.
• Guice provides a consistent framework for the
entire application.
• JSR 330
The killer feature of Slice?
It’s built around Guice

22. Proven to speed up development in many projects
over the last several years.
The killer feature of Slice?

23. • How many objects are to be created?
• What’s allowed to share instances?
• How much control does the
programmer have?
Dependency injection with Guice
Scopes

24. • Method interception
Dependency injection with Guice
Aspect Oriented Programming

25. Dependency injection with Guice
Bindings

26. • Slice core
• Slice Addons
• CQ 5.5
• CQ 5.6
• AEM 6.0 (also compatible with 6.1)
Slice brings Guice to AEM

27. 1. Instantiate an injector in your
bundle activator
2. Register OOTB modules
3. Create a new module for each
logical unit of functionality
4. Let the injector take care of wiring
up all of the dependencies in your
whole project
How to set it up

28. • Verbose
• Complex
• Exposes services to the whole environment.
• Sometimes you want simple things that you
want to hide and yet be able to inject them.
What about OSGi?
It does have certain dependency injection
capabilities.

29. Peaberry used before Slice 4.1
@OsgiService annotation in
newer versions
Slice & OSGi
public class MyClass {
@Inject
@OsgiService
ResourceResolverFactory factory;
//...
}
OSGi services can be injected
with minimal effort

30. • Object trees can be built thanks to
dependency injection
• Not as powerful as Guice
• AOP
• Context management
• Caching
• Less information available online on good
practices and how the model works
DI in Sling Models
Perfectly sufficient for backing your
sightly scripts... but

31. • Not a mature library
• Closed
• Competes with Sightly or Sling
Misconceptions

32. Sightly & Slice
Can they work together?

33. Sightly & Slice
Can they work together?
YES

34. Using Slice in Sightly
<div data-sly-use.model="com.example.app.ArticleModel">
<span class="text">${model.text}</span>
<ul data-sly-list="${model.links}">
<li><a href="${item.path}">${item.title}</a></li>
</ul>
</div>
Sightly without Slice

35. Using Slice in Sightly
<div data-sly-use.model="com.example.app.ArticleModel">
<span class="text">${model.text}</span>
<ul data-sly-list="${model.links}">
<li><a href="${item.path}">${item.title}</a></li>
</ul>
</div>
Sightly WITH Slice... Exactly the same

36. Slice & Sightly
• Very clear presentation layer
• Visibility of markup semantics and
structure
• Easy for frontent developers
• Easily manageable architecture of the
AEM project
• Minimal boilerplate code
• Fine-grained control over objects

37. Learn More
Slice 4.3 (Q3 2015)
• Slice persistence
• New Felix console tools
Slice 5.0 (Q1 2016)
• Easier consumption of models in
Servlets and Services
• Mapper improvements
http://cognifide.github.io/slice/

38. Learn More
Slice your code in Sightly - http://goo.gl/5HTKal
A presentation introducing Google Guice - https://youtu.be/hBVJbzAagfs

39. Q&A

40. Tomasz Niedźwiedź
Software Engineer at Cognifide
tomasz.niedzwiedz@cognifide.com
@toniedzwiedz
Thanks for
listening!