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
2. AGENDA
3. AGENDA 1. Recap 2. Current state 3. Where we’re heading to
4. RECAP
5. WE HAD FOUR MAJOR JS FRAMEWORKS IN PLACE
6. ▪ prototype ▪ scriptaculous ▪ jQuery ▪ ExtJS
8. [!!!][TASK] KILL PROTO- TYPES AND SCRIPT- KIDDIES WITH FIRE BENJAMIN MACK - HTTPS://GITHUB.COM/TYPO3/TYPO3.CMS/COMMIT/2DC43D97
9. CURRENT STATE
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
12. WHERE WE‘RE HEADING TO
13. WHERE WE‘RE HEADING TO 1. yarn remove jquery 2. ??? 3. profit
14. OF COURSE NOT (YET)
15. WHERE WE‘RE HEADING TO ▪ Use native browser APIs ▪ Enhance existing APIs ▪ Drop jQuery implementations step by step
16. EXAMPLE: SELECTORS
17. SELECTORS // jQuery const element = $('#foobar'); // native const element = document.querySelector('#foobar'); const element = document.getElementById('foobar');
18. SELECTORS // jQuery const elements = $('a:not([href])'); // native const elements = document.querySelectorAll('a:not([href])');
19. SELECTORS ▪ https://developer.mozilla.org/en- US/docs/Web/API/Document/querySelector ▪ https://developer.mozilla.org/en- US/docs/Web/API/NodeList
20. EXAMPLE: EVENT BINDING
21. EVENT BINDING // jQuery $('.element').on('click', callback); // native document.querySelectorAll('a:not([href])') .forEach(function (element) { element.addEventListener('click', callback); } );
22. EVENT BINDING // jQuery $('.element').on('click', '.sub-element', callback); // native element.addEventListener('click', function (e) { if (!e.target.matches('.sub-element')) { return; } });
24. EXAMPLE: AJAX
25. AJAX // jQuery $.ajax({ url: 'https://unico.rn‘, method: 'post', data: { type: ['pink', 'fluffy'] dancing: 'rainbows' } }).done(function (response) { console.log(response); });
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()); });
28. FETCH() IS A GREAT START BUT FEELS CLUMSY
29. TYPO3 CORE ENHANCES THIS API, COMING IN V10.3
30. AJAX ▪ TYPO3/CMS/Core/Ajax/AjaxRequest ▪ based on fetch() ▪ brings a very primitive jQuery BC layer
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
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); } );
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); } );
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
35. THANK YOU