pwadev

Progressive Web Apps
Development

Work in Progress - Version 0.1.19 : 2019-09-05, 13:01:21

Abstract

This site is about a deep dive into Progressive Web Apps (PWAs) technology to gain an understanding and figure out a PWA development architecture.

It is not about the nuts and bolts of how to create PWAs, but about a PWA development architecture and technologies used to create them.

If the industry vibes are correct, the way web apps are developed and deployed is changing. Facebook, Instagram, React, Airbnb, CNN, Dropbox, Netflix, and The New York Times, are just a few of the major brand names using PWA technologies in their products.


Progressive Web Apps

Progressive Web Apps are a methodology that is a combination of technologies to make powerful web applications. Major browser vendors are working together to improve how web sites are built, and have created a new set of features that give web developers the ability to create fast, reliable, and engaging websites. PWAs also have these attributes:

Some Advantages

  • PWAs are built using Web Standard Programming Languages and run in web browsers supporting the same languages. They are not tied to specific devices or operating systems. They display seamlessly and identically on all devices, including desktop, mobile, tablet, or whatever comes next.

  • PWAs help speed up web sites response time. More than 50% of Internet users use smartphones and tablets to cruise the web. Most of them expect something useful on the screen in 3 seconds or less, before they abandon a site.

  • A traditional website forces users to wait while the web browser is busy making requests to web servers over the Internet to load web page components. A PWA gets web page components quickly from a cache.

  • PWAs can work when the network is unreliable, or even non-existent. PWAs continue to work normally. When requests are made to the Internet during this time, they are put in a queue and processed when an Internet connection return.

  • PWAs are able to work completely offline, have nearly instant load times, are secure, and resilient to unreliable networks. Most modern browsers already have these features built into them, they only need to be used.

  • PWAs use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. PWAs have some more advantages:

    • Discoverable - PWAs are discoverable using Search Engines, and when a user gets to a site which has PWAs capabilities, the browser in combination with the device asks the user if they want to install the app to the home screen.

    • Installable - The relevant web standard here is the PWA manifest, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens.

    • Linkable - One of the most powerful features of the PWA is to be able to link to an app at a specific URL — no app store needed, no complex installation process.

    • Network Independent - PWAs can work when the network is unreliable, or even non-existent.

Game-Changer

PWAs are not created with a single technology. They are apps built to run in web browsers. They are developed using technologies and standards of both web and native apps. They are:

  • Responsive

  • Connectivity-independent

  • Interactive with a feel like a native app’s

  • Always up-to-date

  • Safe

Native apps from App Stores are tied to specific devices or operating systems and offer a seamless experience for the users. They work offline, and users tap home screen icons to run them, rather than navigating to a web site using a browser.

PWA technologies enable creating web apps that have native app advantages. They deliver an experiences like native apps using browsers. They feels like a native apps. PWAs are built for the web, they are not tied to specific devices or operating systems. They display seamlessly and identically on all devices, including desktop, mobile, tablet, or whatever comes next.

Are PWAs Worth Doing?

I think they are. With a relatively small amount of effort required to implement the core PWA features, the benefits are huge:
Fast

Users web experiences are not limited by Internet, servers, or web page rendering engine speeds. It is only limited by the speed of web browsers running on user devices.

Web Standard Programming Languages

PWAs are programmed using Web Standard Progrmming Languages. PWA compilers puts all the bits and piece together necessary to make complete PWAs that run in web browsers. PWAs work because they are built using the same Web Standard Progrmming Languages as browsers. PWAs are independent of device hardware or operating systems.

Interoperability

PWAs fit any form factor: desktop, mobile, tablet, or whatever is next. Native apps suffers from a lack of interoperability.

Service Workers

Service workers are key to PWAs. They enable PWAs to load instantly, regardless of network quality. They also keep PWAs up-to-date by serving the user with the newest content upon launch. PWAs are designed to work offline and in areas of low Internet connectivity. The user is able to save them to their home screen to access them at any time, just like native apps. There is no need for app stores.

Safe

Served to browsers using HTTPS prevents snooping and ensures the content hasn’t been tampered with. They are also secure because there is little opportunity for exploit because they run in browsers on user devices, independent and isolated from all other browser activity.

Cohesive Experience

Using web browser technology means they work on platforms with browsers built with Web Standard Programming Languages, and independent of operating systems. PWAs look, play, and perform the same on all devices. Users will have a cohesive experience on any device they choose to launch the app on.

Bright Future

The technology has a bright future as it further developes and evolves into new and improved technologies that continue to abstract the PWAs ecosystem.

Required Skills

Building PWAs requires skills building web sites using Web Standard Programming Languages


PWA Development Architecture

This site was originally crafted using Markdown and the Gatsby PWA compiler.

It has been recast using the asciidoctordev.com development architecture I’ve built.

I am experiencing AsciiDoc syntax is more concise than Markdown and offers power and flexibility without requiring the use of HTML. AsciiDoc syntax was designed to be extended as a core feature, Markdown was not.

Checkout the asciidoctordev.com development architecture and you will see Ruby Gems are the compiler.

I enjoy using Gatsby. It can pull data from anywhere. Hopefully some creative person will make an AsciiDoctor Gatsby plugin using AsciiDoctor.js JavaScript which can be run on any JavaScript platform, and of course in a web browser.

pwadevarch

The product of the architecture is a presentation quality web site written using JAMstack.

The Web Standard Programming Languages source files written with the VScode editor are compiled to HTML and JavaScript by Gatsby, and frequently viewed in a web browser during editing sessions. The files are stored in the local repository for safe keeping, and then committed to the GitHub shared repository when ready for publishing.

Netlify-web is notified of the commit to the shared repository, compiles the web site, and deploys it to the Internet.


JAMstack

“The Stack,” is no longer about operating systems, specific web servers, backend programming languages, or databases. Pre-building and distributing apps ahead of time is the core concept behind the JAMstack.

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:

JAMstack practices

  • 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.

  • Entire PWAs on an application delivery network.

  • Atomic deploys.

  • Instant cache invalidation.

  • Everything lives in GitHub.

  • Automated builds.

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

PWAs are built to run in web browsers supporting Web Standard Programming Languages. PWAs and web browsers use the same Web Standard Programming Languages enabling PWAs to run entirely in browsers on user devices independent of device hardware or operating systems.


Web Standard Programming Languages

HTML Web Site

Defines the content and structure of web pages

CSS

Specifies the layout and style of web pages

JavaScript

JavaScript is one of the most popular programming languages. It is used widely in backend servers, and for controlling the behavior of browser web pages. The diagram above show JavaScript is central to the PWAs ecosystem. Dynamic programming in the web browser is done by JavaScript.

Markdown

Markdown is a better way to write HTML. It is compiled into HTML at deploy time. Markdown is a lightweight markup language that is used to add formatting elements to plaintext text documents. Markdown is now one of the world’s most popular markup languages. Using Markdown is different than using a WYSIWYG editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn’t like that. When you create a Markdown-formatted file. Markdown syntax is added to the text to indicate which words and phrases look different.


Components

JavaScript
  • Is a web standard programmaning language. It controls the behavior of web pages running in browsers. It is a primary ingredient for PWAs development ecosystems.

  • JavaScript and Java are completely different languages, both in concept and design. JavaScript was invented by Brendan Eich in 1995.

  • It has matured since its humble beginnings. It is a programming language that was created at Netscape as a scripting tool to manipulate web pages inside their browser. JavaScript performance has increased from its humble beginnings. JavaScript engine performance increases when major development teams strive for better browser performance.

  • It is one of the most popular programming languages, widely used in browser and bankend servers. The rise of Node unlocked backend development, once the domain of Java, Ruby, Python and PHP and more traditional server-side languages.

  • JavaScript started as a scripting tool for browsers. It is now being used in mobile apps, TV sets apps, embedded applications, and much more are using JavaScript. It is the only scripting language that is is supported by modern web browsers.

  • It is one of the Web Standard Programming Languages.

Node

Is a JavaScript runtime environment. It is an open-source, cross-platform, asynchronous event driven, JavaScript runtime environment. One thing Node does is create Node Programming Modules which can be added to the Npm package manager.

React

Is an open-source JavaScript library for building user interfaces. It is developed and supported by Facebook. It uses JavaScript and Node Programming Modules to create User Interface Components

Gatsby

Is a React program. It compiles PWA programs written in combinations of Web Standard Programming Languages JavaScript, HTML, CSS, and Markdown, and uses Node programming modules, Gatsby API Plugins, and React components into PWAs.

  • Built for Speed
    Gatsby builds high performance Progressive Web Apps. Users web experiences are not limited by the speed of server rendering engines or by the speed of the Internet. Speed is only limited by the speed of web browsers running on user devices, because the PWA is totally running in the browser.

  • Data
    Gatsby has a rich data plugin ecosystem enabling building Progressive Web Apps with data from one or many sources such as headless CMS, SaaS services, APIs, databases, file systems, etc, is read during compile time using GraphQL and and is compiled into the app.

  • PWA
    Gatsby is a static Progressive Web Apps compiler. When the PWA starts loading into users browsers, code and data loading is split. Gatsby loads only the critical HTML, CSS, Data, and JavaScript so the site loads as fast as possible, and becomes usefull to users. Once loaded, Gatsby pre-fetches resources for other pages so clicking around the Progressive Web App site is fast.

  • Internet Scale
    It doesn’t need complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling problems. Gatsby compiles to a single Progressive Web Apps HTML file which can be deployed to the Internet by several services.

  • Future-Proof
    Gatsby is a universal JavaScript framework. The future of the web is mobile Progressive Web Apps, built using the JavaScript APIs, Markdown, and JAMstack architecture.

  • Advantages

    • HTML code is generated server side.

    • Extensible by plugin ecosystem.

    • Configured Webpack based build system.

    • Automatic routing based on the directory structure.

  • Gatsby Features

    • Integrations with 120+ backends, including 15+ enterprise content systems like Wordpress, Drupal, Contentful, Contentstack, Salsify and Shopify, as well as the ability to add additional sources.

    • A React development environment, along with key plugins that provide key website features like SEO, routing, accessibility, and i18n.

    • Lightning-fast out-of-the-box performance, including both payload and delivery optimizations.

  • Summary
    Gatsby compiles high performance PWAs, supports modern development frameworks, and connects to Application Delivery Network.

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Visual Studio Code

Is a lightweight open source code editor which runs on desktops and is available for Linux, macOS, and Windows. Many extensions are available, and Git is built in. It can be Central Command for creating, testing, maintaining, and deploying web sites. It may be the best text editor in years.

GitHub

Is a web hosted repository for Git projects. It helps software teams collaborate and maintain the entire history of a projects code changes. Developers can view history of changes and go back to a previous version. It helps answer the questions who changed what, when, where, and why?.

Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Netlify

Netlify providing everything needed for continuous deployment of PWAs including a global Application Delivery Network. As content gets updated, it’s automatically built by Netlify’s bots before being deployed worldwide to every major cloud provider.


About

I am a computer systems architect and electronics engineer with decades of passion pursuing what’s new and improved within the computer and electronic industries.

These industries are probably the fastest changing endeavors mankind has ever created. The half life of many computer and electronic products making it to market is relatively short. There are some very short lived ones and some that were just vapor.

Checking out what’s new or not, what’s real or not, or what’s new and improved, in the computer and electronic industries, is something like panning for gold. Buried within the mountains of info rubble produced daily by the industries, every so often one finds nuggets making the effort worthwhile.

One such nugget is Progressive Web Apps.


Contact

mugShot

John at johntelford dot com
Portland, Oregon

© 2019, Built with asciidoctordev.com and a cast of creative APIs and apps


Web Sites

Web sites I’m building, maintaining, and deploying

johntelford.com

JohnTelford.com LLC is an Internet consulting company specializing in working with companies on hardware, software, and methodologies for developing, deploying, and maintaining web site designs.

asciidoctordev.com

A web site about the results of a technology deep dive to understand Asciidoctor technology enough to create an architecture for developing web sites

photonjohn.com

Displays selected photographs shot over the years and processed using Adobe Lightroom. The selected photos are uploaded to Adobe servers where they are organized into galleries ready for display on the web. The web site is a front end to the galleries.

pwadev.com

Is about a deep dive into Progressive Web Apps (PWA) technology to gain an understanding and figure out a PWA development architecture for creating the web site. It is not about the nuts and bolts of how to create a PWA, but about the PWA development architecture and technologies used to create sites.

techtalkjohn.com

An opinionated tech talk blog

The core technology tools used to build, maintain, and deploy these web sites are Git, GitHub, Netlify, and Visual Studio Code.