Engage 2020-nerd-for-move-on-from-x pages
0 likes203 views
This presentation discusses the transition from XPages to a new technical stack, focused on modernizing the application landscape at DLR RLP in Rhineland-Palatinate. Key topics include the current challenges faced by the customer, the introduction of solutions utilizing Node.js, Express, and React, along with the development of applications and components to enhance the digital agricultural portal. The journey emphasizes progressive modernization while maintaining some dependence on existing Domino infrastructure.
Engage 2020-nerd-for-move-on-from-x pages
- 1. Using the NERD stack to move on from XPages – a new beginning… • Herwig Köhler (DLR RLP) • Heiko Voigt (SIT GmbH) 1#engageug https://www.sit.de
- 2. Agenda • What this presentation is, and is not about • About DLR RLP and its Applications • A new way into the future • The technical Aspects of this • Demo • Where are we now ? • Next Steps and Goals • Q&A 2#engageug
- 3. About Herwig Köhler • CEO technical central office Dienstleistungszentren Ländlicher Raum (Service centers in rural areas) in Rhineland Palatinate • communication management for agricultural advice • agricultural Meteorology • Since 2003 Notes development and coordination of complex Notes projects • Proud father of a daughter • Motorhome driver, photograph 3#engageug
- 4. 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 • HCL Master 2019/2020 • Core Team Member at Cross Canada Collaboration User Group (C3UG) • Proud father of twins • Sailor, Home brewer 4#engageug https://www.sit.de https://www.harbour-light.com
- 5. What this talk is about • We will talk about: • The Business solution for DLR, currently using XPages • WHY the customer is still on Domino and has no intentions to move away but needs to modernize • Customers challenges on the way to the future • How we make the platform future-ready • See some demos, code, concepts, tooling and first implementations • Look at the customers journey and the next steps • We will not talk about: • Whether XPages or NERD is the better dev stack • Why we did not migrate to MS Teams …. • Whether we should have used Dojo/Vue/Angular/Stencil/WTF to implement the new tools and solutions 5#engageug
- 6. 6#engageug About DLR and its current application landscape • digitization agriculture - goals of the country RLP • establish a infrastructure for the secure and resilient use of operational data (including data transfer) • Testing of new methods and techniques in the field of digitization with the aim of practice transfer via state consultation • Designing innovative framework conditions for digitization in agriculture • Closely networked activities of agriculture, economy, science and politics / authorities • Initial Situation • In the field of agriculture there is a heterogeneous information, advisory and administrative structure in Rhineland-Palatinate • The institutions of agriculture are subject to the increasing pressure of resource conservation • Solution • Bundling of relevant information for agriculture in Rhineland-Palatinate from public providers (advice, experiments, science, research, guidelines, laws, etc.)
- 8. 8#engageug Digital agricultural portal - benefit • farmer use central internet adress • - provide faster and more target searches • avoid duplication using standardized automatized supply • - effizient use of resources • digital networking between the institutions • - more efficient exchange of information among each other Information for agriculture farmer advisor bee- keeper garden- owners commu nities road manage ment police insu- rance Tea- ching
- 9. 9#engageug GeoBox-Messenger - Specialist application agriculture
- 10. structure Data flow Inetctr.nsf Data sources Ca. 50.000 doc x.nsf www x Portal Statistics RSS-Feeds structure data flow
- 11. Workflow web editing •Subjects •Contacts •Events •Download •Shop DLR 1 DLR 2 DLR 3 DLR 4 DLR 5 DLR 6 > 50 Web portals Fruit growing Plant growing Viniculture Nutrition Weather Plant protection Etc.
- 12. 12#engageug About DLR and its XPages Implementation
- 13. 0 5,000 10,000 15,000 20,000 25,000 30,000 35,000 40,000 0 50,000 100,000 150,000 200,000 250,000 300,000 350,000 400,000 Jan08 April Jul Okt Jan09 April Juli Okt Jan10 April Juli Okt Jan11 April Juli Okt Jan12 April Juli Okt Jan13 April Juli Okt Jan14 April Juli Okt Jan15 April Juli Okt Jan16 April Juli Okt Jan17 April Juli Okt Jan18 Visitors/day Pages/day pages visitors Linear (pages) Linear (visitors) Internet - statistics pages and Visitors per day 2008 - 2018
- 14. Intranet
- 15. Why is DLR still convinced about Domino ? • Long standing positive experience in running intranet and extranet applications • Quick turnaround times for new requirements and cost- effective development. • Very low maintenance costs • “Good Enough” features like mail/calendaring • Always-adopting AppDev Landscape using Web Trends • XPages brought a huge step forward… • We see the AppDevPack as a similar leap 15#engageug
- 16. Why was it time for modernization ? • Lack of investment by IBM in Domino and Web AppDev • Rumors about EoL for XPages by HCL and IBM • Desire to make use of new Web Frameworks for new apps • Re-Alignment with other Government Agencies about Tools and Standards • Bring the Application platform into the next century • Some applications haven’t been touched in 10+ years • No desire to retire Domino – just modernize the landscape to keep ahead of the curb • This is a journey – not a one-day-thing. 16#engageug
- 17. What to use ? NERD/NEND-Stack 17#engageug Node.JS Express REACT/Next.JS Domino-Db Node.JS Express REACT / Next.JS Domino-Db API
- 18. The basic idea – new building blocks 18#engageug Domino REST-API based on Node.JS and Express React Frontend Apps and Components* Apache SOLR * Also available for existing XPages implementations
- 19. The basic idea – new building blocks – frontend componets 19#engageug Grid Component to display Data from views* Form component to display (Domino) Form based Data Layout Components To structure the UI Search Component to interact with Apache SOLR Menu Bar Component for Navigation RichText Component for r/w RichText Conversion* Field Type Components Datepicker, CheckBox, DropDown Lists etc. HTML Renderer Web Component to replace Iframes* * Also available for existing XPages implementations
- 20. The basic idea – new building blocks and a REST-API 20#engageug * Also available for existing XPages implementations Main REST- API on Node.js Domino OSGI based REST APIs Domino- db SOLR REST- API IAM Service Domino Apache SOLR RichText App.- Generator React Frontend Apps and Components* FT Search
- 21. A few words about the first application - IMSY 21#engageug • Corpus juris / digest for the agricultural sector • Contains information on regulations and recommendations on federal and provincial level • Maintained by DLR personnel and pushed to the web portal • Also maintains a push channel for overdue surveys and data collection so farmers are reminded to hand in necessary paperwork.
- 22. A few words about the first application - IMSY 22#engageug IMSY IMSY Frontend via Xpages Portal (public access) IMSY Web Frontend for Admin/Editing • We are re-building the Admin/Edit frontend for Intranet Access • The access from the XPages portal uses the pre-built portal building blocks • Replacement of the XPages part follows in a later phase
- 23. New building blocks – The Domino View Component 23#engageug * Also available for existing XPages implementations • Receives View Design & Data via REST-API • Creates Events for double click (open) -> Action coming via Design: • UNIDs • Open Document in React App • Fully supports Categorization • Can be “opened” up for power users to alter views to their own style • Pagination or infinite scrolling • Export to Excel and other formats via plugins • See Demo…
- 24. Demo – The Domino View Component 24#engageug * Also available for existing XPages implementations
- 25. New building blocks – The Domino Rich Text Component 25#engageug • New Rich Text Editor – Froala • We do RT->HTML and HTML-> RT Conversion • We focus on what is possible with HTML plus some important Rich Text Features: • Keep attachments in place • Image upload / Image handling • 85% of RT Features are supported Round-Trip • This is no MIDAS solution but a “good-enough” approach • Works as OSGi-Bundle in every Domino App including XPages • Integration patterns for React, Next.JS and XPages available, any other frontend framework works as well.
- 26. Demo – The Domino Rich Text Component 26#engageug * Also available for existing XPages implementations
- 27. Views and Forms – dynamic Assembly 27#engageug Main REST- API React App Read Design Read Data View Elements Design Repository on Domino Data NSF on Domino Form Elements
- 28. New Search Capabilities 28#engageug Apache SOLR Main REST- API Core m-z: Intranet Bucket (Schema) Core 1-n: Extranet Buckets (Schema) Portals and External Content NUTCH Crawler Intranet Data Web Portal Data External Web- Sites Search Component with configured Context* Search Component with configured Context* • Search Scopes can be defined for every Portal and are honored in the Search Component • Search Component is a self-contained Web Component to run in ANY Web Container, incl. Xpages • We display mixed results from own and foreign web sites.
- 29. The complete Picture – more than one engine, aggregated results 29#engageug Apache SOLR Main REST- API SOLR Buckets NUTCH Crawler Search Component with configured Context* Search Component with configured Context* • Search Scopes can be defined for every Portal and are honored in the Search Component • Search Component is a self-contained Web Component to run in ANY Web Container, incl. Xpages • We display mixed results from own and foreign web sites and all configured Search Sites Other Search Engine e.g. Elastic Domino FT Search / DQL NSFs with Reader/Author restrictions Other Buckets
- 30. Demo – The Search Component 30#engageug
- 31. HTML Rendering Web Component 31#engageug * Also available for existing XPages implementations Main REST- API HTML Rendering Component as iFrame replacement HTML Page from Portal (DOM) Shadow DOMExternal HTML • Not every Web Page is supported – testing • No resizing issues • No iFrame • No Collision of content by using the Shadow DOM
- 32. 32#engageug There’s one more thing… Application Generator - preview Use case: DLR RLP is hosting applications for other Government Agencies, even outside of Rheinland-Pfalz, even outside of Germany. Being able to run a new “service” rapidly with an adopted CI for a specific customer is very important.
- 33. Node .JS E X P R E S S R E S T - A P I Application Generator 33#engageug Domino Design-Db App Generator Frontend New Db Web Templates Step 1: • Create a new Domino App based on an NTF • Import Design into REST-API Design Repository
- 34. R E S T - A P I Application Generator 34#engageug Domino Design-Db App Generator Frontend New Db Web Templates App.zip Step 2: • Create a NERD/NERN App from a web template • Return the App’s Source Code as ZIP-File • Samples use Semantic UI as well as Material Design Node .JS E X P R E S S
- 35. Application Generator 35#engageug Domino Design-Db New Db Web Templates React Frontend Apps from Template Step 3: • Unzip the downloaded package • Get your dependencies by typing “yarn install” or “npm install” • Start your app by typing “yarn start” or “npm start”. • Enjoy and/or go coding ! Node .JS E X P R E S S R E S T - A P I
- 36. 36#engageug A word on Authentication – we use IAM and Authorization code flow Authorization Server Web-UI Resource Server Grant_type = Authorization Code token token response redirect authorize code code We us a JWT Token to identify the Web UI session. It is good practice not to expose the OAUTH Access Token to the Web-UI.
- 37. 37#engageug Front-EndAPI IAM Domino 1) Send AUTH request 5) Redirect back to Front End including JWT Token or Error- Code. 2) Redirect to Authentication Page 3) Redirect to Callback URL and Receive Access Token IAM Interaction - Login 4) Create Session Object and JWT token, Store Access Token in session object and perssit
- 38. 38#engageug Front-EndAPI IAM Domino 1) Send Request plus JWT token as Baerer Token in Auth.-Header 6) Send back data/result/Errors Return code 500 for Errors, 403 if Token Invalid 3) Introspect Access Token 4) Receive Introspection Result 5) CRUD Operation in User context 6) Create Response IAM Interaction – Subsequent API Calls 2) Retreive Access Token via JWT Token
- 39. A word about tooling… 39#engageug • REST-API: • VS.Code • Postman • Domino Designer • Node.js, Express, Axios • OpenAPI 3.0 Standards • PM2 as Management/Monitoring platform for IAM and Node APIs • Web-Apps: • VS.Code • Create-React-App • Axios • SemanticUI, Bootstrap, Material Design
- 40. This is a journey – where are we now ? 40#engageug • The first new application (IMSY) is done. • The search component is in final testing. • The RichText Component is done for V1. • The HTML Rendering Web Component is in development • The next Application that will get transformed is the Portal Content Management Application – this one is fairly complex.
- 41. This is a journey – where are we now ? 41#engageug De-couple Frontend, Middleware, backend Modernize UIs Take back control of our dev environment (Lower dependencies, build on standards, lower risks) Switch to Modern tooling ü ü ü ü Move ahead on our own pace ! (new apps, new frameworks, more services, more ”customers”) ü
- 42. This is a journey – Next Steps… Next.JS 42#engageug • Re-Build the Portal and its components on Next.JS • Next.JS is a server side rendering framework built on React to create SEO friendly sites using React. • We can re-use all the components we have already built • … and extend them with Next.JS features. • The result are common features for Client Side and Server Side Rendering !
- 43. This is a journey – Next Steps… 43#engageug Two ways ahead Enhance the base platform Refurbish Portal and applications • Server side Rendering • Extend the App Designer – big time! • iFrame Replacement • Calendar Controls ! • Integrate other Search Engines • Web Site Editing • Replace Portal Fragments • iFrame Removal
- 44. A look at the Dev-Team 44#engageug Heiko Voigt Herwig Köhler Dirk Pörschke Martin Krauss Liv Macintosh Heiko Voigt Serdar Basegmez Karin Kolb UX Design (Search) Search RichText React Frontend REST-API and IAM Project Management Requirement Mgmt. Customer PM Horst Kaub Renate Lachenit Herr Oppenhäuser Functional Design, Testing Functional Design, Testing SysAdmin https://www.sit.de
- 45. Summary… 45#engageug • It’s a journey but we are on a good course! • Can the App Generator be used as a Low-Code-Framework ? • No – it’s lazy pro-coder’s friend J • No comparison to Volt/Aveedo and the likes • We are EXTENDING and ENHANCING the existing platform with new Apps and new Components for the existing environment • The App Generator will be enhanced big time. • The RichText Component will see a lot more development as well • What you have seen started basically in November 2019 – we are pretty happy with the results for 4 months !
- 46. Questions Dr. Herwig Köhler Heiko Voigt • heiko.voigt@harbour-light.com • hvoigt@sit.de • @HeikoVoigt3 • @HarbourLightcom,@SITGmbH 46#engageug