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
Search
Andreas Fernandez
November 02, 2019
Programming
0
170
JavaScript in TYPO3 Backend
Where did we come from, where do we go?
Andreas Fernandez
November 02, 2019
Tweet
Share
More Decks by Andreas Fernandez
See All by Andreas Fernandez
JavaScript in TYPO3 Backend, 2023
andreasfernandez
0
580
ECMAScript killed the jQuery star - in TYPO3
andreasfernandez
0
100
Other Decks in Programming
See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
Create a website using Spatial Web
akkeylab
0
300
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
510
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
120
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
930
Gleamという選択肢
comamoca
6
760
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
370
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
340
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Automating Front-end Workflow
addyosmani
1370
200k
Rebuilding a faster, lazier Slack
samanthasiow
81
9.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
What's in a price? How to price your products and services
michaelherold
246
12k
Six Lessons from altMBA
skipperchong
28
3.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Building Applications with DynamoDB
mza
95
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Scaling GitHub
holman
459
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Transcript
JS IN TYPO3 BACKEND Andreas Fernandez
[email protected]
@_fernandreas Where did
we come from, where do we go?
AGENDA
1.Where did we come from? 2.Where are we now? 3.Current
development 4.What we might want to do
WHERE DID WE COME FROM? DISCLAIMER: YOU MAY FEEL OLD
None
WHERE DID WE COME FROM? TYPO3 3.8: 9 .js
files, total of 120 KB (excl. EXT:phpmyadmin(!)) But: lots of inline JavaScript Blazing fast (on an 8th gen Intel i7) UI doesn’t feel “snappy”
None
WHERE DID WE COME FROM? TYPO3 4.2: 85 .js
files, total of 1.3 MB Even more inline JavaScript But: more comfort features (e.g. IRRE, context menu via AJAX)
None
WHERE DID WE COME FROM? TYPO3 6.2: 349 .js
files, total of 7.9 MB(!) (excl. codemirror) Four major frameworks: script.aculo.us, prototype, jQuery, ExtJS
None
WHERE ARE WE NOW? JUST A QUICK STOP, WE’RE NOT
THERE YET
WHERE ARE WE NOW? During v7 development script.aculo.us and
prototype were dropped RequireJS was introduced
None
WHERE ARE WE NOW? Still 6.4 MB of JavaScript
in 389 files (excl. codemirror) Clear separation of modules, code became re- usable
WHERE ARE WE NOW? In v8, TypeScript was introduced
Unit tests for JavaScript
WHERE ARE WE NOW? In v9, much more code
has been migrated to TS Transpiled files are minified Bye bye ExtJS
None
CURRENT DEVELOPMENT “I HAVE A BAD FEELING ABOUT THIS”
CURRENT DEVELOPMENT In current master, most of the code
has been migrated to TypeScript (excl. EXT:form and legacy code) Some legacy code has been deprecated lately (jumpToUrl(), T3_THIS_LOCATION, setFormValue*() and more)
CURRENT DEVELOPMENT FormEngine components are splitted into separated modules
IRRE is now properly encapsulated Currently WIP: Proper processor API (lowercase, nospace, trim etc.)
CURRENT DEVELOPMENT 267 JavaScript files Disk consumption of
3.4 MB
BUT...
CURRENT DEVELOPMENT Browsers have stable APIs (querySelector, fetch)
Thus , jQuery will vanish in long term Migration already begun
CURRENT DEVELOPMENT Talking about “stable”: Support for Internet Explorer
is dropped
PROBABLY NOT BEFORE TYPO3 12 LTS
CURRENT DEVELOPMENT $(selector) → document.querySelector(All) (selector) $.ajax() →
fetch() (native XHR if required) $(foo).on() → document.querySelector(foo).addEventListe ner()
CURRENT DEVELOPMENT DRAFT: Replacement for $.ajax() const req = (new
AjaxRequest(url)).withQueryArguments(obj).json(); req.then((response) => console.log(response)); // → https://review.typo3.org/c/Packages/TYPO3.CMS/+/62129
WHAT WE MIGHT WANT TO DO “ROADS? WHERE WE’RE GOING,
WE DON’T NEED ROADS”
WHAT WE MIGHT WANT TO DO Drop RequireJS, replace
with ES6 imports Use a modern MVC framework (React, VueJS) Use web components Introduce proper state management
THANK YOU