Long-distance relationships often involve frequent flights. During these flights, the idea of catching up on Reddit becomes appealing. Instead of searching for an offline Reddit app, I decided to build my own, showcasing modern web technologies and a "buildless" development approach.

This post celebrates innovative web developers and their contributions. While not a step-by-step tutorial, the complete code is available on GitHub.

The goal is a Reddit reader, minimizing tooling and dependencies. We'll utilize:

• LitElement: A lightweight, easy-to-use component model leveraging web components.
• @vaadin/router: A compact router with a great developer experience.
• @pika/web: Simplifies module management during development.
• es-dev-server: A straightforward dev server (though any HTTP server works).

We'll also leverage browser standards: ES modules, web components, import maps, KV storage, and service workers.

Dependency Installation:

npm i -S lit-element @vaadin/router
npm i -D @pika/web es-dev-server

Add a postinstall script to package.json:

"scripts": {
  "start": "es-dev-server",
  "postinstall": "pika-web"
}

Pika: Streamlining Dependencies

Pika (by Fred K. Schott) simplifies web development, installing dependencies as individual JavaScript files in a web_modules/ directory. This simplifies the process and avoids complex build configurations. The output resembles:

<code>└─ web_modules/
    ├─ lit-element.js
    └─ @vaadin
        └─ router.js</code>

Import Maps: Resolving Bare Specifiers

Our index.html includes an import map to handle bare module specifiers:

<script type="importmap">
  {
    "imports": {
      "@vaadin/router": "/web_modules/@vaadin/router.js",
      "lit-element": "/web_modules/lit-element.js"
    }
  }
</script>
<reddit-pwa-app></reddit-pwa-app>

reddit-pwa-app.js:

import { LitElement, html } from 'lit-element';

class RedditPwaApp extends LitElement {
  render() {
    return html`<h1>Hello world!</h1>`;
  }
}

customElements.define('reddit-pwa-app', RedditPwaApp);

Import maps solve the bare module specifier issue, enabling browser compatibility without complex build processes.

Service Workers: Offline Functionality

To enable offline access, we implement a service worker (sw.js) registered in index.html:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('./sw.js');
  });
}

The service worker pre-caches assets, ensuring offline functionality. Pika simplifies this by providing a clear list of assets. (See GitHub repo for sw.js details).

KV Storage: Offline Data Persistence

For saving posts offline, we use KV storage, a built-in module layered on top of IndexedDB. It offers asynchronous operations and improved performance over localStorage. A polyfill is used to ensure broader browser support. (See GitHub repo for implementation details).

Polyfilling with Import Maps

The KV storage polyfill (kv-storage-polyfill) is included and managed through the import map, providing a fallback mechanism if the native KV storage isn't available.

Conclusion

This project demonstrates building a functional PWA with minimal dependencies, highlighting the benefits of modern web standards and a buildless approach. While alternative build tools exist, this method prioritizes simplicity and ease of access. The GitHub repository provides the complete codebase for further exploration. Feedback and discussion are welcome on Twitter (@passle_ or @openwc) and open-wc.org.

Acknowledgements:

Special thanks to Guy Bedford (es-module-shims), Luke Jackson ("Don't Build That App!"), Benny Powers, and Lars den Bakker for their contributions.

The above is the detailed content of Going Buildless. For more information, please follow other related articles on the PHP Chinese website!