PWA or AMP - What is Better For Your Business? - Experts Zone Talks #7

Meet Experts Zone Talks with frontend developer Tomasz Krajewski! Today we will talk PWA and AMP and will find out what to choose for your business.

If you have any questions to our experts - ask us during a free consultation.

In the #7 episode about PWA and AMP you will find:

• 00:00 - Intro
• 00:15 - What is AMP and PWA?
• 01:19 - What is the difference in functionality? Why can’t we use PWA’s only?
• 05:26 - How to choose technology for your business?
• 10:42 - AMP with functions of PWA: how does it work?
• 11:31 - Which technology do you prefer?
• 12:31 - Is PWA development much more difficult than AMP?

Transcription

Olga

Hi guys, this is Experts Zone Talk. My name is Olga and this is Tomek. Today we will speak about PWA and AMP.

Tommy

Great, fantastic news! Hello Olga, hello you guys. Probably you know me from the Frontend News podcast. Today I'm here on the Experts Talk. Different formula, but still the same quality. Yeah, let's get started.

Olga

Let's start. Today, we will speak about how to choose the right technology for your business. If you have some questions for our experts, you can always contact experts from Frontend and House. They are open and ready to support you. Check their experience and learn how to create great apps.

Tommy

Yes, just come to our website, frontendhouse.com or likims.com and use the contact form to get in touch with us. We can do something interesting together, so we are waiting for you.

What is AMP and PWA?

Olga

Great! So my first question is, what is AMP and PWA and how to use it and why is it used?

Tommy

OK, so actually these are three questions, not one... just kidding. Let's be serious for a while. So yeah, AMP is the Accelerated Mobile Pages and this is the framework based on the web components. So it means this is the set of tools, which we as the developers can use in our implementation to deliver well-scaled websites to the user - what has the priority in performance and optimization.

So it means that we received a set of UI components, web components that are written with the performance in mind. They've been developed all the time by the full-time working developers, so they are maintained and in comparison to, for example, raw HTML5 tags, they contain the functionalities and they are just well optimized to handle different issues, as good as it's possible.

Yeah, this is the framework, a set of UI components let’s say, and the PWA this is the way we write applications nowadays, maybe not all of them, but PWA means that we have a Progressive Web Application. And yeah, it's nothing complex. It means that we can create a shortcut on, for example, a mobile device/on our mobile phone and treat this application as a native one. Basically, PWA is closing our web application in the browser. I mean, close everything around the browser and make this browser be dedicated just for this single app. And this allows us to create the shortcut on the desktop and treat this as a native one.

So basically, PWA is a way we write the application and AMP is what we use to write an application. This is the main difference I found.

Olga

So the PWA application looks like a native app, right?

Tommy

Yes, exactly. So this is the key point. It looks almost like a native app, but it's still a web application.

Olga

So regular user will not find differences.

Tommy

Well, it depends. It depends on the specific functionalities. If we are talking about some really simple functionalities that aren't related to, for example, mobile native apps, everything that we can close in a web browser. Yeah, the user should not spot the difference. It should be used the same as a native app.

What is the difference in functionality? Why can’t we use PWA’s only?

Olga

But you said that there is a difference in functionality, right? So we can't use only PWA?

Tommy

Well, it depends on our needs and the customer needs. Because if you just want to display your web application, if you want to display it, well, looking on the mobile, you may use, for example, all the responsive web design techniques to scale it and make it looks good on all of the devices. And you do not have to make it “feel native”. If your functionalities aren't related to native functionalities of the device, of the tablet or of the mobile, but you want to give this “native feeling'', you can probably decide to use PWA. Because you can offer this “native feeling'' without a lot of effort.

If you want to use the native functionalities or some android dictated functionalities or iOS dedicated functionalities, you probably should think about using something that creates the native app. For example, as a front end developer, my natural choice will be React Native, because this helps me to ride the single code base and deliver the application available on two platforms - on iOS and on Android. Everything depends on the customer needs, on the business analysis and strategies, and obviously on the estimations, the list of functionalities, contents, users... There are a lot of small bricks that create the whole picture.

How to choose technology for your business?

Olga

And now the main question of today's interview, how to choose the technology for my business?

Tommy

The answer is simple. Choose wisely. That’s the key to improve your business. No, just kidding. It's a really hard question. As I mentioned in the previous explanation, there are a lot of these small bricks that create the whole picture and the key to make a correct choice is to understand our customers needs. That's why we recommend you to use our contact forms on the web site frontendhouse.com or likims.com, because we've got really great specialists, with nice experience, that can translate your problems, your ideas to correct measured solutions, especially for you. So I really recommend you to check our page and contact us. You don't need to search or google, just check this link.

Olga

You can always contact us and ask our experts.

Tommy

Exactly. Trying to answer your question... Nowadays a lot of users have laptops, but they've also got smartphones. And most of the traffic is coming from smartphone users, smartphone browsers. So it's really obvious that our web applications should be adjusted to those users because these are like maybe half of the market. I don't have statistics in front of my eyes, but I believe it's a really big number. So we cannot avoid them, we cannot ignore them. We cannot say that our application is only for desktop because we will use a big database, a big portion of our users and potential customers.

Measuring our needs is another step, because as I mentioned before, sometimes we just want to display something looking nicely on the mobile. Sometimes we want to add this native feeling, but sometimes we want to extend all of this and to use the native functionalities from the device. So in terms of Progressive Web Application and Accelerated Mobile Pages, let's focus on AMP for a while.

To Accelerated Mobile Pages this framework helps us to build really nice-looking websites that are fully responsive. So it means they work great on all of the devices, on all of the resolutions and the only thing we need is a browser. This set of web components helps us to deliver a highly performance solution for the mobile and desktop without putting a lot of effort to adjust all of this. This has been delivered out of the box, so that's great and it's really easy to implement.

So for all of the developers who are watching us, using AMP is as simple as including the script of the AMP. For example, from the CDN and use their tags where the attributes are almost the same as in HTML5. So it's really easy. But moving forward, AMP will be a good choice for those who want to give a really nice touch over the mobile and deliver a well-performed application.

Progressive Web Application is something that could extend this by adding this native feel layer, so you will have shortcuts on your desktop. You can treat this application as a native one. You can implement some service workers to have “multi threats”, simulated multi threats to handle different jobs. You can save the state of the database somewhere in the AsyncStorage on the device memory. You can use this and you can work offline with the application. So these benefits will give you this feeling of the native app without even writing and a native app.

And if you want to deliver, let's say the video conference application. So video chat with some functionalities, including sending messages, have your own profile and play with the data. If you want to use more advanced functionalities like camera, geolocation, GPS, any kind of that features, probably you might want to think about React Native or any other technology that helps you to build the native app. But if your main target is just a browser user, probably you may want to think about the PWA and AMP framework. From my experience, it will serve you.

Olga

Do you have some examples? For example, AMP is perfect for new services and PWA is...

Tommy

I think I do not have a real-life example, but I can use my imagination for a while. Accelerated Mobile Pages will be a good framework for those who want to deliver, let's say, a mobile-first experience, but still want to have a well-working desktop version. And for those who want to have a web application instead of a native one and want to have a really fast working app. So it can be dedicated for e-commerce, for newsletters, for any other informational service.

AMP with functions of PWA: how does it work?

Olga

And what about AMP with functions of PWA? As I know there is an option to do that.

Tommy

Sounds like inception. No, just kidding. Obviously, it's possible, as I've mentioned before, AMP is like a framework, a set of UI components, so you can use it in a web application and it doesn't recognize if it's PWA or it's not. So you can use AMP in PWA. To be more precise, you can build a mobile-first web application that will be really well performed and really fast, and close this into PWA functionalities so you can give this native touch over your web app to make it look almost native and to make it work really fast with the AMP framework.

Which technology do you prefer?

Olga

Do you have one favorite technology or you don't have the one beloved? Which one would you choose? PWA or AMP or AMP with functions of PWA?

Tommy

Yeah, I got it. I do not have a beloved technology. To be honest, I always try to listen to our client or customer and understand his or her needs. This is the first step. I have no experience with AMP, like the commercial one, but I've got experience with Progressive Web Application and I can highly recommend it. Think about the mobile if you want to have a web application. Think about mobile, but it's not necessary to be a PWA to be honest. If you want to give this native feeling to the user, you can think about it, but the most important thing is to make our web app work on mobile and make it work well. So it needs to look good and cover the functionalities we want to have. So probably AMP will be something that I could think about if we want to use it or not.

Is PWA development much more difficult than AMP?

Olga

Tommy, please tell me, is PWA development much more difficult than AMP? Does it take much more money, much more time?

Tommy

Implementing PWA is actually not so hard, it's not so complex, it doesn’t require a lot of effort to achieve at least the basic version of the PWA. We need to write some configuration, I mean to let the browser know that this is the PWA and we can, you know, add shortcuts on the desktop. In terms of the AMP, this is something completely different because it's not only about the configuration. AMP is about using the library because this is the framework. This is the framework, so it has its own rules, its own patterns, it contains its own elements that we need to learn at first to be able to use it. I believe you need to put more effort to start using AMP than to start using PWA.

Olga

How time flies. We have to finish our interview, unfortunately. Thank you for watching. You can always check other videos on our channel and...

Tommy

Yeah, check our socials.

Olga

Check our content and join our network on Facebook, Instagram, Twitter. See you next time. Thank you so much.

Tommy

Thank you, see you. Bye-bye.