Modern Web Applications

standardized, responsive, portable

Progressive Web App (PWA)

Progressive Web Apps provide an installable, app-like experience on desktop and mobile that are built and delivered directly via the web.

Technologies

  • Web App Manifest
  • WebAssembly
  • Data storage
  • Web Components*
  • TypeScript*
  • Modules*
* commonly not considered an exclusive Progressive Web App technology

Further reading

MDN Documentation
Tutorial by Google

Web App Manifest

The web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app.

Further reading

MDN Documentation

WebAssembly

WebAssembly is a new type of code that can run in web browsers - it is a low-level assembly-like language with a compact binary format that runs with near-native performance and can be coded in various languages.

Further reading

Overview and getting started
MDN Documentation

Data storage

Service Worker

Service workers act as proxy servers that sit between web applications and the network. They are intended to enable the creation of effective offline experiences. They will also allow access to push notifications.

Further reading and helpers

MDN Documentation
The Offline Cookbook: Implementation HOWTO for various caching strategies
Workbox (Tutorial): JavaScript libraries for adding offline support to web apps.

Data storage

Web storage and IndexedDB

Web Storage provides mechanisms by which browsers can store key/value pairs. IndexedDB provides client-side storage of significant amounts of structured data, including files/blobs.

Further reading and helpers

MDN Documentation Web storage
MDN Documentation IndexedDB
localForage: JavaScript library to simplify use of Web Storage and IndexedDB

Web Components

Web Components is a suite of different technologies allowing you to create reusable custom elements in HTML.

Further reading

MDN Documentation
Why you should use Web Components
Web Components: Recap and Latest Trends

Interesting projects related to Web Components

Open-wc recommendations on setting up Web Components
Storybook is a tool for developing UI components in isolation
Stencil is a toolchain for building reusable, scalable design systems

Web Components

LitElement makes it easy to define own Web Components

Collections

Material Web Components
Vaadin Components
Elix
Wired Elements
SAP UI5 Web Components
Others

Type Script

TypeScript extends JavaScript by adding types.

Further reading

TypeScript

Modules

Modules in JavaScript.

Further reading

MDN Documentation
ES6 In Depth: Modules
Exploring ES6: Modules