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
   

   View Slide

2. ANDREAS
   FERNANDEZ
   ▪ Core Developer since 2015
   ▪ TYPO3 GmbH since 2019
   ▪ I void warranties
   @_fernandreas
   andreas.fernandez@typo3.com
   

   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
    andreas.fernandez@typo3.com
    

    View Slide