Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

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

•Download as PPTX, PDF•
•
Heiko Voigt
Heiko Voigt

This document discusses using Node.js, React, and Express with Domino V10. It provides an overview of a demo that uses these technologies to build a survey application with a real-time dashboard. The demo includes a Notes/iPad app for surveys, a React frontend, a Node.js/Express REST API, and a Node.js/Socket.io real-time backend. It discusses the benefits of this approach, including scalability, flexibility, and reusability. It also provides recommendations for tooling and resources for learning more.

1 of 27
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
Hi Thilo ! 2#engageug
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
• 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
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
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
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#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 ?
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
What to use ? NERD-Stack 10#engageug Node.JS Express REACT Domino-Db Node.JS Express REACT Domino-Db API
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
Demo responsibilities 12#engageug • React Frontend • Domino App • REST-API • Realtime Backend and Dashboard
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
Demo React Frontend 14#engageug
Demo Dashboard Frontend 15#engageug • Socket.io Client • React Frontend • Realtime Usage of REST API Calls in the REST Layer
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
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
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
API Request using Postman 19#engageug
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
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
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
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
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
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
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
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/

More Related Content

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

  • 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
  • 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. • 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. 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. 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. 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#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. 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. What to use ? NERD-Stack 10#engageug Node.JS Express REACT Domino-Db Node.JS Express REACT Domino-Db API
  • 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. Demo responsibilities 12#engageug • React Frontend • Domino App • REST-API • Realtime Backend and Dashboard
  • 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
  • 15. Demo Dashboard Frontend 15#engageug • Socket.io Client • React Frontend • Realtime Usage of REST API Calls in the REST Layer
  • 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. 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. 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. API Request using Postman 19#engageug
  • 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. 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. 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. 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. 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. 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. 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. 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/