AMP Script

The idea

The most important part of this project is the amp-script component as amp-script allows us to manipulate the Document Object Model (DOM) and make the whole website more interactive.

JavaScript container

The pages are constructed within a large amp-script container, which the DOM worker is allowed to manipulate based on the user gesture (such as clicking links). The whole area from the top navigation down to the footer links has been wrapped within the amp-script container, allowing links to interact with the script.

Links

As e.preventDefault() is not supported, we have changed the 'href' attribute to a data-href attribute, which breaks the default behaviour of the browsers and can be read by JavaScript. For browsers that do not understand JavaScript, the noscript element has been used.

Content

Now that we can identify where the links point to and when they are clicked, we can request the server for the HTML content. One of the easiest ways to transport data is using JSON; therefore the script makes an AJAX call to the server, which responds with the pre-processed PHP/content for the page in JSON format.

The content is simply injected into a unique element (the main element) and the browser does the rest. With the CSS already in place, the content can quickly be painted, and as this is near instant, our Single Page Application feeling is there.

The idea

The most important part of this project is the amp-script component as amp-script allows us to manipulate the Document Object Model (DOM) and make the whole website more interactive.

JavaScript container

The pages are constructed within a large amp-script container, which the DOM worker is allowed to manipulate based on the user gesture (such as clicking links). The whole area from the top navigation down to the footer links has been wrapped within the amp-script container, allowing links to interact with the script.

Internal & External Links

As e.preventDefault() is not supported, we have changed the 'href' attribute to a data-href attribute, which breaks the default behaviour of the browsers and can be read by JavaScript. For browsers that do not understand JavaScript, the noscript element has been used.

Content

Now that we can identify where the links point to and when they are clicked, we can request the server for the HTML content. One of the easiest ways to transport data is using JSON; therefore the script makes an AJAX call to the server, which responds with the pre-processed PHP/content for the page in JSON format.

The content is simply injected into a unique element (the main element) and the browser does the rest. With the CSS already in place, the content can quickly be painted, and as this is near instant, our Single Page Application feeling is there.