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

More Decks by Andreas Fernandez

Other Decks in Programming


  1. AGENDA 1. jQuery 2. Module Loading 3. AJAX API 4.

    Events 5. Notification API 6. Modals 7. Icons 8. Web Components
  2. 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
  3. JQUERY | JQUERY UI ▪ Browsers have real APIs now

    ▪ Unused since TYPO3 v12.4.2 ▪ Removed in upcoming TYPO3 v13.0
  4. MODULE LOADING | REQUIREJS ▪ Foundation for separated modules ▪

    Dependency handling ▪ Introduced in TYPO3 v7
  5. MODULE LOADING | ECMASCRIPT MODULES ▪ Supported in all major

    browsers ▪ No 3rd party dependency necessary

    an identifier to a file or directory ▪ A real Highlander: there can be only one!
  7. MODULE LOADING | ECMASCRIPT MODULES ▪ With import maps, identifier

    paths can be defined ▪ Each extension can bring their own definition
  8. 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
  9. EVENTS ▪ TYPO3 got its own event handling API in

    v10 ▪ One step further in phasing out jQuery ▪ Binding and delegation supported
  10. EVENTS ▪ Binding: Listener for one specific node ▪ Delegation:

    Listener is bound to a top node and listens to child nodes
  11. 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
  12. 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)
  13. NOTIFICATION API ▪ title: string ▪ message?: string ▪ duration?:

    number = 5 // 0 if error ▪ actions?: Array<Action>
  14. NOTIFICATION API ▪ Enrich notifications with actions ▪ Action must

    be in context of the notification ▪ Execution must be optional ▪ Not more than three actions
  15. 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
  16. MODALS | CONFIRM ▪ Most simple modal implementation ▪ Requires

    title and content only ▪ Default severity is warning ▪ Provides "Cancel" and "OK" buttons by default
  17. MODALS | ADVANCED ▪ Gives the full capabilities of the

    modal API ▪ Complex configuration
  18. ICONS ▪ TYPO3 provides a unified icon set ▪ Extensions

    may provide additional icons ▪ Several APIs to access and render icons
  19. 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
  20. WEB COMPONENTS ▪ Based on Lit ▪ Closest to the

    Web Components Standard ▪ Reactive web components ▪ Easy templating ▪ Easy event handling
  21. WEB COMPONENTS ▪ Lit needs decorators ▪ True power comes

    with compilers (Babel, TypeScript, ...) ▪ Shadow DOM is barely usable due to Bootstrap CSS