Expand my Community achievements bar.

SOLVED

Application Architecture - API Integration, AEM, VueJS, KendoUI

Avatar

Level 4
Level 4

Hey guys,

 

We have an application architecture wherein a set of APIs are exposing the data via which we need to create custom Forms, Graphs etc.

 

Approach 1 - The idea is to have AEM call the APIs then expose a custom object to VueJS for rendering the data on the page.

Approach 2 - AEM calls the VueJS component directly which calls the APIs and consumes the response.

 

Is there any drawback to having the AEM act as a response filterer before passing the data to VueJS?

Or from performance perspective is there something to take into account?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @_CL 
Not sure if you can all API directly at client-side in your frontend code?

If you need to hide api credentials then you can use dispatcher / CDN as proxy but using AEM is proxy will add additional load on AEM.



Arun Patidar

View solution in original post

7 Replies

Avatar

Level 8

@_CL  Approach 1 would good as AEM would work as middle layer/ business logic layer here before passing object to Vue 

Avatar

Level 8

Hi @_CL,

this one is hard to answer without knowing more about your architecture and the load external APIs can handle. I'm not too fond of the approach where AEM is used as a proxy for external services. It will work, but it sounds like an old-school architecture approach where everything is baked into the CMS. This could be something that could be solved with a microservice or at the CDN level with Edge Workers.

 

Good luck,

Daniel

Avatar

Community Advisor

Hi @_CL 
Please check article by Jörg, that claery says, do not use AEM as proxy

Do not use AEM as a proxy for backend calls : https://cqdump.joerghoh.de/2024/06/27/do-not-use-aem-as-a-proxy-for-backend-calls/ 



Arun Patidar

Avatar

Level 4
Level 4

@arunpatidar Then how should we handle such a use case?

Here's my flow -

1. Form fields written in AEM to capture form data

2. Basis form fields, REST API is triggered to fetch the response.

3. The response is rendered in AEM dynamically and then further exposed to render graphs etc.

 

What should be the best way to implement this use case?

 

 

Avatar

Correct answer by
Community Advisor

Hi @_CL 
Not sure if you can all API directly at client-side in your frontend code?

If you need to hide api credentials then you can use dispatcher / CDN as proxy but using AEM is proxy will add additional load on AEM.



Arun Patidar

Avatar

Level 8

@_CL  

using dispatcher / CDN as proxy again indirectly depended on the AEM with limitations , keeping with AEM give more control to drive an business logic on top of the API response and hiding credential. 

Keeping external microservices is also an option but will bring in additional cost from operation and resourcing standpoint . If it is case of single service AEM backend would be good as it reduce the operational and resourcing cost.

Apart of from the Architecture consider other aspect of end of end  IT process along with resourcing and infra in case if you need to plan for Microservice / API gateway 

 Microservice / API gateway would be good if have many number of calls or high traffic but if it limited example contact us form with having less than 100 form submission in a month would think AEM backend would be better option to avoid heavy lifting on the backend 

Avatar

Administrator

@_CL Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni