Slides from my ICON UK 2016 session. Session abstract: Modernization of IBM Notes applications is a topic that is on the map for many IBM customers. With one of my customers, a Norwegian manufacturing company, we started a project last year to modernize a business critical Notes application. We decided early on to keep using Domino in the backend, but switch to AngularJS for the frontend. In the session I'll talk about how we approached the project and got to a working prototype. Topics I will cover include responsibilities, development workflow, technical setup and issues we ran into. I'll explain the architecture that we are using, the components involved and how we integrated with IBM Connections and Infor. Keywords for this session: AngularJS, Nginx, REST, IBM Domino, Connections, Infor M3 and Infor Document Management.

1. MODERNIZING A NOTES APP
WITH ANGULARJS
ICON UK 2016, LONDON

2. ICON UK 2016
ABOUT ME
▸ Long-time Domino/ XPage/ web developer
▸ Freelance web developer
▸ Co-owner of Viaware
▸ Fan of everything web dev
▸ Open source dev, blogger (http://linqed.eu),
StackOverflow
▸ IBM Champion 2011-2015

3. ICON UK 2016
PROJECT BACKGROUND (1/2)
▸ Norwegian manufacturing company
▸ 15+ year old IBM Notes client application
▸ Business critical
▸ Create offers
▸ Manage projects
▸ Technical specifications
▸ After sales

4. ICON UK 2016
PROJECT BACKGROUND (2/2)
▸ Integrations with ERP system
▸ Infor M3
▸ E-mail integration
▸ Document generation

5. ICON UK 2016
BUSINESS CASE (1/2)
▸ Reduce dependency on Notes client/ Notes mail
▸ Reduce dependency on 3rd party tools
▸ Keep using IBM Domino as data store and application
server
▸ Build on existing data
▸ Clean-up/ improve data model

6. ICON UK 2016
BUSINESS CASE (2/2)
▸ Recently decided to use Infor Document Management
(IDM)
▸ Seamless integration with Infor M3 and IDM
▸ Modern (API based) architecture
▸ Modern UI / UX
▸ Prepare for use on mobile devices

7. ICON UK 2016
PROJECT SETUP
▸ Working remotely, developing locally
▸ Source control is an absolute must
▸ For NSF’s as well as Angular app
▸ …and documentation/ guidelines/ configuration
▸ Divide work: backend vs frontend

8. ICON UK 2016
ARCHITECTURE
BROWSER NGINX
Windows server
DOMINOWeb server
Reverse proxy
SSL
HTML
CSS
JS
JDBC
M3 API
REST API
IDM
M3
ADFS

9. ICON UK 2016
THE BACKEND (1/2)
▸ REST API built in Java
▸ Servlets running in a NSF on Domino
▸ https://edm00se.io/servlet-series/
▸ ExtLib REST Controls for views
▸ org.openntf.domino API
▸ xDocReport for document generation
▸ DOCX and PDF

10. ICON UK 2016
THE BACKEND (2/2)
▸ NGINX
▸ Webserver for the AngularJS app
▸ Proxy for Domino, Connections and IDM
▸ SSL
▸ Active Directory Federation Services (ADFS) for AD login
▸ Other 3rd party libraries
▸ GSON, Joda

11. ICON UK 2016
THE FRONT END (1/2)
▸ All JavaScript
▸ AngularJS v1.5
▸ Because v2 was/ is not ready
▸ UI theme from wrapbootstrap.com
▸ Bootstrap, Font Awesome
▸ Angular app also used as UI for IDM
and Connections

12. ICON UK 2016
THE FRONT END (2/2)
▸ Various Angular projects
▸ Angular UI
▸ AngularJS-Toaster
▸ textAngular
▸ ng-file-upload
▸ lodash
▸ angular-formly

13. ICON UK 2016
LODASH
var numDays = [‘4’, ‘8’, ’12’];
var total = 0;
for (var i=0; i<numDays.length; i++) {
total += parseInt(numDays, 10);
}
var total = _.sumBy(numDays,
function(d) { return parseInt(d, 10); }
);
_.indexOf( numDays, ‘8’);
var users = [
{ name : ‘Mark’, id : 1},
{ name : ‘Betty’, id : 2 }
];
var betty = _.find(users, { id : 2 } );
var sortedByName = _.sortBy(
users,
function (i) { return i.name; }
);
▸ Library of JavaScript functions

14. ICON UK 2016
ANGULAR-FORMLY
▸ Information in REST API drives the
frontend
▸ Create forms based on server-
side configuration

15. ICON UK 2016
TOOLS
▸ Visual Studio Code
▸ Bower
▸ Grunt
▸ NPM
▸ IBM Domino Designer

16. ICON UK 2016
CHALLENGES (A COUPLE OF THEM…)
▸ Complex setup, complex app
▸ Maintaining all dependencies
▸ ADFS
▸ IDM integration
▸ Java version of the API
▸ Source control and Domino not a happy couple

17. THANK YOU !