Adobe Experience Manager

What is AEM?

- Expensive Enterprise CMS

- Allows easy content authoring with a few important features

- Advanced authoring environment with:

       - Targeting content based on user data

       - Versioning pages, revert/compare

       - Drag and drop page creation

       - Easy extensibility/customization (pretty much required)

       - Built in support for common enterprise technology (ie LDAP)

Why it matters

- AEM can be difficult to learn

- Full of legacy code, bad design decisions, and technical debt

- Documentation is lacking, troubleshooting is difficult

However,

- AEM is selling like crazy

- Thousands of sites running AEM and more every day

- Many of our clients are beginning to ask about AEM

- It is, by far, the best authoring experience out there

AEM Anatomy

Sling

      - Java web framework

Jackrabbit Oak (JCR)

      - Unstructured node repository

AEM

      - CMS tools and functionality

      - Just custom Sling servlets and JCR nodes

OSGI

      - Overarching dynamic component system

      - Based on Apache Felix

AEM History

2002
Originally known as Day CQ created by Swiss software company Day Software (fun fact: all legacy Java classes in AEM are name spaced under com.day)

2010
Day Software was acquired by Adobe and Day CQ5 was renamed to Adobe CQ5

2013
Following the release of Adobe CQ 5.5 it was renamed Adobe Experience Manager 5.5

2017
AEM 6.3 was released and the platform continues to grow in popularity among Adobe's already large existing customer-base

2018
AEM releases AEM 6.4. Adds single page app support and more

~32,000 servers running AEM

~120,000 domain names built on AEM

Where's the database?

- JCR

       - Unstructured node content repository

       - They say it's like NoSQL, but it's No NoSQL

       - Works more like a filesystem

- Content Repositories vs Databases

       - Very good at abstract, unrelated, inconsistent content

       - Very bad at structured, ordered data

- Where do databases do well?

       - Model-based data sources

               (ie. many dealerships with many cars)

       - Consistent structure (NoSQL allows for some variation)

       - Components based on querying this data

- Where do content repositories do well?

       - Content that has no structure - think content vs data

Sightly aka HTL aka Rhino

- HTL

      - Server-side templating language

      - Directives can get data from many sources

      - In AEM, the template is the entrypoint of the request lifecycle

            - URLs describe a resource

            - Resources render to responses based on some logic

Dialogs

- Allows authors to edit information

- Fully customizable/extendable

- Described in XML

- Leverage examples where possible

...
<content
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container">
    <layout jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
    <items jcr:primaryType="nt:unstructured">
        <column jcr:primaryType="nt:unstructured"
          sling:resourceType="granite/ui/components/foundation/container">
          <items jcr:primaryType="nt:unstructured">
            <text jcr:primaryType="nt:unstructured"
              sling:resourceType="granite/ui/components/foundation/form/textfield"
              fieldLabel="Text"
              name="./text"/>
          </items>
        </column>
    </items>
</content>
...

XML

Result

JavaScript.equals(Java)

- Sightly supports a language abstraction called Rhino

- It's JavaScript - but... it's... Java

- Verbose languages like Java are overkill for simple components

- Rhino allows us to read/modify the JCR easily

use(function () {

    // The actual text content from the dialog
    var text = properties.get("text", 'Enter text');

    // Return a context object to the template
    return {
        text: text
    };
});

<div data-sly-use.card="card.js">
    <!-- Conditional expressions -->
    <p class="card__error" data-sly-test="${!card.text}">
        Configure component first.
    </p>
    <p class="card__text" data-sly-test="${card.text}">
        <!-- Insert data from context object -->
        ${card.text}
    </p>
</div>

Logic (Rhino)

Template (HTL)

JavaScript.equals(Java)

AEM Extensions

- Communities

      - Calendar

      - Questions & Answers

      - Comments

      - User and content moderation

- Commerce

      - Adds e-commerce support

      - Support for multiple backends (Hybris, etc)

      - Payments, shipping logistics, etc

Component Demo

Card Component

Card Component With Parsys

API Endpoint

Scheduled Task