When Sightly Meets Slice by Tomasz Niedźwiedź

When Sightly Meets SliceTomasz Niedźwiedź

Software Engineer

<%@ 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

<%@ 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

• Almost plain HTML• Iteration• Hiding/showing elements• Including scripts• Access to bindings• Calling backend code

A sightly, minimalistic beauty

<h1 data-sly-test="${properties.jcr:title}"> ${properties.jcr:title}</h1>

${inheritedPageProperties.twitterHandle}

<h1> ${properties.jcr:title || "Default title"}</h1>

A sightly, minimalistic beautyAccess to JCR data, really basic logic

<ul data-sly-list="${ currentPage.listChildren }"> <li>${item.name}</li></ul>

<div data-sly-repeat="${currentPage.listChildren}"> ${item.name}</div>

data-sly-listdata-sly-repeat (AEM 6.1)

A sightly, minimalistic beautyIteration

<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-templatedata-sly-calldata-sly-includedata-sly-resource

A sightly, minimalistic beautyCode reuse

• 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

Sightly

Use interface

WCM BindingsAdapter Factories

Sling ModelsSliceJSP

SliceCQ 5.3CQ 5.4CQ 5.6AEM 6.0AEM 6.1...and onwards

Repository access@SliceResourcepublic class ArticleModel {

@JcrProperty("jcr:title") private String title;

@JcrProperty private String text;

//getters}

Mapping content to POJOs...

Repository access@SliceResourcepublic class ArticleModel {

@JcrProperty private PublicationMetadata publicationMetadata;

@JcrProperty @Children(Author.class) private List<Author> authors;

//getters}

Slice

Repository access@Model(adaptables = Resource.class)public class ArticleModel {

@Inject private PublicationMetadata publicationMetadata;

@Inject private List<Author> authors;

//getters}

Sling Models

Repository accessNeat! But...

Repository accessNeat! But...

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

Simple models are

not really the point!

The killer feature of Slice?

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

• 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

Proven to speed up development in many projects over the last several years.

The killer feature of Slice?

• How many objects are to be created?

• What’s allowed to share instances?• How much control does the

programmer have?

Dependency injection with GuiceScopes

• Method interception

Dependency injection with GuiceAspect Oriented Programming

Dependency injection with GuiceBindings

• Slice core• Slice Addons• CQ 5.5• CQ 5.6• AEM 6.0 (also compatible with

6.1)

Slice brings Guice to AEM

1. Instantiate an injector in your bundle activator

2. Register OOTB modules3. Create a new module for each

logical unit of functionality4. Let the injector take care of

wiring up all of the dependencies in your whole project

How to set it up

• 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.

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

• 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 ModelsPerfectly sufficient for backing your sightly scripts... but

• Not a mature library• Closed• Competes with Sightly or Sling

Misconceptions

Sightly & SliceCan they work together?

Sightly & SliceCan they work together?

YES

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

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

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

Learn MoreSlice 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/

Learn MoreSlice your code in Sightly - http://goo.gl/5HTKalA presentation introducing Google Guice - https://youtu.be/hBVJbzAagfs

Q&A

Tomasz NiedźwiedźSoftware Engineer at Cognifide

[email protected] @toniedzwiedz

Thanks for listening!