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
180
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
610
ECMAScript killed the jQuery star - in TYPO3
andreasfernandez
0
100
Other Decks in Programming
See All in Programming
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
630
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
450
Devoxx BE - Local Development in the AI Era
kdubois
0
110
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
CSC509 Lecture 05
javiergs
PRO
0
300
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
950
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.5k
CSC509 Lecture 03
javiergs
PRO
0
330
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
120
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Writing Fast Ruby
sferik
629
62k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Speed Design
sergeychernyshev
32
1.1k
Optimizing for Happiness
mojombo
379
70k
Thoughts on Productivity
jonyablonski
70
4.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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