This document discusses single page applications (SPAs) and their relationship with content management systems (CMS) like Adobe Experience Manager (AEM). It provides background on the shift from traditional websites to SPAs, outlines benefits and challenges of SPAs for both IT and marketing teams, and describes how AEM 6.4 aims to support content delivery to various channels including SPAs through a decoupled architecture.

1. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AEM & Single Page Applications (SPAs) 101
Shelby Britton and Haresh Kumar - AEM Strategy and Product Marketing

2. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
The World Yesterday
2
CMS for both front-end and back-end
CMS for owned glass only
Web
Mobile

3. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Traditional Webpages
3
Server
click!
Client
HTML
Request

4. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
The World has Changed
4
Channel proliferation requires CMSs to deliver
content to a variety of mature and emerging
channels regardless of glass owner
IT is challenged to develop more content and
deliver it to more channels – need faster and more
flexible development
Marketing needs to work in tandem with IT to
author and edit content in increased velocity
Email
Web
Social
Mobile
Multi-screen
Video
Print
Echo
POS
SPAs
Marketing IT

5. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
The conundrum
IT is developing content like SPAs to move faster
SPAs outside of a CMS cuts out marketing and slows things down
5

6. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Why have SPAs captured IT’s attention?
6
High performance
Mobile traffic is more dominant
Decreased web development time
Availability of trained developers
Shift to micro-services architecture

7. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Single Page Applications: WW Macro Trend
7
SPAs have been popular for several years and remain of steady interest
Source: Google Search Trends
2008-06
2008-11
2009-04
2009-09
2010-02
2010-07
2010-12
2011-05
2011-10
2012-03
2012-08
2013-01
2013-06
2013-11
2014-04
2014-09
2015-02
2015-07
2015-12
2016-05
2016-10
2017-03
2017-08
2018-01
2018-06

8. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What is a Single Page App (SPA)?
8
Web-page(s) that never/rarely reload when getting new information
All calls and interactions are handled by client side (browser) instead of server once it is loaded
! After the initial JavaScript framework download to the browser and first page view, there is no page reloading when
navigating to a second, third, and fourth page - hence the “single page” part of Single Page Application
! New content is the only thing that gets updated (instead of the entire page)
Server
click! Initial page load

9. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What Are Single Page Apps (SPAs)?
9
SPAs are web applications accessed by
browsers. It gives them a resemblance to
the actual websites. However, they are
more like native applications in terms of
functionality.

10. © 2017 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
There are a lot of different frameworks for SPAs
! AngularJS
! https://angularjs.org/
! developed by Google
! React
! https://facebook.github.io/react/index.html
! developed by Facebook
! Vue
! https://vuejs.org/
! developed by Evan You (ex-AngularJS developer)
! Ember and Handlebars
! http://emberjs.com/
! developed by Yehuda Katz (member of jQuery , Ruby on Rails and SproutCore teams)
10

11. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
Example Single Page Apps

12. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
SPA Disrupted Historical AEM Perception
12
SPAs often turn the conversation in a headless-only direction
Convincing customer not to use SPAs does not demonstrate empathy for the customer
AEM’s core message is server-side experience management
Server-side integrations are too expensive

13. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
SPA Benefits for IT
13
Low loading
time
Runs faster Functions
Offline
Responsive
by Nature
Decrease
development time
High performance
personalization

14. © 2017 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
SPA Challenges for IT
• SPAs rely heavily on modern HTML5 browsers
Browser compatibility
• IT needs to find ways to get more out of their developer resources
Cost of development
• The loading of the ‘first page’ in SPA is found to be slower than other web applications.
Initial loading
• Marketing has to work through IT for even the smallest of edits
IT has to do all the heavy lifting
• SPAs demand a bigger workload on the device’s browser
Faster battery power drain for customer
14

15. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
SPA Benefits for Marketers
• Improved page performance allows customers to find the information they need faster
Boosts customer engagement
• Finding information quickly reduces visitor exits
Decreases bounce rates
• A better experience on the site leads to longer visitor sessions
Longer average visitor sessions
• Better experiences and longer sessions lead to higher conversion rates
Improved conversions
• Longer time on the site leads to more visibility for ads on the site
Ad visibility increase
15
$

16. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
SPA Challenges for Marketers
16
• A lack of understanding the SPA technology may cause resistance to its use
Fear of new technology
• Single page JavaScript nature of SPA make crawling/indexing difficult for search engines
Search Engine Optimization (SEO)
• Marketing has to work through IT for even the smallest of edits
Marketing cannot work in tandem with IT
• Marketing can lose control over content developed with SPAs if a done outside a CMS
Loss of control
• Managing SPAs for expansive WW sites outside of powerful CMS tools is inefficient
WW site management

17. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Ideal use cases for SPAs
Ecommerce
storefronts
Intranets
Bank
customer
portals
Email
Social
media
Late sales
stage
information
17

18. © 2017 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AEM Fluid Experiences meets the needs of a SPA world
18
Decoupled Single
platform for content
delivery anywhere
Manage mature and
emerging channels
efficiently
Hybrid CMS gives greater
control to both IT and
marketing

19. © 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AEM 6.4 Delivers Everywhere
4
Deliver compelling digital experiences at scale beyond owned, earned and paid properties –web,
mobile, IoT, SPAs, POS, in-venue screens, etc
Web
Social
Mobile
Multi-screen
Video
Print
Echo
Email
POS
Owned, Earned, Paid
Touchpoints
Brand & User
Generated Content
Omnichannel
Content & Experience
Management
SPAs