Static Progressive Web Apps / The JAMstack

Future-proof your website.

Don’t have your website built with last decade’s tech. The future of the web is mobile, JavaScript and APIs—the JAMstack. When we talk about “The Stack,” we no longer talk about operating systems, specific web servers, backend programming languages, or databases. Progressive Web Apps aka The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security and a lower cost of scaling.

Why not just use React?

The React Javascript framework has been impressing developers for some time. It came with so many features out of the box that no one ever saw except the guys working on Facebook’s codebase. React is smart, and analyses the changes you want to make so it applies only required changes, thus making the loading time much faster.

React with server-side rendering, looks something like this:

  • A browser requests a page
  • The server responds with static HTML
  • The browser immediately renders the page so the user can see it
  • The browser loads additional JS in the background
  • The client takes some action, like navigating to a different route
  • The browser uses the additional JS to handle this action

Development flow :

  • Describe your content in React.js Components
  • During development, write code like a boss (hot reloading, modularised code, webpack plugins, etc…)
  • Use React.js Server Side Rendering API to convert this code to static HTML content, and Javascript code, on your server.


So what’s missing?

There is the need to parse content written in another format, like blog posts written in Markdown and generate code that will not bloat the client and will efficiently serve the content to the user. Thankfully, there are a few projects that took the initiative, the clear victor of these being Gatsby.js.


How Gatsby works

Gatsby.js is a static PWA (Progressive Web App) generator that lets you build blazing-fast sites with your data, whatever the source. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

Speed past the competition – Gatsby.js builds the fastest possible website. Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimising the time to first byte, nothing beats pre-built files served over a CDN, instantly to your users wherever they are.

Higher Security – With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.

Bring your own data– Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system & more directly into your pages using GraphQL .

Scale to the entire internet – Gatsby.js is Internet Scale. Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears. Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.

 

The Best Of Both Worlds

Let’s say you have a WordPress site but are experiencing performance issues and are looking for a more modern web site.

If you want to keep using the WordPress’ Admin UI  to maintain your content, we can use WordPress as a backend, where clients can edit their content without the worries of insecure plugins or other methods of being hacked.

Using GatsbyJS with its “Bring Your Own Data” strategy makes perfect sense. Using the gatsby-source-wordpress plugin, we can pull in data and build a totally secure website with some pretty impressive gains on loading time. We’ll also sleep better at night knowing insecurities in WordPress are no longer putting clients at risk.

 

When is your website project not suitable for the JAMstack?

  • Monolithic server-run web apps that relies on Ruby, Node, or another backend language.
  • A single page app that uses isomorphic rendering to build views on the server at runtime.
  • There are gatsby e-commerce integration plugins for Shopify and Moltin, although currently, fully-featured e-commerce sites are best implemented using an alternative architecture.

How do I get started?

If you’d like to know more progressive web app development, I’d be only too happy to help.