[ABP 5.2] Generating Create and Edit modals is extremely slow using Web project #2881

jkrause created 2 years ago

Hi,

We have been integrating ABP Commercial Business into our new project and so far it has been a good experience. Getting our domain and entity models added, we initially opted for using Suite to generate the UI components, but considering and realizing the more unique requirements, eventually settled on adding them manually after studying the generated code.

We opted to move these requirements to their own module where appropriate, and together with two additional modules, Metronic 8 and Multilingual, we have been able to get the authentication and dashboard integration working fine with our data models. The pages are not crazy fast, but consistent, and the 'user experience' is fine considering the current stages of development. It took some getting used to, to figure out where everything should go, especially with the localization and modules, but we feel we are at a good state none the less.

However, we came to the point where we wanted to try and figure out the 'modal' experience, which is also part of the default generated website and the pages generated with Suite. We generated the CRUD experience for 1 particular model, studied the generated code, removed what we didn't need, and added what we did need (mostly Metronic styling). The auto-generated HTTP/API and proxy classes gave an additional hurdle to fully understand the minimal requirements to get it all working together, but we did and the result was good, visually.

We decided on a more traditional approach for the models, whereas the 'index' and 'list' pages are using Knockout JS, but we are using razor pages for loading the modal content. These modals have been using the generated suite ABP tag helpers where applicable and regular (Microsoft) tag-helpers to get the desired output. We do have some script bound to provide an auto-complete experience, but it is with the form rendering where we are experiencing the first serious slowdown.

Loading the 'Create' modal of the model, that is showing your typical "Name, Address" fields takes 3-4 seconds to load. We double checked the API call and verified that it completed in 60ms, so it's not the ABP backend causing a slow-down. Since it is a Create modal, there are no additional DB queries involved, in fact we removed everything that could potentially slow it down, returning an empty new FooViewModel() as the result, but still the dialog loaded extremely slow.

However, this did sped up the initial experience (not having to load all navigation properties, like list of companies, list of users) it did not speed up the modal loading part. We analyzed all we could think of, removing tag-helpers, removing the modal body, enabling trace logging, double-checking no EF queries are being fired. Perhaps slow scripts that could prevent the dialog from showing, but nothing explained the slow-down. We installed AppInsights, but no additional insights into what caused the slow-down. Logging output also revealed no additional information as there are simply 2-3 lines visible where it matches the route and then 3-4secs later an indication that the content is being shown.

We then started to time the entire call, which is divided as follows:

~60ms to initialize/retrieve the 'Get' operation of the CreateModal razor page
~3500ms to render all form controls of the modal
~1000ms to render the two dropdowns containing translated Enum values

We checked with F12 in Chrome/Edge to verify that the website was waiting for the server to render the modal, we also verified this by calling just the 'create-modal' route, and that is taking almost 4 seconds to render. We then removed all form/tag helpers on the modal, and it renders in ~100ms. Then every single form field, using a tag-helper adds 200-400ms delay, and as mentioned earlier, the two dropdowns containing localized Enum values, take upwards to 500ms each.

Checking the Network tab in Chrome reveals the total load time of the modal itself:

We then added a Stopwatch on the Razor page to show the rendering times of each control:

We tried quite a lot of things to determine what could, or should not be part of the issue:

Sending a regular GET request to the API endpoint, request takes 60ms
- Statement: ABP "Backend" is not the cause of the slowdown
- Statement: DB queries are not impeding the page load
Requesting the create-modal route itself, dialog still takes 4500ms
- Statement: Therefor, scripts are not impeding the page load as no scripts are loaded and executed
Removing all modal body content, dialog takes 100ms
- Statement: ABP "Frontend" itself is likely not causing the slowdown, as the page is rendered quickly, thus issue has to be server-side
Replacing the tag-helpers with @Html.DisplayFor and @Html.Input, dialog takes 200ms
- Statement: Tag-helpers are somehow causing the slowdown??
Replacing the ABP tag-helpers with Microsoft built-in tag-helpers, dialog takes 3500ms
- Statement: ABP localization of the select element takes 500ms each (using MS tag-helpers effectively disables the localization that ABP-Select provides)
- Statement: ABP Tag-helpers are seemingly not the cause of the slowdown
- Statement: Tag-helpers themselves are seemingly part of the slowdown as the 2nd instance of each tag-helper takes 1ms but the initial slowdown is there

We've partially executed and considered the following alternative approaches:

Creating a completely new MVC/Razor application using Suite, re-adding the entity/model/modal/module that we are currently profiling
- Statement: Not yet completed, as getting the bare minimum host setup working takes considerable time
- Statement: Justification for taking this route is to eliminate a potentially bad configured Web/Module project
Creating a tiered application, allowing us to fully separate from the Web project and then just consuming the API endpoints
- Statement: Extremely frustrating getting OAuth working, so not been able to even get the login part working
Considering ditching the ABP Frontend altogether and creating a SPA-experience using Vue
- Statement: This creates a huge disadvantage of not having the built-in features available and a huge time-loss as well
Start over from scratch, no ABP, just plain vanilla project setup
- Statement: Last ditch resort, but would set us back ~3 months and we would have to 'reinvent' ABP features
- Statement Very costly, as we bought the Business edition of ABP Commercial

I realize that one of your first automated replies would probably be: Can you get us an isolated MVP project to showcase the issue? Well sadly, I cannot, our project is currently the smallest application to reproduce the problem.

However, we are more than willing to:

Share access to the repository + DB
Remote access and diagnosis to the development machine (TeamViewer or similar)
Brainstorm over a Google Meet call with screensharing
Provide credentials to the Test environment to witness the slow-down

Any help and direction at this point will be appreciated, as we simply cannot figure out why the tag-helpers and localization are causing a slowdown. Did we perhaps make a fatal configuration error with regards to modules and inheritance? Is there another option to enable diagnostic logging to figure out what the "server" is doing for ~4secs?

We've banged our heads against this wall for about a full sprint now (2 weeks) and have reached a point where we need a solution, either hopefully with the expert assistance of your team, or by reaching a different conclusion on how to proceed further.

Thank you very much for your time and effort reading this very lengthy question.

6 Answer(s)