$30 off During Our Annual Pro Sale. View Details »

JavaScript in TYPO3 Backend

JavaScript in TYPO3 Backend

Where did we come from, where do we go?

Andreas Fernandez

November 02, 2019
Tweet

More Decks by Andreas Fernandez

Other Decks in Programming

Transcript

  1. JS IN TYPO3
    BACKEND
    Andreas Fernandez
    [email protected]
    @_fernandreas
    Where did we come from, where do
    we go?

    View Slide

  2. AGENDA

    View Slide

  3. 1.Where did we come from?
    2.Where are we now?
    3.Current development
    4.What we might want to do

    View Slide

  4. WHERE DID WE COME
    FROM?
    DISCLAIMER: YOU MAY FEEL OLD

    View Slide

  5. View Slide

  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”

    View Slide

  7. View Slide

  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)

    View Slide

  9. View Slide

  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

    View Slide

  11. View Slide

  12. WHERE ARE WE NOW?
    JUST A QUICK STOP, WE’RE NOT THERE YET

    View Slide

  13. WHERE ARE WE NOW?
     During v7 development script.aculo.us and
    prototype were dropped
     RequireJS was introduced

    View Slide

  14. View Slide

  15. WHERE ARE WE NOW?
     Still 6.4 MB of JavaScript in 389 files (excl.
    codemirror)
     Clear separation of modules, code became re-
    usable

    View Slide

  16. WHERE ARE WE NOW?
     In v8, TypeScript was introduced
     Unit tests for JavaScript

    View Slide

  17. WHERE ARE WE NOW?
     In v9, much more code has been migrated to TS
     Transpiled files are minified
     Bye bye ExtJS

    View Slide

  18. View Slide

  19. CURRENT DEVELOPMENT
    “I HAVE A BAD FEELING ABOUT THIS”

    View Slide

  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)

    View Slide

  21. CURRENT DEVELOPMENT
     FormEngine components are splitted into
    separated modules
     IRRE is now properly encapsulated
     Currently WIP: Proper processor API (lowercase,
    nospace, trim etc.)

    View Slide

  22. CURRENT DEVELOPMENT
     267 JavaScript files
     Disk consumption of 3.4 MB

    View Slide

  23. BUT...

    View Slide

  24. CURRENT DEVELOPMENT
     Browsers have stable APIs (querySelector, fetch)
     Thus , jQuery will vanish in long term
     Migration already begun

    View Slide

  25. CURRENT DEVELOPMENT
     Talking about “stable”: Support for Internet
    Explorer is dropped

    View Slide

  26. PROBABLY NOT BEFORE
    TYPO3 12 LTS

    View Slide

  27. CURRENT DEVELOPMENT
     $(selector) → document.querySelector(All)
    (selector)
     $.ajax() → fetch() (native XHR if required)
     $(foo).on() →
    document.querySelector(foo).addEventListe
    ner()

    View Slide

  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

    View Slide

  29. WHAT WE MIGHT WANT TO
    DO
    “ROADS? WHERE WE’RE GOING, WE DON’T NEED ROADS”

    View Slide

  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

    View Slide

  31. THANK YOU

    View Slide