JavaScript in TYPO3 Backend

Where did we come from, where do we go?

Transcript

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