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
580
ECMAScript killed the jQuery star - in TYPO3
andreasfernandez
0
100
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
280
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Become a Pro
speakerdeck
PRO
29
5.4k
The Language of Interfaces
destraynor
158
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Typedesign – Prime Four
hannesfritz
42
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
A Tale of Four Properties
chriscoyier
160
23k
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