AEM Authored Data

• There are hundreds of ways to get data to your FrontEnd components.
• But not hundreds of ways that fit most situations. 

AEM Authored Data

1. Standard method that can be used for one or many instances of a component
2. A web standard way of putting data on the page 

What we are looking for

AEM Authored Data

A Solution

<script type="text/json"
    data-component="headerChooser"
    data-component-config
    data-component-instance="header-chooser">
        {
         "textColor" : "Black"
        }
</script>

data-stoar - @joshuazeltman

Main Configuration - Optional

AEM Authored Data

A Solution

<script type="text/json"
    data-component="headerChooser"
    data-component-instance="header-chooser">
        {
            "hook" : "uniqueName",
            "titleText" : "Test Title",
            "titleType" : "h3"
        }
</script>

data-stoar - @joshuazeltman

Component Data

Initializing

Goals

1. Simple initialization
2. Initialize on page load
3. Initialize both React components and non-react components 

Initializing

A Solution

Mainstay 

var Global = function( clientLibraryComponents ){

    this.componentsToInitialize = new DataStoar();

    mainStay( this.componentsToInitialize, clientLibraryComponents );

}

module.exports = { init : Global };

mainstay - @BenWestrate

Process Overview

Process Overview

See it in action