Is it acceptable for Single Page Web Apps to have multiple requests at startup?

Question

Is it acceptable for Single Page Web Apps to have multiple requests at startup?

I've been dedicated to developing a Single Page Web App (SPA) recently. The frontend is built with BackboneJS/Marionette, while the backend is powered by Java Spring :(. However, I've noticed that the application's start time could be sluggish due to multiple requests being sent to various API endpoints to fetch data for different parts of the app. Even though these are AJAX requests and run asynchronously, it still seems slow. What would be considered best practice in this situation? Initially, I was contemplating consolidating all data into one extensive request, but I'm not certain if that's optimal. Any guidance or code examples would be greatly appreciated.

javascript ajax performance backbone.js single-page-application

Answer 1

Answer №1

When preparing for page load, it is important to include all necessary data in the default html and initialize objects with it. In my case, I utilize AMD to achieve this:

<script data-main="app" src="/lib/require.js"></script>
<script>
define('load', function(){return {
    mymodel : <c:out value="${mymodel}" default="{}" />,
        ...
};});
</script>

In the app.js file:

require([ 'MyModel', 'load'], function(MyModel, load) {
  var myModel = new MyModel(load.mymodel);
   ...
})

Answer 2

When preparing for page load, it is important to include all necessary data in the default html and initialize objects with it. In my case, I utilize AMD to achieve this:

<script data-main="app" src="/lib/require.js"></script>
<script>
define('load', function(){return {
    mymodel : <c:out value="${mymodel}" default="{}" />,
        ...
};});
</script>

In the app.js file:

require([ 'MyModel', 'load'], function(MyModel, load) {
  var myModel = new MyModel(load.mymodel);
   ...
})

Answer 3

Answer №2

Having a single significant request can prove to be beneficial. It might be something you want for synchronization purposes.

Including dynamic content in the HTML file hinders caching of the front end code. This means you cannot deploy your front end as a static entity - like packaging it into a mobile application, for instance. Moreover, this could potentially slow down the initial rendering process, causing the overall loading time of the app to increase slightly due to the need for two requests instead of just one.

Answer 4

Having a single significant request can prove to be beneficial. It might be something you want for synchronization purposes.

Including dynamic content in the HTML file hinders caching of the front end code. This means you cannot deploy your front end as a static entity - like packaging it into a mobile application, for instance. Moreover, this could potentially slow down the initial rendering process, causing the overall loading time of the app to increase slightly due to the need for two requests instead of just one.

Is it acceptable for Single Page Web Apps to have multiple requests at startup?

Answer №1

Answer №2

Similar questions

Automatically choosing a radio button in a carousel using Angular

What could be causing the issue with script.onload not functioning properly in a Chrome userscript?

Error: The function 'check' is not defined and cannot be called when the 'on

In ReactJs, what is the best way to load a new component when a button is clicked?

Making an Angular 6 HTTP GET call using HTTP-Basic authentication

How to Implement Multi Select Drag and Drop Feature in Angular 4?

Unable to retrieve data from the array

Implement an AJAX function to prompt a save dialog before initiating the download process

Determining the height of a Bootstrap column in relation to another element

Error encountered: Unexpected character 'C' found at the beginning of the JSON data received during the Ajax callback

Setting the iDisplayLength property in jQuery Datatables to -1 will display all rows in the table

The AngularJS $HTTP loop counter fails to update

Seems like the ng-show events inside are not being triggered, almost like an invisible image

Executing JavaScript functions when a browser tab is closed

I'm having trouble sending a string to a WCF service using jQuery AJAX. What's preventing me from sending strings of numbers?

"How can we pause the setInterval when the user hovers over the Ajax Quick Cart and resume it once

Experiencing trouble with the integration of react native Vector icons in a current project

I encountered an issue where the data I passed to a component ended up being undefined

Attempting to retrieve the current time using JavaSscript

Leveraging the Recyclability Aspect of a ReactJS Modal