Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SPA Editor - Adobe Experience Manager Sites

1,477 views

Published on

The Single Page Application (SPA) Editor of Adobe Experience Manager (AEM) Sites allows in-context authoring (wysiwyg editing) of content that is delivered headless as JSON and rendered in the browser with JavaScript frameworks like React or Angular. AEM provides a JS SDK that is lightweight and that allows the JS components to be built in ways that can be entirely agnostic from AEM: the front-end developers need only minimal AEM knowledge and can work independently from AEM.

Published in: Software
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The fourth installment of this blog series draws a comparison between Adobe Audience Manager (AAM) and Salesforce Audience Studio (Krux) in terms of features, usability, and vision. This will help you identify the right DMP for your business. http://bit.ly/2ubs8Jo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Like Watching Videos? Want to get paid to do it? ▲▲▲ https://tinyurl.com/rbrfd6j
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Adobe Experience platform was one of the biggest announced made by Adobe at their Adobe Summit event. Adobe delivered by revealing the details behind their long awaited Experience Platform (AEP). http://bit.ly/2YcVQr4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

SPA Editor - Adobe Experience Manager Sites

  1. 1. AEM as Headless CMS & SPA Experience Management Gabriel Walt, Product Management, Adobe
  2. 2. © 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. 3. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 3 Multi-Page Experience Time Loading © 2018 Adobe. All Rights Reserved. Adobe Confidential. Single-Page Experience Server Server
  4. 4. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  5. 5. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  6. 6. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  7. 7. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  8. 8. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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.
  9. 9. © 2018 Adobe. All Rights Reserved. Adobe Confidential. Headless and Headful 10© 2018 Adobe. All Rights Reserved. Adobe Confidential.
  10. 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
  11. 11. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  12. 12. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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 HTML Representation (DOM) renders JS Component (view) updates Model JSON responseHTTP request Resource (controller) Sling Models (model)
  13. 13. © 2018 Adobe. All Rights Reserved. Adobe Confidential. Separation of Concerns in SPA 16 Front-End Engineer Client (Browser) Server (AEM) Controller action manipulates HTML Representation (DOM) 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
  14. 14. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  15. 15. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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); <!-- my-component.component.html --> <ng-template> <p>{{text}}</p> </ng-template> React Angular
  16. 16. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  17. 17. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  18. 18. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  19. 19. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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?”
  20. 20. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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.
  21. 21. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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.
  22. 22. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  23. 23. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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. channel-specific control 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. channel-specific control in-context editing 27
  24. 24. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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
  25. 25. © 2018 Adobe. All Rights Reserved. Adobe Confidential. 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/

×