Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript in TYPO3 Backend, 2023
Search
Andreas Fernandez
August 05, 2023
Programming
0
610
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
Share
More Decks by Andreas Fernandez
See All by Andreas Fernandez
ECMAScript killed the jQuery star - in TYPO3
andreasfernandez
0
100
JavaScript in TYPO3 Backend
andreasfernandez
0
180
Other Decks in Programming
See All in Programming
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
580
Introduce Hono CLI
yusukebe
6
3.1k
XP, Testing and ninja testing ZOZ5
m_seki
3
810
Software Architecture
hschwentner
6
2.3k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
EMこそClaude Codeでコード調査しよう
shibayu36
0
340
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.3k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
350
iOSでSVG画像を扱う
kishikawakatsumi
0
160
チームの境界をブチ抜いていけ
tokai235
0
210
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
860
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Thoughts on Productivity
jonyablonski
70
4.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Into the Great Unknown - MozCon
thekraken
40
2.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Optimizing for Happiness
mojombo
379
70k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Transcript
JAVASCRIPT IN TYPO3, 2023 Andreas Fernandez
[email protected]
@_fernandreas TYPO3 Developer
Days 2023 August 5th, 2023
ANDREAS FERNANDEZ ▪ Core Developer since 2015 ▪ TYPO3 GmbH
since 2019 ▪ I void warranties @_fernandreas
[email protected]
AGENDA 1. jQuery 2. Module Loading 3. AJAX API 4.
Events 5. Notification API 6. Modals 7. Icons 8. Web Components
JQUERY
JQUERY ▪ Solved cross-browser issues ▪ Fast and easy development
▪ De-facto standard
JQUERY ▪ Browsers have stable APIs now ▪ Phasing out
jQuery ▪ ~50 modules left
JQUERY UI
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
JQUERY | JQUERY UI ▪ Browsers have real APIs now
▪ Unused since TYPO3 v12.4.2 ▪ Removed in upcoming TYPO3 v13.0
MODULE LOADING
REQUIREJS
MODULE LOADING | REQUIREJS ▪ Foundation for separated modules ▪
Dependency handling ▪ Introduced in TYPO3 v7
None
LAST UPDATE IN 2020
MODULE LOADING | REQUIREJS ▪ Deprecated in TYPO3 v12 ▪
Removed in TYPO3 v13
ECMASCRIPT MODULES
MODULE LOADING | ECMASCRIPT MODULES ▪ Supported in all major
browsers ▪ No 3rd party dependency necessary
None
None
IMPORT MAPS
MODULE LOADING | ECMASCRIPT MODULES ▪ JSON object ▪ Maps
an identifier to a file or directory ▪ A real Highlander: there can be only one!
None
None
None
🤫
MODULE LOADING | ECMASCRIPT MODULES ▪ With import maps, identifier
paths can be defined ▪ Each extension can bring their own definition
None
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
AJAX API
AJAX API ▪ Introduced in TYPO3 v10 ▪ Based on
fetch() API
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
None
None
None
None
None
EVENTS
EVENTS ▪ TYPO3 got its own event handling API in
v10 ▪ One step further in phasing out jQuery ▪ Binding and delegation supported
EVENTS ▪ Binding: Listener for one specific node ▪ Delegation:
Listener is bound to a top node and listens to child nodes
None
None
REGULAR EVENTS
EVENTS | REGULAR EVENTS ▪ Most basic event API ▪
Wrapper for .addEventListener()
None
DEBOUNCED EVENTS
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
None
THROTTLED EVENTS
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)
None
NOTIFICATION API
NOTIFICATION API ▪ Fly-out messages informing the user about state
changes ▪ Optionally interactive
NOTIFICATION API ▪ notice(...) ▪ info(...) ▪ success(...) ▪ warning(...)
▪ danger(...)
Excerpt of notification types
NOTIFICATION API ▪ title: string ▪ message?: string ▪ duration?:
number = 5 // 0 if error ▪ actions?: Array<Action>
None
Bare minimum notification
INTERACTIVE
NOTIFICATION API ▪ Enrich notifications with actions ▪ Action must
be in context of the notification ▪ Execution must be optional ▪ Not more than three actions
NOTIFICATION API ▪ label: string ▪ action: DeferredAction|ImmediateAction
None
None
None
It's Christmas time soon!
DISPATCH NOTIFICATIONS VIA PHP
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
None
MODALS
MODALS ▪ User interface blocking windows ▪ Require user interaction
MODALS ▪ confirm(...) ▪ advanced(...) ▪ show(...) ▪ loadUrl(...)
"CONFIRM" MODALS
MODALS | CONFIRM ▪ Most simple modal implementation ▪ Requires
title and content only ▪ Default severity is warning ▪ Provides "Cancel" and "OK" buttons by default
None
Confirmation modal
"ADVANCED" MODALS
MODALS | ADVANCED ▪ Gives the full capabilities of the
modal API ▪ Complex configuration
None
None
None
ICONS
ICONS ▪ TYPO3 provides a unified icon set ▪ Extensions
may provide additional icons ▪ Several APIs to access and render icons
ICONS ▪ default: 1em ▪ small: 16px ▪ medium: 32px
▪ large: 48px ▪ mega: 64px
None
ICONS ▪ Fluid ViewHelper ▪ JavaScript Module ▪ Web Component
None
None
None
None
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
WEB COMPONENTS
WEB COMPONENTS ▪ Based on Lit ▪ Closest to the
Web Components Standard ▪ Reactive web components ▪ Easy templating ▪ Easy event handling
WARNING! TYPESCRIPT AHEAD!
WEB COMPONENTS ▪ Example: https://github.com/TYPO3/typo3/blob/ main/Build/Sources/TypeScript/backend/element /editable-page-title.ts
WEB COMPONENTS ▪ Lit needs decorators ▪ True power comes
with compilers (Babel, TypeScript, ...) ▪ Shadow DOM is barely usable due to Bootstrap CSS
QUESTIONS? ANDREAS FERNANDEZ @_fernandreas
[email protected]