Modernising a Notes app with AngularJS
-
Upload
icon-uk-events-limited -
Category
Technology
-
view
88 -
download
0
Transcript of Modernising a Notes app with AngularJS
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 !