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. 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. Hi Thilo !
2#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

14. Demo React Frontend
14#engageug

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/