Progressive Web Apps Development

Version 0.1.5 : 2019-07-12, 10:59:16

Work in Progress

Site Menu



“The Stack,” is no longer about operating systems, specific web servers, backend programming languages, or databases

The JAMstack is not about specific technologies. It’s a way of building PWAs that delivers better performance, higher security, lower cost of scaling, and a better developer experience

JAMstack Is a web PWA Development Architecture based on web browsers running JavaScript, reusable APIs, and Markdown

Pre-building and distributing apps ahead of time is the core concept behind JAMstack. It’s an idea borrowed from mobile development where apps are prebuilt and optimized ahead of delivery

Projects are built with the JAMstack if it meets three key criteria

  • JavaScript - Dynamic programming in the web browser is done by JavaScript

  • APIs - All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services.

  • Markdown - Markdown is compiled into HTML at deploy time

Best JAMstack practices are

  • Entire PWAs on an ADN

  • Atomic deploys

  • Instant cache invalidation

  • Everything lives in GitHub

  • Automated builds

  • JAMstack is for PWAs, blogs, documentation, brochureware, and large scale projects

JAMstack Workflow

JAMstack Web

  • Building and hosting are decoupled

  • Loose coupling improves development and debugging,

  • A user requests a page. The file is already compiled and gets directly served to the browser from an ADN: Application Delivery Network

  • Core updates are pushed through Git. The site gets entirely re-built

  • Content updates are handled by the service workers

  • Pre-building and distributing apps ahead of time is the core concept behind the JAMstack, a modern approach to web applications

Traditional Workflow

Traditional Web

  • Building and hosting are coupled

  • A user requests a page. The file gets rendered and served following a series of interaction betweens database, servers, browser, and layers of caching

  • Core updates are pushed to production servers

  • Database must be maintained or updated

  • Content updates are pushed through traditional CMS: Content Management Server, like WordPress or Drupal

Bottom Line

Users must wait for pages to build on the fly in traditional workflow. They do not wait in the JAMstack workflow. Maximizing the user experience is about minimizing the wait time before the user can begin using the PWA. Nothing beats pre-built files served over an ADN