Evole18 | Ian Reasor & Amol Anand | AEM and SPA Content Management
•Download as PPTX, PDF•
1 like•200 views
As more and more companies move to single-page applications to improve their user experience, there is increasing pressure on AEM as a platform to provide content management capabilities for these experiences. In this session, we will look at the features introduced with AEM 6.4 to allow for in-context editing of single-page applications as well as tools for using AEM as a headless CMS.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Evole18 | Ian Reasor & Amol Anand | AEM and SPA Content Management
Similar to Evole18 | Ian Reasor & Amol Anand | AEM and SPA Content Management (20)
More from Evolve The Adobe Digital Marketing Community
More from Evolve The Adobe Digital Marketing Community (20)
Recently uploaded
Recently uploaded (20)
Evole18 | Ian Reasor & Amol Anand | AEM and SPA Content Management
- 1. #evolve18 AEM AND SPA CONTENT MANAGEMENT Ian Reasor & Amol Anand Adobe
- 2. #evolve18 2 ABOUT US Photo placeholder Ian Reasor Senior Architect Adobe Partner Experience Email - ireasor@adobe.com LinkedIn - /in/ireasor/ Twitter - @ireasor Photo placeholder Amol Anand Principal Consultant Adobe Customer Solutions amol@adobe.com - Email /in/amolanand - LinkedIn @iamolanand - Twitter
- 3. #evolve18 3 WHAT IS AN SPA? What are they? Why are they popular? How can we give marketers the ability to author them?
- 4. #evolve18 All content loaded client-side through JS No page loads while navigating Behaves like a native application Provides rich user experiences Independent front-end development Good separation of concerns SINGLE PAGE APPLICATIONS
- 5. #evolve18 5 TRADITIONAL AEM RENDERING Rendering Script (HTL/JSP) OSGi Services Sling Models Authored Configurations
- 7. #evolve18 AEM Delivery 7 IN THE BEGINNING… DEPLOY YOUR SPA IN AEM AS A STANDALONE APP IN A CLIENT LIBRARY Code Content Presentation AEM Display
- 8. #evolve18 Content 8 …AND THEN CONTENT SERVICES CAME… SERVE YOUR CONTENT TO THE SPA THROUGH CONTENT SERVICES Code Content Presentation AEM Display AEM Delivery
- 9. #evolve18 CONTENT SERVICES DEMO Content Fragment Model Content Fragments Content Service API Pages model.json Core & Custom Components Sling Model Exporter AEM or 3rd Party Consuming Applications
- 10. #evolve18 Content 10 Code ContentPresentation AEM Display AEM Delivery ..AND NOW, WE HAVE THE SPA EDITOR! USE THE AEM EDITOR TO EDIT YOUR SPA CONTENT IN-CONTEXT
- 11. #evolve18 SPA EDITOR DEMO AEM Page model.jsonCore & Custom Components Sling Model Exporter Native SPA Framework Adobe SDK SPA Native Components
- 12. #evolve18 AEM AS A HYBRID CMS traditional marketers & developers channel specific content in-context editing, end-to-end control multi-channel support headless channel neutral content via API developers multiple technologies, reusable additional application stacks content presentation control benefits challenges SPA Editor Content Services
- 13. #evolve18 THANKS! Ian Reasor & Amol Anand
Editor's Notes
- The page doesn’t need to reload while navigating Provides a smoother user experience Behaves like a desktop application
- As SPAs came on the scene, we didn’t have any initial support for them. Developers would write their SPA and compile it to Javascript and CSS Content would be hardcoded into the app As would the layout and design Then the whole thing would be packaged up and deployed to AEM which just served it up as a simple web server. Any time we needed to change content or layout, we needed developers to make a code change.
- With the introduction of content services, we were able to serve content to SPAs as a headless CMS Developers continue to write their SPA and compile it to Javascript and CSS Layout and design still lived within the app, but content could be loaded into the app through a REST API call to AEM Any time we needed to change the layout, we needed developers to make a code change, but authors could freely update the content without IT intervention.
- Start with Consuming Application Look at JSON Look at Page Editor for CS API Page Look at content fragment Look at CFM Make a change to the CF See change in JSON See change in consuming application
- With the new SPA Editor, we are able to support SPAs while still delivering rich authoring capabilities Front end developers continue to write their SPA and compile it to Javascript and CSS – no AEM knowledge needed! In addition to the content living in AEM, much of the layout and design can live in AEM as well. This allows AEM authors to make updates to their application without IT intervention.
- Authoring interface Show drag and drop/editing Show page content loading via JS Show JSON that is being RESTfully called (Content Services) Show the MapTo() – React component Show the AEM component dialog and Sling model – AEM component
- Traditional CMS is going to deliver full formatted content where as the headless cms is designed to deliver channel neutral content In terms of presentation control, with a traditional CMS you are still relying on developers but you are able to provide marketers the ability to make layout and presentation decisions, with a headless cms this control is going to fall much more on the developer side Some of the benefits of a traditional approach is that you are managing a single application stack and you have end to end control. With a headless cms the big benefit is that everything is API driven so your'e not tied to a specific technology and you are freeing up development across multiple channels Traditional CMS can struggle to provide additional multi channel support and might not be as agile. With a headless CMS the total cost of ownership could potentially be higher as you need to have additional infrastructure to host the front-end applications In 6.3, we introduced Content Services with a feature pack Now in 6.4, we have the SPA Editor to enable marketers to take control of the content and layout of Single Page Applications