AMP’up your web projects
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.
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 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 –
npm install http-server -g
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!).
<title>News 24×7 home page</title>
<link rel=”stylesheet” src=”…”>
<img src=”…” alt=”…” />
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.
<script async src=”https://cdn.ampproject.org/v0.js”></script>
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 –
<html amp lang=”en”>
AMP you up later!