ICON UK 2016: Modernizing an IBM Notes applicaton using with AngularJS

ICON UK 2016: Modernizing an IBM Notes applicaton using with AngularJS

• 1.
  MODERNIZING A NOTESAPP WITH ANGULARJS ICON UK 2016, LONDON
• 2.
  ICON UK 2016 ABOUTME ▸ 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 PROJECTBACKGROUND (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 PROJECTBACKGROUND (2/2) ▸ Integrations with ERP system ▸ Infor M3 ▸ E-mail integration ▸ Document generation
• 5.
  ICON UK 2016 BUSINESSCASE (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 BUSINESSCASE (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 PROJECTSETUP ▸ 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 BROWSERNGINX Windows server DOMINOWeb server
 Reverse proxy
 SSL HTML
 CSS
 JS JDBC
 M3 API REST API IDM M3 ADFS
• 9.
  ICON UK 2016 THEBACKEND (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 THEBACKEND (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 THEFRONT 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 THEFRONT END (2/2) ▸ Various Angular projects ▸ Angular UI ▸ AngularJS-Toaster ▸ textAngular ▸ ng-file-upload ▸ lodash ▸ angular-formly
• 13.
  ICON UK 2016 LODASH varnumDays = [‘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 !