Mark leusing presenta una sessione su come modernizzare le applicazioni Notes e Domino con Rest, AngularJS etc..

1. Modernising a Notes
app with AngularJS

2. /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)
• IBM Champion 2011-2015

3. Project Background - business
• Norwegian manufacturing company
• 15+ year old IBM Notes client application
• Business critical
• Create offers
• Manage projects
• Technical specifications
• After sales

4. Project Background - technical
• Running on Notes 9 (client only)
• E-mail integration
• modified mail file
• Document generation
• Integrations with ERP system
• Infor M3

5. Business Case (1/2)
• Reduce dependency on Notes client/ Notes mail
• Reduce dependency on 3rd party tools
• Keep IBM Domino as data store and application server
• Build on existing data
• Clean-up/ improve data model

6. 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
• Test project for other applications

7. 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. Architecture
Windows server
HTML
CSS
JS
REST API
IDM
JDBC
M3 API
M3
browser
Web server
Reverse proxy
SSL
AD
NTLM
LDAP
NTLM

9. 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
• Apache POI for spreadsheet generation
• xDocReport for document generation
• DOCX and PDF

10. The Backend (2/2)
• NGINX
• Webserver for the AngularJS app
• Proxy for Domino, Connections and IDM
• SSL
• LDAP connection to Active Directory
• SSO with Domino & Infor
• Other 3rd party libraries
• GSON, Joda

11. The Frontend (1/2)
• All JavaScript
• AngularJS v1.5+
• Because v2 wasn’t ready yet
• UI theme from wrapbootstrap.com
• Bootstrap, Font Awesome
• Angular app also used as UI for IDM and
Connections

12. The Frontend (2/2)
• Various Angular projects
• Angular UI
• AngularJS-Toaster
• textAngular
• ng-file-upload
• lodash
• angular-formly
• cleave.js

13. Lodash
var numDays = [16, 30, 52];
var total = 0;
for (var i=0; i<numDays.length; i++) {
total += numDays[i];
}
var total = _.sumBy(numDays,
function(d) { return parseInt(d, 10); } );
_.indexOf( numDays, 30); //1
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. Angular-Formly
• Information in REST API drives the
frontend
• Create forms based on server-side
configuration

15. Tools
• Visual Studio Code
• Bower
• Grunt
• NPM
• IBM Domino Designer

16. Challenges (some of them…) & takeaways
• Complex setup, complex app
• Maintaining all dependencies:
• Stick with versions that work
• Infor IDM integration
• Java version of the API
• Use source control.
• Not a happy couple with Domino; Swiper helps
• Learn the tooling
• Try out to see what works