JS IN TYPO3
BACKEND
Andreas Fernandez
[email protected]
@_fernandreas
Where did we come from, where do
we go?
Slide 2
Slide 2 text
AGENDA
Slide 3
Slide 3 text
1.Where did we come from?
2.Where are we now?
3.Current development
4.What we might want to do
Slide 4
Slide 4 text
WHERE DID WE COME
FROM?
DISCLAIMER: YOU MAY FEEL OLD
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
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”
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
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)
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
WHERE ARE WE NOW?
JUST A QUICK STOP, WE’RE NOT THERE YET
Slide 13
Slide 13 text
WHERE ARE WE NOW?
During v7 development script.aculo.us and
prototype were dropped
RequireJS was introduced
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
WHERE ARE WE NOW?
Still 6.4 MB of JavaScript in 389 files (excl.
codemirror)
Clear separation of modules, code became re-
usable
Slide 16
Slide 16 text
WHERE ARE WE NOW?
In v8, TypeScript was introduced
Unit tests for JavaScript
Slide 17
Slide 17 text
WHERE ARE WE NOW?
In v9, much more code has been migrated to TS
Transpiled files are minified
Bye bye ExtJS
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
CURRENT DEVELOPMENT
“I HAVE A BAD FEELING ABOUT THIS”
Slide 20
Slide 20 text
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)
Slide 21
Slide 21 text
CURRENT DEVELOPMENT
FormEngine components are splitted into
separated modules
IRRE is now properly encapsulated
Currently WIP: Proper processor API (lowercase,
nospace, trim etc.)
Slide 22
Slide 22 text
CURRENT DEVELOPMENT
267 JavaScript files
Disk consumption of 3.4 MB
Slide 23
Slide 23 text
BUT...
Slide 24
Slide 24 text
CURRENT DEVELOPMENT
Browsers have stable APIs (querySelector, fetch)
Thus , jQuery will vanish in long term
Migration already begun
Slide 25
Slide 25 text
CURRENT DEVELOPMENT
Talking about “stable”: Support for Internet
Explorer is dropped
Slide 26
Slide 26 text
PROBABLY NOT BEFORE
TYPO3 12 LTS
Slide 27
Slide 27 text
CURRENT DEVELOPMENT
$(selector) → document.querySelector(All)
(selector)
$.ajax() → fetch() (native XHR if required)
$(foo).on() →
document.querySelector(foo).addEventListe
ner()
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
WHAT WE MIGHT WANT TO
DO
“ROADS? WHERE WE’RE GOING, WE DON’T NEED ROADS”
Slide 30
Slide 30 text
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