Skip to main content

Mit einem Klick mehr über uns erfahren

Development for mail

Boost your TYPO3 frontend with RequireJS

RequireJS is popular for building applications with a large number of JavaScript files. We will show you, how you can use it for your TYPO3 sites and why it make sense even in projects with a small amount of scripts.

Ever since TYPO3v7 RequireJS can be used in the backend and now we want to use it for the frontend too.

RequireJS for managing dependencies and loading scripts asynchronously

Let’s have a look at the dependency script loading feature. A common example is to integrate Bootstrap. Using the JavaScript features, Bootstrap requires jQuery. This can be done purely in TypoScript. Just include them to your PAGE object, by keeping the right order.

includeJSFooterlibs {
  jquery = EXT:site_conf/Resources/Public/JavaScript/vendor/jquery.min.js
  bootstrap = EXT:site_conf/Resources/Public/JavaScript/vendor/bootstrap.min.js
}
includeJSFooter {
  main = EXT:site_conf/Resources/Public/JavaScript/main.js
}

TYPO3 concatenates all script collections to one file each. In the worst case this means that up to four different script files will be included: includeJS, includeJSFooter, includeJSLibs and includeJSFooterlibs.

Websites with many extensions often contain a lot of JavaScript resources that have to be integrated as well. This is done automatically by including Static Template files. With the adjustment moveJsFromHeaderToFooter all JavaScript files pegged to the head will be integrated as if they where added to includeJSFooter in the first place.

Question is: who ensures the order of inclusions is correct?

For large sites with many JavaScript plugins and different dependencies using RequireJS is a huge advantage. Beside the dependency management, RequireJS loads files through asynchronous requests. Therefore loading the page can be finished without getting blocked by the JavaScript resources. This causes a considerable performance boost for any (TYPO3) website.

Getting started

First of all the script included needs to be removed from the PAGE object. Then we implement the RequireJS call for our main.js. According to the RequireJS documentation we implement a source tag with reference to RequireJS and the path to our main.js as data-main attribute. Therefore we create a new Fluid template and put it in our footerData.

page.footerData {
  10 = FLUIDTEMPLATE
  10 {
    file = EXT:site_conf/Resources/Private/Partials/Page/JavaScript.html
    extbase.controllerExtensionName = SiteConf
  }
}

The reason for using footerData here is that neither includeJS nor includeJSFooter currently allow for additional attributes like data-main.

The JavaScript.html looks like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js" async data-main="{f:uri.resource(path: 'JavaScript/main.js')}"></script>

The main.js contains the RequireJS configuration. Here we have the basic configuration to load Bootstrap and jQuery.

requirejs.config({
  paths: {
    bootstrap: ["https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min"],
    jquery: ["https://code.jquery.com/jquery-3.1.1.min"]
  },
  shim: {
    bootstrap: ["jquery"],
  }
});
require(["bootstrap"]);

And that’s it!

Now we can follow the rules of RequireJS and implement our JavaScript code as AMD modules. We create a new file foo.js and define it as a module

define(["jquery"], function($) {
  // jquery code
});

and add it to our main.js

require(["bootstrap", "foo"]);

If extensions are installed, that include JavaScript-Files, they need to be removed from the PAGE object in TypoScript and added to the RequireJS config as well:

requirejs.config({
  paths: {
    bootstrap: ["https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min"],
    jquery: ["https://code.jquery.com/jquery-3.1.1.min"],
    external_extension: ["../../../../external_extension/Resources/Public/JavaScript/main"]
  },
  shim: {
    bootstrap: ["jquery"],
  }
});
require(["bootstrap", "foo", "external_extension"]);

Sources

http://requirejs.org/
http://t3n.de/news/performance-boost-requirejs-521593/2/
https://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

Feedback? With pleasure!

You may like to comment our tutorial and/or if you consider our advice helpful,
feel free to share it. Thanks a lot!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.