Speed up rendering of page with many custom directives in AngularJS - javascript

I'm currently rebuilding an enterprise app in AngularJS. It has a multi-page form with thousands of fields, which are all wrapped in custom directives (for validation, formatting, and standardization purposes) based on the field type.
I've tried to optimize these directives as best as possible (one time binding, ng-if where possible, lazy-ng-if, no $watch functions, and minimal $rootScope.broadcast's), but I'm still faced with a several second delay when loading each form page (about 50-or-so fields each) with ui-router. Looking at all my performance measurements, it seems like the delay is coming from angular compiling and rendering all these directives.
So my question is, how do I make these directives render faster? Is there a way I can compile/render the top section of my form and make it usable before the rest loads? Right now with ui-router, it seems like nothing appears until everything on the form is rendered/compiled.

Related

Remember angular toggle state after page refresh without js cookies

I've got two sections that are being shown and hidden using angular. After filling few fields, I need to validate the data server-side, and refresh the page - then, div's with ng-show / ng-hide directives are losing their memory. I saw a solution for that problem using js cookies, but I think it's not a good practice for my problem. Is there something to remember that another way, or should I do this with cookies?

ui grid performance issue with celltemplates

I am using angular-ui-grid 3.1.1 with 25,50,75 records at a time.
Each cell is having different celltemplates e.g, onclick popovers, hover popovers, file download links, data with profile images, data in nested table etc.
Data is rendering fine in the grid, however for some seconds ui grid becomes unresponsive.
Also i have created an external column chooser. While choosing a column to show/hide, the grid becomes unresponsive for some seconds.(same unresponsive behavior seen with in-built column chooser provided by ui-grid)
Please suggest any fix for this.
sadly, we've had to abandon UI grid for these same sort of issues. The issue, however was not in UI-Grid but in angular lacking performance. In my case I built a grid with ReactJS that I created a angular JS directive wrapper to put over. Even by just putting angular HTML with lots of rows/columns it wasn't fast enough. The last thing you could try before swapping away from UI-Grid would be looking into row/column virtualization if you dont already have it enabled. Here is the option to test
columnVirtualizationThreshold
If you wont change the scope variables, try one-way-data-binding in your templates, it will give you some performance like:
<span>{{::variable}}</span>
IMPORTANT!: Be careful because it wont update data any more until you refresh the view.

AngularJS Render huge dynamic form

Me and my team are developing a hybrid mobile app (ionic) that basically uses SQLite as a data source to build a totally dynamic form that users then fill out. Forms are build out of sections and sections are build out of fields. Each field is a separate custom directive (like input, dropdown, etc.) that receives the setup object (ui.config) on init. The directives are totally reusaable and they carry all the information to render (template, logic, validation, special functions, etc.). But... Some of the forms that we build with this app can easily reach 50 + fields per page so we often encounter a frozen UI. We have a lot of ng-repeat loops in the form itself and we tried to replace them with quick-ng-repeat, use bindeonce and built in ::, but no serious improvement was made. UI still stucks.
Our concept of building the form is something like this:
1st Loop: ng-repeat form in forms
2nd Loop: ng-repeat section in sections
3rd Loop: field in fields => custom directive (input control)
I was wondering if there is a way to render Angular templates before they are compiled. Our ng-repeats that build the template layout and logic are slow, so I am thinking that the only thing that would boost things up is to create a directive that builds the dynamic HTML and then calling $parse on it.
Does anybody have any experiences with huge forms with a lot of watchers? We need an advice on how to handle this.
Thanks!
Writing code outside the $digest seems the way when you have literally thousands of elements shown. It's a bit risky on the update part, you have to track down what to update - the rest is just peanuts.
You may feel the need to remove ng-mouse* or ng-click type of events too and have 1 single listener on the parent (you can still detect who's the author by the event.target).
As per another comment: 50 form elements should not slow down your page. Do some perf analysis and see who's updating your data and at what interval - id there any $digest in a loop, do you see "max 10 digest cycles reached"?

Render dynamic UI with HTML versioning in Angular JS

I have a challenging requirement. The requirement is as follows.
We are designing a UI today with 10 UI elements.
Users are creating few records.
After a month, a new release comes and it has 12 UI elements on screen.
When the user creates new records, he should see 12 UI elements, when he opens an old record he should see 10 elements.
In order to achieve this, I thought, we could store the version with which the record was created and render the HTML belonging to that version. But, this will unnecessarily keep increasing the project size, as if the code gets 100 revisions, that much of HTML duplicates will be present.
I thought of using "switch-case" or "if-else" statements in front end, but it will slow the UI as too much heavy lifting is done by JS.
Please suggest a way to do this requirement with JS or jQuery or Angular. Any one framework is also fine, until it will work.
Thanks a lot for your responses in advance,
Look at a framework called angular-schema-forms. You write no HTML with this framework. Instead you pass it a JSON object that has the fields you want to display and their corresponding display as attributes. It comes preloaded with its own templates for all common controls and also allows you to write your own.

Changing html form index when a new form element is added

I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.

Categories