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

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/