Dynamic Components Performance Considerations

Overview

This blog will outline key recommendations for increasing performance of Visual Builder (VB) applications that include Dynamic Components such as Dynamic Table or Dynamic Form.  We will cover tools and techniques to test and troubleshoot performances in your web applications and help you do performance analysis of VB applications including Dynamic Components. 

Performance in dynamic components can be associated with many factors such as HTTP Layer, REST Services and Dynamic Layouts.   Oracle JET Developer's Guide contains a section on Optimizing Performance.   Some of the areas to consider to check are:

  • JET Module Bundles
  • Use minified version of JET Modules 
  • Enable compression on web server
  • Enable cache on web server
  • Use minified version of Cascade Styling Sheet (CSS)

 

Using Chrome DevTools to Analyze Performance

Chrome DevTools is a set of built in tools in Google Chrome browser that help application developers to troubleshoot performance bottlenecks, view runtime errors and investigate properties within application components.  Details description and how to DevTools can be used found here.  To open the DevTools window,  simply right click on any web page in Chrome browser and select "Inspect" menu option.

Inspect

 

Network Tool

When VB application loads for the first time,  you should monitor the Network tools for list of artifacts that are being loaded.   Below is the screen capture from the Network Tools where most commonly used JET modules are captured in the Network panel.  The Oracle JET module is a package of business logic written in Javascript and view logic written in HTML.  

Network_Tool

The following bundles contain the most used JET modules to reduce the number of network requests compared to load them individually. 

  • oj3rdpartybundle.js (jQuery.js,  jQueryUI.js)
  • ojcorebundle.js
  • jcommoncomponentsbundle.js

You can check if your application is using these bundles,  if not you can update requirejs in app-flow.json to include these module bundles in your VB application.   The Building Web and Mobile Applications Visual Builder Studio guide should help you in creating a new module and include it in your VB application.  

Similarly you need to check if you are using minified version of JET and loading JET libraries from Content Delivery Network (CDN).  The Building Web and Mobile Applications Visual Builder Studio guide should help you deploying your VB application and required JET libraries in CDN. 

All minified version of JS are loaded from /min directory whereas all debug version of JS are loaded from /debug directory.    In order to confirm if compression is enabled at the web server,  just look at the response for content-encoding=gzip.  In order to confirm if cache is enabled in the web server,  just look at “from disk cache”.  You will need to look at number of request and bytes of data transferred (cold case versus warm case).  You should only load application modules on the right level and right page not at application shell level.  Because if load them at application shell level,  that means they are being loaded every single page exist in your application.   The Customizing Bundle Modules section in the Building Web and Mobile Applications Visual Builder Studio guide  should help you with instructions to set the gruntfile and vb-required-bundle task defines the list of bundles and list of files,  models and resources.    

The Audit, Build and Deploy Visual Applications using Grunt section explains the series of VB grunt task including vb-package.  This task handles the optimizing of CSS,  images and minifying them for use within the VB application.  Please refer to the following blog link for more hands on instructions.  https://blogs.oracle.com/vbcs/post/optimize-visual-builder-apps-for-faster-loading

Performance Tool

Performance tool allows to look at activities on a page, look at where the most of time spent within a web application.  From Performance Tool,  you can look at the Summary information and drill down by Bottom Up with Group By Requests for example Group By URL.  

Elements Tool

Elements tool allows selecting elements directly from the web application.  If a web page contains a dynamic component such as a dynamic form,  you want to inspect elements in Document Object Model (DOM) properties,  elements tab allows developers to select an element in web application and drill into the Properties tab for the element.  If a dynamic component is selected (highlighted) using element selector (Select element) button in the top left corner of the DOM panel in DevTools,  the element will highlight in web application, then the Properties tab displays properties associated with that dynamic component.   The _ojBridge is an important property when investigating issues with a dynamic component.  Both model and properties of the dynamic component can be investigated in Properties tab in Element tab.  The model and properties differ between dynamic table and dynamic form.  However _ojBridge._VIEW_MODEL and _ojBridge._PROPS are always present in either component.  In general, if there are issues related to metadata, the view model's metadata as this is the resolved version. if it is incorrect in the viewmodel, we should check the metadata property of the dynamic component.

_view_model

_ojBridge._PROPS : bound properties to the selected element the metadata under prop refers to the metadataprovider that is attached to the element. This will allow access to the related metadataproviders.

_props