Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

806 views

Published on

Slides from my ICON UK 2016 session. Session abstract:

Modernization of IBM Notes applications is a topic that is on the map for many IBM customers. With one of my customers, a Norwegian manufacturing company, we started a project last year to modernize a business critical Notes application. We decided early on to keep using Domino in the backend, but switch to AngularJS for the frontend. In the session I'll talk about how we approached the project and got to a working prototype. Topics I will cover include responsibilities, development workflow, technical setup and issues we ran into. I'll explain the architecture that we are using, the components involved and how we integrated with IBM Connections and Infor. Keywords for this session: AngularJS, Nginx, REST, IBM Domino, Connections, Infor M3 and Infor Document Management.

Published in: Technology
  • Be the first to comment

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

  1. 1. MODERNIZING A NOTES APP WITH ANGULARJS ICON UK 2016, LONDON
  2. 2. 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
  3. 3. 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
  4. 4. ICON UK 2016 PROJECT BACKGROUND (2/2) ▸ Integrations with ERP system ▸ Infor M3 ▸ E-mail integration ▸ Document generation
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. ICON UK 2016 ARCHITECTURE BROWSER NGINX Windows server DOMINOWeb server
 Reverse proxy
 SSL HTML
 CSS
 JS JDBC
 M3 API REST API IDM M3 ADFS
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. ICON UK 2016 THE FRONT END (2/2) ▸ Various Angular projects ▸ Angular UI ▸ AngularJS-Toaster ▸ textAngular ▸ ng-file-upload ▸ lodash ▸ angular-formly
  13. 13. 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
  14. 14. ICON UK 2016 ANGULAR-FORMLY ▸ Information in REST API drives the frontend ▸ Create forms based on server- side configuration
  15. 15. ICON UK 2016 TOOLS ▸ Visual Studio Code ▸ Bower ▸ Grunt ▸ NPM ▸ IBM Domino Designer
  16. 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. 17. THANK YOU !

×