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.

What is cool with Domino V10, Proton and Node.JS, and why would I use it in my Domino Apps anyway?

318 views

Published on

What is cool with Domino V10, Proton and Node.JS, and why would I use it in my Domino Apps anyway?

Published in: Software

What is cool with Domino V10, Proton and Node.JS, and why would I use it in my Domino Apps anyway?

  1. 1. What is cool with Domino V10, Proton and Node.JS, and why would I use it in my Domino Apps anyway? • Graham Acres and Heiko Voigt • Cross Canada Collaboration User Group (C3UG) 1#engageug
  2. 2. Hi Thilo ! 2#engageug
  3. 3. Agenda • What this presentation is, and is not about • What are the new possibilities? • Demo • What went into each demo? • What are the moving parts? • Where does the code run? • What do I get that I didn’t have before? • Lessons Learned • Resources to get started! 3#engageug
  4. 4. • User Group based in Canada • Customers, Business Partners, IBMers • Focus on virtual presence in 2017 • YouTube • Facebook • Twitter • LinkedIn • 36+ videos on YouTube 4#engageug www.c3ug.ca About C3UG
  5. 5. About Graham • President of Brytek Systems Inc. in Vancouver, Canada • Notes / Domino application architect since 1992 (v2.1) • IBM Champion 2017-2019 • Core Team Member at Cross Canada Collaboration User Group (C3UG) • OpenNTF Board Member 2019 • Cyclist, gardener, cook, hockey nut 5#engageug
  6. 6. About Heiko • CEO of SIT GmbH in Germany and Harbour Light Software Development Ltd. in Canada • Software Architect for 25+ years with N/D, Full-Stack JS Web Developer • IBM Champion 2019 • Core Team Member at Cross Canada Collaboration User Group (C3UG) • Proud father of twins • Sailor, Home brewer 6#engageug https://www.sit.de https://www.harbour-light.com
  7. 7. What this talk is about • We will talk about: • React, Node.JS, Express, Socket.IO, Passport • Domino-DB, Proton, Notes, IDMA, Domino • Tooling • Security • Development vs. Deployment • We will not talk about: • Angular, Amber, Vue.JS and any other friggin’ web framework YOU currently might be excited about • OAuth and IAM – for time reasons • Comparison of backend data stores – we are #Domino4ever. • Deployment and Code Management for the sake of time 7#engageug
  8. 8. 8#engageug Popularity of Package Catalogues Popularity of Programming Languages Popularity of Web Frameworks Lower your risk by adopting widespread tools – help, samples, tutorials, fixes. Why use Node.JS/Express/REACT/Domino-Db ?
  9. 9. Why use Node.JS/Express/REACT/Domino-Db ? • From an HCL perspective, the AppDev Pack is a small and lightweight interface compared to other development stacks in Domino: • XPages – JSF/Java, Dojo, Components, Plugins, lots of dependencies • Java API – still a glued JNI covering the C++ Classes with all cons, heavy lifting required to re-write (see OpenNTF ODA as the better alternative) • LotusScript – outdated and lack of tooling an all levels • JavaScript in the Notes Client: Not even half baked • Web Development in pure Notes – takes a certain amount of self-hatred or masochism (Theo????) to go down that rabbit hole…  NERD: Huge Community, lots of choices, small and doable interface to build. 9#engageug
  10. 10. What to use ? NERD-Stack 10#engageug Node.JS Express REACT Domino-Db Node.JS Express REACT Domino-Db API
  11. 11. Demo Overview 11#engageug Domino Q.NSF HCL Nomad/ IDMA REST API based on Node.JS and Express Realtime Backend based on Node.JS and Socket.io React Frontend App React Dashboard App
  12. 12. Demo responsibilities 12#engageug • React Frontend • Domino App • REST-API • Realtime Backend and Dashboard
  13. 13. Demo Notes/iPad 13#engageug • Creates surveys • Creates Question of the day • Is a survey client on the iPad • “regular” Notes App with minor adjustments for tablet use
  14. 14. Demo React Frontend 14#engageug
  15. 15. Demo Dashboard Frontend 15#engageug • Socket.io Client • React Frontend • Realtime Usage of REST API Calls in the REST Layer
  16. 16. Building Blocks: What lives where ? #engageug Domino P R O T O N Q.NSF L D A P Notes Client IDMA / HCL Nomad REST-API App Domino-DB Passport JWT Express, Socket.io Node.JS Express Node.JS Realtime App Socket.io Domino Node.js based Middleware React based Front end Dashboard Web App Domino Server Computer NGINX Reverse Proxy Harbour- light.com Survey Web App React Redux React Socket.io
  17. 17. Demo Elements: Domino • Q.nsf • IDMA access • LDAP • Domino Authentication • Proton • Listens to calls from the API for Domino Data • Supports all CRUD operations 17#engageug Domino P R O T O N Q.NSF L D A P Notes Client IDMA / HCL Nomad Domino
  18. 18. Demo Elements: Node.js based Middleware • REST-API App • Domino-db • Passport / JWT • Express, Socket.io • Node.js • Realtime App • Socket.io • Express • Node.js 18#engageug REST-API App Domino-DB Passport JWT Express, Socket.io Node.js Express Node.js Realtime App Socket.io Node.js based Middlware • Defines the API endpoints • Handles Authentication via LDAP and JWT • Interacts with Domino • Fires real time events as Socket-io client • Server & Client Components • Receives API Call Events from API • Publishes Summaries to Dashboard using socket.io
  19. 19. API Request using Postman 19#engageug
  20. 20. Demo Elements: Authentication • The React Frontend App authenticates against Domino LDAP once and receives a JSON Web Token (JWT) to pass to the subsequent API calls to do authenticated REST Calls. • All Handling is stateless, so no HTTP(s) or Domino Sessions come into play. • The API validates the passed-in JWT token and connects to Domino using a technical user and SSL encryption for Proton. • We do not need personalized data in this version of the demo – in the next stage, this will change and users will be able to authenticate using OAuth2 and IAM. • The socket.io clients log into the socket-io server without credentials and subscribe to a specific message type to send/receive data. 20#engageug REST-API App Domino-DB Passport JWT Express, Socket.io Node.js Express Node.js Realtime App Socket.io Node.js based Middlware
  21. 21. Demo Elements: React based front end • Survey Web App • React • React-Redux • Axios, Redux-Thunk • Redux-Form • React-Bootstrap • Dashboard Web App • React • Socket.io Client – receives Summary data • Charting component 21#engageug React based Front end Dashboard Web App Survey Web App React Redux React Socket.io
  22. 22. What do I get that I didn’t have before? • The ”Domino Way” vs Modern App Development • All-in-one vs. stringently layered and structured applications if done right -> See Mike Holmes for Details. Easier to maintain, easier to replace components, easier re-use on all layers. • Significantly more flexibility to • Interact with your, and others’ data • Expose your data (while keeping security) • Scalabilty (vertical and horizontal), Standard Deployment Mechanisms & Codestore (Git, Jenkins, Maven,….) • Flexibility of choice on the front-end from Libraries like React, Angular, Vue.JS to Client Applications using PWAs or Electron-based Apps. • What do I give up? • Nothing – the old tooling is still there to use if needed 22#engageug
  23. 23. What tooling do I need? - Recommendations • Notes, Domino, Designer, AppDev Pack • Node.js, Express • Visual Studio Code • Postman • Redux DevTools • Web Browser and Browser Dev Tools • GitHub 23#engageug
  24. 24. Lessons Learned • React is not a UI framework • You will rebuild your app multiple times • What we were told when we learned XPages is true! • Stick to RESTful principles when designing your API but do it by hand once before using any toolkits. • Use create-react-app to get started, especially to help in your first deployments • Be prepared to learn about Webpack ! (Check in you org, you might not be the only one) 24#engageug
  25. 25. Resources, Resources, Resources • Axios • Passport • Express Validator • 4-gui • lodash • Cors • OpenAPI/Swagger • Tim Davis • Paul Withers • John Jardin • Oliver Busse • Ulrich Krause • Us () • Stephen Grider 25#engageug
  26. 26. More Resources • Find our code here: https://github.com/c3ug/engage2019democode • Udemy is your friend ! • Stackoverflow.com • Upcoming C3UG video series on YouTube and Udemy • OpenNTF resources • Slack channel #dominonodejs • Community developed guides 26#engageug
  27. 27. Questions Graham Acres • graham.acres@brytek.ca • @gacres99 • https://github.com/gacres/ Heiko Voigt • heiko.voigt@harbour-light.com • @HarbourLightcom • https://github.com/heikovoigt 27#engageug https://www.c3ug.ca/

×