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
570
ECMAScript killed the jQuery star - in TYPO3
andreasfernandez
0
100
Other Decks in Programming
See All in Programming
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
1.8k
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
360
GoのWebAssembly活用パターン紹介
syumai
3
1.1k
SODA - FACT BOOK
sodainc
1
360
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.2k
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
350
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
18
5.6k
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
0
200
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.8k
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
150
単体テストの始め方/作り方
toms74209200
0
360
從零到一:搭建你的第一個 Observability 平台
blueswen
0
310
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Docker and Python
trallard
44
3.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Statistics for Hackers
jakevdp
799
220k
Six Lessons from altMBA
skipperchong
28
3.8k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Scaling GitHub
holman
459
140k
Balancing Empowerment & Direction
lara
1
110
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Adopting Sorbet at Scale
ufuk
77
9.4k
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