Loading
Abi Travers

What I am learning as a Software Engineering & Growth Hacker.

The Future of AMP : JavaScript which doesn’t block the main thread?

At ComparetheMarket.com we are constantly optimising the speed of our site.

We were an early adaptor of Google’s AMP technology, sold on the mobile page speed win’s it promised.

Due to how early we were in using this technology we have faced many challenges on the way. I wanted to look at if the future would be a smoother process, and what new features are coming up.

What is AMP

The AMP Project, started by Google, stands for “Accelerated Mobile Pages”.

It is targets mainly the mobile version on websites. It uses a number of best practice optimisation techniques. As soon as a AMP html page appears in a google search it (google) builds (renders) the page and stores this in it’s own cache, meaning that as soon as the user clicks on the page it is fully loaded and there, there is no on-page-load rendering.

The future of AMP`

To look at the future of AMP I wanted to first look at the process which shapes how the technology evolves.

It is not a completely perfect or polished technology, instead, it is a work in progress something which is constantly being improved.

Open Source / AMP’s Development Process

AMP an open source github project

AMP’s open source project currently has over 520 contributors, including 3 people in my team at ComparetheMarket.

Google AMP open source github repo

The project is open for anyone to view the source code on github, to see exactly how the technology works.

Not only can you view the code but you can also raise issues and fix bugs in it.

 Google AMP open source github repo issue raised

Collaboration on new features

It is not just small changes that you or the community can contribute to. Even large new features are developed in collaboration with those outside of google.

Amp stories has been a significant new feature which has been recently developed.

google amp stories gif

The development of this heavily involved 6 publication organisations, usually rivals, working together to create the code, generate ideas and fix each others bugs.

You can find tutorials to make your own AMP stories here: https://ignitevisibility.com/google-amp-stories/

Custom Javascript off the main thread

One of our major challenge of ours has been the inability to add custom Javascript to our AMP pages.

But this may be set to change. Earlier this year, at AMP conf, google announced it was working on the ability to add author-written Javascript to your AMP pages.

AMP to include custom Javascript

They are trying to build a type of javascript that runs in web workers and is server side rendered.

This means this type of JS would not block the main thread and would actually solve many issues for non-AMP websites.

They are proto-typing this with Preact, a library compatable with React but only 3KBytes.

They are using this framework not only for it’s size but also because optimised for virtual DOM.

 AMP to include custom Javascript with Preact

They are doing this with full working visibility, out in the AMP open source code base, which is open for anyone to contribute to.

“We expect to create and open-source libraries for advancing the art of off-main-thread JS computing”.

If they succeed in this then they may solve a much larger problem that developers have the web. This means the future of AMP may also be the future of the web and being open source means you can be involved in shaping this.

This article has been from the script of a presentation I gave as part of my team (Marketing IT) at ComparetheMarket.com. If you would like to hear the rest of the presentation please leave a comment below.

Events, EventListeners and their relation to JavaScript, the Browser and the DOM

 

Notes on things I have learnt about events and their listeners and JS while working through Wes Bos’s JS30 and talking to colleague at Compare the market.

(Beware this is not a coherent article just random scribbles which i took down through a conversation).

Events/ Events/ Events

The DOM Is an event based system.

The Browser is an event based system.

Keydown etc are events which happen that the browser can capture / listen to and note.

When the browser is open and JS script is listening for a particular event it can then go off and execute a given task.

The DOM can execute events.

The browser DOM is an event based system … idea is that everything is responding to some sort of event.

Lots of events and responses.

Allows the programme to not only observe what is happening but do something about the events that are happening.

Javascript can tap into and listen to browser events.

JS is the base language which has been plugged into the browser.

JS is embedded in the browser .. Just as assembly language is embedded in the comp.. It is the only language the browser and the DOM is implemented on.

Event Listener

An event listener is an object that implements the EventListener interface, which defines a single method named handleEvent(). An event listener is used to observe a specific event and perform one or more actions when it occurs.

interface EventListener {

        void handleEvent(in Event evt);

};

handleEvent: function(event) {

       // Do something here, possibly using the event parameter

}

To add an event listener we have to employ the addEventListener() method.

This then listens for a specific event which happens in the browser/ on the DOM and does something with it. These elements can be attached to ‘targets’(see below) so elements within the DOM.

Eg.

window.addEventListener(‘keydown’, playSound);

 function playSound(e) {

         const audio = document.querySelector(`audio`);

          audio.play();

}

Examples of events

‘Transitionend’ which happens when CSS has the transition property, is an event, like many others, which is only found in the browser environment.

So if you press the D key .. If the browser is open it listened to that event, notes it… then the eventListener can trigger an action.

After DOM is loaded it fires an event called DOM content loaded .. If you attach a listener to this event you know when it fully loaded.

Tracking is just attaching events to stuff …. So click through rate is just a function attached to an event in the DOM.

Can create custom events .. Which is a combination of actions .. So when these actions happen do this event.

There are extra APIS which are environment dependant..

There are APIS you are going to see in the browser that you don’t see in the Node.

Transitionend is an event which is an API..

APIs in the sense that they are things that belong to the browser … so if you run js in node then you don’t see transitionend etc ..

Node is still an event based system so has it’s own events it can run.

..one of the reasons it is different from other languages.

ALL TRACKING TECHNOLOGY we have is based off JS events. … custom tag management.

Event Target

The event target is the element (div, span etc) that generates or dispatches the current event

So if you click on a div, that div becomes the event target for the click event that occurred

Threading and Sync/ Async

Javascript is Single threaded means everything runs on one thread.

Single thread — it does one thing at one time.

There are some situations that make it look like it is doing more than one thing at a time but just a tick.. Ie. SetTimeOut

async javascript event handlers

SetTimeOut with a time of 0 means that the function gets plopped on the event loop … 0 seconds means do this at any point when you are free .. If you are busy ignore it, put it in the loop then call it later. .. It’s not there yet .. It will be there at some point in time.

learning javascript eventloop

Single threaded is naturally sync.