JavaScript in TYPO3 Backend, 2023

Presentation about the state of JavaScript in the TYPO3 backend, held at TYPO3 Developer Days 2023.

Transcript

1. JAVASCRIPT IN TYPO3, 2023 Andreas Fernandez andreas.fernandez@typo3.com @_fernandreas TYPO3 Developer Days 2023 August 5th, 2023
2. ANDREAS FERNANDEZ ▪ Core Developer since 2015 ▪ TYPO3 GmbH since 2019 ▪ I void warranties @_fernandreas andreas.fernandez@typo3.com
3. AGENDA 1. jQuery 2. Module Loading 3. AJAX API 4. Events 5. Notification API 6. Modals 7. Icons 8. Web Components
4. JQUERY
5. JQUERY ▪ Solved cross-browser issues ▪ Fast and easy development ▪ De-facto standard
6. JQUERY ▪ Browsers have stable APIs now ▪ Phasing out jQuery ▪ ~50 modules left
7. JQUERY UI
8. 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
9. JQUERY | JQUERY UI ▪ Browsers have real APIs now ▪ Unused since TYPO3 v12.4.2 ▪ Removed in upcoming TYPO3 v13.0
10. MODULE LOADING
11. REQUIREJS
12. MODULE LOADING | REQUIREJS ▪ Foundation for separated modules ▪ Dependency handling ▪ Introduced in TYPO3 v7
14. LAST UPDATE IN 2020
15. MODULE LOADING | REQUIREJS ▪ Deprecated in TYPO3 v12 ▪ Removed in TYPO3 v13
16. ECMASCRIPT MODULES
17. MODULE LOADING | ECMASCRIPT MODULES ▪ Supported in all major browsers ▪ No 3rd party dependency necessary
20. IMPORT MAPS
21. MODULE LOADING | ECMASCRIPT MODULES ▪ JSON object ▪ Maps an identifier to a file or directory ▪ A real Highlander: there can be only one!
25. 🤫
26. MODULE LOADING | ECMASCRIPT MODULES ▪ With import maps, identifier paths can be defined ▪ Each extension can bring their own definition
28. 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
29. AJAX API
30. AJAX API ▪ Introduced in TYPO3 v10 ▪ Based on fetch() API
31. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
37. EVENTS
38. EVENTS ▪ TYPO3 got its own event handling API in v10 ▪ One step further in phasing out jQuery ▪ Binding and delegation supported
39. EVENTS ▪ Binding: Listener for one specific node ▪ Delegation: Listener is bound to a top node and listens to child nodes
42. REGULAR EVENTS
43. EVENTS | REGULAR EVENTS ▪ Most basic event API ▪ Wrapper for .addEventListener()
45. DEBOUNCED EVENTS
46. 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
48. THROTTLED EVENTS
49. 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)
51. NOTIFICATION API
52. NOTIFICATION API ▪ Fly-out messages informing the user about state changes ▪ Optionally interactive
53. NOTIFICATION API ▪ notice(...) ▪ info(...) ▪ success(...) ▪ warning(...) ▪ danger(...)
54. Excerpt of notification types
55. NOTIFICATION API ▪ title: string ▪ message?: string ▪ duration?: number = 5 // 0 if error ▪ actions?: Array<Action>
57. Bare minimum notification
58. INTERACTIVE
59. NOTIFICATION API ▪ Enrich notifications with actions ▪ Action must be in context of the notification ▪ Execution must be optional ▪ Not more than three actions
60. NOTIFICATION API ▪ label: string ▪ action: DeferredAction|ImmediateAction
64. It's Christmas time soon!
65. DISPATCH NOTIFICATIONS VIA PHP
66. 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
68. MODALS
69. MODALS ▪ User interface blocking windows ▪ Require user interaction
70. MODALS ▪ confirm(...) ▪ advanced(...) ▪ show(...) ▪ loadUrl(...)
71. "CONFIRM" MODALS
72. MODALS | CONFIRM ▪ Most simple modal implementation ▪ Requires title and content only ▪ Default severity is warning ▪ Provides "Cancel" and "OK" buttons by default
74. Confirmation modal
75. "ADVANCED" MODALS
76. MODALS | ADVANCED ▪ Gives the full capabilities of the modal API ▪ Complex configuration
80. ICONS
81. ICONS ▪ TYPO3 provides a unified icon set ▪ Extensions may provide additional icons ▪ Several APIs to access and render icons
82. ICONS ▪ default: 1em ▪ small: 16px ▪ medium: 32px ▪ large: 48px ▪ mega: 64px
84. ICONS ▪ Fluid ViewHelper ▪ JavaScript Module ▪ Web Component
89. 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
90. WEB COMPONENTS
91. WEB COMPONENTS ▪ Based on Lit ▪ Closest to the Web Components Standard ▪ Reactive web components ▪ Easy templating ▪ Easy event handling
92. WARNING! TYPESCRIPT AHEAD!
93. WEB COMPONENTS ▪ Example: https://github.com/TYPO3/typo3/blob/ main/Build/Sources/TypeScript/backend/element /editable-page-title.ts
94. WEB COMPONENTS ▪ Lit needs decorators ▪ True power comes with compilers (Babel, TypeScript, ...) ▪ Shadow DOM is barely usable due to Bootstrap CSS
95. QUESTIONS? ANDREAS FERNANDEZ @_fernandreas andreas.fernandez@typo3.com