Work in Progress
Version 0.1.14 : 2019-08-23, 10:00:47
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 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
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
Network Independent - PWAs can work when the network is unreliable, or even non-existent
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:
Interactive with a feel like a native app’s
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
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 browsere 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
The product of the architecture is a presentation quality web site written using JAMstack.
Netlify-web is notified of the commit to the shared repository, compiles the web site, and deploys it to the Internet.
“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
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
Entire PWAs on an application delivery network
Instant cache invalidation
Everything lives in GitHub
JAMstack is for PWAs, blogs, documentation, brochureware, and large scale projects
Defines the content and structure of web pages
Specifies the layout and style of web pages
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.
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
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.
Defines the content and structure of web pages
Specifies the layout and style of web pages
Controls the behavior of web pages
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
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
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
HTML code is generated server side
Extensible by plugin ecosystem
Configured Webpack based build system
Automatic routing based on the directory structure.
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.
Gatsby compiles high performance PWAs, supports modern development frameworks, and connects to Application Delivery Network
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.
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.
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 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 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
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.
John at johntelford dot com
© 2019, Built with asciidoctordev.com and a cast of creative APIs and apps
Web sites I’m building, maintaining, and deploying
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.
A web site about the results of a technology deep dive to understand Asciidoctor technology enough to create an architecture for developing web sites
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.
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.
An opinionated tech talk blog