Web browser Consideration

Internet Explorer has the highest market share, so that many client company use Internet Explorer (IE) as default
browser.
HTML5 works well and has the highest performance on IE 10 and over with proper javascript support. 
 
We recommend IE11 to  Window 7 user.
In case of Windows XP, we recommend using IE8 browser at least with Service Pack 3.

We recommend asynchronous communication rather than synchronous communication

• Synchronous communication handles case by case in order while asynchronous carries out parallel processing, so when you use asynchronous communication, loading and handling speed will be improved. When several synchronous communications are requested if any process cause error, this will affect the entire system.

Minimize the number of service request

• Service response time depends on requested queries, packet size, server capacity and network environment, so it is important to minimize the requesting number of queries. Also, when you carry out a transaction, the best way is binding similar cases in a group at once rather than requesting cases individually.

Minimizing the client side data manipulation after searching

• When you are composing an application in GUI using the data received from service. If we have lots of data manipulation then it can influence speed. So, we recommend you to process less client side data manipulation. We recommend you service side process more and then show the result in GUI.

Setting dataset enable event

• When you change lots of data, a dataset event occurs whenever a dataset is modified. When a component which is bond to a dataset has new contents, the component is reloaded then a flicker occurs. To prevent this situation we set enable event false before use. We set the enable event true after finishing your work. This can reduce flickers and improve speed.

Minimize Expr on grid

• When an event occurs, expr executes as much as data queries, so it makes slow down the system, so we recommend that to handle data on the server side and process the received result from the server. In case you need to use the expr due to dynamic data, you need to check whether it works well and doesn't create any performance issues.

When searching mass data

Mass data affects performance so that we recommand you to handle data after paging or searching the data by condition.

Minimizing the themes’ file sizes

• The image which has been defined in the theme is saved as binary compressed format. After loading the theme file, these files occupy the double size of memory. Regarding the loading speed, you need to minimize the file size. To minimize a file, define the file size less which is used frequently.

Optimization of CSS, global variables and type definition

• Delete the style, global dataset and variables, etc. which are not used in CSS. Also, if there is any useless object which is defined in typeDefinition (for example: related animation, graphic path, group box, etc.), delete these things to improve speed of loading.

Use ‘prefixed’ when you set a web image.

• After defining prefixid in Service Items, We use service item while executing URL instead of full path. This is better than setting Full Patch of Web Image in script.

(Before change)
ImageViewer.image = "URL('http://www.tobesoft.com/logo.gif')"
(After change)
define prefixed = "ImageHost" in Service Items,
url=''http://www.tobesoft.com/' After definition
ImageViewer.image = "URL('ImageHost::logo.gif')"

Setting preload on Tab GUI

• If you set proload=true, all of subpages related to this TAB is loaded as event proceed so this makes more heavy GUI speed slow down. Set preload=false, This makes only active screen proceed.

Minimizing the including files

• If a subpage is defined at Division or tabpage. It includes the files to be loaded and downloaded. This affects event process so you need to minimize the include file.

• Include only necessary XJS files and take care so that we should not include XJS files recursively

Source Compress

When Application runs , beginning loading speed performance improvement guide

Server environment setting (Example:Apach Tomcat)

Setting keep-alive

This makes particular one process handles continuous request works from particular user.
If request comes again before  keepAliveTimeout value is not filled, the keepAliveTimeout will start count from 0.

gZip compression

What is gZip compression?

gZip is a file format and a software application used for file compression and decompression. The program was created by Jean-Loup Gailly and Mark Adler as a free software replacement for the compress program used in early Unix systems, and intended for use by the GNU Project (the "g" is from "GNU"). Version 0.1 was first publicly released on 31 October 1992, and version 1.0 followed in February 1993.Strong

<Tomcat standard : Server.xml]
Connector compressableMimeType="application/javascript,text/xml,text/javascript,application/xml,text/css,application/x-javascript,text/json,application/json,text/plain"
      compression="off"
      URIEncoding="UTF-8"
      useSendfile="false"
      compressionMinSize="2048"
      connectionTimeout="20000"
      port="8080"
      ...Syncopation ... 

When you change from compression="off" into on, speed improvement is available.

Applying verification

Shortcut(f12) on Chrome browser / network

Way to conduct nexacro platform Deploy function.

nexacro platform Deploy function merges json module with javascript and compresses so that size is minimized and  performance is optimized.

Build-Deploy-Deploy Application

Source Comparison

• Before)

• After

Way to improve performance using NexacroLoad.json

When Application is run developed by nexaro, nexacro14lib of nexacro public library is called.
In case we reduce calling files, we can improve performance .

nexacro initial running packet (url)

Before modification

After modification

Way to apply

Creating NexacroLoad.json

Merge CompBase.json, ComComp.json, DeviceAPI.json and Grid.json of nexacro14lib into NexacroLoad.json file.

json contents

old CompBase.json contents
 {
 "name": "ComComp",
 "version": "14.0.0.730",
 "description": "nexacro platform 14 Unified Framework Library",
 "license": "",
 "scripts": [
   "ComComp/Dataset.js", 
   "ComComp/DomObject.js",
   "ComComp/Button.js", 
   "ComComp/Static.js", 
   "ComComp/Edit.js", 
   "ComComp/MaskEdit.js", 
   "ComComp/TextArea.js", 
   "ComComp/ImageViewer.js", 
   "ComComp/CheckBox.js", 
   "ComComp/Radio.js", 
   "ComComp/ListBox.js", 
   "ComComp/Combo.js", 
   "ComComp/Div.js", 
   "ComComp/ProgressBar.js", 
   "ComComp/PopupDiv.js", 
   "ComComp/Menu.js", 
   "ComComp/PopupMenu.js", 
   "ComComp/Spin.js", 
   "ComComp/DatePicker.js", 
   "ComComp/Calendar.js", 
   "ComComp/GroupBox.js", 
   "ComComp/Tab.js", 
   "ComComp/FileDownload.js", 
   "ComComp/FileUpload.js", 
   "ComComp/FlashPlayer.js", 
   "ComComp/MediaPlayer.js",
   "ComComp/WebBrowser.js",
   "ComComp/Map.js",
   "ComComp/Sketch.js",
   "ComComp/ExportObject.js",
   "ComComp/ImportObject.js",
   "ComComp/Tray.js"
 ],
  
 "objInfo": [
 "ComComp/Sketch.info", 
 "ComComp/editmodeType.info", 
 "ComComp/imemodeType.info", 
 "ComComp/readonlymodeType.info", 
 "ComComp/updatebindingvaluemodeType.info"
 ]
}
//@ sourceURL=ComComp.json

Merging NexacroLoad.json

Merge each json file into one.

{
 "name": "NexacroLoadJson",
 "version": "14.0.0.703",
 "description": "nexacro platform 14 Unified Framework Library",
 "license": "",
 "scripts": [
  "CompBase/Element_HTML5.js",
  "CompBase/Element_Runtime.js",
  "CompBase/CompBase.js", 
  "CompBase/CompEventBase.js", 
  "CompBase/Data.js", 
  "CompBase/EditBase.js", 
  "CompBase/FormBase.js", 
  "CompBase/TitleBar.js", 
  "CompBase/StatusBar.js", 
  "CompBase/FrameBase.js",  
  "CompBase/ScrollBar.js", 
  "CompBase/Step.js",
  "ComComp/Dataset.js", 
  "ComComp/DomObject.js",
  "ComComp/Button.js", 
  "ComComp/Static.js", 
  "ComComp/Edit.js", 
  "ComComp/MaskEdit.js", 
  "ComComp/TextArea.js", 
  "ComComp/ImageViewer.js", 
  "ComComp/CheckBox.js", 
  "ComComp/Radio.js", 
  "ComComp/ListBox.js", 
  "ComComp/Combo.js", 
  "ComComp/Div.js", 
  "ComComp/ProgressBar.js", 
  "ComComp/PopupDiv.js", 
  "ComComp/Menu.js", 
  "ComComp/PopupMenu.js", 
  "ComComp/Spin.js", 
  "ComComp/DatePicker.js", 
  "ComComp/Calendar.js", 
  "ComComp/GroupBox.js", 
  "ComComp/Tab.js", 
  "ComComp/FileDownload.js", 
  "ComComp/FileUpload.js", 
  "ComComp/FlashPlayer.js", 
  "ComComp/MediaPlayer.js",
  "ComComp/WebBrowser.js",
  "ComComp/Map.js",
  "ComComp/Sketch.js",
  "ComComp/ExportObject.js",
  "ComComp/ImportObject.js",
  "ComComp/Tray.js",
  "Grid/GridInfo.js", 
  "Grid/Grid.js",
  "DeviceAPI/SQLite.js",
  "DeviceAPI/SQLite_Runtime.js",
  "DeviceAPI/Plugin.js",
  "DeviceAPI/DeviceObjs.js",
  "DeviceAPI/DeviceObjs_Runtime.js",
  "DeviceAPI/XPush.js",
  "DeviceAPI/Mobile.js",
  "Chart/ChartInfo.js", 
  "Chart/Chart.js",
 
 ],
  
 "objInfo": [
 "ComComp/Sketch.info", 
 "ComComp/editmodeType.info", 
 "ComComp/imemodeType.info", 
 "ComComp/readonlymodeType.info", 
 "ComComp/updatebindingvaluemodeType.info"
 ]
}
//@ sourceURL=ComComp.json

Way to apply using nexarcro Studio

Changing TypeDefinition

Deploy

Deploy at Build->deploy->Deploy Application.

Notice

start.json 예제)
{
    "version" : "14.0.0.1",
    "runtime" :
    {
        "target" :
        {
            "os" : "windows"
        },
        "framework" :
        [
         "./nexacro14lib/framework/Framework.js"
        ],
        "component" :
        [
         "./nexacro14lib/component/NexacroLoad.js"
        ],
        "form" :
        [
         "./Base/main.xfdl.js"
        ],
        "xadl" :
        {
          "launch" : "./nexacro.xadl.js",
     "quickview" : "./nexacro.xadl.quickview.js"
        },
        "protocol":
        {
            "adaptors":
            [
          
            ]
        },
        "resource" :
        {
        }
    }
}

Notes for design/CSS (Performance improvement)

Use image as little as possible.

If it is possible, don't use full image .

• Don't use full image on popup calendar background.

• Don't use unnecessary full image on whole background of form.

If gradation can be expressed using CSS code, don't use image.

We recommend not to use gradation without special reason. Or use one color.