From Internet Explorer 6 to 11, from TYPO3 4.5 to 10.4, from 2011 to 2022 - often, projects with such a lifetime are rather relaunched than updated. In this talk, we want to show you how we make sure our codebase works for the environment we are given and how we make sure no relaunches are needed.

1. Keeping a codebase fresh
for over a decade
1 Project, 10 Years

2. Christian Keuerleber
@kabarakh
Ursula Klinger
@UrsulaKli
About us
DEVELOPER FE DEVELOPER BE

3. Agenda
1. About the project
2. Backend and TYPO3
3. Frontend
4. Additional tools

4. About the project

5. Intranet accessible via
cash register (but also
internet)

6. 12.000+ 250.000+
Users per day Interactions per day
(accessing via the cash register)

7. Internet Explorer 11

8. Internet Explorer 11
IE 10 mode in some applications

9. 8
Simplified system overview

10. Code-only the main TYPO3 project
• 31 extensions from punkt.de
• ~250.000 lines of PHP code
• ~30.000 lines of JavaScript and TypeScript
• ~6.000 lines of TypoScript
• ~25.500 commits
9

11. Backend
From TYPO3 4.5 to TYPO3 10.4

12. Never change a
runningTYPO3 core!
11

13. 12
Instead,do the following
• XClass (but not o
ft
en)
• Hooks/Signals/Events
• Middleware
• Restrictions
• Object replacement with DI
(but also not o
ft
en)
12

14. "TYPO3 updates are
easy,you just run the
update wizard and fix a
few lines of code"

15. 14
TYPO3 version history
Nov 2011
TYPO3 4.5

16. 14
TYPO3 version history
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6

17. 14
TYPO3 version history
Mar 2014
TYPO3 4.7
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6

18. 14
TYPO3 version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6

19. 14
TYPO3 version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6
Jan 2017
TYPO3 7.6

20. 14
TYPO3 version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6
Jan 2017
TYPO3 7.6
Aug 2018
TYPO3 8.7

21. 14
TYPO3 version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6
Jan 2017
TYPO3 7.6
Aug 2018
TYPO3 8.7
Feb 2021
TYPO3 10.4

22. 15
PHP version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6
Jan 2017
TYPO3 7.6
Aug 2018
TYPO3 8.7
Feb 2021
TYPO3 10.4

23. 15
PHP version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6
Jan 2017
TYPO3 7.6
Aug 2018
TYPO3 8.7
Feb 2021
TYPO3 10.4
Nov 2011
php 5.3

24. 15
PHP version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6
Jan 2017
TYPO3 7.6
Aug 2018
TYPO3 8.7
Feb 2021
TYPO3 10.4
Jan 2015
php 5.5
Nov 2011
php 5.3

25. 15
PHP version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6
Jan 2017
TYPO3 7.6
Aug 2018
TYPO3 8.7
Feb 2021
TYPO3 10.4
Jan 2015
php 5.5
Nov 2011
php 5.3
Jan 2018
php 7.2

26. 15
PHP version history
Mar 2014
TYPO3 4.7
Jan 2015
TYPO3 6.2
Nov 2011
TYPO3 4.5
Apr 2012
TYPO3 4.6
Jan 2017
TYPO3 7.6
Aug 2018
TYPO3 8.7
Feb 2021
TYPO3 10.4
Jan 2015
php 5.5
Nov 2011
php 5.3
Jan 2018
php 7.2
Jul 2021
php 7.3

27. 16
Which one would you use?

28. Frontend
Being modern in a legacy environment

29. New designs are costly

30. Design,CI/CD
• First design based on layouts by a design company, based on CI/CD - compatible with IE6!!
• Second design directly based on current CI/CD
• Developed with Bootstrap
• Didn't restructure everything from the
fi
rst design
• Since then continuous updates to the layout if applicable
19

31. Frontend technologies

32. Frontend technologies

33. Frontend technologies

34. Frontend technologies

35. Frontend technologies

36. Frontend technologies

37. Be modern

38. Build for IE11/10

39. Do it for
Gerda Schmidt (74)

40. Additional tools and helpers

41. 25
Multiple test stages

42. 26
Performance testing
Testing before - a
ft
er, not absolute!

43. Monitoring
• Monitoring/Heartbeat/Ping Stage - as shown before
• Exception-Reporting in Sentry
• Log
fi
le monitoring in Kibana
• Zabbix for different metrics
• System load
• Import/Export monitoring
• Interfaces to other systems
27

44. But what about code by
other people?

45. 29
composer/Projekt indirect symfony/property-info v5.4.7 v5.4.9 MIT Indirekte Code-Abhängigkeit des Projekts
composer/Projekt indirect symfony/routing v4.4.37 v4.4.41 MIT Indirekte Code-Abhängigkeit des Projekts
composer/Projekt indirect symfony/string v5.4.3 v5.4.9 MIT Indirekte Code-Abhängigkeit des Projekts
composer/Projekt indirect symfony/translation v4.4.37 v4.4.41 MIT Indirekte Code-Abhängigkeit des Projekts
composer/Projekt indirect symfony/var-dumper v5.4.6 v5.4.9 MIT Indirekte Code-Abhängigkeit des Projekts
composer/Projekt indirect symfony/var-exporter v5.4.7 v5.4.9 MIT Indirekte Code-Abhängigkeit des Projekts
composer/Projekt indirect tracy/tracy v2.9.1 v2.9.3 BSD-3-Clause Indirekte Code-Abhängigkeit des Projekts
composer/Projekt indirect webmozart/assert 1.10.0 1.11.0 MIT Indirekte Code-Abhängigkeit des Projekts
npm/Projekt direct @babel/preset-env 7.15.8 7.16.11 MIT Direkte Code-Abhängikeit des Projekts
npm/Projekt direct @types/jquery 3.5.6 3.5.14 MIT Direkte Code-Abhängikeit des Projekts
npm/Projekt direct @types/lodash 4.14.175 4.14.182 MIT Direkte Code-Abhängikeit des Projekts
npm/Projekt direct @types/node 16.10.3 17.0.40 MIT Direkte Code-Abhängikeit des Projekts
npm/Projekt direct @types/react-dom 17.0.9 17.0.15 MIT Direkte Code-Abhängikeit des Projekts
npm/Projekt direct @types/react 17.0.38 17.0.44 MIT Direkte Code-Abhängikeit des Projekts
npm/Projekt direct babel-loader 8.2.2 8.2.5 MIT Direkte Code-Abhängikeit des Projekts
Version and licence checks

46. 30
Auditing of installed packages
On every push and during CI pipelines
only check deployed packages, not dev-tools

47. One second please,I
got a question!

48. 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 info@punkt.de
Jürgen Egeling
Daniel Lienert
Fabian Stein
FRANKFURT AM MAIN
KARLSRUHE
KONTAKT GESCHÄFTSFÜHRER:
Thankyou all!
@UrsulaKli @kabarakh