Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript in TYPO3 Backend

JavaScript in TYPO3 Backend

Where did we come from, where do we go?

Andreas Fernandez

November 02, 2019

More Decks by Andreas Fernandez

Other Decks in Programming


  1. 1.Where did we come from? 2.Where are we now? 3.Current

    development 4.What we might want to do
  2. 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”
  3. 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)
  4. 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
  5. WHERE ARE WE NOW?  During v7 development script.aculo.us and

    prototype were dropped  RequireJS was introduced
  6. WHERE ARE WE NOW?  Still 6.4 MB of JavaScript

    in 389 files (excl. codemirror)  Clear separation of modules, code became re- usable
  7. WHERE ARE WE NOW?  In v9, much more code

    has been migrated to TS  Transpiled files are minified  Bye bye ExtJS
  8. 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)
  9. CURRENT DEVELOPMENT  FormEngine components are splitted into separated modules

     IRRE is now properly encapsulated  Currently WIP: Proper processor API (lowercase, nospace, trim etc.)
  10. CURRENT DEVELOPMENT  Browsers have stable APIs (querySelector, fetch) 

    Thus , jQuery will vanish in long term  Migration already begun
  11. CURRENT DEVELOPMENT  $(selector) → document.querySelector(All) (selector)  $.ajax() →

    fetch() (native XHR if required)  $(foo).on() → document.querySelector(foo).addEventListe ner()
  12. 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
  13. 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