IBM Domino Modernizing apps with Angularjs

IBM Domino Modernizing apps with Angularjs

• 1.
  Modernising a Notes appwith 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 • Workingremotely, 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
 M3API 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 inREST API drives the frontend • Create forms based on server-side configuration
• 15.
  Tools • Visual StudioCode • Bower • Grunt • NPM • IBM Domino Designer
• 16.
  Challenges (some ofthem…) & 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