Mashup Initiated by JavaScript (React.js)
We have a project where there are concerns about Mashup technology aspects. The comment came as:
The Hub is built as a single-page app architecture, with server-side rendering. Due to the nature of the script used, the form is only generated on page load, so if a user browses from the applications page to an application, the form will not be displayed without a refresh.
Another comment is saying the same (based on my understanding).
Due to the large amount of forms and the forms only being generated on page load and hidden by CSS rules, we can suffer performance problems - which we previously resolved - from having to keep a large amount of HTML in the browser.
My own interpretation of these problems is:
Can we defer load on the mashup and display it dynamically by JavaScript? Our web application is one page and everything is controlled by JS (React.js). The only way we could make it work so far is to load mashup on page load which is definitely not what we want or can do.
We might easily end up with tens of mashups in this application. What we are looking for is to display one Mashup at a time based on some event (e.g. click). Is it something we are able to do? As you probably know, tens of iframes in the HTML would slow everything extremely down. We are looking to optimize our application for mobile and speed is one of the success criteria.
We have a project where there are concerns about Mashup technology aspects. The comment came as:
The Hub is built as a single-page app architecture, with server-side rendering. Due to the nature of the script used, the form is only generated on page load, so if a user browses from the applications page to an application, the form will not be displayed without a refresh.
Another comment is saying the same (based on my understanding).
Due to the large amount of forms and the forms only being generated on page load and hidden by CSS rules, we can suffer performance problems - which we previously resolved - from having to keep a large amount of HTML in the browser.
My own interpretation of these problems is:
Can we defer load on the mashup and display it dynamically by JavaScript? Our web application is one page and everything is controlled by JS (React.js). The only way we could make it work so far is to load mashup on page load which is definitely not what we want or can do.
We might easily end up with tens of mashups in this application. What we are looking for is to display one Mashup at a time based on some event (e.g. click). Is it something we are able to do? As you probably know, tens of iframes in the HTML would slow everything extremely down. We are looking to optimize our application for mobile and speed is one of the success criteria.
Thanks a lot for your help in advance.
Accepted Solution
Pegasystems Inc.
US
Any Web Mashup (IAC) gadget can be defer loaded such that it does not load (generate the iframe) until invoked via a JavaScript api call.
Here's an example:
<div id="PegaContent"
style="display:none;"
PegaGadget="MyMashupGadget"
PegaA = "createNewWork"
PegaA_className = "UServ-InsuranceProducts-AutoQuote"
PegaA_flowName = "AutoQuote"
PegaDefer = "true">
</div>
<!--Click the button to load the gadget via Javascript-->
<button onclick="loadGadget('MyMashupGadget')">Load the gadget</button>
<script>
function loadGadget(gadgetName) {
pega.web.api.doAction(gadgetName,"load");
}
</script>
Any Web Mashup (IAC) gadget can be defer loaded such that it does not load (generate the iframe) until invoked via a JavaScript api call.
Here's an example:
<div id="PegaContent"
style="display:none;"
PegaGadget="MyMashupGadget"
PegaA = "createNewWork"
PegaA_className = "UServ-InsuranceProducts-AutoQuote"
PegaA_flowName = "AutoQuote"
PegaDefer = "true">
</div>
<!--Click the button to load the gadget via Javascript-->
<button onclick="loadGadget('MyMashupGadget')">Load the gadget</button>
<script>
function loadGadget(gadgetName) {
pega.web.api.doAction(gadgetName,"load");
}
</script>