Web Development with AMP
What is the most annoying thing while browsing a website? Except for the very relevant ads, which are still unsettling. We are not going to jump into that but what else! Of course, a Loading Icon. It is frustrating when a web page takes forever to load like argh! The heavy websites that take a long time to load are often avoided by web users, which in turn decreases the value of the website.
What have we observed in the last decade is the gigantic leap in the field of technology and most essentially the INTERNET. If we look at the analytics of the past few years the traffic on the websites has been increasing tremendously. For that excess of load on the websites, the sites should be capable of handling the overload and shouldn’t affect its time of response. As a solution to all the problems of delayed user experience now we have AMP (Accelerated Mobile Pages) web development.
AMP is an open-source custom web development framework that provides a straightforward way to create web pages that are fast, smooth-loading and prioritize the user experience above all else. The principle benefits of accelerated mobile pages are that they are faster loading pages for mobile users.
DSC DDU club organized a highly informative workshop on the same topic; “Web Development with AMP”. The workshop was held on 21st September 2019 on Saturday. The event commenced at 9 AM. The workshop began with the introduction of the web development team by Vivek Parmar. Then, the event was co-hosted by Hardik Bagada and Virat Patel.
After the introduction by Vivek, Hardik took over the event with the brief about the basics of AMP. He covered topics like, What are slow sites? Why was AMP needed? What is AMP? How does it improve web performance and better user experience? After covering the basics, he explained the glitch.com tool. Glitch is an online editor we can use to create and host apps/websites. Then he explained how to install and use AMP validator Google Chrome extension from Chrome Web Store. After that, he demonstrated how to import someone’s project to our account. After that, with the use of all of the tools mentioned above, he edited imported code and made a valid AMP page. He also explained about AMP boilerplate code.
Then, Virat was called upon the stage to take the event further with a more practical touch to the event. He discussed various AMP web components such as <amp-img>. He continued by explaining how ‘lazy-loading’ works, what is layout attribute, how to change the display size of the test website. He encouraged the audience to explore the official documentation on the amp.dev website as it the best way to learn new technology and use it efficiently. After all that, he gave two exercises to the audience which are as follows; 1) add YouTube video and 2) add image carousel on the website. After the task time expired, he unveiled the solution of the tasks himself.
The event came to an end after the accumulation of the learning of the workshop by Virat. The workshop was successful considering the enthusiasm and cooperation of the audience throughout. Such a response from the audience motivates the club to take up such events in the future as well.
