How to pass backend variable values to presentation layer

[asn_india]

Lot of projects these days are using JS frameworks like angular,react with AEM.

How does one pass variable values from sightly/HTL to JS layer?

Because including those values in DOM as data- attribute or as hidden element and retrieving with JS DOM traversal wouldn't be good choice if there are too many values to be passed?

It would be great if someone could point me to some example!!

Thanks in advance.

[Gaurav-Behl · Accepted solution]

It depends on requirements/use cases. As you mentioned, one of the ways is creating data attributes or hidden elements in DOM, there are other way to achieve this is using content services-JSONs either OOB or create custom JSON using Sling Exporter or using Content Fragment JSONs (CAAS) or similar ways.

check -

Adobe Experience Manager Help | Set up Content Fragments and Content Services in AEM

AEM 6.3 First Looks: Content as a Service – Adobe

Developing AEM Mobile Content Services ​​

CaaS for a page content in aem

Best way to expose existing pages as JSON?

Adobe Experience Manager Help | Developing Sling Model Exporters in AEM