APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12...
Transcript of APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12...
![Page 1: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/1.jpg)
APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018
AEM and Single Page Applications (SPAs)
Chris Millar, Adobe Systems
![Page 2: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/2.jpg)
About Me
adobe.com platformengineering manager
2
AdaptTo()
![Page 3: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/3.jpg)
AdaptTo()
3
Here’s the deal
1 What is an SPA?
2 What is the AEM SPA Editor?
3 How can we use it?
4 Hybrid (SPA-like) approaches.
5 Wrap up.
![Page 4: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/4.jpg)
AdaptTo()
4
What is a Single Page Application?
![Page 5: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/5.jpg)
AdaptTo()
5
A webpage that can load contentwithout re-loading the entire page.
![Page 6: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/6.jpg)
AdaptTo()
6
SPA 101 | First Request
REQUEST
JS JSON
FETCH JSON
CONTENT
1
2
3 RETURN
4FORMAT
PAGE
![Page 7: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/7.jpg)
AdaptTo()
7
SPA 101 | Second Request
CLICK
JS JSON
FETCH JSON
CONTENT
2
3 RETURN
4FORMAT
PAGE
BUTTON NEW
1
![Page 8: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/8.jpg)
AdaptTo()
8
Why do I want this?
• Load time improvements
• Front-End developer productivity
• Sites feel more dynamic
• Someone read a Medium post
![Page 9: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/9.jpg)
AdaptTo()
9
Why would I not want this?
• Initial page load can be slower
• 100% SEO coverage is desired
• Added complexity
![Page 10: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/10.jpg)
AdaptTo()
10
Not everything is a nail when
you get a new hammer.
#soapbox
AdaptTo()
![Page 11: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/11.jpg)
AdaptTo()
11
AEM SPA Editor
&
![Page 12: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/12.jpg)
AdaptTo()
12
AEM SPA Editor
Combine AEM’s rich content editing
with all the benefits of SPAs.
![Page 13: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/13.jpg)
AdaptTo()
13
AEM SPA Editor | Response
Content-Type: text/html; charset=utf-8
application/json;
![Page 14: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/14.jpg)
AdaptTo()
14
AEM SPA Editor | Content Model
App
Page Page Page
Component
Component
Component
+ +
Component
Component
Component
+ +
Component
Component
Component
+ +
![Page 15: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/15.jpg)
AdaptTo()
15
AEM SPA Editor | Requirements*
• 6.4
• 6.4 SP1
• SPA Feature Pack (1.0RC+)
*at the time of this presentation
• We.Retail Journal
![Page 16: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/16.jpg)
AdaptTo()
16
AEM SPA Editor | Parts
• AEM Bits
• Front-End Bits
![Page 17: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/17.jpg)
AdaptTo()
17
AEM Bits | Overview
1 Build Sling Models
2 Build Dialog
3 Write HTL (optional)
![Page 18: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/18.jpg)
AdaptTo()
18
AEM SPA Editor | AEM Bits
com.adobe.cq.export.json.ContainerExporter
com.adobe.cq.export.json.ComponentExporter
Built on the back of Sling Model Exporters…
![Page 19: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/19.jpg)
AdaptTo()
19
AEM SPA Editor | AEM Bits
com.adobe.cq.export.json.ContainerExporter
Get child elements. Used for Page and LayoutContainer components.
![Page 20: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/20.jpg)
AdaptTo()
20
AEM SPA Editor | Page Container
@Model( adaptables = SlingHttpServletRequest.class, adapters = {Page.class, ContainerExporter.class}, resourceType = PageImpl.RESOURCE_TYPE ) @Exporter( name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION ) public class PageImpl implements Page { // Implement Stuff }
VIEW SOURCE
![Page 21: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/21.jpg)
AdaptTo()
21
AEM SPA Editor | AEM Bits
com.adobe.cq.export.json.ComponentExporter
Used for all other components.
![Page 22: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/22.jpg)
AdaptTo()
22
AEM SPA Editor | Component Exporter
@Model( adaptables = SlingHttpServletRequest.class, adapters = {ComponentExporter.class}, resourceType = HelloWorld.RESOURCE_TYPE ) @Exporter( name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION ) public class HelloWorld implements ComponentExporter { // Implement Stuff }
VIEW SOURCE
![Page 23: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/23.jpg)
AdaptTo()
23
AEM SPA Editor | Front-End Bits
@adobe/cq-react-editable-components
![Page 24: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/24.jpg)
AdaptTo()
24
Front-End | App Bits
import { Page, withModel, EditorContext, Utils } from
@adobe/cq-react-editable-componentsApp
![Page 25: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/25.jpg)
AdaptTo()
25
Front-End | Page Bits
import { Page, MapTo, withComponentMappingContext } from
@adobe/cq-react-editable-componentsPage
![Page 26: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/26.jpg)
AdaptTo()
26
Front-End | Component Bits
import { MapTo } from
@adobe/cq-react-editable-componentsComponent
![Page 27: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/27.jpg)
AdaptTo()
27
Enough Talk
AdaptTo()
27
Let’s dig in.
![Page 28: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/28.jpg)
AdaptTo()
28
Questions
When does the AEM SPA Editor ship?Very soon!
Does it have feature parity with HTL today?…
![Page 29: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/29.jpg)
AdaptTo()
29
• Server-Side Rendering (coming soon!)
• Template Editor UI
• Targeting mode
• Context Hub integration
• Integrated Experience Fragments
• Multi-Site Management locking and unlocking
• Inline image editing
• Apply styles from the Style System
• Editors to undo-redo changes
• Time Warp
• Page aliases
![Page 30: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/30.jpg)
AdaptTo()
Can I mix and match HTL and SPA Components?Not yet.
AdaptTo()
30
![Page 31: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/31.jpg)
AdaptTo()
31
You have options.
(I’m vegetarian)
![Page 32: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/32.jpg)
AdaptTo()
32
HTL
REACT
www.adobe.com problems
![Page 33: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/33.jpg)
AdaptTo()
33
Pre-Built React Components
Can we use this code in AEM?
![Page 34: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/34.jpg)
AdaptTo()
34
Design Systems
Adobe
IBM
Salesforce
![Page 35: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/35.jpg)
AdaptTo()
35
Holistic Development Cycle
React & Storybook
Dialog
Sling Model
Pure Front-End Engineer
Front-End / AEM Engineer
AEM / Java Engineer
Visitor
HTLReact
Native Node PWA
![Page 36: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/36.jpg)
AdaptTo()
Separation of Concerns
React & Storybook
Pure Front-End Engineer
Front-End / AEM Engineer
HTLReact
UX / Design “Must animate like so.”
Business Logic “Must support deep linking.”
![Page 37: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/37.jpg)
AdaptTo()
37
HTL
REACT
www.adobe.com problems
![Page 38: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/38.jpg)
AdaptTo()
38
React DOM Components
Build data-models for React Componentsusing HTL-rendered DOM.
![Page 39: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/39.jpg)
AdaptTo()
39
So that’s what we did…
JAVA
ListModel
JSX
ListWebComponentListDomModel
HTL
list
JSX
ListComponent
JSX
ListState
SERVER-SIDE CLIENT-SIDE
![Page 40: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/40.jpg)
AdaptTo()
40
DOM Component
export default class HelloWorldDOMComponent extends DOMComponent { this.nodeName = 'hello-world'; this.model = HelloWorldModel; this.component = HelloWorld; }
![Page 41: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/41.jpg)
AdaptTo()
41
DOM Component
class HelloWorldModel extends DOMModel { constructor(element) { super(element); this.getDataAttribute('name'); this.getTextContent(); this.getChildDOMModel('foo', FooModel); } }
![Page 42: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/42.jpg)
AdaptTo()
42
DOM Component
export default class HelloWorld extends React.Component { render () { return (<React.Fragment> <p>{this.props.text} {this.props.name}</p> <p>{this.props.title}</p> <Foo text={this.props.fooText} /> </React.Fragment>); } }
![Page 43: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/43.jpg)
AdaptTo()
43
Enough Talk
43
Let’s dig in.
AdaptTo()
![Page 44: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/44.jpg)
AdaptTo()
44
Pros & Cons
ProsMix and match HTL and React.100% SEO Coverage.Write vanilla React components.
ConsTwo Data Models (Sling and DOM)Not a full-blown SPA solution.
![Page 45: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/45.jpg)
AdaptTo()
45
Take-Away
Every project is different. You have many options to solve your SPA needs.
![Page 46: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/46.jpg)
AdaptTo()
46
Links
SPA Editor Sign UpSPA Editor Walkthrough
Getting Started for Developers
Implementing a React Component
SPA Editor Architecture
SPA Editor Overview
SPA Blueprint
SPA Model Routing
SPA Page Component
Dynamic Model to Component Mapping for SPAs
React DOM Components
![Page 47: APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 · APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 AEM and Single Page Applications (SPAs) Chris Millar, Adobe Systems](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f09b6b47e708231d428297f/html5/thumbnails/47.jpg)
47
Q & A