Life In The Fast Lane Full Speed XPages

March , 21. – 22. 2013Faculty Club, Leuven, Belgium

Ulrich Krause, BCC Unternehmensberatung GmbHMatthew Fyleman, We4IT

Lotus Notes/Domino Developer since 1993 Senior Developer at We4IT GmbH

Recently focused entirely on XPages development

Working on We4IT's XPages framework Also on Offline capabilities for We4IT’s mobile

framework

About: Matthew FylemanAbout: Matthew Fyleman

Lotus Notes/Domino Developer since 1993 Senior Software Architect at BCC

OpenNTF Contributor OpenNTF Board of Directors IBM Champion 2011/2012/2013 Blog http://www.eknori.de Notes Forum (http://www.atnotes.de)

About: Ulrich KrauseAbout: Ulrich Krause

Performance, what factors affect it? Java vs. JavaScript Looping through Documents, ViewNavigator vs.

GetNextDocument Stringbuilder vs. Concat (+) JSF Lifecycle Listener Partial Update / Partial Execute Variable Resolver Tools

AgendaAgenda

XPages Request XPages Request

The hardware used has a significant influence on performance. There are 3 key elements:• CPU • Main Memory• Hard Disk

HardwareHardware

CPU • Cores / Clock / Cache• Poor response time

Main Memory• Limit defined by the operating system• Scalability

Weak CPU AND Low Memory• Poor overall performance• Poor response times• Server "hangs"

HardwareHardware

Latency• Time taken for data transmission between multiple computers on a

network Bandwidth

• Rate of transmission of data

Greater Bandwidth

+ Lower Latency --------------------------------= Better Connection

NetworkNetwork

Hardware How many data requests / responses are transmitted How much data is transferred (size) Caching of resources How much CSJS runs Size / complexity of the CSS Complexity of the site structure

Client & BrowserClient & Browser

Browser / HTTP server• Network latency – distance/time to server. Bandwidth – size of files.• Browser limits on concurrent downloads; <= IE7 allows 2 downloads, IE8

allows 6 HTTP Server / App Server

• HTTP Server JVM memory allocation (heap size) & garbage collector• CPU time, competition between threads, gives slower response times• Threads, limited to 40 by default, configurable in Domino Administrator

App Server / Domino context• Read design elements from the NSF (XPage .class files, form structure, etc)• Backend API calls may be expensive, especially for large data sets.• Design elements may be network requests.

Limiting factors on performanceLimiting factors on performance

Servlet / Lifecycle• Restore control tree – file system read. Control tree locking – no concurrent

access.• Rendered re-evaluated for every control for most phases

Browser/Client JavaScript/Dojo• Inline JavaScript blocks insertion of later HTML elements into the DOM tree• Dojo does AJAX requests for .js files for dojo modules that are not loaded

Limiting factors on performanceLimiting factors on performance

notes.ini• HTTPJVMMaxHeapSizeSet=1• HTTPJVMMaxHeapSize=256M

• Should be set to ¼ of the available RAM

Domino Administrator• HTTP server "Enable logging to" disabled• HTTP server thread count – defaults to 40

Remember, enabling the debugger affects performance• JavaEnableDebug=1• JavaDebugOptions=transport=dt_socket,server=y,suspend=n,address=8000• JavascriptEnableDebug=1 ( Version 9 )

General Performance OptionsGeneral Performance Options

xsp.persistence.mode= Defines the persistence mode for the JSF pages

• file: All the pages are persisted on disk • fileex: All the pages are persisted on disk except the current one, which

stays in memory • <else>: All the pages stay in memory (tree mode)

Reducing Memory UtilizationReducing Memory Utilization

Simple actions vs links or button with window.location JS Reduce server phase processing

• Use partial update where possible• Use partial execute where possible• Use disableValidators & immediate event

Minimize work in rendered / visible computations• Use variable resolver

Repeats & Views• Use viewEntry.getColumnValue instead of viewEntry.getDocument.getColumn• Use Domino View data source dataCache property where possible

XPages Design OptimizationsXPages Design Optimizations

Load-time vs Runtime• Using loaded vs rendered• ExtLib Dynamic Content

– allows partial re-loading so more use of load-time optimizations

Loading resources in the browser• CSS & browser JS

– extract to separate files. Minify & compress files

• Images– use correct size & format. Use CSS Image Sprites as possible

XPages Design OptimizationsXPages Design Optimizations

Groups many DOJO, CSS / JS files into a single file• Less requests from the browser to the server• Performance improvements on networks with high latency• Enhanced performance parsing CSS / JS• Fewer connections to the server

JavaScript/CSS AggregationJavaScript/CSS Aggregation

On the Server: xsp.properties:xsp.resources.aggregate=true

JavaScript/CSS AggregationJavaScript/CSS Aggregation

XPagesPreload=1 New Feature in Notes / Domino 8.5.3 Server and Client

Java classes from the XPages runtime plug-ins • loaded from a fixed list of runtime classes ( 435 in ND 8.5.3 )• com.ibm.xsp.core, common utility, JS wrapper, FSF runtime classes

Java classes referenced in *-faces.config.xml• XPages control renderer, data sources, complex types

XPages Pre-LoadXPages Pre-Load

• XPagesPreloadDB=Server!!Db.nsf/XPage.xsp, myLocalDb.nsf• Works at the application level

• The application is loaded on the client / server startup into memory. This happens even when the application is first opened in the browser

• For each entry in the notes.ini variable, an XPage URL is generated and sent to the server

• The application is loaded, and the HTML generated• The XPages runtime discards the HTML, but retains the application in

memory

XPages Pre-LoadXPages Pre-Load

applicationScope• Are visible for all users of one application. Expires some time after the last user

used an applicationScope variable. That means applicationScope variables are NOT persistent forever.

sessionScope• Is valid through the session of the current user. A user session expires after

some time of inactivity. Uses don't have access to the sessionScope variables of other users.

viewScope• Is visible for views on the current page only. Useful for transporting a search

query to a view.

requestScope• Is valid through one request of the current user. That includes refreshing of a

page.

Scoped VariablesScoped Variables

Caching with Application ScopeCaching with Application Scope

JSF LifecycleJSF Lifecycle

XPages Lifecycle ListenerXPages Lifecycle Listener

What happens in each phase of the JSF lifecycle?

Ulrich Krause: http://openntf.org/XSnippets.nsf/snippet.xsp?id=a-simple-lifecyclelistener-

XPages MasterclassXPages Masterclass

http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=XPages%20Masterclass

# • Executed every time the page is rendered• Use for values that are likely to change

$• Executed when the page is first loaded• Use for values that don't change

When to Execute - # vs $When to Execute - # vs $

dataContexts can be thought of as global variables dataContext's value can be computed dynamically or on page load

• So you can use ${javascript:@Today()} and run it once rather than running a function each time.

dataContexts can be scoped to any level that datasources can• XPage, Custom Control or Panel• you can set a dataContext in a panel in a repeat control, to avoid multiple

references to a NotesDocument's item dataContexts are referenced using EL

• So at no point in the references do you run SSJS, so it's not having to go through the SSJS parser

DataContextDataContext

Issue with data context variables if they are bound dynamically.• They will be recomputed again and again, even when in Partial Execution

mode and if they are not in use (http://hasselba.ch/blog/?p=1112)

DataContext - PitfallDataContext - Pitfall

DataContext - PitfallDataContext - Pitfall

Reduced control processing in the render response phase• Means less work on the server

– render response is the most intensive phase

Smaller response from server.• means reduced network usage

Better browser experience• rest of the page is still visible while waiting for a response• inserting small sections into the page is much faster than reloading a full page.

Partial Refresh / Update (Pro)Partial Refresh / Update (Pro)

Dependancy outside of the partial update area• Other areas of the control tree are not processed,so any SSJS scripts in those

other controls will not be run.• Enabling Partial Update where it was previously full update may lead to

functional problems

Only one area may be partial updated by default• In CSJS you can schedule later partial updates of related areas, but any

concurrent requests will wait for exclusive access to the server-side control tree before processing on the server

Partial Refresh / Update (Cons)Partial Refresh / Update (Cons)

http://www.timtripcony.com/blog.nsf/d6plinks/TTRY-84B6VP

Reduced control processing in the 3 data-processing phases• Means less work on the server, faster response times

Dependancy on Edit Box values outside of the exec area• Submitted values from Edit Boxes and/or other input controls in other areas of

the control tree are not processed, so any control values and document fields in those other areas will not be updated. Enabling Partial Exec where it was previously full execution may lead to functional problems where values are out-of date in the onclick script or in the redisplayed page.

onclick Event Handler must be in the exec area• The applyRequestValues phase prepares for the invokeApplication phase.The

onclick simple action or SSJS script won't occur if outside the partial exec area

Partial ExecutionPartial Execution

execMode only added in 8.5.1 (not in 8.5.0) execId slightly difficult to select in Designer

• Select your button, in the Outline view, toggle open the button, select the child Event Handler control, then set the execId property on the Event Handler.

• [Better UI proposed in Notes/Domino Next – in the Events tab]

Partial ExecutionPartial Execution

disableValidators• JSF life cycle through all phases (1-6)• But requests will not validate the data• Converters continue to work.• Items in documents will be updated• Sven Hasselbach - "Disable all validators at once" (

http://hasselba.ch/blog/?p=1106)• Immediate

• JSF Lifecycle processes only phases (1, 2, 6)• No data processing• Items in documents are not updated• Onclick event handler scripts and render response calculations are

performed

disableValidators / immediatedisableValidators / immediate

Most properties, like CSS “style” are only computed in the renderResponse

Edit Box and input “value” properties are used in Data Processing phases & renderResponse

Data Source properties are computed during renderResponse & results are cached for the next request's Data Processing & invokeApplication phases

Minimize work in rendered / visible computationMinimize work in rendered / visible computation

The rendered property is computed in all 5 lifecycle phases Avoid re-computing values in every rendered property

• @DbLookup, @DbColumn, getDocumentByKey• In the rendered property, save the computed boolean to a viewScope

variable

Minimize work in rendered / visible computationMinimize work in rendered / visible computation

Loaded• is only computed once in the createView phase

• not re-computed in the 5 usual phases

• false means the control is not created. So it can never be rendered.• true means the control is added to the control tree.

• You can still compute rendered when loaded evaluates to true.

Compute the loaded property on conditions• where you could compute the rendered property and save it to the view

scope• it would never need to be recomputed for the rest of the interaction with

this page

Using loaded vs renderedUsing loaded vs rendered

Use correct file type depending on content• JPEG for complexed detailed images

• PNG/GIF for simple images, fonts, transparencies• Use the HTML <img> tag “width” and “height” attributes

• For faster HTML layout in the browser• Size the image to size you intend to use• Resizing using html attributes height and width will delay the rendering of your

page• Images larger than necessary will waste bandwidth

ImagesImages

Use CSS Image Sprites• If you have multiple small images, make a single larger image containing

the smaller images• And use CSS to display just the relevant subset image at a location in the

page• For semantically significant sprites, provide an accessibility “title” attribut

(as sprites don't use the IMG “alt” attribute, but you still want to assist blind users)

• There's no specific XPages support for sprites, but they're used in the XPages OneIU themes

CSS Image SpritesCSS Image Sprites

CSS Image Sprite SampleCSS Image Sprite Sample

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img

XPages based Application• Runs on the Domino server or the Notes client• An NSF needs to be installed on the Domino server/Notes client• A profiler jar file should be added to the JVM launch options

Measures the CPU performance and the memory allocation Available from OpenNTF.org

• Free open source project• Search for “XPages Toolbox”

Extended in 8.5.2 to support Backend classes profiling

XPages ToolboxXPages Toolbox

http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=XPages%20Toolbox

XPages ToolboxXPages Toolbox

Generate a heap dump of the JVM running in the HTTP task• A button in the XPages profiler generates the heap dump• From the Domino console

• tell http xsp heapdump (triggers com.ibm.jvm.Dump.HeapDump())• tell http xsp javadump (triggers com.ibm.jvm.Dump.JavaDump())

Analyze the heap dump using the Eclipse memory analyzer• http://www.eclipse.org/mat/• http://www.ibm.com/developerworks/java/jdk/tools/dtfj.html

XPages ToolboxXPages Toolbox

Heapdump / Javadump AnalyzerHeapdump / Javadump Analyzer

Print statements• In rendered/visible computations to see how often executed

– print("panel2 evaluating rendered property");• In the XPages root control events:

– before/afterPageLoad, afterRestoreView, before/afterRenderResponse.• Custom control root events:

– before/afterPageLoad.• In the document data source events:

– queryNewDocument, postSaveDocument, etc.

Task Manager and/or Process Explorer• Shows CPU usage & process memory usage as it happens• Heap memory usage will be a subset of process memory, but heap dumps are

only a snapshot

More ToolsMore Tools

Browser developer tools • for watching network transactions, partial updates, response times• BROWSER: Firebug, Developer Tools• XPiNC: FirebugLite from ExtLib

Java / Javascript Debugging• Degrades performance but can inspect objects, step into code. • Use the Eclipse Java debugger.• In Domino\notes.ini add these 2 options:

• JavaEnableDebug=1• JavaDebugOptions=transport=dt_socket,server=y,suspend=n,address=8000

More ToolsMore Tools

Demo - Step-By-Step OptimizationDemo - Step-By-Step Optimization

Get all „Contacts“ into a NotesDocumentCollection, loop the collection and build the JSON by reading the values from items in the document

XAgent – SSJS XAgent – SSJS

XAgent – SSJS XAgent – SSJS

Get all „Contacts“ into a NotesDocumentCollection, loop the collection and build the JSON by reading the values from items in the document. Also UNID is stored in document

XAgent – SSJS – UNID from ItemXAgent – SSJS – UNID from Item

XAgent – SSJS – UNID from ItemXAgent – SSJS – UNID from Item

Get all „Contacts“ into a NotesDocumentCollection, loop the collection and get the JSON from an item on the document. The JSON is calculated on document save

XAgent – SSJS - SingleItemXAgent – SSJS - SingleItem

XAgent – SSJS - SingleItemXAgent – SSJS - SingleItem

loop thru a view and get the JSON from a view column.

XAgent – SSJS – ViewNavigatorXAgent – SSJS – ViewNavigator

XAgent – SSJS – ViewNavigatorXAgent – SSJS – ViewNavigator

Concatenation of Strings is very easy in Java - all you need is a '+‘ Each time you append something via '+' (String.concat()) a new

String is created, the old stuff is copied, the new stuff is appended, and the old String is thrown away. The bigger the String gets the longer it takes - there is more to copy and more garbage is produced.

Accordingly to Arno Unkrig the optimal strategy is to use String.concat() for 2 or 3 operands, and StringBuilder for 4 or more operands

StringBuilder vs String.concatStringBuilder vs String.concat

String text= "line 1\n"+ "line 2\n"+ "line 3";

System.out.println("x:"+x+" y:"+y);

When to use StringBuilder over '+' (String.concat()) ?• use StringBuilder whenever you assemble a String in a loop• Just keep in mind that '+' isn't always a good idea

StringBuilder vs String.concatStringBuilder vs String.concat

http://kaioa.com/node/59

loop thru a view and get the JSON from a view column. Use a StringBuilder to concat the JSON

XAgent – SSJS – ViewNavigator + StringBuilderXAgent – SSJS – ViewNavigator + StringBuilder

XAgent – SSJS – ViewNavigator + StringBuilderXAgent – SSJS – ViewNavigator + StringBuilder

loop thru a view and get the JSON from a view column. Use a StringBuilder to concat the JSON + use Java instead of SSJS

XAgent – JavaXAgent – Java

XAgent – JavaXAgent – Java

Single Document Containing References to all your CSS Resources• resource sections reference the CSS files used • control section define what CSS classes are applied to specific controls

XML Based and Easy To Learn• creating a new theme document prefills sample content

Can Extend Other Themes• <theme extends="webstandard">• will automatically include all the resource and control definitions from that

theme built-in themes • webstandard, notes, oneUI

ThemesThemes

Create your own themes from scratch. Creating a theme that extends from the webstandard or another

supplied theme will include extra stylesheets and styles that you might not need.

Be prepared to spend more time writing css though

ThemesThemes

Global Application / Configuration properties

Load Resources from ThemeLoad Resources from Theme