SlideShare a Scribd company logo
1 of 39
Download to read offline
AEM6 Component Development 
Adobe Experience Manager 
@GabrielWalt, Product Manager
Specification open sourced to GitHub. 
Implementation donated to Apache Sling. 
Follow @sightlyio on Twitter. 
http://docs.adobe.com/docs/en/aem/6-0/develop/sightly.html 
Adobe Experience Manager
Project Efficiency 
Adobe.com estimated that it reduced their project 
costs by about 25% 
JSP Project 
Adobe Experience Manager 
Design 
HTML/CSS 
Template 
JSP 
Logic 
Java 
Design 
HTML/CSS 
Template 
Sightly HTML 
Logic 
Use-API 
Project 
Management Sightly 
Management 
~25% 
Effort / Cost
Development Workflow 
Improves project efficiency by removing the pain of 
JSP and Java development 
Adobe Experience Manager 
Design 
HTML/CSS 
Component 
Business 
Logic 
Inefficient 
Static HTML being 
handed over… 
Front-end Developer 
– HTML 
– CSS/JS 
Java Developer 
– Java/OSGi 
– Business logic
Development Workflow 
Improves project efficiency by removing the pain of 
JSP and Java development 
Adobe Experience Manager 
Design 
HTML/CSS 
Component 
Business 
Logic 
Front-end Developer 
– HTML 
– CSS/JS 
Java Developer 
– Java/OSGi 
– Business logic 
Efficient 
APIs to OSGi bundles
Development Workflow 
Can be edited by front-end devs: 
✓ Client Libraries (CSS & JS) 
✕ JSP (markup & logic) 
✓ HTML markup (Sightly template) 
✓ View logic (server-side JS, or Java) 
Adobe Experience Manager 
Component
Sightly basic example 
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> 
Adobe Experience Manager 
${properties.jcr:description} 
</a>
Sightly basic example 
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> 
Adobe Experience Manager 
${properties.jcr:description} 
</a> 
1︎ 
2︎ 3︎ 
1︎ Automatic contextual HTML escaping and XSS protection of all variables 
2︎ Fallback value if property is empty 
3︎ Remove HTML attribute if value is empty
Sightly VS JSP 
Sightly 
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> 
JSP – Scriptlets 
Adobe Experience Manager 
${properties.jcr:description} 
</a> 
<%@include file="/libs/foundation/global.jsp"%> 
<a href="<%= xssAPI.getValidHref(properties.get("link", "#")) %>" <% 
String title = properties.get("jcr:title", ""); 
if (title.length() > 0) { 
%>title="<%= xssAPI.encodeForHTMLAttr(title) %>"<% 
} %>> 
<%= xssAPI.encodeForHTML(properties.get("jcr:description", "")) %> 
</a> 
Please try again…
Sightly 
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> 
Adobe Experience Manager 
${properties.jcr:description} 
</a> 
JSP – Expression Language & JSTL 
<%@include file="/libs/foundation/global.jsp"%> 
<a href="${!empty properties.link ? xss:href(properties.link) : '#'}" 
<c:if test="${!empty properties['jcr:title']}"> 
title="${xss:attr(properties['jcr:title'])}" 
</c:if> 
> 
${xss:text(properties['jcr:description'])} 
</a> 
Still complex 
Sightly VS JSP 
No automatic security
Sightly 
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> 
Adobe Experience Manager 
${properties.jcr:description} 
</a> 
JSP – Custom Tag Libraries 
<%@include file="/libs/foundation/global.jsp"%> 
<a href="<out:href property='link' default='#'/>" 
No automatic security 
<c:if test="${!empty properties['jcr:title']}"> 
title="<out:attr property='jcr:title'/>" 
</c:if> 
> 
<out:text property='jcr:description'/> 
</a> 
Many tags within tags 
Sightly VS JSP
Sightly 
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> 
Adobe Experience Manager 
${properties.jcr:description} 
</a> 
JSP – TagLibs for whole HTML elements 
<%@include file="/libs/foundation/global.jsp"%> 
<my:link 
urlProperty="link" 
urlDefault="#" 
titleProperty="jcr:title"> 
<my:text property="jcr:description"/> 
</my:link> 
What does it really do? 
Sightly VS JSP
Sightly 
<a href="${properties.link || '#'}" title="${properties.jcr:title}"> 
Adobe Experience Manager 
${properties.jcr:description} 
</a> 
Readable 
Explicit 
Secure 
Sightly FTW!
Building Blocks 
Expression Language 
${properties.myProperty} 
Block Statements 
<p data-sly-test="${isVisible}">is visible</p> 
Adobe Experience Manager
Expressions 
Literals (positive integers, booleans, strings, arrays) 
${42} 
${true} ${false} 
${'Hello World'} ${"Hello World"} 
${[1, 2, 3]} ${[42, true, 'Hello World']} 
Variables (and accessing object properties) 
${myVar} 
${properties.propName} 
${properties.jcr:title} 
${properties['my property']} 
${properties[myVar]} 
The available objects are the same ones as in JSP with global.jsp 
Adobe Experience Manager
Expression Operators 
Logical operations (not, and, or) 
${!myVar} 
${conditionOne || conditionTwo} 
${conditionOne && conditionTwo} 
Equality / Inequality (only for same types) 
${varOne == varTwo} ${varOne != varTwo} 
Comparison (only for integers) 
${varOne < varTwo} ${varOne > varTwo} 
${varOne <= varTwo} ${varOne >= varTwo} 
Adobe Experience Manager
Expression Operators 
Conditional 
${myChoice ? varOne : varTwo} 
Grouping 
${varOne && (varTwo || varThree)} 
Adobe Experience Manager
Expression Options 
Options allow to manipulate the result of an expression, 
or to pass parameters to a block statement. 
Everything after the @ are comma separated options 
${myVar @ optOne, optTwo} 
Options can have a value (literals or variables) 
${myVar @ optOne='value', optTwo=[1, 2, 3]} 
Parametric expression (containing only options) 
${@ optOne='value', optTwo=[1, 2, 3]} 
Adobe Experience Manager
Expression Options 
String formatting 
${'Page {0} of {1}' @ format=[current, total]} 
Internationalization 
${'Page' @ i18n} 
${'Page' @ i18n, hint='Translation Hint'} 
${'Page' @ i18n, locale='en-US'} 
Array Join 
${['one', 'two'] @ join='; '} 
Adobe Experience Manager
Test Statement 
Conditionally removes the element and it's content 
<p data-sly-test="${properties.showText}">text</p> 
Output 
<p>text</p> 
Adobe Experience Manager
List Statement 
Repeats the content for each enumerable property 
<ol data-sly-list="${currentPage.listChildren}"> 
<li>${item.title}</li> 
</ol> 
Output 
<ol> 
<li>Triangle Page</li> 
<li>Square Page</li> 
</ol> 
Adobe Experience Manager
Include Statement 
Includes the rendering of the indicated template (Sightly, JSP, ESP, etc.) 
<section data-sly-include="path/to/template.html"></section> 
Output 
<section><!-- Result of the rendered resource --></section> 
Adobe Experience Manager
Resource Statement 
Includes the result of the indicated resource 
<article data-sly-resource="path/to/resource"></article> 
Output 
<article><!-- Result of the rendered resource --></article> 
Adobe Experience Manager
Resource Statement Options 
Manipulating selectors (selectors, addSelectors, removeSelectors) 
<article data-sly-resource="${'path/to/resource' @ 
selectors='mobile'}"></article> 
Overriding the resource type 
<article data-sly-resource="${'path/to/resource' @ 
resourceType='my/resource/type'}"></article> 
Changing WCM mode 
<article data-sly-resource="${'path/to/resource' @ 
wcmmode='disabled'}"></article> 
Adobe Experience Manager
Unwrap Statement 
Removes the host element while retaining its content 
<article data-sly-resource="path/to/resource" 
Adobe Experience Manager 
data-sly-unwrap></article> 
Output 
<!-- Result of the rendered resource --> 
Use unwrap only when there’s no other way to write your template, 
to make it correspond as much as possible to the output.
Text, Attr & Elem Statements 
Replaces the content, attribute or element name 
<div class="active" title="Lorem ipsum" 
Adobe Experience Manager 
data-sly-element="${elementName}" 
data-sly-attribute.title="${title}" 
data-sly-text="${content}">Lorem ipsum</div> 
Output 
<span class="active" title="Hi!">Hello World</span> 
Use element and attribute with care as they allow to define parts of the 
markup from the logic, which can lessen the separation of concerns.
Use Statement 
Initializes a helper object 
<div data-sly-use.nav="navigation.js">${nav.foo}</div> 
Output 
<div>Hello World</div> 
Use data-sly-use when data preparation is needed. 
To avoid unnecessary abstraction layers, prefer to access the variables 
directly from the template when possible. 
Adobe Experience Manager
Server-side JavaScript logic 
<!-- template.html --> 
<div data-sly-use.nav="navigation.js">${nav.foo}</div> 
/* navigation.js */ 
use(function () { 
return { 
Adobe Experience Manager 
foo: "Hello World" 
}; 
}); 
Like for the Sightly template, the objects available in the logic file are 
the same ones as in JSP with global.jsp
<!-- template.html --> 
<div data-sly-use.nav="Navigation">${nav.foo}</div> 
/* Navigation.java */ 
package apps.site_name.component_name; 
import com.adobe.cq.sightly.WCMUse; 
public class Navigation extends WCMUse { 
private String foo; 
@Override 
public void activate() throws Exception { 
Adobe Experience Manager 
foo = "Hello World"; 
} 
public String getFoo() { 
return foo; 
} 
} 
Java logic 
When the Java file is 
located in the content 
repository, next to the 
Sightly template, only 
the class name is 
needed. 
But when embedded 
in an OSGi bundle, the 
fully qualified Java 
class name is needed. 
The Java class either has to extend WCMUse, or it 
has to be adaptable from request or from resource.
What kind of Use-API? 
Model logic 
This logic is not tied to a template and is potentially reusable among components. 
It should aim to form a stable API that changes little, even in case of a full redesign. 
➔ Java located in OSGi bundle 
View logic 
This logic is specific to the templates and is likely to change if the design changes. 
It is thus a good practice to locate it in the content repository, next to the template. 
➔ JavaScript located in component 
If components are to be maintained by front-end devs (typically with Brackets). 
➔ Java located in component 
If performance is critical (e.g. when many requests are not cached by the dispatcher). 
Adobe Experience Manager
Template & Call Statement 
<!-- template.html --> 
<template data-sly-template.one="${@ class, text}"> 
<span class="${class}">${text}</span> 
</template> 
<!-- other-file.html --> 
<div data-sly-use.tmpl="template.html" 
Adobe Experience Manager 
data-sly-call="${tmpl.one @ class='example', 
text='Hi'}"></div> 
Output 
<div><span class="example">Hi</span></div>
Display Context Option 
The context option offers control over escaping and XSS protection. 
Allowing some HTML markup (filtering out scripts) 
<div>${properties.jcr:description @ context='html'}</div> 
Adding URI validation protection to other attributes than src or href 
<p data-link="${link @ context='uri'}">text</p> 
Adobe Experience Manager
Display Context Option 
<a href="${myLink}" title="${myTitle}">${myContent}</a> 
<script> var foo = "${myVar @ context='scriptString'}"; </string> 
<style> a { font-family: "${myFont @ context='styleString'}"; } </style> 
Most useful contexts and what they do: 
number XSSAPI.getValidNumber 
uri XSSAPI.getValidHref (default for src and href attributes) 
attribute XSSAPI.encodeForHTMLAttribute (default for other attributes) 
text XSSAPI.encodeForHTML (default for element content) 
scriptString XSSAPI.encodeForJSString 
styleString XSSAPI.encodeForCSSString 
html XSSAPI.filterHTML 
unsafe disables all protection, use at your own risk. 
safer 
Adobe Experience Manager
Display Context Option 
<a href="${myLink}" title="${myTitle}">${myContent}</a> 
<script> var foo = "${myVar @ context='scriptString'}"; </string> 
<style> a { font-family: "${myFont @ context='styleString'}"; } </style> 
Preferred method for each context: 
– src and href attributes: number, uri, attribute, unsafe 
– other attributes: number, uri, attribute, unsafe 
– element content: number, text, html, unsafe 
– JS scripts ⊛: number, uri, scriptString, unsafe 
– CSS styles ⊛: number, uri, styleString, unsafe 
⊛ An explicit context is required for script and style contexts. 
Don’t set the context manually unless you understand what you are doing. 
Adobe Experience Manager
Adobe Experience Manager 
Sightly FAQ 
What does Sightly enable that isn’t possible with JSP? 
– Systematic state-of-the-art protection against cross-site scripting injection. 
– Possibility for front-end developers to easily participate on AEM projects. 
– Flexible and powerful templating and view logic binding features. 
– Tailored to the Sling use-case. 
Will JSP go away? 
– As of today, there are no plans for that.
IDE & Developer Mode 
• Improve learning curve and efficiency of developers 
• An IDE plugin for each developer role 
Adobe Experience Manager 
Brackets plugin 
for the Front-End developers 
http://docs.adobe.com/docs/en/dev-tools/sightly-brackets.html 
Eclipse plugin 
for the Java developers 
http://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
Work on file system + transparent sync & content editing 
Adobe Experience Manager 
IDE Sync 
Version Control 
System (Git / Svn) File System 
Content 
Repository 
sync 
manual pull 
Brackets / Eclipse 
IDE 
auto push 
IDE works on 
the File System
Adobe Experience Manager 
Resources 
Sightly 
– Documentation 
– Specification 
– Sightly AEM Page Example (requires instance on localhost:4502) 
– TodoMVC Example 
Tools 
– Live Sightly execution environment 
– Sightly Brackets extension 
– AEM Developer Tools for Eclipse 
– AEM Developer Mode
EVOLVE'14 | Enhance | Gabriel Walt | Sightly Component Development

More Related Content

What's hot

Three WEM Dev Tricks
Three WEM Dev TricksThree WEM Dev Tricks
Three WEM Dev Tricks
Gabriel Walt
 
Ruby On Rails Tutorial
Ruby On Rails TutorialRuby On Rails Tutorial
Ruby On Rails Tutorial
sunniboy
 

What's hot (20)

Sling Models Overview
Sling Models OverviewSling Models Overview
Sling Models Overview
 
Adobe Experience Manager Core Components
Adobe Experience Manager Core ComponentsAdobe Experience Manager Core Components
Adobe Experience Manager Core Components
 
AEM - Client Libraries
AEM - Client LibrariesAEM - Client Libraries
AEM - Client Libraries
 
CIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM SitesCIRCUIT 2015 - Content API's For AEM Sites
CIRCUIT 2015 - Content API's For AEM Sites
 
Three WEM Dev Tricks
Three WEM Dev TricksThree WEM Dev Tricks
Three WEM Dev Tricks
 
CQ Provisionning & Authoring
CQ Provisionning & AuthoringCQ Provisionning & Authoring
CQ Provisionning & Authoring
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQDynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Ruby On Rails Tutorial
Ruby On Rails TutorialRuby On Rails Tutorial
Ruby On Rails Tutorial
 
Advanced Visualforce Webinar
Advanced Visualforce WebinarAdvanced Visualforce Webinar
Advanced Visualforce Webinar
 
10 jsp-scripting-elements
10 jsp-scripting-elements10 jsp-scripting-elements
10 jsp-scripting-elements
 
AEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & FeaturesAEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & Features
 
Modern development paradigms
Modern development paradigmsModern development paradigms
Modern development paradigms
 
Angular JS
Angular JSAngular JS
Angular JS
 
Crx 2.2 Deep-Dive
Crx 2.2 Deep-DiveCrx 2.2 Deep-Dive
Crx 2.2 Deep-Dive
 
Struts N E W
Struts N E WStruts N E W
Struts N E W
 
A quick guide to Css and java script
A quick guide to Css and  java scriptA quick guide to Css and  java script
A quick guide to Css and java script
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
[2015/2016] Backbone JS
[2015/2016] Backbone JS[2015/2016] Backbone JS
[2015/2016] Backbone JS
 

Similar to EVOLVE'14 | Enhance | Gabriel Walt | Sightly Component Development

Session 5 : intro to jsp - Giáo trình Bách Khoa Aptech
Session 5 : intro to jsp  - Giáo trình Bách Khoa AptechSession 5 : intro to jsp  - Giáo trình Bách Khoa Aptech
Session 5 : intro to jsp - Giáo trình Bách Khoa Aptech
MasterCode.vn
 

Similar to EVOLVE'14 | Enhance | Gabriel Walt | Sightly Component Development (20)

Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSModular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJS
 
The Rails Way
The Rails WayThe Rails Way
The Rails Way
 
Session 5 : intro to jsp - Giáo trình Bách Khoa Aptech
Session 5 : intro to jsp  - Giáo trình Bách Khoa AptechSession 5 : intro to jsp  - Giáo trình Bách Khoa Aptech
Session 5 : intro to jsp - Giáo trình Bách Khoa Aptech
 
Jsp servlets
Jsp servletsJsp servlets
Jsp servlets
 
Working with Javascript in Rails
Working with Javascript in RailsWorking with Javascript in Rails
Working with Javascript in Rails
 
Opencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJSOpencast Admin UI - Introduction to developing using AngularJS
Opencast Admin UI - Introduction to developing using AngularJS
 
AtlasCamp 2015: Connect everywhere - Cloud and Server
AtlasCamp 2015: Connect everywhere - Cloud and ServerAtlasCamp 2015: Connect everywhere - Cloud and Server
AtlasCamp 2015: Connect everywhere - Cloud and Server
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
 
Java Web Development with Stripes
Java Web Development with StripesJava Web Development with Stripes
Java Web Development with Stripes
 
Jsf
JsfJsf
Jsf
 
Angular.js Fundamentals
Angular.js FundamentalsAngular.js Fundamentals
Angular.js Fundamentals
 
WebGUI Developers Workshop
WebGUI Developers WorkshopWebGUI Developers Workshop
WebGUI Developers Workshop
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
 
Get AngularJS Started!
Get AngularJS Started!Get AngularJS Started!
Get AngularJS Started!
 
Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentation
 
AngularJS Basic Training
AngularJS Basic TrainingAngularJS Basic Training
AngularJS Basic Training
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
 
JavaServer Faces 2.0 - JavaOne India 2011
JavaServer Faces 2.0 - JavaOne India 2011JavaServer Faces 2.0 - JavaOne India 2011
JavaServer Faces 2.0 - JavaOne India 2011
 
Ride on the Fast Track of Web with Ruby on Rails- Part 2
Ride on the Fast Track of Web with Ruby on Rails- Part 2Ride on the Fast Track of Web with Ruby on Rails- Part 2
Ride on the Fast Track of Web with Ruby on Rails- Part 2
 

More from Evolve The Adobe Digital Marketing Community

More from Evolve The Adobe Digital Marketing Community (20)

Evolve 19 | Sarah Xu & Kanika Gera | Adobe I/O - Why You Need it to Execute o...
Evolve 19 | Sarah Xu & Kanika Gera | Adobe I/O - Why You Need it to Execute o...Evolve 19 | Sarah Xu & Kanika Gera | Adobe I/O - Why You Need it to Execute o...
Evolve 19 | Sarah Xu & Kanika Gera | Adobe I/O - Why You Need it to Execute o...
 
Evolve 19 | Upen Manickam & Amanda Gray | Adventures in SPA with AEM 6.5
Evolve 19 | Upen Manickam & Amanda Gray | Adventures in SPA with AEM 6.5Evolve 19 | Upen Manickam & Amanda Gray | Adventures in SPA with AEM 6.5
Evolve 19 | Upen Manickam & Amanda Gray | Adventures in SPA with AEM 6.5
 
Evolve 19 | Ameeth Palla | Adobe Asset Link - Use Cases and Pitfalls to Avoid
Evolve 19 | Ameeth Palla | Adobe Asset Link - Use Cases and Pitfalls to AvoidEvolve 19 | Ameeth Palla | Adobe Asset Link - Use Cases and Pitfalls to Avoid
Evolve 19 | Ameeth Palla | Adobe Asset Link - Use Cases and Pitfalls to Avoid
 
Evolve 19 | Giancarlo Berner | JECIS 2 - The Beginning of a New Era in Buildi...
Evolve 19 | Giancarlo Berner | JECIS 2 - The Beginning of a New Era in Buildi...Evolve 19 | Giancarlo Berner | JECIS 2 - The Beginning of a New Era in Buildi...
Evolve 19 | Giancarlo Berner | JECIS 2 - The Beginning of a New Era in Buildi...
 
Evolve 19 | Paul Legan & Kristin Jones | Anatomy of a Solid AEM Implementatio...
Evolve 19 | Paul Legan & Kristin Jones | Anatomy of a Solid AEM Implementatio...Evolve 19 | Paul Legan & Kristin Jones | Anatomy of a Solid AEM Implementatio...
Evolve 19 | Paul Legan & Kristin Jones | Anatomy of a Solid AEM Implementatio...
 
Evolve 19 | Rabiah Coon & Rebecca Blaha | Rockstar Kickoffs for AEM Projects
Evolve 19 | Rabiah Coon & Rebecca Blaha | Rockstar Kickoffs for AEM ProjectsEvolve 19 | Rabiah Coon & Rebecca Blaha | Rockstar Kickoffs for AEM Projects
Evolve 19 | Rabiah Coon & Rebecca Blaha | Rockstar Kickoffs for AEM Projects
 
Evolve19 | Nick Panagopoulos | World Focus: Translation Tips and Trends
Evolve19 | Nick Panagopoulos | World Focus: Translation Tips and TrendsEvolve19 | Nick Panagopoulos | World Focus: Translation Tips and Trends
Evolve19 | Nick Panagopoulos | World Focus: Translation Tips and Trends
 
Evolve 19 | Rabiah Coon, Sabrina Schmidt & Noah Linge | Industry Focus | Furn...
Evolve 19 | Rabiah Coon, Sabrina Schmidt & Noah Linge | Industry Focus | Furn...Evolve 19 | Rabiah Coon, Sabrina Schmidt & Noah Linge | Industry Focus | Furn...
Evolve 19 | Rabiah Coon, Sabrina Schmidt & Noah Linge | Industry Focus | Furn...
 
Evolve 19 | Carl Madaffari | Best Practices | From Customer Data to Customer ...
Evolve 19 | Carl Madaffari | Best Practices | From Customer Data to Customer ...Evolve 19 | Carl Madaffari | Best Practices | From Customer Data to Customer ...
Evolve 19 | Carl Madaffari | Best Practices | From Customer Data to Customer ...
 
Evolve 19 | Kevin Campton & Sharat Radhakrishnan | Industry Focus | Autodesk ...
Evolve 19 | Kevin Campton & Sharat Radhakrishnan | Industry Focus | Autodesk ...Evolve 19 | Kevin Campton & Sharat Radhakrishnan | Industry Focus | Autodesk ...
Evolve 19 | Kevin Campton & Sharat Radhakrishnan | Industry Focus | Autodesk ...
 
Evolve 19 | Gina Petruccelli | Let’s Dig Into Requirements
Evolve 19 | Gina Petruccelli | Let’s Dig Into RequirementsEvolve 19 | Gina Petruccelli | Let’s Dig Into Requirements
Evolve 19 | Gina Petruccelli | Let’s Dig Into Requirements
 
Evolve 19 | Dave Fox | Retaining Niche Talent in a Highly Competitive Environ...
Evolve 19 | Dave Fox | Retaining Niche Talent in a Highly Competitive Environ...Evolve 19 | Dave Fox | Retaining Niche Talent in a Highly Competitive Environ...
Evolve 19 | Dave Fox | Retaining Niche Talent in a Highly Competitive Environ...
 
Evolve 19 | Paul Legan | Going Beyond Metadata: Extracting Meaningful Informa...
Evolve 19 | Paul Legan | Going Beyond Metadata: Extracting Meaningful Informa...Evolve 19 | Paul Legan | Going Beyond Metadata: Extracting Meaningful Informa...
Evolve 19 | Paul Legan | Going Beyond Metadata: Extracting Meaningful Informa...
 
Evolve19 | Giancarlo Berner & Brett Butterfield | AI & Adobe Sensei
Evolve19 | Giancarlo Berner & Brett Butterfield | AI & Adobe SenseiEvolve19 | Giancarlo Berner & Brett Butterfield | AI & Adobe Sensei
Evolve19 | Giancarlo Berner & Brett Butterfield | AI & Adobe Sensei
 
Evolve 19 | Gordon Pike | Prepping for Tomorrow - Creating a Flexible AEM Arc...
Evolve 19 | Gordon Pike | Prepping for Tomorrow - Creating a Flexible AEM Arc...Evolve 19 | Gordon Pike | Prepping for Tomorrow - Creating a Flexible AEM Arc...
Evolve 19 | Gordon Pike | Prepping for Tomorrow - Creating a Flexible AEM Arc...
 
Evolve 19 | Jayan Kandathil | Running AEM Workloads on Microsoft Azure
Evolve 19 | Jayan Kandathil | Running AEM Workloads on Microsoft AzureEvolve 19 | Jayan Kandathil | Running AEM Workloads on Microsoft Azure
Evolve 19 | Jayan Kandathil | Running AEM Workloads on Microsoft Azure
 
Evolve 19 | Amol Anand & Daniel Gordon | Author in AEM Once - Deliver Everywhere
Evolve 19 | Amol Anand & Daniel Gordon | Author in AEM Once - Deliver EverywhereEvolve 19 | Amol Anand & Daniel Gordon | Author in AEM Once - Deliver Everywhere
Evolve 19 | Amol Anand & Daniel Gordon | Author in AEM Once - Deliver Everywhere
 
Evolve 19 | Benjie Wheeler | Intro to Adobe Experience Manager 6.5
Evolve 19 | Benjie Wheeler | Intro to Adobe Experience Manager 6.5Evolve 19 | Benjie Wheeler | Intro to Adobe Experience Manager 6.5
Evolve 19 | Benjie Wheeler | Intro to Adobe Experience Manager 6.5
 
Evolve 19 | Bruce Swann | Adobe Campaign - Capabilities, Roadmap, and Fit wit...
Evolve 19 | Bruce Swann | Adobe Campaign - Capabilities, Roadmap, and Fit wit...Evolve 19 | Bruce Swann | Adobe Campaign - Capabilities, Roadmap, and Fit wit...
Evolve 19 | Bruce Swann | Adobe Campaign - Capabilities, Roadmap, and Fit wit...
 
Evolve 19 | Pete Hoback & Francisco Fagalde | AEM QA, UAT, & Go Live
Evolve 19 | Pete Hoback & Francisco Fagalde | AEM QA, UAT, & Go LiveEvolve 19 | Pete Hoback & Francisco Fagalde | AEM QA, UAT, & Go Live
Evolve 19 | Pete Hoback & Francisco Fagalde | AEM QA, UAT, & Go Live
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 

EVOLVE'14 | Enhance | Gabriel Walt | Sightly Component Development

  • 1. AEM6 Component Development Adobe Experience Manager @GabrielWalt, Product Manager
  • 2. Specification open sourced to GitHub. Implementation donated to Apache Sling. Follow @sightlyio on Twitter. http://docs.adobe.com/docs/en/aem/6-0/develop/sightly.html Adobe Experience Manager
  • 3. Project Efficiency Adobe.com estimated that it reduced their project costs by about 25% JSP Project Adobe Experience Manager Design HTML/CSS Template JSP Logic Java Design HTML/CSS Template Sightly HTML Logic Use-API Project Management Sightly Management ~25% Effort / Cost
  • 4. Development Workflow Improves project efficiency by removing the pain of JSP and Java development Adobe Experience Manager Design HTML/CSS Component Business Logic Inefficient Static HTML being handed over… Front-end Developer – HTML – CSS/JS Java Developer – Java/OSGi – Business logic
  • 5. Development Workflow Improves project efficiency by removing the pain of JSP and Java development Adobe Experience Manager Design HTML/CSS Component Business Logic Front-end Developer – HTML – CSS/JS Java Developer – Java/OSGi – Business logic Efficient APIs to OSGi bundles
  • 6. Development Workflow Can be edited by front-end devs: ✓ Client Libraries (CSS & JS) ✕ JSP (markup & logic) ✓ HTML markup (Sightly template) ✓ View logic (server-side JS, or Java) Adobe Experience Manager Component
  • 7. Sightly basic example <a href="${properties.link || '#'}" title="${properties.jcr:title}"> Adobe Experience Manager ${properties.jcr:description} </a>
  • 8. Sightly basic example <a href="${properties.link || '#'}" title="${properties.jcr:title}"> Adobe Experience Manager ${properties.jcr:description} </a> 1︎ 2︎ 3︎ 1︎ Automatic contextual HTML escaping and XSS protection of all variables 2︎ Fallback value if property is empty 3︎ Remove HTML attribute if value is empty
  • 9. Sightly VS JSP Sightly <a href="${properties.link || '#'}" title="${properties.jcr:title}"> JSP – Scriptlets Adobe Experience Manager ${properties.jcr:description} </a> <%@include file="/libs/foundation/global.jsp"%> <a href="<%= xssAPI.getValidHref(properties.get("link", "#")) %>" <% String title = properties.get("jcr:title", ""); if (title.length() > 0) { %>title="<%= xssAPI.encodeForHTMLAttr(title) %>"<% } %>> <%= xssAPI.encodeForHTML(properties.get("jcr:description", "")) %> </a> Please try again…
  • 10. Sightly <a href="${properties.link || '#'}" title="${properties.jcr:title}"> Adobe Experience Manager ${properties.jcr:description} </a> JSP – Expression Language & JSTL <%@include file="/libs/foundation/global.jsp"%> <a href="${!empty properties.link ? xss:href(properties.link) : '#'}" <c:if test="${!empty properties['jcr:title']}"> title="${xss:attr(properties['jcr:title'])}" </c:if> > ${xss:text(properties['jcr:description'])} </a> Still complex Sightly VS JSP No automatic security
  • 11. Sightly <a href="${properties.link || '#'}" title="${properties.jcr:title}"> Adobe Experience Manager ${properties.jcr:description} </a> JSP – Custom Tag Libraries <%@include file="/libs/foundation/global.jsp"%> <a href="<out:href property='link' default='#'/>" No automatic security <c:if test="${!empty properties['jcr:title']}"> title="<out:attr property='jcr:title'/>" </c:if> > <out:text property='jcr:description'/> </a> Many tags within tags Sightly VS JSP
  • 12. Sightly <a href="${properties.link || '#'}" title="${properties.jcr:title}"> Adobe Experience Manager ${properties.jcr:description} </a> JSP – TagLibs for whole HTML elements <%@include file="/libs/foundation/global.jsp"%> <my:link urlProperty="link" urlDefault="#" titleProperty="jcr:title"> <my:text property="jcr:description"/> </my:link> What does it really do? Sightly VS JSP
  • 13. Sightly <a href="${properties.link || '#'}" title="${properties.jcr:title}"> Adobe Experience Manager ${properties.jcr:description} </a> Readable Explicit Secure Sightly FTW!
  • 14. Building Blocks Expression Language ${properties.myProperty} Block Statements <p data-sly-test="${isVisible}">is visible</p> Adobe Experience Manager
  • 15. Expressions Literals (positive integers, booleans, strings, arrays) ${42} ${true} ${false} ${'Hello World'} ${"Hello World"} ${[1, 2, 3]} ${[42, true, 'Hello World']} Variables (and accessing object properties) ${myVar} ${properties.propName} ${properties.jcr:title} ${properties['my property']} ${properties[myVar]} The available objects are the same ones as in JSP with global.jsp Adobe Experience Manager
  • 16. Expression Operators Logical operations (not, and, or) ${!myVar} ${conditionOne || conditionTwo} ${conditionOne && conditionTwo} Equality / Inequality (only for same types) ${varOne == varTwo} ${varOne != varTwo} Comparison (only for integers) ${varOne < varTwo} ${varOne > varTwo} ${varOne <= varTwo} ${varOne >= varTwo} Adobe Experience Manager
  • 17. Expression Operators Conditional ${myChoice ? varOne : varTwo} Grouping ${varOne && (varTwo || varThree)} Adobe Experience Manager
  • 18. Expression Options Options allow to manipulate the result of an expression, or to pass parameters to a block statement. Everything after the @ are comma separated options ${myVar @ optOne, optTwo} Options can have a value (literals or variables) ${myVar @ optOne='value', optTwo=[1, 2, 3]} Parametric expression (containing only options) ${@ optOne='value', optTwo=[1, 2, 3]} Adobe Experience Manager
  • 19. Expression Options String formatting ${'Page {0} of {1}' @ format=[current, total]} Internationalization ${'Page' @ i18n} ${'Page' @ i18n, hint='Translation Hint'} ${'Page' @ i18n, locale='en-US'} Array Join ${['one', 'two'] @ join='; '} Adobe Experience Manager
  • 20. Test Statement Conditionally removes the element and it's content <p data-sly-test="${properties.showText}">text</p> Output <p>text</p> Adobe Experience Manager
  • 21. List Statement Repeats the content for each enumerable property <ol data-sly-list="${currentPage.listChildren}"> <li>${item.title}</li> </ol> Output <ol> <li>Triangle Page</li> <li>Square Page</li> </ol> Adobe Experience Manager
  • 22. Include Statement Includes the rendering of the indicated template (Sightly, JSP, ESP, etc.) <section data-sly-include="path/to/template.html"></section> Output <section><!-- Result of the rendered resource --></section> Adobe Experience Manager
  • 23. Resource Statement Includes the result of the indicated resource <article data-sly-resource="path/to/resource"></article> Output <article><!-- Result of the rendered resource --></article> Adobe Experience Manager
  • 24. Resource Statement Options Manipulating selectors (selectors, addSelectors, removeSelectors) <article data-sly-resource="${'path/to/resource' @ selectors='mobile'}"></article> Overriding the resource type <article data-sly-resource="${'path/to/resource' @ resourceType='my/resource/type'}"></article> Changing WCM mode <article data-sly-resource="${'path/to/resource' @ wcmmode='disabled'}"></article> Adobe Experience Manager
  • 25. Unwrap Statement Removes the host element while retaining its content <article data-sly-resource="path/to/resource" Adobe Experience Manager data-sly-unwrap></article> Output <!-- Result of the rendered resource --> Use unwrap only when there’s no other way to write your template, to make it correspond as much as possible to the output.
  • 26. Text, Attr & Elem Statements Replaces the content, attribute or element name <div class="active" title="Lorem ipsum" Adobe Experience Manager data-sly-element="${elementName}" data-sly-attribute.title="${title}" data-sly-text="${content}">Lorem ipsum</div> Output <span class="active" title="Hi!">Hello World</span> Use element and attribute with care as they allow to define parts of the markup from the logic, which can lessen the separation of concerns.
  • 27. Use Statement Initializes a helper object <div data-sly-use.nav="navigation.js">${nav.foo}</div> Output <div>Hello World</div> Use data-sly-use when data preparation is needed. To avoid unnecessary abstraction layers, prefer to access the variables directly from the template when possible. Adobe Experience Manager
  • 28. Server-side JavaScript logic <!-- template.html --> <div data-sly-use.nav="navigation.js">${nav.foo}</div> /* navigation.js */ use(function () { return { Adobe Experience Manager foo: "Hello World" }; }); Like for the Sightly template, the objects available in the logic file are the same ones as in JSP with global.jsp
  • 29. <!-- template.html --> <div data-sly-use.nav="Navigation">${nav.foo}</div> /* Navigation.java */ package apps.site_name.component_name; import com.adobe.cq.sightly.WCMUse; public class Navigation extends WCMUse { private String foo; @Override public void activate() throws Exception { Adobe Experience Manager foo = "Hello World"; } public String getFoo() { return foo; } } Java logic When the Java file is located in the content repository, next to the Sightly template, only the class name is needed. But when embedded in an OSGi bundle, the fully qualified Java class name is needed. The Java class either has to extend WCMUse, or it has to be adaptable from request or from resource.
  • 30. What kind of Use-API? Model logic This logic is not tied to a template and is potentially reusable among components. It should aim to form a stable API that changes little, even in case of a full redesign. ➔ Java located in OSGi bundle View logic This logic is specific to the templates and is likely to change if the design changes. It is thus a good practice to locate it in the content repository, next to the template. ➔ JavaScript located in component If components are to be maintained by front-end devs (typically with Brackets). ➔ Java located in component If performance is critical (e.g. when many requests are not cached by the dispatcher). Adobe Experience Manager
  • 31. Template & Call Statement <!-- template.html --> <template data-sly-template.one="${@ class, text}"> <span class="${class}">${text}</span> </template> <!-- other-file.html --> <div data-sly-use.tmpl="template.html" Adobe Experience Manager data-sly-call="${tmpl.one @ class='example', text='Hi'}"></div> Output <div><span class="example">Hi</span></div>
  • 32. Display Context Option The context option offers control over escaping and XSS protection. Allowing some HTML markup (filtering out scripts) <div>${properties.jcr:description @ context='html'}</div> Adding URI validation protection to other attributes than src or href <p data-link="${link @ context='uri'}">text</p> Adobe Experience Manager
  • 33. Display Context Option <a href="${myLink}" title="${myTitle}">${myContent}</a> <script> var foo = "${myVar @ context='scriptString'}"; </string> <style> a { font-family: "${myFont @ context='styleString'}"; } </style> Most useful contexts and what they do: number XSSAPI.getValidNumber uri XSSAPI.getValidHref (default for src and href attributes) attribute XSSAPI.encodeForHTMLAttribute (default for other attributes) text XSSAPI.encodeForHTML (default for element content) scriptString XSSAPI.encodeForJSString styleString XSSAPI.encodeForCSSString html XSSAPI.filterHTML unsafe disables all protection, use at your own risk. safer Adobe Experience Manager
  • 34. Display Context Option <a href="${myLink}" title="${myTitle}">${myContent}</a> <script> var foo = "${myVar @ context='scriptString'}"; </string> <style> a { font-family: "${myFont @ context='styleString'}"; } </style> Preferred method for each context: – src and href attributes: number, uri, attribute, unsafe – other attributes: number, uri, attribute, unsafe – element content: number, text, html, unsafe – JS scripts ⊛: number, uri, scriptString, unsafe – CSS styles ⊛: number, uri, styleString, unsafe ⊛ An explicit context is required for script and style contexts. Don’t set the context manually unless you understand what you are doing. Adobe Experience Manager
  • 35. Adobe Experience Manager Sightly FAQ What does Sightly enable that isn’t possible with JSP? – Systematic state-of-the-art protection against cross-site scripting injection. – Possibility for front-end developers to easily participate on AEM projects. – Flexible and powerful templating and view logic binding features. – Tailored to the Sling use-case. Will JSP go away? – As of today, there are no plans for that.
  • 36. IDE & Developer Mode • Improve learning curve and efficiency of developers • An IDE plugin for each developer role Adobe Experience Manager Brackets plugin for the Front-End developers http://docs.adobe.com/docs/en/dev-tools/sightly-brackets.html Eclipse plugin for the Java developers http://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
  • 37. Work on file system + transparent sync & content editing Adobe Experience Manager IDE Sync Version Control System (Git / Svn) File System Content Repository sync manual pull Brackets / Eclipse IDE auto push IDE works on the File System
  • 38. Adobe Experience Manager Resources Sightly – Documentation – Specification – Sightly AEM Page Example (requires instance on localhost:4502) – TodoMVC Example Tools – Live Sightly execution environment – Sightly Brackets extension – AEM Developer Tools for Eclipse – AEM Developer Mode