ECMAScript killed the jQuery star - in TYPO3

A quick introduction to what JavaScript we had in TYPO3 Core, what our current state is and what we want to achieve.

Transcript

1. ECMASCRIPT KILLED
   THE JQUERY STAR
   Andreas Fernandez
   andreas.fernandez@typo3.com
   @_fernandreas
   ...in TYPO3
   

   View Slide

2. AGENDA
   

   View Slide

3. AGENDA
   1. Recap
   2. Current state
   3. Where we’re heading to
   

   View Slide

4. RECAP
   

   View Slide

5. WE HAD FOUR MAJOR JS
   FRAMEWORKS IN PLACE
   

   View Slide

6. ▪ prototype
   ▪ scriptaculous
   ▪ jQuery
   ▪ ExtJS
   

   View Slide

7. View Slide

8. [!!!][TASK] KILL PROTO-
   TYPES AND SCRIPT-
   KIDDIES WITH FIRE
   BENJAMIN MACK - HTTPS://GITHUB.COM/TYPO3/TYPO3.CMS/COMMIT/2DC43D97
   

   View Slide

9. CURRENT STATE
   

   View Slide

10. CURRENT STATE
    ▪ Modules are loaded with RequireJS
    ▪ Monoliths are split into smaller modules
    ▪ ExtJS is gone in v9
    ▪ Introduction of ECMAscript 2015 in v10
    ▪ (yes, we dropped support for IE)
    ▪ Code is generated by TypeScript
    

    View Slide

11. View Slide

12. WHERE WE‘RE
    HEADING TO
    

    View Slide

13. WHERE WE‘RE HEADING TO
    1. yarn remove jquery
    2. ???
    3. profit
    

    View Slide

14. OF COURSE NOT (YET)
    

    View Slide

15. WHERE WE‘RE HEADING TO
    ▪ Use native browser APIs
    ▪ Enhance existing APIs
    ▪ Drop jQuery implementations step by step
    

    View Slide

16. EXAMPLE: SELECTORS
    

    View Slide

17. SELECTORS
    // jQuery
    const element = $('#foobar');
    // native
    const element = document.querySelector('#foobar');
    const element = document.getElementById('foobar');
    

    View Slide

18. SELECTORS
    // jQuery
    const elements = $('a:not([href])');
    // native
    const elements = document.querySelectorAll('a:not([href])');
    

    View Slide

19. SELECTORS
    ▪ https://developer.mozilla.org/en-
    US/docs/Web/API/Document/querySelector
    ▪ https://developer.mozilla.org/en-
    US/docs/Web/API/NodeList
    

    View Slide

20. EXAMPLE: EVENT BINDING
    

    View Slide

21. EVENT BINDING
    // jQuery
    $('.element').on('click', callback);
    // native
    document.querySelectorAll('a:not([href])')
    .forEach(function (element) {
    element.addEventListener('click', callback);
    }
    );
    

    View Slide

22. EVENT BINDING
    // jQuery
    $('.element').on('click', '.sub-element', callback);
    // native
    element.addEventListener('click', function (e) {
    if (!e.target.matches('.sub-element')) {
    return;
    }
    });
    

    View Slide

23. View Slide

24. EXAMPLE: AJAX
    

    View Slide

25. AJAX
    // jQuery
    $.ajax({
    url: 'https://unico.rn‘,
    method: 'post',
    data: {
    type: ['pink', 'fluffy']
    dancing: 'rainbows'
    }
    }).done(function (response) {
    console.log(response);
    });
    

    View Slide

26. AJAX
    // native
    const payload = new FormData();
    payload.append('type', ['pink', 'fluffy']);
    fetch('https://unico.rn‘, {
    method: 'POST‘,
    body: payload
    }).then(async function(response) {
    console.log(await response.text());
    });
    

    View Slide

27. View Slide

28. FETCH() IS A GREAT START
    BUT FEELS CLUMSY
    

    View Slide

29. TYPO3 CORE ENHANCES
    THIS API, COMING IN V10.3
    

    View Slide

30. AJAX
    ▪ TYPO3/CMS/Core/Ajax/AjaxRequest
    ▪ based on fetch()
    ▪ brings a very primitive jQuery BC layer
    

    View Slide

31. CREATE A REQUEST
    const request = new AjaxRequest('https://httpbin.org/json?arg1=4711');
    // Add arguments to URL
    request = request.withQueryArguments({
    foo: 'bar',
    baz: 'bencer'
    });
    // -> https://httpbin.org/json?arg1=4711&foo=bar&baz=bencer
    

    View Slide

32. SEND A GET REQUEST AND HANDLE RESPONSE
    const request = new AjaxRequest('https://httpbin.org/json?arg1=4711‘);
    request.get().then(
    async function (response) {
    console.log(await response.resolve());
    console.log(response.raw());
    }, function (error) {
    console.log(error.response);
    }
    );
    

    View Slide

33. SEND A POST REQUEST AND HANDLE RESPONSE
    const request = new AjaxRequest('https://httpbin.org/json?arg1=4711‘);
    request.post({
    foo: 'bar',
    baz: 'bencer'
    }).then(
    async function (response) {
    console.log(await response.resolve());
    console.log(response.raw());
    }, function (error) {
    console.log(error.response);
    }
    );
    

    View Slide

34. ▪ https://docs.typo3.org/c/typo3/cms-
    core/master/en-us/Changelog/master/Feature-
    89738-ApiForAjaxRequests.html
    ▪ https://github.com/TYPO3/TYPO3.CMS/blob/mast
    er/Build/Sources/TypeScript/core/Resources/Pub
    lic/TypeScript/Ajax/AjaxRequest.ts
    

    View Slide

35. THANK YOU
    

    View Slide