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
400
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
96
JavaScript in TYPO3 Backend
andreasfernandez
0
160
Other Decks in Programming
See All in Programming
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Product Management LT会_クアンド新家
shinshin
0
210
継続的な活動で築く地方エンジニアの道
myamashii
2
350
CSC307 Lecture 13
javiergs
PRO
0
150
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
20240706_CDKConf
takuyay0ne
0
1.2k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Featured
See All Featured
Debugging Ruby Performance
tmm1
71
11k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Typedesign – Prime Four
hannesfritz
37
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
What's in a price? How to price your products and services
michaelherold
239
11k
Clear Off the Table
cherdarchuk
89
320k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Atom: Resistance is Futile
akmur
261
25k
Thoughts on Productivity
jonyablonski
64
4.1k
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]