Webmardi - 07.07.2015

at Lausanne

Content-centric web architectures

Case study : Apache Sling

Fabrice HongMatthieu CornutTitouan Galopin

AEM team AEM team

Agenda

1. What is a CMS?2. Content-centric design3. Sling content delivery4. How Sling uses the JCR5. Demo

1.What is a CMS?

ContentManagement

System

Editable by the author=

Not managed by developer

The aim: let the authormanage as much things

as possible

What is really editableby the author?

The minimal CMS

The minimal CMS

Editable pages

Content edition

The minimal CMS

Editable pages

Content edition

id title body date

1 Accueil Bienvenue ... 07-07-15

... ... ... ...

The classical CMS

The classical CMSEditable pages organisedin categories

Content organisation

The classical CMSEditable pages organisedin categories

Content organisation

id parent title body date

1 NULL Accueil Bienvenue! 07-07-15

2 1 Sous-page ... 07-07-15

The enterprise CMS

The enterprise CMS

Editable types of content

Content type composition

The enterprise CMS

Editable types of content

Content type composition

Implementation ? Hum ...

The ideal way: nodes

Most generic storage method

when to use it ?

2. Content-centric design

structure

data

Who is the leader ?

structure

data

Back to IT

Predefine the structure Let the structure emerge

or

Ask yourself

Is it known in advance ?● The final result● The evolution

o consumerso the interfaceo the scale

Caching - ajax injection

Caching - SSI

CDN Caching - ajax injection

Add servers

Thin / Thick client

CDN Caching - ESI

! page loading, SEO

! dev env.

! business logic, SEO

! server price

Visitor number

Visitor location

Interactivity

Slow Backend integration

Evolutions Solutions Down sides

moreover, conditions are constantly evolving...

The right balance is not easy to choose

STRUCTURE FIRST in an impredictible ecosystem

or, how should we extend the house ?

DATA FIRST can be ambivalent

Apache Slinga content-centric web framework

Some history about Apache Sling● Initially : internal framework powering CQ5 (WCMS from Day Software)● 2007 - Donated to Apache Software foundation● 2009 - Graduated as Apache top level project● 2010 - Day Software aquired by Adobe. CQ5 renamed to AEM● Sling still used by AEM

Java Content Repository (JCR)

Stack

Apache Sling

Java Runtime Environement

Servlet Engine App Server (optional)OS

GI

Fra

mew

ork CMS App

Apache Felix

Apache Jackrabbit

And how you *should* leverage it

3. How Sling uses the JCR

Before all : some specs

A CMS data structure

Hierarchies can store nearly every logic in a natural and readable way

JCR features

“Content Repositories are the best of databases and file systems”

JCR 1.0 : JSR-170JCR 2.0 : JSR-283

How do Sling uses the JCR ?

titleauthor

news list content

navigation

footer

edit

Example : online newspaper website

Services

Controller

Templates

Url MappingUrl Mapping

● Mapping news?id=23 -> newsController

● Get / store content from database

● Map content to template vars

● Select template

● CRUD

● Access Control Management

● Versioning

Services

Controller

Templates

DatabaseDatabase

Server

Static

Standard web framework

Web Client

In Sling, it will be entirely in database

Typical content

● Page organisation● Internal page structure● Authoring content

But also:

Validation rules

Rendition scripts Jobs

Java

The answer to life, the universe and everything

The JCR

In a Sling application :● Externalize what does not require java skills

o rapid testing / developing / demoso visualisation (in opposition to JAR content)

● Leverage JCR features

Practical for development

news-list

news1news2

Filesystemmappable

● Human readable● IDE friendly● VCS friendly

JCR (Apache Jackrabbit)

And Sling ?

Apache Sling

Java Runtime Environement

Servlet Engine App Server (optional)OS

GI

Fra

mew

ork CMS App

events, search, versioning, access control

?

How a Sling application *should* interact with the JCR ?

4. Sling Content Delivery

Services

Controller

Templates

Url MappingUrl Mapping

Services

Controller

Templates

Database

Server

Static logic

Standard webapp

Web Client

Database

Server

Web Client

REST API

binding

Sling idea

Java Content Repository (JCR)

REST:● CRUD ops. for each nodes

○ GET, POST, PUT, DELETE ● Cacheable● Stateless / scalable

Templates /ComponentsContent

Server

Web Client

REST API

binding

Sling idea

Java Content Repository (JCR)

Templates /ComponentsContent

Content first !

website/news.jsp?id=341

website/news/webmardi/2015_07_07-sling.html

How to write in database ?

<form method="POST"><input type="text" name="title"/>

<input type="text" name="content"/>

<input type="submit" name="save"/>

</form>

Security ? Binding Logic ?

Access Control Management

Event observation

Servlet / Filters

OSGI Services

● REST force server side simplicity● Boilerplate layers replaced by safeguards● Everything that is externalized in JCR is interoperable

The client chose the representation

content

news-list

news1

news2

components

news

news.jsp

.content.xml

titlecontentof type

refers

Server

news-list/news2.htmlnews-list/news2.small.html

Content representation

small.jsp

Web Client

path selector extension (additional discriminator for servlet)

Sling rendering resolution

news.esp

<div class="newsTitle"><%= currentNode.title %>

</div><div>

<div class="newsContent">

<%= currentNode.content %>

</div>

<% sling.include("./author", "replaceSelectors=quickLink") %>

</div>

Scriptable in

● JSP● ESP● Groovy● Ruby● Velocity

More resilient to external evolution ?

Caching - ajax injection

Caching - SSI

CDN Caching - ajax injection

Add servers

Thin / Thick client

CDN Caching - ESI

! page loading, SEO

! dev env.

! business logic, SEO

! server price

Visitor number

Visitor location

Interactivity

Slow Backend integration

Evolutions Solutions Down sides

Component inclusion

newsList

news1

news2

Application Server Web ServerC

DN

other content

Switzerland

Cach

e

China

Application includes Server side includes Ajax includes

ajax or html includeajax or html include

Conditions for ambivalence

Must be flexible on:

where components are included

how to the components is represented

content-centric -> independence of components :each component is responsible for loading its data and dependencies

newsList/news1.htmlnewsList/news1.jsonnewsList/news1.small.html

Extreme example

Sling Dynamic Include allows to switch dynamically between :● Server side include● Edge side include● Ajax include

5. Demo

Summary

● Structure first or Data firsto One shot project / Evolutive systemo relation with agilty ?

● Go along with the technologyo leverage JCR featureso leverage sling REST approach