Building a Fast Progressive Web Application (PWA) With JAMstack

November 21, 2019 0 Comments

Building a Fast Progressive Web Application (PWA) With JAMstack

 

 

Ever since mobile and tablet internet usage exceeded desktop back in November 2016 mobile users have been in focus of many businesses. With internet trends shifting to more app usage, they needed a way to bring that app like user experience that sparks engagement to their websites.

The solution came with Progressive Web Apps (PWA). This rather new approach changes how users interact with the website and with the brand for that matter.

What are Progressive Web Apps?

Simply put PWA’s are somewhere in between a website and an app. Instead of pushing users to download your app, PWA’s allow you to bring that app-like experience to the website through the user’s web browser.

Sign up for the newsletter today and receive valuable, in-depth JAMstack & PWA tips, tricks, and case studies.

From a technical point with PWA being based on HTML downloaded from a typical WWW server, there is no hustle of adjusting it to a different phone and/or OS versions.

Obviously, PWA’s provide mobile-app experience, which means you can play with users engagement much more by giving them more functionality. Not only that! You can also browse the content even when you are offline.

With PWA’s you are able to push notifications which can greatly increase engagement of your audience. Finally, because it caches data, everything is incredibly fast. No worries about users leaving when waiting for content to load since there is no time to load.

JAMstack PWA

Before we delve into the subject a bit more keep in mind this post isn’t a case study - just a quick walk through of our thoughts from the experience of building PWA with the JAMstack approach.

What we built (general needs/requirements/purpose of the app)

While the app that we were building had to have standard features like blog and lists of products, the main focus was to build a community around its specific topic. We wanted to allow users to interact with every aspect of the websites (and with each other), via articles comments, product reviews, and advanced Q&A section (which is closer to a forum than a standard FAQ page).

So, the main functionalities of the app are the blog, list of products and community panel. Blog, packed with tons of articles, had all the standard features and functionalities combined with comments system. For products, except from informational aspects we wanted to give users the ability to leave reviews. Community panel is a place where user can start threads, asks questions, get information about everything they want.

Why is JAMstack here?

Building an app in a “traditional” way meant we would need to develop a separate app for Android and iOS, care about servers for our API, databases, hosting etc. We opted out for JAMstack here because quite simply it was the best approach for this project allowing us to:

  • integrate 3rd party services, and create our own in the cloud
  • keep content as much as possible in the headless CMS
  • use JavaScript on front-end and back-end On top of these three, we were able to minimize hosting cost by using Netlify. Yep, we got our app hosted like any other static sites. Cool, don’t you think?!

What frameworks and services did we use and why?

Thanks to the modern tools we used we were able to get the best performance, low costs of build and great scalability. For blazing-fast websites, blog and product list we use static sites generators and headless CMS.

As for user handling and the rest? Lucky for us, the modern web has a great solution - serverless. Yay, build a web-app without worrying about servers!

pwa stack

Next.js

We’ve decided to use Next.js to build our app. Next.js is a framework for server rendered React applications with many great out-of-the-box solutions. You don’t have to think about configuration, webpack, routing even code-splitting. It also offers export to static pages so we can deploy our app statically on services like Netlify.

Contentful

For managing static content, articles and products, we used Contentful. It’s battle-tested headless CMS, highly configurable and easy to use by developers and editors. With combination Next.js + Contentful we were able to create an amazing static website experience. Next.js app is exported to static files and during the build time it fetches all entries from Contentful and exports our pages filled with content. Thanks to it we managed to reduce sending requests to minimum and increased overall app performance.

AWS

Like I said before, our app needed to be an app… not just a blog. We needed to give it life, and we did it with serverless. We decided to go with AWS. It offers everything that we needed. What to store users images? Use Amazon Simple Storage Service, Amazon S3. Add users to your app? No problem, select Cognito. Need a database - here it is DynamoDB. Ah, you want to use GraphQL to reach your data - use AppSync. Finally, we need to perform some advanced operations on server-side - feel free to use Lambda. See? Just use what is needed, and pay for what’s used.

Netlify

Netlify offers hosting and serverless backend services for static websites. It boosts most of our projects and it’s great that we can use it for our PWA too. Continuous integration and continuous deployment services, free SSL, automatic branch deploys - those and more features makes netlify our #1 in terms of hosting.

Algolia

The last 3rd party service we added to our app was Algolia. Adding search ability to our app was immensely important as it gives our users the ability to quickly find content of their interest. We managed to connect Contentful and DynamoDB with Algolia using one serverless function so every new entry (like article, product, question etc.) is indexed and immediately available for the users.

Tricky parts

Like with any ambitious app build there were some hard parts too. First of all, our app isn’t planned to be a simple blog in which we rely on content in our headless CMS, passed on build time via API. We wanted to include as much user content as possible in our static pages. Why? It increases overall performance and engagement of the app and it improves SEO as unique users content is indexed by the search engines.

The goal was for visitors not to see loading indicators when comments, reviews or other data stored in database is downloading. We wanted to deliver the content to them in an instant with everything included in the page they receive.

Ok, so how did we manage to make a static app with dynamic content? Well, our app doesn’t rebuild after every new comment or a review. This was not acceptable simply because that way new comments would not appear instantly but only after the rebuild. We’ve overcome this by making our app both static and dynamic.

On build time all available user content is included into a static page. When the user opens an article page, app is checking if it has all available comments for this article. If not it updates comments with new ones - a simple but powerful approach. Comments added before the page build are statically added to the pages, but those added after the build are fetched when rendering the page on the client side.

Next.js configuration

We wanted to have all of the Contentful content on build time, to have no need to fetch data from CMS on the client side so that switching between pages is ‘blazing fast’. By default fetching data form, CMS in getInitialProps inside next pages caused fetching content from CMS when user opens a page. We managed to show content without reaching to Contentful by downloading all CF data on build time, storing it in JSON files and getting the data the page needs from local files. All this made pages incredibly faster.

Thanks to Next.js code-splitting and thoughtful code writing, generated .js files contain only the content user sees on the current page. Another performance boost by loading a needed part of the app.

Benefits of JAMstack build PWA

Considering all the benefits the hype around PWA’s seams well deserved. Going full JAMstack in this project gave us all the benefits JAMstack has to offer as well:

  • Great performance - as most of the content is static, exploring the app is incredibly fast.
  • Low costs - hosting on Netlify is really cheap and by using many “as-a-services” we pay only for what is used.
  • Scalability - it’s another benefit we get from using many “as-a-services” it grows with our app. PWAs are great for when you want to move web-apps to mobile devices. Especially if you care about users engagement and you want to keep them on top with your content.

Need a fast PWA for your business? We can help with that.

BOOK A MEETING today and learn more about what we can do for you and your business.


Tag cloud