search

adobe / aem-spa-project-archetype

Maven Archetype for creating new AEM SPA projects
Apache License 2.0
61 stars 32 forks source link

SPA Principles in Multi Module Project? #89

Closed nick-khoury closed 4 years ago

nick-khoury commented 5 years ago

I am wondering if there is any reason that I would not (or should not) be able to apply the way SPA project is setup to a more generic multi module project (say created from the archetype https://github.com/adobe/aem-project-archetype). I.E. I am trying to add a react-app module to a multi module project and make it so that any React components I implement can show up in the AEM touch UI editor as components that can be placed on any page by the AEM publisher. Therefore making it possible for React components and HTL components (the default of the multi module project) to be used on the same page along side each other.

I do realize this would be giving up some of the best advantages of using a single page app (correct me if I'm wrong) since each React component would end up reloading every time a new page is navigated to, whereas in a SPA project the page only ever loads once and keeps rendering UI during navigation (and also may use Redux to manage data in order to never get the same network data more than once). I have no say in this decision, it's unfortunately required that I somehow add React components to a non-SPA (multi module) project :/ Other than that I am thinking the React components should be interchangeable with the HTL components.

I'm using AEM 6.5

Any input, opinion or advice is appreciated. Thanks!

fyi @godanny86

godanny86 commented 5 years ago

@nick-khoury yes you should be able to add the react-app module to an existing project archetype as a new maven module. You can configure the aem-clientlib-generator (clientlibconfig.js) to then move the compiled react app into a clientlibrary wherver ui.apps is in your existing project. If you want to use the SPA Editor you would also need to ensure that you have the HierarchyPage and Impl deployed as part of an OSGi bundle and mapped to your Page's resource type (in order to output the JSON that the SPA editor expects)

That being said it looks like you want to mix HTL and SPA components. I personally haven't experimented with this but it seems the approach is to use https://github.com/adobe/react-webcomponent. Keep in mind the approach will change in that the "editable" part of your component will be a regular AEM dialog that persists values to the DOM. You can then use the https://github.com/adobe/react-webcomponent to inject these values into your react component as props. No longer would your react component be consuming JSON from AEM as is the case with the SPA editor, or at least that is my understanding.

Hope this helps!

habansal commented 4 years ago

Closing this issue, as the question had been answered and there has been no follow-up since 2+ months