SPA Editor - Adobe Experience Manager Sites

AEM as Headless CMS & SPA Experience Management
Gabriel Walt, Product Management, Adobe

© 2018 Adobe. All Rights Reserved. Adobe Confidential.
Shipped with AEM 6.4 Service Pack 2
2
SPA[*] Editor 1.0
§ Offers in-context editing for JavaScript apps
§ Supports React and Angular
§ Support of History API for routing
§ Support for state library, like Redux
§ Tech preview for JS Server-Side Rendering
[*] SPA = Single Page Application

© 2018 Adobe. All Rights Reserved. Adobe Confidential. 3
Multi-Page Experience
Time Loading
Single-Page Experience
Server Server

Instant Fast loading SPA experiences with AEM
4
client-side
rendering
server-side &
client-side redering
Download HTML Download JS Execute JS and
make JSON calls
Page is interactable
Download HTML
that includes static
version incl. content
Show page and
download JS
Execute JS (no need
for JSON calls)
Page is interactable

Single Page Apps – why does it matter?
6
SPA
Visitors
DevelopersMarketers
native-like experiences
- load > 1s => –7% conversion
- load > 3s => –40% visits
blog.kissmetrics.com/loading-time
visitor retention and engagement
- rich user experiences
- personalized experiences
separation of concerns
- restful JSON as API
- independent front-end dev

Benefits of Multi-Page vs Single-Page Experiences
Multi-Page Experience Single-Page Experience
Response time Slower
Usually 1s to 5s
Fast
Usually 100ms to 1s
Complexity of implementation Simple
Mostly just HTML + CSS
More complex
Framework-specific JS implementation
Technological obsolescence More sustainable
Uses more standardized technologies
Rapid framework evolution
New frameworks appear every year
Development workflow Complex
Front-end handing off HTML to
back-end engineer is not optimal
Simple
Front & back-end engineer agree on JSON
and can work much more independently
Search Engine Optimization Works as-is
Even with invalid HTML, the indexation
will work for all search engines
Might require some effort
Google and Bing can execute JS but it’s
brittle, SSR can mitigate and optimize
7

Headless or Headful – marketers have a dilemma…
8
Why Headful?
Increasing number of channels & segments imply:
§ Efficient preview and editing of channels & segments
§ Authors to be autonomous for creating layouts
§ Editing content & layout in-place must be possible
Why choose? You will need both!
Why Headless?
Increasing number of channels & segments imply:
§ Strictly separated content and presentation
§ Reusable content that is semantically structured
§ Editing must be forbidden in-place

Watch your head!
§ Headless Delivery = CMS delivering the content as JSON, instead of HTML.
à Used to build app-like experiences with rich interactions, like Single Page Applications.
§ Headless Editing = Author editing the content out of the context where it will be used.
à Used for content that is not tied to a specific presentation, like Content Fragments.
9
Headless
Delivery
Headless
Editing≠
Headless Delivery does not have to imply Headless Editing.

Headless and Headful
10© 2018 Adobe. All Rights Reserved. Adobe Confidential.

Experience Management for Single-Page Experiences
13
AEM as a
Headless CMS
(Content Services)
Your other
(micro) services
JSON APIs
Your Single-Page Experiences
(using the AEM JS SDK)
AEM Experience Management UI
(SPA Editor & Site Admin)Practitioner focus
Developer focus
JSON APIs

In-Context Capabilities with the SPA Editor
For content from AEM’s JSON APIs:
1. Editing: define texts, images and other content of JS components.
For content from all services (AEM & your other services):
2. Composition: define which JS components are shown.
3. Configuration: define the settings of the JS components.
4. Layout: define how the JS components flow on the responsive grid.
5. Template: define and edit what is shared among app states.
à As practitioners see the same experience than visitors, they can
immediately evaluate and optimize the end-user experience
in-context during authoring.
14
Offer
Side-bar
Header
Cart
Product Spec
Product Details
content from AEM (as a headless CMS)
data from your other services
SPA Experience Template

Architecture of Multi-Page vs Single-Page Experiences
15
Client (Browser)
Server (AEM)
Multi-Page Experience
Sling Models (model)
manipulates
HTL / JSP (view)
updates
Resource (controller)
HTTP request
HTML Representation (DOM)
HTML response
Client (Browser)
Server (AEM)
Single-Page Experience
Controller
action
manipulates
renders
JS Component (view)
updates
Model
JSON responseHTTP request
Resource (controller) Sling Models (model)

Separation of Concerns in SPA
16
Front-End Engineer
Client (Browser)
Server (AEM)
Controller
action
manipulates
renders
JS Component (view)
updates
Model Manager (provided by the JS SDK)
JSON responseHTTP request
Resource (controller) Sling Models (model)
CQ Component Dialog
updates
Back-End Engineer
Practitioner
Good separation of concerns
uses

How the SPA Editor Works
1. SPA Editor loads.
2. SPA is loaded in a separated frame.
3. SPA requests JSON content and renders components client-side.
4. SPA Editor detects rendered components and generates overlays.
5. Author clicks overlay, displaying the component’s edit toolbar.
6. SPA Editor persists edits with a POST request to the server.
7. SPA Editor requests updated JSON to the SPA Editor,
which is sent to the SPA with a DOM Event.
8. SPA re-renders the concerned component, updating its DOM.
à The SPA is isolated from the editor and always in charge of its display.
à In production (publish), the SPA editor is never loaded.
17
AEM SPA Editor
SPA in iFrame
SPA
component SPA component
SPA component
SPA component
SPA component
SPA
component
editable overlay
editable overlay
editable overlay
editable overlay
editable
overlay
editable
overlay
Content
JSON
EDIT
POST
client-side
re-render
!
Editor frame
SPA frame
JSON
DOM Event
with new JSON

JS Components with React or Angular
JS components can be implemented AEM agnostic and follow framework-specific best practices.
à What is needed is to map them to the AEM resource types via MapTo()
18
import React, { Component } from "react";
import { MapTo } from
"@adobe/cq-react-editable-components";
class MyComponent extends Component {
render() {
return (
<p>
{ this.props.text }
</p>
);
}
}
MapTo("myResourceType")(MyComponent);
import { Component, Input } from "@angular/core";
import { MapTo } from
"@adobe/cq-angular-editable-components";
@Component({
templateUrl: "./my-component.component.html"
})
class MyComponent {
@Input() text:string;
}
MapTo("myResourceType")(MyComponent);

<ng-template>
<p>{{text}}</p>
</ng-template>
React Angular

Front-End Compilation & Tooling
Compilation of JavaScript and of CSS is done outside of AEM and then converted in a ClientLib.
à Potentially any tooling can be used.
19
js
jsx
ts
…
css
sass
less
…
src dist
js
css
img
fonts
…
npm aem-
clientlib-
generator
clientlib AEM
aemfed – allows for live coding of js and less files
using aemsync, Browsersync and Sling Log Tracer

From Build to Delivery
21
Build Environment
JSON
JS
HTML
CSS
Website Author
PageInfo
AEM Publish
ContentSPA Artifacts
Client Libs Components
SPA Source
(JavaScript)
Build System
eg. Webpack
JSON
JS
HTML
CSS
JSONJS HTMLCSS
Dispatcher / CDN
Website Visitor
JSON
JS
HTML
CSS
Component
Source (Java)
Java
Compiler
AEM Author
ContentSPA Artifacts
ComponentsClient Libs
AEM Maven
frontend plugin
SPA NPM
clientlib generator

Debunking Some Myths
As the SPA Editor disrupts how authoring has been done for years.
à We need to debunk some deeply rooted myths about authoring for SPA.
22
Sisyphus Job Security
The Headless Author
The Vandalizing Authors

Myth #1 – The Headless Author
MYTH: Separating the content from the presentation allows to better reuse it in multiple
channels, therefore authors should work headless only.
BUSTED: It’s true that such semantic content can be well reused,
but when publishing it to a channel,
context-specific changes must be possible.
à Therefore, authors must also have access to
some good in-context editing capabilities.
23
The Headless Horseman: a strange tale of Texas.
“Hain’t ye forgot to fetch yur head we’ ye?”

Myth #2 – Sisyphus Job Security
MYTH: Front-end engineers are the most efficient to define the layout of the SPA content
with just some CSS, therefore I need no experience management system.
BUSTED: That’s probably true for the initial release, but
font-end engineers will then endlessly have
to adapt their CSS layout to content changes
made by authors, becoming a real bottleneck
to the publication process.
à Therefore, authors must have a way to
self-service layout changes too.
24
Sisyphus: punished by Thanatos to roll a giantboulder up a hill, only for it to roll down againwhen nearing the top, repeating this forever.

Myth #3 – The Vandalizing Authors
MYTH: Authors will break my SPA if I let them compose, configure, and layout the SPA
components.
BUSTED: It’s true that authors could create ugly layouts,
but fundamentally, managing the layout of
content for apps is not different than managing
it for traditionally rendered websites.
à The same tools and strategies that allow authors
to successfully manage the layout for websites
can and should also be applied to SPA.
25
Vandals on the march to Rome,
blamed for the fall of Rome, even though not being
much different from other invaders of ancient times.

The Big Picture – Headless and Headful
Each is a tool that is best for its specific purpose à combining them works best.
26
DAM
Content Fragment
Content Fragment
Content Fragments
Content Fragment
Content Fragment
Assets
CF Model (=schema)
– Elements
AEM Page
Variation
A
Variation
B
Title component
CF component
– Variation to show
– Elements to show
Image component
SPA
Title
Content
Image
JSONContentServices

Headless Content – Authoring Options
1. AEM Assets HTTP API
Consuming Content Fragments directly from the Assets JSON API.
channel-specific control
in-context editing
2. AEM Sites Content Services
Consuming Content Fragments referenced from pages that map to the app states, using the Page JSON API.
in-context editing
3. AEM Sites Content Services + AEM JS SDK for React/Angular
Same as #2, with the app using the JS SDK that provides a client-side implementation of the Layout Container.
in-context editing
27

Migrating your SPA to the SPA Editor
1. Make your JS components modular
§ Make them capable of being rendered in any order, position and size.
2. Use the containers provided by our JS SDK to place your components on the screen
§ The SDK provides React and Angular page and layout container components.
3. Create an AEM component for each JS component
§ The AEM components define the dialog and JSON output.
29

Overcome the knowledge gap and get started quicker!
30
Start new headless & SPA AEM project
https://github.com/adobe/aem-spa-project-archetype
Step-by-step how to build SPA site
https://helpx.adobe.com/experience-manager/kt/sites
/using/getting-started-spa-wknd-tutorial-develop.html
Interactive API docs
http://opensource.adobe.com/commerce-cif-api/

SPA Editor - Adobe Experience Manager Sites

SPA Editor - Adobe Experience Manager Sites

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a SPA Editor - Adobe Experience Manager Sites

Similar a SPA Editor - Adobe Experience Manager Sites (20)

Más de Gabriel Walt

Más de Gabriel Walt (8)

Último

Último (20)

SPA Editor - Adobe Experience Manager Sites