React.js + AEM

CIRCUIT - An Adobe Developer Event

Presented by ICF Interactive

Overview

  • What is React.js?
  • Why use React.js? 
  • How to get data to your react components?

What is React

  • React is developed by Facebook 
  • React uses a Virtual Dom
  • React helps keep your code in small reusable components

Why Use React.js?

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

The End

Questions?

Contact Me

Made with Slides.com