Optimus XPages: An Explosion of Techniques and Best Practices

51
OPTIMUS XPAGES: AN EXPLOSION OF TECHNIQUES AND BEST PRACTICES Mar. 15, 2016

Transcript of Optimus XPages: An Explosion of Techniques and Best Practices

Page 1: Optimus XPages: An Explosion of Techniques and Best Practices

OPTIMUS XPAGES: AN EXPLOSION OF TECHNIQUES AND BEST PRACTICES

Mar. 15, 2016

Page 2: Optimus XPages: An Explosion of Techniques and Best Practices

Courtney Carter @Teamstudio

Howard Greenberg @TLCC

Paul Della-Nebbia @PaulDN

John Jardin @JohnJardinCodes

Page 3: Optimus XPages: An Explosion of Techniques and Best Practices

Asking Questions

Use the “Questions” pane to ask questions.  

Page 4: Optimus XPages: An Explosion of Techniques and Best Practices

Teamstudio provides products that help organizations with customized business

applications implement best practices, work more efficiently, and prepare for the future.

About Teamstudio

Page 5: Optimus XPages: An Explosion of Techniques and Best Practices

Develop and manage your Notes applications faster, better, and more easily.

Page 6: Optimus XPages: An Explosion of Techniques and Best Practices

Reveal true business usage with Usage Auditor.

http://www.teamstudio.com/solutions/notestools/usage-auditor

Page 7: Optimus XPages: An Explosion of Techniques and Best Practices

OPTIMUS XPAGES: AN EXPLOSION OF TECHNIQUES AND BEST PRACTICES

Page 8: Optimus XPages: An Explosion of Techniques and Best Practices

1

#XPages

Your Hosts Today:

Howard GreenbergTLCC

@TLCCLtd

Optimus XPages

Paul Della-NebbiaTLCC

@PaulDN

Page 9: Optimus XPages: An Explosion of Techniques and Best Practices

TLCC Courses

• The Leader in Notes and Domino Training since 1997

• Self Paced Distance Learning Courses

– XPages, Development, and Administration

• XPages from basic to advanced

– Two Java courses

– JavaScript course

– XPages 2 course

– Rapid Application Development

• Free demo courses

– Intro. To XPages Development

2

Page 10: Optimus XPages: An Explosion of Techniques and Best Practices

TLCC Application Development Services

3

• Let us help with your development needs

– Bootstrap

– Java

• Convert Notes Apps to mobile and the web!

• Modernize old Domino web applications

• Interface with backend data systems

• Skills transfer

Page 11: Optimus XPages: An Explosion of Techniques and Best Practices

Upcoming and Recorded Webinars

4

www.tlcc.com/xpages-webinar

View Previous Webinars(use url above)

• April – Getting Started with the Domino API with Paul Withers and Jesse Gallagher

Page 12: Optimus XPages: An Explosion of Techniques and Best Practices

Asking Questions – Q and A at the end

5

Use the Orange Arrow button to expand the GoToWebinar panel

Then ask your questions in the Questions pane!

We will answer your questions verbally at the end of the webinar

Page 13: Optimus XPages: An Explosion of Techniques and Best Practices

6

#XPages

John JardinUkuvuma

@JohnJardinCodes

Optimus XPages

Page 14: Optimus XPages: An Explosion of Techniques and Best Practices

Optimus XPages – An Explosion of Techniques and Best Practices

Page 15: Optimus XPages: An Explosion of Techniques and Best Practices

About John Jardin• CTO of Ukuvuma Solutions• Over 14 years development and consulting• Core Focus

IBM Domino and XPages Web technologies Mobile Development IBM Bluemix Internet of Things

• IBM Champion (2013-2016)

Page 16: Optimus XPages: An Explosion of Techniques and Best Practices

My Alter Ego

Page 17: Optimus XPages: An Explosion of Techniques and Best Practices

Agenda• Overview• Application Architecture• User Experience• Optimization• Closing

Page 18: Optimus XPages: An Explosion of Techniques and Best Practices

Overview

Page 19: Optimus XPages: An Explosion of Techniques and Best Practices

“A developer in today’s world needs to look both ways before crossing a one-way street.”

- Doug Linder

Page 20: Optimus XPages: An Explosion of Techniques and Best Practices

Overview• A reality most developers are facing is that businesses are

moving to the Cloud• This means:

Applications need to be Cloud ready APIs, APIs, APIs Modular Services Mobile strategy. No exceptions Optimized user experience and application performance

Page 21: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture

Page 22: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• Single Page Application

One entry point to your Application• One URL

One XPage. Many custom controls

Page 23: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• Single Page Application cont.

Advantages:• Full page reloading no longer required

• Actions can have as little as one server request

• Request and response data can be measured in bytes

• Core CSS/JS resources are loaded once

Page 24: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• Single Page Application cont.

Disadvantages:• JavaScript dependency

• Optimization is essential

• Knowledge of 3rd party UI libraries a must

• Single entry point to application makes navigating a bit more complex

Page 25: Optimus XPages: An Explosion of Techniques and Best Practices

Demonstration

Page 26: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• OpenNTF Domino API

Extends Domino Object Classes• Additional methods and properties

• Improved code

Quick to install and configure• This also applies to existing XPages applications

No need to recycle Domino Objects in Java Multi-threaded processing

Page 27: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• Model View Controller Strategy

Model• A Java class for each document type

• Define field names as class properties

• Use a constructor to default property values

• Generate getters and setters for each property

Page 28: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture

Page 29: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• Model View Controller Strategy cont.

View • XPage or Custom Control

• Should only contain HTML and XML tags where possible

• Styling exists mostly in style sheets

• Logic exists in JavaScript files or Java classes– i.e. Controllers

Page 30: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• Model View Controller Strategy cont.

Controller• A Java class for each document type

• Manages all logic related to its Model and View– Validating content

– Saving data

– Fetching data

– Special functions

Page 31: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• Model View Controller Strategy cont.

A Controller should exist for each of the following:• The application as a whole (e.g. Global Controller)

• For the user’s session (e.g. Session Controller)

• For each document type that can be submitted or viewed

• For each primary feature of your application:– Report Controller

– API Controller

– User Controller

Page 32: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture

Page 33: Optimus XPages: An Explosion of Techniques and Best Practices

Demonstration

Page 34: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• XPages Extension Library

A plethora of additional controls Application Layout for rapid UI design Twitter Bootstrap and jQuery enablement

• If enabled, your UI is automatically bootstrapped and responsive

Page 35: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• XAgents

A XPage that does not render a user interface but executes logic and returns data as a result

• Accessed via a URL with optional parameters (aka Web Service)

Expose your XPages application through APIs• For mobile apps

• 3rd party platforms and applications

Run scheduled Java agents that execute XPages logic

Page 36: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• XAgents cont.

Example XPage acting as an XAgent:

Page 37: Optimus XPages: An Explosion of Techniques and Best Practices

Application Architecture• XAgents cont.

Example scheduled Java agent executing XAgent:

Page 38: Optimus XPages: An Explosion of Techniques and Best Practices

User Experience

Page 39: Optimus XPages: An Explosion of Techniques and Best Practices

User Experience• Twitter Bootstrap

HTML, CSS and JavaScript framework for developing responsive applications

Intelligent styling that re-adjusts web page based on device’s form factor

• Laptops/Desktops

• Smartphones

• Tablet devices

Modern UI controls Offered as part of the XPages Extension Library

Page 40: Optimus XPages: An Explosion of Techniques and Best Practices

User Experience• 3rd Party Libraries

Animate.css – Provides animations to your XPages controls Toastr – Provides non-blocking notifications Font Awesome – A collection of vector icons that are easily

customizable:• Grouping

• Sizing

• Animating

Sweet Alert – Provides animated alert notifications

Page 41: Optimus XPages: An Explosion of Techniques and Best Practices

Demonstration

Page 42: Optimus XPages: An Explosion of Techniques and Best Practices

Optimization

Page 43: Optimus XPages: An Explosion of Techniques and Best Practices

“A developer achieves perfection not when there is nothing more to add, but when there’s nothing more to take away”

- Antoine de Saint-Exupery

Page 44: Optimus XPages: An Explosion of Techniques and Best Practices

Optimization• Multi-threaded Operations

Powered by ODA XOTS Execution of logic in its own thread that user does not depend on:

• i.e. Asynchronous operations in Java code

Allows for quicker response times when performing server side operations

Especially important for Web Services accessed by mobile apps

Page 45: Optimus XPages: An Explosion of Techniques and Best Practices

Optimization• Switch and Dynamic Content Controls

Divide web page into HTML blocks that are rendered/removed when relevant

This means:• Only populate the HTML you need

• Hidden HTML is not rendered to the browser until it’s required

• Less HTML for jQuery/Dojo to work through

• Web page is lightweight

Page 46: Optimus XPages: An Explosion of Techniques and Best Practices

Demonstration

Page 47: Optimus XPages: An Explosion of Techniques and Best Practices

Closing

Page 48: Optimus XPages: An Explosion of Techniques and Best Practices

Closing• For more information, please check out:

IBM XPages – www.xpages.info OpenNTF – www.openntf.org XPages Knowledge Base - wiki.openntf.org Animate.css - daneden.github.io/animate.css Toastr - github.com/CodeSeven/toastr Sweet Alert – t4t5.github.io/sweetalert/

Page 49: Optimus XPages: An Explosion of Techniques and Best Practices

Contact Information• John Jardin

Email: [email protected] Blog: http://johnjardin.ukuvuma.co.za Blog: http://www.bleedingcode.com Twitter: @JohnJardinCodes Skype: john.v.jardin

• Ukuvuma Solutions Website: www.ukuvuma.co.za Twitter: @ukuvuma

Page 50: Optimus XPages: An Explosion of Techniques and Best Practices

Questions????

7

Use the Orange Arrow button to expand the GoToWebinar panel

Then ask your questions in the Questions panel!

Remember, we will answer your questions verbally

Page 51: Optimus XPages: An Explosion of Techniques and Best Practices

#XPages

@JohnJardinCodes

@TLCCLtd

@Teamstudio

@PaulDN

Upcoming Events: Engage, Eindhoven, the Netherlands – Mar. 23 to 24 EntwicklerCamp, Gelsenkirchen, Germany – April 11 to 13 ICON US Virtual User Group – May 9 and 10th

Social Connections, Toronto, Canada – June 6th and 7th

MWLUG, Austin, TX – August 17 to 19

Question and Answer Time!

8

Teamstudio [email protected]

978-712-0924

TLCC [email protected] [email protected]

888-241-8522 or 561-953-0095

Howard GreenbergCourtney Carter

John Jardin Paul Della-Nebbia