Let’s take a look back, and then towards the future.
The last bits of script.aculo.us and Prototype were finally removed in the process of developing TYPO3 v7, which was a tremendous relief. And the next step was to remove Ext JS. That was just about completed in the course of developing TYPO3 v8, and now there’s only one final step to go - Ext JS will belong to TYPO3’s past as soon as its functionality in the page tree has been replaced.
Asynchronous Module Definition (AMD) is a mechanism for defining modules and their dependencies. It allows developers to encapsulate code in smaller files that are loaded asynchronously if desired.
TYPO3 v7 - and above - support AMD modules by using RequireJS.
it handles dependencies by itself - there’s no need for a specific js file
there’s less chance of losing track of the file somewhere in your system
AMD modules are only loaded if needed, which means less traffic and more performance for your website
To be able to use RequireJS at all, some prerequisites must be fulfilled:
Each AMD has to have a namespace and a module name.
The namespace is TYPO3/CMS/<EXTKEY>, whereby <EXTKEY> is the extension key and is declared in UpperCamelCase, e.g. ext:foo_bar = FooBar.
One should only write one module per file (anything else is bad practice) and the filename is the module name + .js
Take a closer look at our RequireJS documentation to see how easy it is to create your own module.
Sometimes you need to reuse some old code in an AMD driven environment. Fortunately, you can extend the RequireJS configuration.
GeneralUtility::makeInstance(PageRenderer::class) ->addRequireJsConfiguration([ 'paths' => [ 'custom-lib' => '/typo3conf/ext/my_ext/foo.lib.js', ], 'shim' => [ 'custom-lib' => ['jquery'], ], ]);
Here you define your own lib in your extension as an AMD module 'custom-lib', as well as the dependency for jQuery. Now every module that requires your ‘custom lib’ will also take care of loading jQuery.
Thanks for reading! If you’ve enjoyed this or any of my previous posts on this site, consider leaving a comment or sharing this post with a friend!