Developing an Extranet as TYPO3 Page App
Kabarakh1
139 views
43 slides
Jul 30, 2024
Slide 1 of 119
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
About This Presentation
From V0 to V2: This Talk is about a real customer project- an extranet! We will talk about our technical thoughts on how to work with React and TYPO3 for a SinglePageApp and Authorization management. Our use of standard TYPO3 Elements will be explained. We will also add in some project management th...
Slide Content
Managing and Developing an Extranet
as a TPA - A TYPO3 Page App
by Herbie Keuerleber
and Rebecca Düker
as a TPA - A TYPO3 Page App
by Herbie Keuerleber
and Rebecca Düker
Herbie Keuerleber Rebecca Düker
DEVELOPER FE PRODUCT OWNER
DEVELOPER FE PRODUCT OWNER
Agenda
Agenda
Project overview
Project overview
Agenda
RoutingProject overview
RoutingProject overview
AgendaRouting
React, Components and DTOsProject overview
React, Components and DTOsProject overview
AgendaRouting React, Components and DTOs Project overview
Requirements management
Requirements management
AgendaRouting React, Components and DTOs Project overview Requirements management
Communication and transparency
Communication and transparency
AgendaRouting React, Components and DTOs Project overview Requirements management Communication and transparency
Access
Access
AgendaRouting React, Components and DTOs Project overview Requirements management Communication and transparency Access
CLI and scheduler
CLI and scheduler
AgendaRouting React, Components and DTOs Project overview Requirements management Communication and transparency Access CLI and scheduler
Interfaces to other systems
Interfaces to other systems
AgendaRouting React, Components and DTOs Project overview Requirements management Communication and transparency Access CLI and scheduler Interfaces to other systems
Tests
Tests
Project
Overview
Overview
Fegime - our Project Partner
•Market community of middle class
electrical wholesalers with 45
shareholders
•Headquarter in Nurembourg
•Shareholders employ 3.500 people in 160
locations
•Revenue in 2023 was 2,4 billion €
•Goal: create value
5
•Market community of middle class
electrical wholesalers with 45
shareholders
•Headquarter in Nurembourg
•Shareholders employ 3.500 people in 160
locations
•Revenue in 2023 was 2,4 billion €
•Goal: create value
5
The Project: Extranet
•We got:
•15 years of a grown Extranet
•Overgrown functionalities
•Oldfashioned UI build for tube monitors
•User Opinion:
•Hard to use
•Confusing and not clearly arranged
•Only use it when there is no other chance
•Don’t use it
6
•We got:
•15 years of a grown Extranet
•Overgrown functionalities
•Oldfashioned UI build for tube monitors
•User Opinion:
•Hard to use
•Confusing and not clearly arranged
•Only use it when there is no other chance
•Don’t use it
6
The Project: Extranet
•We want:
•Central information management
•Efficient communication
•Clear communication of core values
•Structured document management
•Reduced work expense
•Scaling
•Easier processes
•New, modern look
7
•We want:
•Central information management
•Efficient communication
•Clear communication of core values
•Structured document management
•Reduced work expense
•Scaling
•Easier processes
•New, modern look
7
Face the Challenges
8
Lead to
15 years of growth
and a lot of functionalities
Bad arrangement and
no overview
8
Lead to
15 years of growth
and a lot of functionalities
Bad arrangement and
no overview
Goal Extranet 2.0
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Goal Extranet 2.0
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Goal Extranet 2.0
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Goal Extranet 2.0
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Goal Extranet 2.0
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Goal Extranet 2.0
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Goal Extranet 2.0
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
Save time in using
and onboarding
New possibilities
for data usage
Modern „look and feel“
& User Experience
Efficient usage
of the network
Participation in
continuous optimization
Quick adjustment
of the software
How to start
MVP
Minimum Viable Product
Define the most
important functions
-> Purchase
Testphase for collaborationStart with the first step
Verify the understanding of requirements
Understand complexity
Build a base and get
us on the right route
Minimum Viable Product
Define the most
important functions
-> Purchase
Testphase for collaborationStart with the first step
Verify the understanding of requirements
Understand complexity
Build a base and get
us on the right route
Routing
Routes?
/admin/user
/admin/user
Sending links to other people
Bookmarks
Login and be redirected
Sending links to other people
Bookmarks
Login and be redirected
Three types of routes:
Routes
Routes
Three types of routes:
Routes
Existing files (e.g. images or downloads)
Routes
Existing files (e.g. images or downloads)
Three types of routes:
Routes
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Routes
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Three types of routes:
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Three types of routes:
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
16
App Routes
Using React Router
Mapping Route -> React „page“
Security is important - user should only see the routes
they are allowed to
App Routes
Using React Router
Mapping Route -> React „page“
Security is important - user should only see the routes
they are allowed to
17
App Routes
App Routes
Three types of routes:
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Three types of routes:
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
19
API Routes
TYPO3 Site Config
Using b13/slimphp
Clean HTTP verbs
(GET, POST, DELETE)
JSON Responses
with HTTP codes
API Routes
TYPO3 Site Config
Using b13/slimphp
Clean HTTP verbs
(GET, POST, DELETE)
JSON Responses
with HTTP codes
19
API Routes
TYPO3 Site Config
Using b13/slimphp
Clean HTTP verbs
(GET, POST, DELETE)
(No PATCH sadly)
JSON Responses
with HTTP codes
API Routes
TYPO3 Site Config
Using b13/slimphp
Clean HTTP verbs
(GET, POST, DELETE)
(No PATCH sadly)
JSON Responses
with HTTP codes
19
API Routes
TYPO3 Site Config
Using b13/slimphp
Clean HTTP verbs
(GET, POST, DELETE)
(No PATCH sadly)
JSON Responses
with HTTP codes
Spoiler!
API Routes
TYPO3 Site Config
Using b13/slimphp
Clean HTTP verbs
(GET, POST, DELETE)
(No PATCH sadly)
JSON Responses
with HTTP codes
Spoiler!
Three types of routes:
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Three types of routes:
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
Routes
API routes (e.g. /api/login/forgot-password)
App routes (e.g. /login)
Existing files (e.g. images or downloads)
React -
Components
& DTOs
Components
& DTOs
Route to page
+ + =
+ + =
React pages
<RootPage>
</RootPage>
<RootPage>
</RootPage>
React pages
<RootPage>
</RootPage>
•Checks for login
•Shows loading indicator
•Displays the page components
defined by menu/TYPO3
<RootPage>
</RootPage>
•Checks for login
•Shows loading indicator
•Displays the page components
defined by menu/TYPO3
React pages
<RootPage>
<MainPage>
</MainPage>
</RootPage>
<RootPage>
<MainPage>
</MainPage>
</RootPage>
React pages
<RootPage>
<MainPage>
</MainPage>
</RootPage>
•Loads API data needed for the page
•Handles „global“ changes (delete, edit, new)
with API data
<RootPage>
<MainPage>
</MainPage>
</RootPage>
•Loads API data needed for the page
•Handles „global“ changes (delete, edit, new)
with API data
React pages
<RootPage>
<ContentArea />
<Calendar />
<ActivityFeed />
<MainPage>
</MainPage>
</RootPage>
<RootPage>
<ContentArea />
<Calendar />
<ActivityFeed />
<MainPage>
</MainPage>
</RootPage>
React pages
<RootPage>
<ContentArea />
<Calendar />
<ActivityFeed />
<MainPage>
</MainPage>
</RootPage>
•Displays data
•Reusable components (buttons, lists,
collapsibles, …)
•Local state (filters, user input)
<RootPage>
<ContentArea />
<Calendar />
<ActivityFeed />
<MainPage>
</MainPage>
</RootPage>
•Displays data
•Reusable components (buttons, lists,
collapsibles, …)
•Local state (filters, user input)
React pages
<RootPage>
<ContentArea />
<Calendar />
<ActivityFeed />
<MainPage>
</MainPage>
</RootPage>
•Using RecoilJS to sync state
between multiple components or
between page loads (e.g. loading indicator)
•Many modals for confirmations, single
views or edit/creation forms
•Sometimes they get API data themselves
<RootPage>
<ContentArea />
<Calendar />
<ActivityFeed />
<MainPage>
</MainPage>
</RootPage>
•Using RecoilJS to sync state
between multiple components or
between page loads (e.g. loading indicator)
•Many modals for confirmations, single
views or edit/creation forms
•Sometimes they get API data themselves
DTOs
List view data
List view data
DTOs(Data transfer objects)
List view data
List view data
DTOs(Data transfer objects)
Single view data
Single view data
DTOs(Some fun tricks)
DTOs(Some fun tricks)
•Always add time to „current day“
timestamps (e.g. noon of current day)
•Send long texts and big objects from BE to
FE, send IDs from FE to BE
•Use as many HTTP/REST standards as
you can (IDs in URL, clean status codes)
•Always add time to „current day“
timestamps (e.g. noon of current day)
•Send long texts and big objects from BE to
FE, send IDs from FE to BE
•Use as many HTTP/REST standards as
you can (IDs in URL, clean status codes)
Requirements
Management
Management
Plan -> Walk ->Goal
Plan -> Walk ->Goal
Plan -> Walk ->Goal
Plan -> Walk ->Goal
Plan -> Walk ->Goal
Plan -> Walk ->Goal
Plan -> Walk ->Goal
Plan -> Walk ->GoalX
Plan -> Walk ->GoalX X
Plan -> Walk ->GoalX X
Sprint
Sprint
30
The original plan
does no longer fit
Better understanding of the Complexity
Better understanding of what is really needed
New ideas
New requirements
Increase in creativity
Feedback
Seeing the potential
Building up the vision
The original plan
does no longer fit
Better understanding of the Complexity
Better understanding of what is really needed
New ideas
New requirements
Increase in creativity
Feedback
Seeing the potential
Building up the vision
Let’s swap the PO!
Intern decision (punkt.de)
Challenge: Knowledge transfer
Attend all meetings
Read everything
(still understand nothing)
Click through the prototype
?
Challenge Accepted !
So called „Fegime information Days“
Show and explain the new extranet with it’s
current functionalities and future steps
to the endusers
!
Intern decision (punkt.de)
Challenge: Knowledge transfer
Attend all meetings
Read everything
(still understand nothing)
Click through the prototype
?
Challenge Accepted !
So called „Fegime information Days“
Show and explain the new extranet with it’s
current functionalities and future steps
to the endusers
!
Open
communication
and
transparency
communication
and
transparency
33
Grants access to
your full potential
Trust as basis
Needs to be earned
Project team:
„We are all sitting in the same boat“
Talk, Talk, Talk
Say NO!
Talk early
Grants access to
your full potential
Trust as basis
Needs to be earned
Project team:
„We are all sitting in the same boat“
Talk, Talk, Talk
Say NO!
Talk early
Access
Access - TCA + Restrictions
35
35
Middlewares use the
same restrictions
same restrictions
37
Access - FE user management
Access - FE user management
37
Access - FE user management
Accesses, will be
checked by restrictions
Access - FE user management
Accesses, will be
checked by restrictions
37
Access - FE user management
Accesses, will be
checked by restrictions
Is saved to be displayed,
prefills access
Access - FE user management
Accesses, will be
checked by restrictions
Is saved to be displayed,
prefills access
Access - advantages and thoughts
•Flexibility is great!
•Frontend can check for access to routes to enable/disable buttons
•Even if user fakes frontend access, middlewares block data fetching
•Client wants access for everything, e.g.
•Download of specific file types
•Read/write for different functions
•…
•Performance!
38
•Flexibility is great!
•Frontend can check for access to routes to enable/disable buttons
•Even if user fakes frontend access, middlewares block data fetching
•Client wants access for everything, e.g.
•Download of specific file types
•Read/write for different functions
•…
•Performance!
38
TYPO3 CLI
(and scheduler)
39
(and scheduler)
39
Just import it once
TYPO3 CLI
TYPO3 CLI
•Clear interface for input, output, error handling
•Clear interface for input, output, error handling
TYPO3 CLI
•Clear interface for input, output, error handling
•Existing logging, models and repositories can be easily
used
•Clear interface for input, output, error handling
•Existing logging, models and repositories can be easily
used
TYPO3 CLI
•Clear interface for input, output, error handling
•Existing logging, models and repositories can be easily
used
•Scheduler task out of the box
•Clear interface for input, output, error handling
•Existing logging, models and repositories can be easily
used
•Scheduler task out of the box
TYPO3 CLI
•Clear interface for input, output, error handling
•Existing logging, models and repositories can be easily
used
•Scheduler task out of the box
•Running CLI directly for tests, scheduler for not longer
one time imports
•Clear interface for input, output, error handling
•Existing logging, models and repositories can be easily
used
•Scheduler task out of the box
•Running CLI directly for tests, scheduler for not longer
one time imports
Interfaces to
other systems
other systems
Getting data is easy
Getting data is easy
Right?
Right?
Client’s oracle DB
Confidental files
Extranet
Confidental files
Extranet
Client’s oracle DB
Confidental files
Extranet
SMB?
Confidental files
Extranet
SMB?
Client’s oracle DB
Confidental files
Extranet
ODBC?
SMB?
Confidental files
Extranet
ODBC?
SMB?
Client’s oracle DB
Confidental files
Extranet
Confidental files
Extranet
Client’s oracle DB
Confidental files
Extranet
Middleware
Confidental files
Extranet
Middleware
Client’s oracle DB
Confidental files
Extranet
Middleware
SMB
ODBC
Confidental files
Extranet
Middleware
SMB
ODBC
Client’s oracle DB
Confidental files
Extranet
Middleware
SMB
ODBC
Preparation
Confidental files
Extranet
Middleware
SMB
ODBC
Preparation
Client’s oracle DB
Confidental files
Extranet
Middleware
SFTP
SMB
ODBC
Preparation
Confidental files
Extranet
Middleware
SFTP
SMB
ODBC
Preparation
Sending data is easy
?
Sending data is easy
Right
Sending data is easy
Right
Sending data is easy
Right!
Right!
Data fetch API
47
47
•Client’s IT needs current data from the extranet
Data fetch API
47
Data fetch API
47
•Client’s IT needs current data from the extranet
•Idea: „We can build API routes, no problem“
Data fetch API
47
•Idea: „We can build API routes, no problem“
Data fetch API
47
•Client’s IT needs current data from the extranet
•Idea: „We can build API routes, no problem“
Data fetch API
•We have to mind access and authentication (no „real“ user, going past login)
•Usage of typings and the usual modals and methods
47
•Idea: „We can build API routes, no problem“
Data fetch API
•We have to mind access and authentication (no „real“ user, going past login)
•Usage of typings and the usual modals and methods
47
•Client’s IT needs current data from the extranet
•Idea: „We can build API routes, no problem“
Data fetch API
•We have to mind access and authentication (no „real“ user, going past login)
•Usage of typings and the usual modals and methods
47
Currently ongoing ;)
•Idea: „We can build API routes, no problem“
Data fetch API
•We have to mind access and authentication (no „real“ user, going past login)
•Usage of typings and the usual modals and methods
47
Currently ongoing ;)
Tests and
quality control
quality control
Just a GitLab CI workflow
49
49
Just a GitLab CI workflow
49
49
Just a GitLab CI workflow
49
49
Codeception (with Gherkin syntax)
50
•Tests API calls with Guzzle
•Tests CLI
•Test error codes, JSON results
•Verify results in database after POST
or imports
•Test access on data level
•Tests the app with a browser
•Test displayed error messages
•Test display of data
•Test access in app level
BackendOnly FullStack
50
•Tests API calls with Guzzle
•Tests CLI
•Test error codes, JSON results
•Verify results in database after POST
or imports
•Test access on data level
•Tests the app with a browser
•Test displayed error messages
•Test display of data
•Test access in app level
BackendOnly FullStack
Playwright
51
•Monitoring
•Runs nightly on production
•Runs after each deployment on the target system
•Mark tests as failing for specific systems
•Production tests in main but not deployed will fail
•Playwright warns us the moment the test doesn’t fail anymore
51
•Monitoring
•Runs nightly on production
•Runs after each deployment on the target system
•Mark tests as failing for specific systems
•Production tests in main but not deployed will fail
•Playwright warns us the moment the test doesn’t fail anymore
52
Auditing of installed packages
On every push and during CI pipelines
only check deployed packages, not dev-tools
Auditing of installed packages
On every push and during CI pipelines
only check deployed packages, not dev-tools
Dependency Check
53
Exporting SBOM on deployment, keeping track of currently used versions
53
Exporting SBOM on deployment, keeping track of currently used versions
Performance „monitoring“
•NGINX logs contain the page generation time
•Idea: monitor those, compare those to older deployments
54
•NGINX logs contain the page generation time
•Idea: monitor those, compare those to older deployments
54
One second please, I
got a question!
got a question!
punkt.de GmbH
Sophienstraße 187
76185 Karlsruhe
punkt.de GmbH
Kurfürstenstraße 18
60486 Frankfurt am Main
Telefon +49 (0)721 9109-0
Telefax +49 (0)721 9109-100
Mail [email protected]
Daniel Lienert
Fabian Stein
FRANKFURT AM MAINKARLSRUHEKONTAKT GESCHÄFTSFÜHRER:
Thank you all!
Sophienstraße 187
76185 Karlsruhe
punkt.de GmbH
Kurfürstenstraße 18
60486 Frankfurt am Main
Telefon +49 (0)721 9109-0
Telefax +49 (0)721 9109-100
Mail [email protected]
Daniel Lienert
Fabian Stein
FRANKFURT AM MAINKARLSRUHEKONTAKT GESCHÄFTSFÜHRER:
Thank you all!
punkt.de GmbH
Sophienstraße 187
76185 Karlsruhe
punkt.de GmbH
Kurfürstenstraße 18
60486 Frankfurt am Main
Telefon +49 (0)721 9109-0
Telefax +49 (0)721 9109-100
Mail [email protected]
Daniel Lienert
Fabian Stein
FRANKFURT AM MAINKARLSRUHEKONTAKT GESCHÄFTSFÜHRER:
Sophienstraße 187
76185 Karlsruhe
punkt.de GmbH
Kurfürstenstraße 18
60486 Frankfurt am Main
Telefon +49 (0)721 9109-0
Telefax +49 (0)721 9109-100
Mail [email protected]
Daniel Lienert
Fabian Stein
FRANKFURT AM MAINKARLSRUHEKONTAKT GESCHÄFTSFÜHRER:
Categories
BusinessDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 139
- Slides 43
- Age 492 days
Related Slideshows
1
DTI BPI Pivot Small Business - BUSINESS START UP PLAN
MeljunCortes
31 views
1
CATHOLIC EDUCATIONAL Corporate Responsibilities
MeljunCortes
31 views
11
Karin Schaupp – Evocation; lançamento: 2000
alfeuRIO
31 views
10
Pillars of Biblical Oneness in the Book of Acts
JanParon
27 views
31
7-10. STP + Branding and Product & Services Strategies.pptx
itsyash298
29 views
44
Business Legislation PPT - UNIT 1 jimllpkggg
slogeshk98
33 views