Tips to improve Visual Builder web app performance

A curated list of techniques that can be applied to improve your visual app performance

Photo by Marc-Olivier Jodoin on Unsplash

enable zip

enabling gzip can (most certainly will) have the biggest impact on performance of your web app (file sizes can reduce by 70%–90%), you can read more about its impact here. You can check if its enabled for your instance by opening the network tab when you visit any of your staged/published web app and looking at the encoding header in the response for any static app asset like app-flow.js. If it’s not enabled, you should talk to Oracle Support to help you out.

Improves

1. Initial/Hot app load time
2. Navigation times

uglify

Its a popular technique where we smoosh down the JS/HTML/CSS code into an unreadable and un-indented format so that the file size reduces significantly. Out of the box, visual apps can be processed externally (it could be through a local developer machine or a CI/CD pipeline) through these grunt tasks.

Improves

1. Initial/Hot app load time
2. Navigation times

bundling

Bundling is a technique where related files are bundled into a single JS file and served when the bundled resource is requested by browser, thereby reducing the number of http round trips. Use the vb-require-bundle task to achieve this.

Improves

1. Initial/Hot load time
2. Navigation, based on bundling strategy

load files on demand

Use in-line require to load large js or libs on demand, syntax below. eg. let’s say you are using a library that does data manipulation and the converts them into excel for download, but you only need this library when an ‘Export’ button is clicked. You can load the library using require on button click via Call Module Function action

PageModule.prototype.download = function(data){
return new Promise(function(resolve, reject){
      require(['libPath', function(lib){
        //code to use lib goes here
        resolve(); //at the end of code to exit the function
        }])
      })
}

Improves

1. Navigation times, by deferring lib fetch

code split-up

If you have a strong developer team who are familiar with Oracle JET and have good understanding of custom web components then you can potentially split-up your page into multiple custom web components which could be loaded on demand via inline require js like above and/or using oj-defer

Custom web components have advantages like

1. allows you to encapsulate functionality and allow standard interface to interact via page
2. helps to maintain/manage page code by making it smaller and readable
3. helps in reducing merge conflicts when multiple devs are working on same page

However, if you do not what to write so much code and prefer the visual way of developing your features you can consider using nested flows. They aren’t the same as web components but allows you to split code.

Improves

1. Page load/Navigation times

paginate

When working with collections like table, lists etc, always use pagination. Out of the box, visual apps will have support for load more on scroll which you should leverage.

Improves

1. Page (table/list) performance

run in parallel

When executing multiple Rest calls via Call Rest Endpoint Action, if possible try to execute them in a Run In Parallel action. Rest calls will be fired at once and once all results are returned it will execute the next action.

Improves

1. Data fetch time