In TYPO3's history there have been a lot of ups and downs, in any regard. This blog post tells you something about JavaScript in TYPO3: how was it back then, what's happening now and what will maybe happen.
In the past, the JavaScript implementations were some bunch of loose scripts that did some stuff. There was no clear separation of concerns and the scripts were loaded in a defined order and with some luck, everything worked well. The scripts had (sometimes hidden) dependencies to other scripts, so extending them or fixing bugs was always some kind of a challenge.
In some cases, the JavaScript calls were not triggered by proper event handling, but by direct calls injected by PHP, what makes the whole situtation worse and more error-prone. Unfortunately, this is still the case, currently.
Back then there were some JavaScript frameworks that were delivered with TYPO3: prototype, script.aculo.us and jQuery. The modules based on any of these frameworks were partialy a mess, as a module that was clearly written for one specific framework also used API of the other frameworks.
With ExtJS, the TYPO3 Core received some kind of modularization, but that came with a high price: It's very complicated to extend the functionality of ExtJS for beginners, plus at some point the support of the used ExtJS version ended. Since parts of the TYPO3 backend highly depended on ExtJS components (Page tree, workspaces, extension manager, recycler and some more), this was the worst case, since the used ExtJS version had some critical bugs in regard of Internet Explorer and an upgrade was not possible without rewriting everything.
With the start of TYPO3 7 the core team decided to streamline the JavaScript modules and to get rid of any framework that blocks further development. Since prototype and script.aculo.us seemed to be abandoned (and actually they are, prototype got its last release in September 2015, script.aculo.us in December 2010!), all JavaScript was rewritten to either use Vanilla JS or jQuery. That was also the time where RequireJS was introduced (also see this blog post). The goal of RequireJS is to have a proper dependency handling between JavaScript files to make sure every required module is loaded before the actual module. It's also possible to load another module "on-the-fly" when it's really required.
In the same run, most of the ExtJS components were rewritten to RequireJS and jQuery, as we decided to get rid of ExtJS as well, for obvious reasons. But getting rid of ExtJS should take some more time.
In TYPO3 v8, most of ExtJS got removed. The so-called "viewport" (the "frameset" of the backend with the top bar, module menu and content box) was rewritten to plain HTML and jQuery, which drastically reduced the processing time and the memory footprint of the backend. Only the page tree was left.
With TYPO3 8.4, TypeScript, a superset scripting language of JavaScript was introduced into the Core. But why?
The main feature of TypeScript is static types (d'uh!) which allows us to write more stable code, as the behaviour is predictable and type juggling is avoided. But: if required, it's still possible to keep the behaviour by using the type any explicitly. TypeScript also brings real classes, interfaces and method visibility, and also more features. With TYPO3 v8, new modules were mostly written in TypeScript.
The TypeScript code is linted against our defined ruleset. Bonus: The TypeScript compiler (technically, it's a transpiler) automatically adds the RequireJS "header" as it's configured to do so. With changing the configuration it's possible to drop the usage of RequireJS or to create ES6 compliant code.
In TYPO3 v9 is was possible to remove ExtJS once and for all thanks to the awesome work and tremendous time that was put into the new page tree. The page tree responds super fast now and is also lightweight, its rendering is completely based on SVG.
The t3editor was completely rewritten to use the newest version of CodeMirror. With this overhaul, a lot of bugs were fixed and most of the code was removed since most of the custom implementations that were done back then are now included in CodeMirror (for example the fullscreen feature). It's now also possible to extend CodeMirror by custom plugins.
A lot of the JavaScript delivered in EXT:backend was rewritten to TypeScript (see this epic). Since we build most of the JavaScript now, we're able to create minified builds. Please note: the TypeScript migration is still an ongoing process. If you're interested in participating, please join the #typescript-migration channel on Slack.
The JavaScript development continues, we have to adapt to new technologies that arise. Since browsers have a stable API for DOM querying and manipulation these days, it's possible to reduce the usage of jQuery step-by-step.
With TYPO3 v10 we will very likely drop the support for Internet Explorer 11. This allows us to recompile all TypeScript to ES6 JavaScript. Using ES6 allows us to use the built-in module feature, which might replace RequireJS. On the other hand, we might use a module bundler instead.
With dropping IE 11 support, we may use service workers which allows new features and improvements of the current code.
Header photo by Pankaj Patel on Unsplash.