JAVASCRIPT IN
TYPO3, 2023
Andreas Fernandez
[email protected]
@_fernandreas
TYPO3 Developer Days 2023
August 5th, 2023
Slide 2
Slide 2 text
ANDREAS
FERNANDEZ
▪ Core Developer since 2015
▪ TYPO3 GmbH since 2019
▪ I void warranties
@_fernandreas
[email protected]
Slide 3
Slide 3 text
AGENDA
1. jQuery
2. Module Loading
3. AJAX API
4. Events
5. Notification API
6. Modals
7. Icons
8. Web Components
Slide 4
Slide 4 text
JQUERY
Slide 5
Slide 5 text
JQUERY
▪ Solved cross-browser issues
▪ Fast and easy development
▪ De-facto standard
Slide 6
Slide 6 text
JQUERY
▪ Browsers have stable APIs now
▪ Phasing out jQuery
▪ ~50 modules left
Slide 7
Slide 7 text
JQUERY UI
Slide 8
Slide 8 text
JQUERY | JQUERY UI
▪ Huge library for rich user interfaces
▪ TYPO3 used draggable / resizable only
▪ Top-level wrappers for low-level "API"
▪ Combination of click* / mouse* events
Slide 9
Slide 9 text
JQUERY | JQUERY UI
▪ Browsers have real APIs now
▪ Unused since TYPO3 v12.4.2
▪ Removed in upcoming TYPO3 v13.0
Slide 10
Slide 10 text
MODULE
LOADING
Slide 11
Slide 11 text
REQUIREJS
Slide 12
Slide 12 text
MODULE LOADING | REQUIREJS
▪ Foundation for separated modules
▪ Dependency handling
▪ Introduced in TYPO3 v7
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
LAST UPDATE IN 2020
Slide 15
Slide 15 text
MODULE LOADING | REQUIREJS
▪ Deprecated in TYPO3 v12
▪ Removed in TYPO3 v13
Slide 16
Slide 16 text
ECMASCRIPT
MODULES
Slide 17
Slide 17 text
MODULE LOADING | ECMASCRIPT MODULES
▪ Supported in all major browsers
▪ No 3rd party dependency necessary
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
IMPORT MAPS
Slide 21
Slide 21 text
MODULE LOADING | ECMASCRIPT MODULES
▪ JSON object
▪ Maps an identifier to a file or directory
▪ A real Highlander: there can be only one!
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
🤫
Slide 26
Slide 26 text
MODULE LOADING | ECMASCRIPT MODULES
▪ With import maps, identifier paths can be defined
▪ Each extension can bring their own definition
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
MODULE LOADING | ECMASCRIPT MODULES
▪ With clever use, any module can get overridden
▪ Same compatibility rules of XCLASSes apply
▪ Any update may break your override without prior
notice
Slide 29
Slide 29 text
AJAX API
Slide 30
Slide 30 text
AJAX API
▪ Introduced in TYPO3 v10
▪ Based on fetch() API
EVENTS
▪ TYPO3 got its own event handling API in v10
▪ One step further in phasing out jQuery
▪ Binding and delegation supported
Slide 39
Slide 39 text
EVENTS
▪ Binding: Listener for one specific node
▪ Delegation: Listener is bound to a top node and
listens to child nodes
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
REGULAR
EVENTS
Slide 43
Slide 43 text
EVENTS | REGULAR EVENTS
▪ Most basic event API
▪ Wrapper for .addEventListener()
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
DEBOUNCED
EVENTS
Slide 46
Slide 46 text
EVENTS | DEBOUNCED EVENTS
▪ Waits a defined interval (250ms by default) before
running the event listener after the last invocation
▪ Useful for heavy tasks, e.g. AJAX requests based
on a search field value
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
THROTTLED
EVENTS
Slide 49
Slide 49 text
EVENTS | THROTTLED EVENTS
▪ Runs event handler and waits a to-be-defined
interval before next execution
▪ Useful for handling that can be paused in between
for performance reasons (e.g. scrolling)
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
NOTIFICATION
API
Slide 52
Slide 52 text
NOTIFICATION API
▪ Fly-out messages informing the user about state
changes
▪ Optionally interactive
NOTIFICATION API
▪ title: string
▪ message?: string
▪ duration?: number = 5 // 0 if error
▪ actions?: Array
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Bare minimum notification
Slide 58
Slide 58 text
INTERACTIVE
Slide 59
Slide 59 text
NOTIFICATION API
▪ Enrich notifications with actions
▪ Action must be in context of the notification
▪ Execution must be optional
▪ Not more than three actions
Slide 60
Slide 60 text
NOTIFICATION API
▪ label: string
▪ action: DeferredAction|ImmediateAction
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
It's Christmas time soon!
Slide 65
Slide 65 text
DISPATCH
NOTIFICATIONS
VIA PHP
Slide 66
Slide 66 text
NOTIFICATION API
▪ Since TYPO3 v12, notifications can be dispatched
via PHP
▪ No support for interactions
▪ Useful e.g. in DataHandler hooks
▪ Specialized FlashMessage queue identifier
▪ Ready-to-use in ModuleTemplate API
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
MODALS
Slide 69
Slide 69 text
MODALS
▪ User interface blocking windows
▪ Require user interaction
MODALS | CONFIRM
▪ Most simple modal implementation
▪ Requires title and content only
▪ Default severity is warning
▪ Provides "Cancel" and "OK" buttons by default
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
Confirmation modal
Slide 75
Slide 75 text
"ADVANCED"
MODALS
Slide 76
Slide 76 text
MODALS | ADVANCED
▪ Gives the full capabilities of the modal API
▪ Complex configuration
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
ICONS
Slide 81
Slide 81 text
ICONS
▪ TYPO3 provides a unified icon set
▪ Extensions may provide additional icons
▪ Several APIs to access and render icons
ICONS
▪ Fluid ViewHelper
▪ JavaScript Module
▪ Web Component
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
ICONS
▪ The icon web component internally uses the JS
API
▪ Icons are requested via AJAX
▪ The markup is kept in local storage until the next
TYPO3 or extension update
Slide 90
Slide 90 text
WEB
COMPONENTS
Slide 91
Slide 91 text
WEB COMPONENTS
▪ Based on Lit
▪ Closest to the Web Components Standard
▪ Reactive web components
▪ Easy templating
▪ Easy event handling
Slide 92
Slide 92 text
WARNING!
TYPESCRIPT AHEAD!
Slide 93
Slide 93 text
WEB COMPONENTS
▪ Example: https://github.com/TYPO3/typo3/blob/
main/Build/Sources/TypeScript/backend/element
/editable-page-title.ts
Slide 94
Slide 94 text
WEB COMPONENTS
▪ Lit needs decorators
▪ True power comes with compilers (Babel,
TypeScript, ...)
▪ Shadow DOM is barely usable due to Bootstrap
CSS