SlideShare a Scribd company logo
1 of 35
Download to read offline
APACHE SLING & FRIENDS TECH MEETUP
BERLIN, 28-30 SEPTEMBER 2015
Modern Web Applications with Sightly
rev 2.20151005
@raducotescu
Apache Sling committer
Computer Scientist @ Adobe Systems
radu@apache.org
adaptTo()
Modern Web Applications with Sightly
2
We’re talking about Sightly? Again?!
adaptTo()
Modern Web Applications with Sightly
3
What’s changed since last September?
1. The Sightly reference implementation is now a part of
Apache Sling’s core bundles and it’s actively maintained

adaptTo()
Modern Web Applications with Sightly
4
What’s changed since last September?
2. In January 2015 version 1.1 of the language’s
specification was published:

• no more reserved option names

• URI manipulation options

• data-sly-repeat (similar to data-sly-list)

• <sly/> (simpler alternative to data-sly-unwrap)
adaptTo()
Modern Web Applications with Sightly
5
What’s changed since last September?
3. Several performance improvements brought Sightly on-
par with the JSP Scripting Engine (backed by
performance tests)
adaptTo()
Modern Web Applications with Sightly
6
What’s changed since last September?
4. We’ve deprecated the asynchronous JavaScript Use API
(mostly a clone of the Resource API) in favour of a leaner
synchronous API provided by the
org.apache.sling.scripting.javascript
bundle.
adaptTo()
Modern Web Applications with Sightly
7
What’s changed since last September?
5. More developers have started using Sightly in their
projects
adaptTo()
Modern Web Applications with Sightly
8
We have a language specification. We also
have a reference implementation. But I still
think we’re missing something…
adaptTo()
Modern Web Applications with Sightly
9
Sightly Best Practices
1. Components content structure

Organising our components thinking about reusability
and flexibility is really important.

2. Markup

We need to use the simplest markup that does the job.

3. Use API

Having too many options can be confusing at times.
adaptTo()
Modern Web Applications with Sightly
10
Components content structure
1. Try to define a structure that’s flexible enough that will
naturally guide you to inherit from it

2. Avoid creating a new component from scratch if you can
just extend one

3. Define some extension points, even though you might not
be using them now
adaptTo()
Modern Web Applications with Sightly
11
Components content structure
adaptTo()
Modern Web Applications with Sightly
12
Markup
Sightly aims to help developers write simple, uncluttered,
easy to understand markup.
Ideally a template’s markup should be as close as possible to
the markup that will be rendered.
Avoid thinking with a programming mindset when writing
Sightly templates. Logic belongs somewhere else (hint: Use-
API).
adaptTo()
Modern Web Applications with Sightly
13
Markup - data-sly-text
DOs
<!--/* ok for placeholders */-->
<p data-sly-text=“${properties.text}">Placeholder removed on
rendering.</p>
<!--/* if there are no placeholders */-->
<p>${properties.text}</p>
DONTs
<!--/* unnecessary, as you don’t gain anything */-->
<p data-sly-text=“${properties.text}"></p>
adaptTo()
Modern Web Applications with Sightly
14
Markup - data-sly-attribute
DOs
<!--/* use it with attribute maps */-->
<div data-sly-attribute=“${component.attributes}”>…</div>
<!--/* otherwise */-->
<a href=“#” title=“${link.title}”></a>
DONTs
<!--/* overkill */-->
<a href=“#” data-sly-attribute.title=“${link.title}”></a>
adaptTo()
Modern Web Applications with Sightly
15
Markup - data-sly-element
DOs
<!--/* context changeable elements */-->
<list data-sly-element=“${list.ordered ? ‘ol’ : ‘ul’}”>…</list>
<heading data-sly-element=“${component.h}”>…</heading>
DONTs
<!--/* hiding logic */-->
<div data-sly-element=“${comp.elem}”></div>
adaptTo()
Modern Web Applications with Sightly
16
Markup - data-sly-test
DOs
<!--/* store test evaluation for if/else */-->
<div data-sly-test.author=“${wcmmode.edit}”>…</div>
<div data-sly-test=“${!author}”>…</div>
DONTs
<!--/* repeatedly call the same test expression */-->
<!--/* use it to define variables in your templates */-->
adaptTo()
Modern Web Applications with Sightly
17
Markup - data-sly-list
DOs
<!--/* use it on markup that will be rendered */-->
<ul class=“fruits” data-sly-list.fruit=“${fruits}”>
<li class=“list-item ${fruitList.odd ? ‘odd’ : ‘even’}”>
${fruit}
</li>
</ul>
DONTs
<!--/* ok only if you cannot use data-sly-repeat */-->
<sly data-sly-list.paragraph=“${paragraphs}” data-sly-unwrap>
<p>${paragraph}</p>
</sly>
adaptTo()
Modern Web Applications with Sightly
18
Markup - data-sly-repeat (since 1.1)
DOs
<!--/* use it on markup that will be rendered */-->
<p data-sly-repeat.paragraph=“${paragraphs}”>${paragraph}</p>
adaptTo()
Modern Web Applications with Sightly
19
Markup - data-sly-include
Recommendations

<!--/* unwrap if the tag doesn’t provide meaningful markup */-->
<!DOCTYPE html>
<html>
<sly data-sly-include=“head.html” />
…
</html>
adaptTo()
Modern Web Applications with Sightly
20
Markup - data-sly-include
Recommendations

<!--/* however you can avoid unwrapping it if… */-->
<!DOCTYPE html>
<html>
<head data-sly-include=“head.html”></head>
…
</html>

head.html:
<title>${properties.title || properties[‘jcr:title’]}</title>
adaptTo()
Modern Web Applications with Sightly
21
Markup - data-sly-resource
Recommendations

<!--/* same recommendations as for data-sly-include */-->
adaptTo()
Modern Web Applications with Sightly
22
Markup - data-sly-use
DOs
<!--/* integrate it on the top-most tag where you need it; avoid
unwrapping its container tag */-->
<ul data-sly-use.var=“${..}” data-sly-list=“${var.list}”>…
DONTs
<!--/* use it in loops */-->
<!--/* declare all your objects at the top of the script, on <sly>
tags or using data-sly-unwrap */-->
adaptTo()
Modern Web Applications with Sightly
23
Markup - data-sly-unwrap / <sly>
DOs
<!--/* use it sparingly, only when there’s no other option */-->
<head data-sly-use.clientlib="/libs/granite/sightly/templates/
clientlib.html">
<sly data-sly-call="${clientLib.css @
categories='foundation'}" />
DONTs
<!--/* use it to remove markup that shouldn’t have been there in
the first place */-->
adaptTo()
Modern Web Applications with Sightly
24
Markup - the context option
DOs
<!--/* use it carefully, when you really know what you’re
doing*/-->
<div data-type=“comment” data-path=“${comment.path @
context=‘uri’}”>…
DONTs
<!--/* use context=‘unsafe’ if actually a better value could be
used */-->
adaptTo()
Modern Web Applications with Sightly
25
Use-API
It’s the only way to load helper objects for your Sightly
scripts.
While the specification only mentions templates, Java and
JavaScript objects, the API’s implementation from Sling is
much more powerful.
adaptTo()
Modern Web Applications with Sightly
26
Use-API
In Sling the Use-API can load:
1. Sling Models (they’re really cool to use!)
2. Java objects (whether they are OSGi services, are
adaptable from SlingHttpServletRequest,
Resource, implement Use or not, exposed from
bundles or stored in the repository)
3. JavaScript objects, through the use function
4. Any other script evaluated by a Script Engine from Sling
adaptTo()
Modern Web Applications with Sightly
27
Use-API - what’s the best option?
If the logic is not strictly tied to a component and the Use-
object is reusable between scripts:
➡ Java object stored in an OSGi bundle or a Sling Model
(dependency injection FTW)
If the logic is specific to a component:
➡ Java POJO stored in the repository, for best performance
➡ JavaScript stored in the repository, if your components
are maintained mostly by front-end developers

Use objects in the repository should still be treated as API!
adaptTo()
Modern Web Applications with Sightly
28
Best practices on slides. Do we have an app?
Yes. It’s called Publick.
Initially developed by Nate Yolles, to host host his blog:
https://github.com/nateyolles/publick-sling-blog.git
Forked to implement best practices at:
https://github.com/raducotescu/publick-sling-blog.git
Purpose:
Commit it to Sling, as a best practices Sightly + other Sling
goodies fully functional demo application.
adaptTo()
Modern Web Applications with Sightly
29
What is Publick?
Yet another blog engine built on top of Apache Sling,
Sightly, AngularJS and Bootstrap.
AngularJS is only used for creating an interaction with
existing Sling services (mostly the user admin from
/system/userManager).
adaptTo()
Modern Web Applications with Sightly
30
adaptTo()
Modern Web Applications with Sightly
31
adaptTo()
Modern Web Applications with Sightly
32
adaptTo()
Modern Web Applications with Sightly
33
adaptTo()
Modern Web Applications with Sightly
34
Questions?
adaptTo()
Modern Web Applications with Sightly
35
Credits & resources
1. https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/
SPECIFICATION.md - Sightly HTML templating language specification
2. https://github.com/nateyolles/publick-sling-blog - original version of Publick
3. Hand-drawn icons from https://www.iconfinder.com/iconsets/49handdrawing

More Related Content

What's hot

マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07Toshiaki Maki
 
Core Spring + Reactive 김민석
Core Spring + Reactive  김민석Core Spring + Reactive  김민석
Core Spring + Reactive 김민석VMware Tanzu Korea
 
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...OdessaJS Conf
 
From Zero to Hero with REST and OAuth2 #jjug
From Zero to Hero with REST and OAuth2 #jjugFrom Zero to Hero with REST and OAuth2 #jjug
From Zero to Hero with REST and OAuth2 #jjugToshiaki Maki
 
Maximize the power of OSGi in AEM
Maximize the power of OSGi in AEM Maximize the power of OSGi in AEM
Maximize the power of OSGi in AEM ICF CIRCUIT
 
A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019Matt Raible
 
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019Matt Raible
 
Using Automatic Refactoring to Improve Energy Efficiency of Android Apps
Using Automatic Refactoring to Improve Energy Efficiency of Android AppsUsing Automatic Refactoring to Improve Energy Efficiency of Android Apps
Using Automatic Refactoring to Improve Energy Efficiency of Android AppsLuis Cruz
 
Angular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHEREAngular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHERENadav Mary
 
Building A Complex Birt Report
Building A Complex Birt ReportBuilding A Complex Birt Report
Building A Complex Birt Reportsvhovater
 
Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017Matt Raible
 
Angular 8
Angular 8 Angular 8
Angular 8 Sunil OS
 
Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019
Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019
Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019Matt Raible
 
Build Collaborative App Using Polymer and Firebase
Build Collaborative App Using Polymer and FirebaseBuild Collaborative App Using Polymer and Firebase
Build Collaborative App Using Polymer and FirebaseAjit Kumar
 
Spring Boot & Actuators
Spring Boot & ActuatorsSpring Boot & Actuators
Spring Boot & ActuatorsVMware Tanzu
 
Bootiful Development with Spring Boot and React - UberConf 2018
Bootiful Development with Spring Boot and React - UberConf 2018Bootiful Development with Spring Boot and React - UberConf 2018
Bootiful Development with Spring Boot and React - UberConf 2018Matt Raible
 
Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019Matt Raible
 

What's hot (18)

マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
 
Angular 9
Angular 9 Angular 9
Angular 9
 
Core Spring + Reactive 김민석
Core Spring + Reactive  김민석Core Spring + Reactive  김민석
Core Spring + Reactive 김민석
 
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
Rustam Aliyev and Ivan Martynov - From monolith web app to micro-frontends – ...
 
From Zero to Hero with REST and OAuth2 #jjug
From Zero to Hero with REST and OAuth2 #jjugFrom Zero to Hero with REST and OAuth2 #jjug
From Zero to Hero with REST and OAuth2 #jjug
 
Maximize the power of OSGi in AEM
Maximize the power of OSGi in AEM Maximize the power of OSGi in AEM
Maximize the power of OSGi in AEM
 
A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019
 
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
 
Using Automatic Refactoring to Improve Energy Efficiency of Android Apps
Using Automatic Refactoring to Improve Energy Efficiency of Android AppsUsing Automatic Refactoring to Improve Energy Efficiency of Android Apps
Using Automatic Refactoring to Improve Energy Efficiency of Android Apps
 
Angular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHEREAngular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHERE
 
Building A Complex Birt Report
Building A Complex Birt ReportBuilding A Complex Birt Report
Building A Complex Birt Report
 
Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017
 
Angular 8
Angular 8 Angular 8
Angular 8
 
Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019
Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019
Spring Boot APIs and Angular Apps: Get Hip with JHipster! KCDC 2019
 
Build Collaborative App Using Polymer and Firebase
Build Collaborative App Using Polymer and FirebaseBuild Collaborative App Using Polymer and Firebase
Build Collaborative App Using Polymer and Firebase
 
Spring Boot & Actuators
Spring Boot & ActuatorsSpring Boot & Actuators
Spring Boot & Actuators
 
Bootiful Development with Spring Boot and React - UberConf 2018
Bootiful Development with Spring Boot and React - UberConf 2018Bootiful Development with Spring Boot and React - UberConf 2018
Bootiful Development with Spring Boot and React - UberConf 2018
 
Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019Front End Development for Backend Developers - GIDS 2019
Front End Development for Backend Developers - GIDS 2019
 

Similar to Apache Sling & Friends Tech Meetup - Modern Web Apps with Sightly

Onion Architecture with S#arp
Onion Architecture with S#arpOnion Architecture with S#arp
Onion Architecture with S#arpGary Pedretti
 
Scala laboratory. Globus. iteration #1
Scala laboratory. Globus. iteration #1Scala laboratory. Globus. iteration #1
Scala laboratory. Globus. iteration #1Vasil Remeniuk
 
AEM and Sling
AEM and SlingAEM and Sling
AEM and SlingLo Ki
 
AEM and Sling
AEM and SlingAEM and Sling
AEM and SlingLokesh BS
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Mack Hardy
 
five Sling features you should know
five Sling features you should knowfive Sling features you should know
five Sling features you should knowconnectwebex
 
Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkAjax Experience 2009
 
Webpack essentails - feb 19, 2020
Webpack essentails - feb 19, 2020Webpack essentails - feb 19, 2020
Webpack essentails - feb 19, 2020Jesse Colligan
 
MuleSoft Surat Virtual Meetup#6 - MuleSoft Project Template Using Maven Arche...
MuleSoft Surat Virtual Meetup#6 - MuleSoft Project Template Using Maven Arche...MuleSoft Surat Virtual Meetup#6 - MuleSoft Project Template Using Maven Arche...
MuleSoft Surat Virtual Meetup#6 - MuleSoft Project Template Using Maven Arche...Jitendra Bafna
 
Paving the way to a native Sling
Paving the way to a native SlingPaving the way to a native Sling
Paving the way to a native SlingRadu Cotescu
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon
 
ApacheCon NA 2010 - Developing Composite Apps for the Cloud with Apache Tuscany
ApacheCon NA 2010 - Developing Composite Apps for the Cloud with Apache TuscanyApacheCon NA 2010 - Developing Composite Apps for the Cloud with Apache Tuscany
ApacheCon NA 2010 - Developing Composite Apps for the Cloud with Apache TuscanyJean-Sebastien Delfino
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemVlad Fedosov
 
SAPUI5 & OpenUI5 for SAP InnoJam
SAPUI5 & OpenUI5 for SAP InnoJamSAPUI5 & OpenUI5 for SAP InnoJam
SAPUI5 & OpenUI5 for SAP InnoJamDenise Nepraunig
 
Plugin-based software design with Ruby and RubyGems
Plugin-based software design with Ruby and RubyGemsPlugin-based software design with Ruby and RubyGems
Plugin-based software design with Ruby and RubyGemsSadayuki Furuhashi
 

Similar to Apache Sling & Friends Tech Meetup - Modern Web Apps with Sightly (20)

Onion Architecture with S#arp
Onion Architecture with S#arpOnion Architecture with S#arp
Onion Architecture with S#arp
 
Scala laboratory. Globus. iteration #1
Scala laboratory. Globus. iteration #1Scala laboratory. Globus. iteration #1
Scala laboratory. Globus. iteration #1
 
AEM and Sling
AEM and SlingAEM and Sling
AEM and Sling
 
AEM and Sling
AEM and SlingAEM and Sling
AEM and Sling
 
Sightly_techInsight
Sightly_techInsightSightly_techInsight
Sightly_techInsight
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
 
five Sling features you should know
five Sling features you should knowfive Sling features you should know
five Sling features you should know
 
Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample Sdk
 
Webpack essentails - feb 19, 2020
Webpack essentails - feb 19, 2020Webpack essentails - feb 19, 2020
Webpack essentails - feb 19, 2020
 
MuleSoft Surat Virtual Meetup#6 - MuleSoft Project Template Using Maven Arche...
MuleSoft Surat Virtual Meetup#6 - MuleSoft Project Template Using Maven Arche...MuleSoft Surat Virtual Meetup#6 - MuleSoft Project Template Using Maven Arche...
MuleSoft Surat Virtual Meetup#6 - MuleSoft Project Template Using Maven Arche...
 
Sst hackathon express
Sst hackathon expressSst hackathon express
Sst hackathon express
 
Paving the way to a native Sling
Paving the way to a native SlingPaving the way to a native Sling
Paving the way to a native Sling
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
 
SCA Reaches the Cloud
SCA Reaches the CloudSCA Reaches the Cloud
SCA Reaches the Cloud
 
ApacheCon NA 2010 - Developing Composite Apps for the Cloud with Apache Tuscany
ApacheCon NA 2010 - Developing Composite Apps for the Cloud with Apache TuscanyApacheCon NA 2010 - Developing Composite Apps for the Cloud with Apache Tuscany
ApacheCon NA 2010 - Developing Composite Apps for the Cloud with Apache Tuscany
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
 
SAPUI5 & OpenUI5 for SAP InnoJam
SAPUI5 & OpenUI5 for SAP InnoJamSAPUI5 & OpenUI5 for SAP InnoJam
SAPUI5 & OpenUI5 for SAP InnoJam
 
Plugin-based software design with Ruby and RubyGems
Plugin-based software design with Ruby and RubyGemsPlugin-based software design with Ruby and RubyGems
Plugin-based software design with Ruby and RubyGems
 
React django
React djangoReact django
React django
 

Recently uploaded

Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfkalichargn70th171
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITmanoharjgpsolutions
 
Data modeling 101 - Basics - Software Domain
Data modeling 101 - Basics - Software DomainData modeling 101 - Basics - Software Domain
Data modeling 101 - Basics - Software DomainAbdul Ahad
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorTier1 app
 
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...OnePlan Solutions
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLionel Briand
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxRTS corp
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfmaor17
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...Bert Jan Schrijver
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jNeo4j
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shardsChristopher Curtin
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdfAndrey Devyatkin
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonApplitools
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden
 
Copilot para Microsoft 365 y Power Platform Copilot
Copilot para Microsoft 365 y Power Platform CopilotCopilot para Microsoft 365 y Power Platform Copilot
Copilot para Microsoft 365 y Power Platform CopilotEdgard Alejos
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?Alexandre Beguel
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesKrzysztofKkol1
 

Recently uploaded (20)

Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh IT
 
Data modeling 101 - Basics - Software Domain
Data modeling 101 - Basics - Software DomainData modeling 101 - Basics - Software Domain
Data modeling 101 - Basics - Software Domain
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryError
 
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and Repair
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdf
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...
 
Copilot para Microsoft 365 y Power Platform Copilot
Copilot para Microsoft 365 y Power Platform CopilotCopilot para Microsoft 365 y Power Platform Copilot
Copilot para Microsoft 365 y Power Platform Copilot
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
 

Apache Sling & Friends Tech Meetup - Modern Web Apps with Sightly

  • 1. APACHE SLING & FRIENDS TECH MEETUP BERLIN, 28-30 SEPTEMBER 2015 Modern Web Applications with Sightly rev 2.20151005 @raducotescu Apache Sling committer Computer Scientist @ Adobe Systems radu@apache.org
  • 2. adaptTo() Modern Web Applications with Sightly 2 We’re talking about Sightly? Again?!
  • 3. adaptTo() Modern Web Applications with Sightly 3 What’s changed since last September? 1. The Sightly reference implementation is now a part of Apache Sling’s core bundles and it’s actively maintained

  • 4. adaptTo() Modern Web Applications with Sightly 4 What’s changed since last September? 2. In January 2015 version 1.1 of the language’s specification was published:
 • no more reserved option names
 • URI manipulation options
 • data-sly-repeat (similar to data-sly-list)
 • <sly/> (simpler alternative to data-sly-unwrap)
  • 5. adaptTo() Modern Web Applications with Sightly 5 What’s changed since last September? 3. Several performance improvements brought Sightly on- par with the JSP Scripting Engine (backed by performance tests)
  • 6. adaptTo() Modern Web Applications with Sightly 6 What’s changed since last September? 4. We’ve deprecated the asynchronous JavaScript Use API (mostly a clone of the Resource API) in favour of a leaner synchronous API provided by the org.apache.sling.scripting.javascript bundle.
  • 7. adaptTo() Modern Web Applications with Sightly 7 What’s changed since last September? 5. More developers have started using Sightly in their projects
  • 8. adaptTo() Modern Web Applications with Sightly 8 We have a language specification. We also have a reference implementation. But I still think we’re missing something…
  • 9. adaptTo() Modern Web Applications with Sightly 9 Sightly Best Practices 1. Components content structure
 Organising our components thinking about reusability and flexibility is really important.
 2. Markup
 We need to use the simplest markup that does the job.
 3. Use API
 Having too many options can be confusing at times.
  • 10. adaptTo() Modern Web Applications with Sightly 10 Components content structure 1. Try to define a structure that’s flexible enough that will naturally guide you to inherit from it
 2. Avoid creating a new component from scratch if you can just extend one
 3. Define some extension points, even though you might not be using them now
  • 11. adaptTo() Modern Web Applications with Sightly 11 Components content structure
  • 12. adaptTo() Modern Web Applications with Sightly 12 Markup Sightly aims to help developers write simple, uncluttered, easy to understand markup. Ideally a template’s markup should be as close as possible to the markup that will be rendered. Avoid thinking with a programming mindset when writing Sightly templates. Logic belongs somewhere else (hint: Use- API).
  • 13. adaptTo() Modern Web Applications with Sightly 13 Markup - data-sly-text DOs <!--/* ok for placeholders */--> <p data-sly-text=“${properties.text}">Placeholder removed on rendering.</p> <!--/* if there are no placeholders */--> <p>${properties.text}</p> DONTs <!--/* unnecessary, as you don’t gain anything */--> <p data-sly-text=“${properties.text}"></p>
  • 14. adaptTo() Modern Web Applications with Sightly 14 Markup - data-sly-attribute DOs <!--/* use it with attribute maps */--> <div data-sly-attribute=“${component.attributes}”>…</div> <!--/* otherwise */--> <a href=“#” title=“${link.title}”></a> DONTs <!--/* overkill */--> <a href=“#” data-sly-attribute.title=“${link.title}”></a>
  • 15. adaptTo() Modern Web Applications with Sightly 15 Markup - data-sly-element DOs <!--/* context changeable elements */--> <list data-sly-element=“${list.ordered ? ‘ol’ : ‘ul’}”>…</list> <heading data-sly-element=“${component.h}”>…</heading> DONTs <!--/* hiding logic */--> <div data-sly-element=“${comp.elem}”></div>
  • 16. adaptTo() Modern Web Applications with Sightly 16 Markup - data-sly-test DOs <!--/* store test evaluation for if/else */--> <div data-sly-test.author=“${wcmmode.edit}”>…</div> <div data-sly-test=“${!author}”>…</div> DONTs <!--/* repeatedly call the same test expression */--> <!--/* use it to define variables in your templates */-->
  • 17. adaptTo() Modern Web Applications with Sightly 17 Markup - data-sly-list DOs <!--/* use it on markup that will be rendered */--> <ul class=“fruits” data-sly-list.fruit=“${fruits}”> <li class=“list-item ${fruitList.odd ? ‘odd’ : ‘even’}”> ${fruit} </li> </ul> DONTs <!--/* ok only if you cannot use data-sly-repeat */--> <sly data-sly-list.paragraph=“${paragraphs}” data-sly-unwrap> <p>${paragraph}</p> </sly>
  • 18. adaptTo() Modern Web Applications with Sightly 18 Markup - data-sly-repeat (since 1.1) DOs <!--/* use it on markup that will be rendered */--> <p data-sly-repeat.paragraph=“${paragraphs}”>${paragraph}</p>
  • 19. adaptTo() Modern Web Applications with Sightly 19 Markup - data-sly-include Recommendations
 <!--/* unwrap if the tag doesn’t provide meaningful markup */--> <!DOCTYPE html> <html> <sly data-sly-include=“head.html” /> … </html>
  • 20. adaptTo() Modern Web Applications with Sightly 20 Markup - data-sly-include Recommendations
 <!--/* however you can avoid unwrapping it if… */--> <!DOCTYPE html> <html> <head data-sly-include=“head.html”></head> … </html>
 head.html: <title>${properties.title || properties[‘jcr:title’]}</title>
  • 21. adaptTo() Modern Web Applications with Sightly 21 Markup - data-sly-resource Recommendations
 <!--/* same recommendations as for data-sly-include */-->
  • 22. adaptTo() Modern Web Applications with Sightly 22 Markup - data-sly-use DOs <!--/* integrate it on the top-most tag where you need it; avoid unwrapping its container tag */--> <ul data-sly-use.var=“${..}” data-sly-list=“${var.list}”>… DONTs <!--/* use it in loops */--> <!--/* declare all your objects at the top of the script, on <sly> tags or using data-sly-unwrap */-->
  • 23. adaptTo() Modern Web Applications with Sightly 23 Markup - data-sly-unwrap / <sly> DOs <!--/* use it sparingly, only when there’s no other option */--> <head data-sly-use.clientlib="/libs/granite/sightly/templates/ clientlib.html"> <sly data-sly-call="${clientLib.css @ categories='foundation'}" /> DONTs <!--/* use it to remove markup that shouldn’t have been there in the first place */-->
  • 24. adaptTo() Modern Web Applications with Sightly 24 Markup - the context option DOs <!--/* use it carefully, when you really know what you’re doing*/--> <div data-type=“comment” data-path=“${comment.path @ context=‘uri’}”>… DONTs <!--/* use context=‘unsafe’ if actually a better value could be used */-->
  • 25. adaptTo() Modern Web Applications with Sightly 25 Use-API It’s the only way to load helper objects for your Sightly scripts. While the specification only mentions templates, Java and JavaScript objects, the API’s implementation from Sling is much more powerful.
  • 26. adaptTo() Modern Web Applications with Sightly 26 Use-API In Sling the Use-API can load: 1. Sling Models (they’re really cool to use!) 2. Java objects (whether they are OSGi services, are adaptable from SlingHttpServletRequest, Resource, implement Use or not, exposed from bundles or stored in the repository) 3. JavaScript objects, through the use function 4. Any other script evaluated by a Script Engine from Sling
  • 27. adaptTo() Modern Web Applications with Sightly 27 Use-API - what’s the best option? If the logic is not strictly tied to a component and the Use- object is reusable between scripts: ➡ Java object stored in an OSGi bundle or a Sling Model (dependency injection FTW) If the logic is specific to a component: ➡ Java POJO stored in the repository, for best performance ➡ JavaScript stored in the repository, if your components are maintained mostly by front-end developers
 Use objects in the repository should still be treated as API!
  • 28. adaptTo() Modern Web Applications with Sightly 28 Best practices on slides. Do we have an app? Yes. It’s called Publick. Initially developed by Nate Yolles, to host host his blog: https://github.com/nateyolles/publick-sling-blog.git Forked to implement best practices at: https://github.com/raducotescu/publick-sling-blog.git Purpose: Commit it to Sling, as a best practices Sightly + other Sling goodies fully functional demo application.
  • 29. adaptTo() Modern Web Applications with Sightly 29 What is Publick? Yet another blog engine built on top of Apache Sling, Sightly, AngularJS and Bootstrap. AngularJS is only used for creating an interaction with existing Sling services (mostly the user admin from /system/userManager).
  • 34. adaptTo() Modern Web Applications with Sightly 34 Questions?
  • 35. adaptTo() Modern Web Applications with Sightly 35 Credits & resources 1. https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/ SPECIFICATION.md - Sightly HTML templating language specification 2. https://github.com/nateyolles/publick-sling-blog - original version of Publick 3. Hand-drawn icons from https://www.iconfinder.com/iconsets/49handdrawing