Picture courtesy- Public Domain Pictures

Is speed everything?

That is one way of saying. But what becomes everything is user experience. To reach the pinnacle of that, the developer needs to consider multiple things and that becomes the elaborate art and science of engineering code. Speed is a factor which contributes positively to the user experience. Let us face it many of use mobile devices and access the web on the move. Having an experience which is tailored to small form-factor is pivotal and speed is an important component of that.

Many web app development frameworks today focus on the developer productivity. Speed is an operational exercise which is left to the experience of the developers using the framework. Factors that affect speed of website to render are dominantly the size of the web page, DOM operations performed after the page is loaded. Frameworks like React, Angular, Vue, Ember and the likes of them are great in organizing the code they are not centric to the user experience. We do not mean that you cannot develop website which are fast using those frameworks. We mean that those frameworks require developer maturity and experience to reach to that point.

If you have been offended by the usage of the word website, let us tone down that offence a bit. Using the SPA frameworks, we never built an entire web-app. A web-app is never complete without the server components which will deliver the data and actual behaviour surfaced by the web-app. So, what effectively we have accomplished is mix the HTML, javascript and CSS to produce different versions of what a developer feel is the right way to express the front end. It has its merits and so does the acceptance to this reality.

Bring in; AMP which is a web component framework amongst the many competing such web frameworks that focuses on the client experience. It is not a SPA or for that reason PWA. They have a sorted order of priority for what they focus. User experience > Developer experience > Ease of implementation. Read as user experience is pivotal and is followed by developer experience and then easy of implementation. So, when a developer falls in doubt, they have a guard rail suggesting answer the question what is right for user experience; do that even if it means developer has to take a tough road to fulfil that.

Beyond those word of merits to the AMP by itself, it is a fact that it Google search has accelerated delivery of websites developed using this framework on smaller form factor and those with flaky connectivity.

AMP

Being part of the OpenJS foundation and raised out of the Google cradle is a large open-source project. It carries the mission of “user first format of web-content, supporting the long-term success of every web publisher, merchant and advertiser”. They have taken the road well known of vanilla javascript. Butwhat we notice is they have excelled it. They have created the framework with code that ensures javascript, CSS and HTML are mixed in the right manner with developers using JSON and HTML markup to create their website. Yes, dominantly you will not have to write javascript code at all. However, you can quickly rise up the learning curve by reading about the JSON syntax and the HTML markup with appropriate attributes.

AMP Structure

AMP framework is structured into major features catering to –

One of the first thing as a developer we need to know about AMP is how do we go about dealing with current HTML we have? If you have developed a web app using SPA frameworks probably your HTML is split across modules and components. However, you will still have one index.html file. That is just the beginning. We however, will not recommend you taking that route! Simply, they are frameworks with different priorities. Why will anyone arm twist these frameworks to achieve something which they are not meant for. So, for now let us assume (highly unlikely) you have bunch of static HTML pages. Hang-in there with us, we will transform the AMP website to have forms and as well bind data in future posts. If having that assumption is difficult for you, consider you are developing the HTML now ground up.

Ah! You will need this

You will need a HTTP server; localhost is just fine. There are plenty of options. But being a web-developer, we assume you will already have locally installed node.js. So let us capitalize the installation you already have. We can install a simple web-server by running the following command –

We will come back to this latter.

Return to HTML

Let us return to HTML. Let us create a new HTML page (as you liked it!).

We left the “…” to your specific implementations. To make this AMP page we need to first include the AMP library by adding the script tag. Keep in mind we will not be writing script until much later in advanced scenarios.

This is a good start. This is a major step towards amp’ification if we could say that! Like many frameworks have great IDE support with VSCode being dominant one, Google Chrome’s Developer Toolbar is the best IDE one could have for developing the web site. Like a compiler letting you know whether something is wrong with your code AMP does that with the URL.

Yes, change the URL which you used to browse to –

There are multiple options after development. In legacy style one could type development=1 whereas, as the feature offering increases you could use the specific validators for each feature. Other possible values for development parameter include actions, amp4ads, amp4email. Do not forget to keep the developer

toolbar open. Adherence of the HTML to amp standard is printedonly there.

The HTML structure shared above is bound to get many errors. Well then what are you waiting for, start fixing them! While we wrap up this edition; we do want to drop a fix to the HTML above to carry our mojo over to next dispatch –

AMP you up later!