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
160
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
400
ECMAScript killed the jQuery star - in TYPO3
andreasfernandez
0
96
Other Decks in Programming
See All in Programming
小さな開発会社を作った理由
polidog
0
1.9k
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Embracing the Ebb and Flow
colly
81
4.3k
How to Ace a Technical Interview
jacobian
274
23k
Clear Off the Table
cherdarchuk
89
320k
Ruby is Unlike a Banana
tanoku
96
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Happy Clients
brianwarren
94
6.5k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Automating Front-end Workflow
addyosmani
1362
200k
Building Your Own Lightsaber
phodgson
101
5.9k
Facilitating Awesome Meetings
lara
46
5.8k
Designing the Hi-DPI Web
ddemaree
276
34k
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