Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript in TYPO3 Backend, 2023

JavaScript in TYPO3 Backend, 2023

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

Andreas Fernandez

August 05, 2023
Tweet

More Decks by Andreas Fernandez

Other Decks in Programming

Transcript

  1. JAVASCRIPT IN
    TYPO3, 2023
    Andreas Fernandez
    [email protected]
    @_fernandreas
    TYPO3 Developer Days 2023
    August 5th, 2023

    View Slide

  2. ANDREAS
    FERNANDEZ
    ▪ Core Developer since 2015
    ▪ TYPO3 GmbH since 2019
    ▪ I void warranties
    @_fernandreas
    [email protected]

    View Slide

  3. AGENDA
    1. jQuery
    2. Module Loading
    3. AJAX API
    4. Events
    5. Notification API
    6. Modals
    7. Icons
    8. Web Components

    View Slide

  4. JQUERY

    View Slide

  5. JQUERY
    ▪ Solved cross-browser issues
    ▪ Fast and easy development
    ▪ De-facto standard

    View Slide

  6. JQUERY
    ▪ Browsers have stable APIs now
    ▪ Phasing out jQuery
    ▪ ~50 modules left

    View Slide

  7. JQUERY UI

    View Slide

  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

    View Slide

  9. JQUERY | JQUERY UI
    ▪ Browsers have real APIs now
    ▪ Unused since TYPO3 v12.4.2
    ▪ Removed in upcoming TYPO3 v13.0

    View Slide

  10. MODULE
    LOADING

    View Slide

  11. REQUIREJS

    View Slide

  12. MODULE LOADING | REQUIREJS
    ▪ Foundation for separated modules
    ▪ Dependency handling
    ▪ Introduced in TYPO3 v7

    View Slide

  13. View Slide

  14. LAST UPDATE IN 2020

    View Slide

  15. MODULE LOADING | REQUIREJS
    ▪ Deprecated in TYPO3 v12
    ▪ Removed in TYPO3 v13

    View Slide

  16. ECMASCRIPT
    MODULES

    View Slide

  17. MODULE LOADING | ECMASCRIPT MODULES
    ▪ Supported in all major browsers
    ▪ No 3rd party dependency necessary

    View Slide

  18. View Slide

  19. View Slide

  20. IMPORT MAPS

    View Slide

  21. MODULE LOADING | ECMASCRIPT MODULES
    ▪ JSON object
    ▪ Maps an identifier to a file or directory
    ▪ A real Highlander: there can be only one!

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. 🤫

    View Slide

  26. MODULE LOADING | ECMASCRIPT MODULES
    ▪ With import maps, identifier paths can be defined
    ▪ Each extension can bring their own definition

    View Slide

  27. View Slide

  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

    View Slide

  29. AJAX API

    View Slide

  30. AJAX API
    ▪ Introduced in TYPO3 v10
    ▪ Based on fetch() API

    View Slide

  31. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

    View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. EVENTS

    View Slide

  38. EVENTS
    ▪ TYPO3 got its own event handling API in v10
    ▪ One step further in phasing out jQuery
    ▪ Binding and delegation supported

    View Slide

  39. EVENTS
    ▪ Binding: Listener for one specific node
    ▪ Delegation: Listener is bound to a top node and
    listens to child nodes

    View Slide

  40. View Slide

  41. View Slide

  42. REGULAR
    EVENTS

    View Slide

  43. EVENTS | REGULAR EVENTS
    ▪ Most basic event API
    ▪ Wrapper for .addEventListener()

    View Slide

  44. View Slide

  45. DEBOUNCED
    EVENTS

    View Slide

  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

    View Slide

  47. View Slide

  48. THROTTLED
    EVENTS

    View Slide

  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)

    View Slide

  50. View Slide

  51. NOTIFICATION
    API

    View Slide

  52. NOTIFICATION API
    ▪ Fly-out messages informing the user about state
    changes
    ▪ Optionally interactive

    View Slide

  53. NOTIFICATION API
    ▪ notice(...)
    ▪ info(...)
    ▪ success(...)
    ▪ warning(...)
    ▪ danger(...)

    View Slide

  54. Excerpt of notification types

    View Slide

  55. NOTIFICATION API
    ▪ title: string
    ▪ message?: string
    ▪ duration?: number = 5 // 0 if error
    ▪ actions?: Array

    View Slide

  56. View Slide

  57. Bare minimum notification

    View Slide

  58. INTERACTIVE

    View Slide

  59. NOTIFICATION API
    ▪ Enrich notifications with actions
    ▪ Action must be in context of the notification
    ▪ Execution must be optional
    ▪ Not more than three actions

    View Slide

  60. NOTIFICATION API
    ▪ label: string
    ▪ action: DeferredAction|ImmediateAction

    View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. It's Christmas time soon!

    View Slide

  65. DISPATCH
    NOTIFICATIONS
    VIA PHP

    View Slide

  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

    View Slide

  67. View Slide

  68. MODALS

    View Slide

  69. MODALS
    ▪ User interface blocking windows
    ▪ Require user interaction

    View Slide

  70. MODALS
    ▪ confirm(...)
    ▪ advanced(...)
    ▪ show(...)
    ▪ loadUrl(...)

    View Slide

  71. "CONFIRM"
    MODALS

    View Slide

  72. MODALS | CONFIRM
    ▪ Most simple modal implementation
    ▪ Requires title and content only
    ▪ Default severity is warning
    ▪ Provides "Cancel" and "OK" buttons by default

    View Slide

  73. View Slide

  74. Confirmation modal

    View Slide

  75. "ADVANCED"
    MODALS

    View Slide

  76. MODALS | ADVANCED
    ▪ Gives the full capabilities of the modal API
    ▪ Complex configuration

    View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. ICONS

    View Slide

  81. ICONS
    ▪ TYPO3 provides a unified icon set
    ▪ Extensions may provide additional icons
    ▪ Several APIs to access and render icons

    View Slide

  82. ICONS
    ▪ default: 1em
    ▪ small: 16px
    ▪ medium: 32px
    ▪ large: 48px
    ▪ mega: 64px

    View Slide

  83. View Slide

  84. ICONS
    ▪ Fluid ViewHelper
    ▪ JavaScript Module
    ▪ Web Component

    View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. View Slide

  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

    View Slide

  90. WEB
    COMPONENTS

    View Slide

  91. WEB COMPONENTS
    ▪ Based on Lit
    ▪ Closest to the Web Components Standard
    ▪ Reactive web components
    ▪ Easy templating
    ▪ Easy event handling

    View Slide

  92. WARNING!
    TYPESCRIPT AHEAD!

    View Slide

  93. WEB COMPONENTS
    ▪ Example: https://github.com/TYPO3/typo3/blob/
    main/Build/Sources/TypeScript/backend/element
    /editable-page-title.ts

    View Slide

  94. WEB COMPONENTS
    ▪ Lit needs decorators
    ▪ True power comes with compilers (Babel,
    TypeScript, ...)
    ▪ Shadow DOM is barely usable due to Bootstrap
    CSS

    View Slide

  95. QUESTIONS?
    ANDREAS
    FERNANDEZ
    @_fernandreas
    [email protected]

    View Slide