MODERNIZING A NOTES APP WITH ANGULARJS

ICON UK 2016, LONDON

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

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

ICON UK 2016

PROJECT BACKGROUND (2/2)

▸ Integrations with ERP system

▸ Infor M3

▸ E-mail integration

▸ Document generation

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

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

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

ICON UK 2016

ARCHITECTURE

BROWSER NGINX

Windows server

DOMINOWeb serverReverse proxySSL

HTMLCSSJS

JDBCM3 API

REST APIIDM

M3

ADFS

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

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

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

ICON UK 2016

THE FRONT END (2/2)

▸ Various Angular projects

▸ Angular UI

▸ AngularJS-Toaster

▸ textAngular

▸ ng-file-upload

▸ lodash

▸ angular-formly

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

ICON UK 2016

ANGULAR-FORMLY

▸ Information in REST API drives the frontend

▸ Create forms based on server-side configuration

ICON UK 2016

TOOLS

▸ Visual Studio Code

▸ Bower

▸ Grunt

▸ NPM

▸ IBM Domino Designer

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

THANK YOU !