Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ......
Transcript of Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ......
![Page 1: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/1.jpg)
11/09/2019 1
DEVOPS TALKS CONFERENCE 2019
Designing and implementing a modern portal architecture
and the lessons I learnt along the way…
![Page 2: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/2.jpg)
11/09/2019 2
DEVOPS TALKS CONFERENCE 2019
Introduction
Who am I?How did I
end up here?
What am I talking about today?
![Page 3: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/3.jpg)
11/09/2019 3
DEVOPS TALKS CONFERENCE 2019
Where did Manage Centre come from?
![Page 4: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/4.jpg)
11/09/2019 4
DEVOPS TALKS CONFERENCE 2019
User experience
![Page 5: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/5.jpg)
11/09/2019 5
DEVOPS TALKS CONFERENCE 2019
User experience
![Page 6: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/6.jpg)
11/09/2019 6
DEVOPS TALKS CONFERENCE 2019
History of development
Start-up sized teamOutsourced dev team with internal business stakeholders
Vendor selection process External UX design firm
![Page 7: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/7.jpg)
11/09/2019 7
DEVOPS TALKS CONFERENCE 2019
Lesson one: Having the right Product Manager is critical
![Page 8: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/8.jpg)
11/09/2019 8
DEVOPS TALKS CONFERENCE 2019
Historic architecture
![Page 9: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/9.jpg)
11/09/2019 9
DEVOPS TALKS CONFERENCE 2019
Platform
Red Hat Linux
OS-level Virtualisation
Frameworks
Runtime Environment
Polyglot event-driven Application Framework
Security Framework
Language
Java Virtual Machine
Web Server / Reverse Proxy / Load
Balance
JavaScript
In-Memory Data Grid
Clustering
Content Delivery Network and File storage
![Page 10: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/10.jpg)
11/09/2019 10
DEVOPS TALKS CONFERENCE 2019
![Page 11: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/11.jpg)
11/09/2019 11
DEVOPS TALKS CONFERENCE 2019
![Page 12: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/12.jpg)
11/09/2019 12
DEVOPS TALKS CONFERENCE 2019
Languages
HTML5 - Structure
JavaScript - Behaviour
CSS3 - Style
Frameworks
Single Page Application Framework
DOM Manipulation
Styling & Design
Special Purpose
Charting
Flowcharting
Stylesheet processing
![Page 13: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/13.jpg)
11/09/2019 13
DEVOPS TALKS CONFERENCE 2019
Problems we have
![Page 14: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/14.jpg)
11/09/2019 14
DEVOPS TALKS CONFERENCE 2019
![Page 15: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/15.jpg)
11/09/2019 15
DEVOPS TALKS CONFERENCE 2019
![Page 16: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/16.jpg)
11/09/2019 16
DEVOPS TALKS CONFERENCE 2019
Lesson two: Web Components are really cool and you should
use them
![Page 17: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/17.jpg)
11/09/2019 17
DEVOPS TALKS CONFERENCE 2019
![Page 18: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/18.jpg)
11/09/2019 18
DEVOPS TALKS CONFERENCE 2019
![Page 19: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/19.jpg)
11/09/2019 19
DEVOPS TALKS CONFERENCE 2019
So what do we want in a portal architecture?
Follows micro-service and micro-frontend patterns
Something that is easy to contribute to if you meet the
standards
Ability to surface data from new data sources
quickly
Interfaces that have a consistent user experience
![Page 20: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/20.jpg)
11/09/2019 20
DEVOPS TALKS CONFERENCE 2019
Well that’s nice but how do we get there?
![Page 21: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/21.jpg)
11/09/2019 21
DEVOPS TALKS CONFERENCE 2019
Conceptual models
Entity model
Charting model Action model
![Page 22: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/22.jpg)
11/09/2019 22
DEVOPS TALKS CONFERENCE 2019
Entity model
![Page 23: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/23.jpg)
11/09/2019 23
DEVOPS TALKS CONFERENCE 2019
Charting model
![Page 24: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/24.jpg)
11/09/2019 24
DEVOPS TALKS CONFERENCE 2019
Action model
![Page 25: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/25.jpg)
11/09/2019 25
DEVOPS TALKS CONFERENCE 2019
Making it real
![Page 26: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/26.jpg)
11/09/2019 26
DEVOPS TALKS CONFERENCE 2019
Patterns and tech we want to use more of
Micro-front ends
GraphQL
Progressive Web Apps
![Page 27: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/27.jpg)
11/09/2019 27
DEVOPS TALKS CONFERENCE 2019
Micro-frontends
![Page 28: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/28.jpg)
11/09/2019 28
DEVOPS TALKS CONFERENCE 2019
Micro-frontends
Benefits
• A feature team can control the entire flow from data through to user interface
• Teams can in theory right in whatever web framework they like
• Smaller pieces of UI functionality that can be re-used between different portals
• Skating to where the puck will be, Web Components
Challenges
• Have to get the integration model into the parent app right
• App bundle size can get out of hand if not tightly governed
• Styling can get tricky with lots of different components
![Page 29: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/29.jpg)
11/09/2019 29
DEVOPS TALKS CONFERENCE 2019
Basecoat
![Page 30: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/30.jpg)
11/09/2019 30
DEVOPS TALKS CONFERENCE 2019
Lesson three: Having a living style guide makes the “look and feel” part of UX fantastically easy to
share across teams
![Page 31: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/31.jpg)
11/09/2019 31
DEVOPS TALKS CONFERENCE 2019
Micro-frontends
• Why do we think it is cool?
• Extends the same ideas and thinking about microservices to the front-end
• Delivers the same benefits (and challenges) as microservices
• How does it fit the concepts?
• With the right standards lets us decentralize development effort to the teams developing the services
• Lets us share components between teams and other portals in the business more easily
![Page 32: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/32.jpg)
11/09/2019 32
DEVOPS TALKS CONFERENCE 2019
GraphQL
![Page 33: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/33.jpg)
11/09/2019 33
DEVOPS TALKS CONFERENCE 2019
GraphQL
• Why do we think it is cool?
• Fantastically powerful query language, only get the data you asked for
• Makes it easy to add new data sources or change them without impacting the front end
• Makes it easy to “mash up” data from multiple sources completely invisibly to the system asking for it
• How does it fit the concepts?
• Lets you define a single way of representing entities which can be shared across portals
• Provides a single consistent interface for accessing data from any data source
![Page 34: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/34.jpg)
11/09/2019 34
DEVOPS TALKS CONFERENCE 2019
Progressive Web Apps
• Progressive
• Responsive
• Fast after initial load
• Connectivity independent
• App-like
• Fresh
• Safe
• Discoverable
• Re-engageable
• Installable
• Linkable
![Page 35: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/35.jpg)
11/09/2019 35
DEVOPS TALKS CONFERENCE 2019
Progressive Web Apps
• Why do we think it is cool?
• Enables app like behavior without needing to have native applications
• Shared code base across mobile platforms (don’t need Android and iOS teams)
• How does it fit the concepts?
• Makes the content available on any platform
• Re-uses the common services to deliver a consistent experience
• Can be refreshed with new technology since it sits on top of the business logic layer
![Page 36: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/36.jpg)
11/09/2019 36
DEVOPS TALKS CONFERENCE 2019
The future of portals at NTT
![Page 37: Designing and implementing a modern portal architecture · DEVOPS TALKS CONFERENCE 2019 ... 11/09/2019 24 DEVOPS TALKS CONFERENCE 2019 Action model. 11/09/2019 25 DEVOPS TALKS CONFERENCE](https://reader034.fdocuments.us/reader034/viewer/2022042123/5e9ebc29d9d79400041302c1/html5/thumbnails/37.jpg)
11/09/2019 37
DEVOPS TALKS CONFERENCE 2019
Thank you!