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?
   

   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