search

formly-js / angular-formly

JavaScript powered forms for AngularJS
http://docs.angular-formly.com
MIT License
2.23k stars 406 forks source link

Poor Performance on Form with 20 fields (Watchers & Initial Load Time) #739

Open distributedlock opened 7 years ago

distributedlock commented 7 years ago

Hi,

angular-formly version: 8.4.1 angular version: 1.6.2 angular-formly-templates-bootstrap version: 6.4.0

Preamble: We are using formly for a corporate application which is using formly to dynamically create forms on the fly based on some parameters. The forms we have are relatively simple in complexity from a native angular form perspective. Each of these forms will typically have around 10-20 fields. Building the same form in native Angular allows the application to function fine with no performance degradation. However, building the same thing in formly causes the number of watchers increase quite significantly. We have noticed that each formly field (simple input fields, dropdowns) will have on average anywhere between 8-15 watchers created for it.

The issue we are having is poor performance when have multiple formly forms on a single page due to the high number of watchers. Users are able to add multiple forms per page. This causes some of our pages to easily exceed the 2000 watchers suggested limit. We have identified the large number of watchers are coming from formly. We have hit around 26,000 watchers on some pages with formly.

We have one page with a very simple formly form that contains 6 input number fields. This page is using onChange to calculate the sum of the five fields and populate the 6th. This formly form noticeable performance issues with watchers and actually the time it takes to load the form. The performance degradation is more noticeable when you navigate to the same page after the app has initialized.

As per our business needs, we have a review component which populates all these fomly forms on one page in a disabled state. This was working as expected with no performance degradation when using native Angular forms, but after we used formly this causes the page to take roughly a full minute to load.

I have searched on GitHub issues and have noticed others using this library are having the same performance issues. Specifically, it seems a lot of our issues have been outlined in issues #177, #259, #479.

Has anyone run into these issues and if so, have any knowledge on potential solutions for these performance issues?

Thanks

/cc @kentcdodds

kentcdodds commented 7 years ago

I don't maintain this library anymore, but I should say that you'll definitely want to look at the production tips here: http://docs.angular-formly.com/docs/tips

It will definitely be slow if you don't do those things.

kentcdodds commented 7 years ago

Good luck.

egucciar commented 6 years ago

Have you been able to reduce this into a fiddle and reproduce it?