HN PWA

Hacker News readers as Progressive Web Apps

A spiritual successor to TodoMVC

TodoMVC has helped thousands of developers select an MV* framework for their JavaScript applications. However, the web ecosystem has evolved in the past few years allowing us to build powerful applications using modern browser capabilities.

To provide developers with examples, we collected a list of unofficial Hacker News clients built with a number of popular JavaScript frameworks and libraries. Each implementation is a complete Progressive Web App that utilizes different progressive technologies to provide a fast, reliable and engaging experience.

Our implementations aim to follow a loose specification. They are primarily a learning tool and should not be used to compare the performance of one PWA to another. They can differ based on server infrastructure, performance patterns used and other factors.

React HN

kristoferbaxter/react-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
2.7s
Interactive (Faster 3G):
2.3s
Framework/UI libraries:
React, React Router
Module bundling:
Webpack
Service Worker:
Application Shell with OfflinePlugin
Performance patterns:
HTTP/2 with Server Push, Brotli and Zopfli static assets
Server-side rendering:
Yes
API:
In-memory cached Hacker News Firebase API
Hosting:
Webfaction + Cloudflare
Author:
Kristofer

React HN

insin/react-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
6.2s
Interactive (Faster 3G):
4.0s
Framework/UI libraries:
React, React Router
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with Workbox
Performance patterns:
PRPL, route-based chunking
Server-side rendering:
Yes
API:
Hacker News Firebase API + Node-hnapi (unoffical)
Hosting:
Google App Engine
Other details:
Asynchronously loaded routes
Authors:
Jonny Addy

Preact HN

kristoferbaxter/preact-hn

Lighthouse:
93/100
Interactive (Emerging Markets):
2s
Interactive (Faster 3G):
1.7s
Framework/UI libraries:
Preact, Preact Router
Module bundling:
Webpack
Service Worker:
Application Shell with OfflinePlugin
Performance patterns:
HTTP/2 with Server Push, Brotli and Zopfli static assets
Server-side rendering:
Yes
API:
In-memory cached Hacker News Firebase API
Hosting:
Webfaction + Cloudflare
Author:
Kristofer

Svelte Hacker News

sveltejs/svelte-hackernews

Lighthouse:
73/100
Interactive (Emerging Markets):
2.5s
Interactive (Faster 3G):
2.2s
Framework/UI libraries:
Svelte
Module bundling:
Rollup
Service Worker:
Application Shell + data caching
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Now
Author:
Rich

Vue Hacker News 2.0

vuejs/vue-hackernews-2.0

Lighthouse:
93/100
Interactive (Emerging Markets):
2.9s
Interactive (Faster 3G):
2.4s
Framework/UI libraries:
Vue, vue-router, Vuex
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with SWPrecachePlugin
Performance patterns:
Server-side data pre-fetching, preload/prefetch resources
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Now
Other details:
Inlined CSS used by rendered components
Author:
Evan

Angular HN

housseindjirdeh/angular2-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
6.0s
Interactive (Faster 3G):
4.4s
Framework/UI libraries:
Angular
Scaffolding:
Angular CLI
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with sw-precache
Performance patterns:
Lazy loaded modules
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase
Author:
Houssein

Viper-news

WebReflection/viper-news

Lighthouse:
91/100
Interactive (Emerging Markets):
1.9s
Interactive (Faster 3G):
1.5s
Framework/UI libraries:
viperHTML
Module bundling:
Browserify
Service Worker:
Application Shell + data caching
Performance patterns:
Asynchronous Partial Outputs
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Google App Engine
Author:
Andrea

Polymer HN

Polymer/hn-polymer-2

Lighthouse:
92/100
Interactive (Emerging Markets):
2.2s
Interactive (Faster 3G):
1.8s
Framework/UI libraries:
Polymer
Scaffolding:
Polymer CLI & Polymer Starter Kit
Module bundling:
Polymer-build with HTML Imports
Service Worker:
Application Shell + data caching with sw-precache
Performance patterns:
PRPL, code-splitting for granular loading
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase functions over HTTP/2 with Server Push + edge-caching
Other details:
Route-specific pushing
Authors:
Dan Kevin Steve

Mithril HN

chimon2000/mithril-hn

Lighthouse:
91/100
Interactive (Emerging Markets):
4.9s
Interactive (Faster 3G):
4.2s
Framework/UI libraries:
Mithril, typestyle
Module bundling:
fuse-box
Service Worker:
Application Shell
Performance patterns:
HTTP/2 with Server Push
Server-side rendering:
None
API:
Node-hnapi (unofficial)
Hosting:
Firebase functions over HTTP/2 with Server Push + edge-caching
Author:
Ryan

HNPWA with Vue.js

codebusking/vue-hn-pwa-guide-kit

Lighthouse:
91/100
Interactive (Emerging Markets):
5.1s
Interactive (Faster 3G):
3.9s
Framework/UI libraries:
Vue, vue-router, vue-pwa-boilerplate, firebase-hackernews
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with SWPrecachePlugin
Performance patterns:
Server-side data pre-fetching, preload/prefetch and lazy loading for rest of routes
Server-side rendering:
Yes
API:
Hacker News Firebase API via firebase-hackernews
Hosting:
Now
Author:
Jimmy

HNPWA with Next.js

codebusking/next-hnpwa-guide-kit

Lighthouse:
91/100
Interactive (Emerging Markets):
3.3s
Interactive (Faster 3G):
3.0s
Framework/UI libraries:
Next.js, Preact, firebase-hackernews
Module bundling:
Webpack
Service Worker:
Application Shell + data caching with Workbox
Performance patterns:
Server-side data pre-fetching, preload/prefetch
Server-side rendering:
Yes
API:
Hacker News Firebase API via firebase-hackernews running on service worker
Hosting:
Now
Author:
Jimmy

HNPWA with Nuxt.js

nuxt/hackernews

Lighthouse:
91/100
Interactive (Emerging Markets):
3.8s
Interactive (Faster 3G):
3.5s
Framework/UI libraries:
Vue, Nuxt, PWA Module
Module bundling:
Webpack
Service Worker:
Workbox
Performance patterns:
PRPL, Prefetch/Preload JS + DNS + Data, Critical Path CSS, Server Side Caching
Server-side rendering:
Yes
API:
Hacker News Firebase API
Hosting:
Now + CloudFlare CDN
Authors:
Pooya Sebastien Alexandre

Submit your Hacker News Progressive Web App

If your Hacker News implementation meets the specifications, feel free to submit a summary of it here! HNPWA serves as a reference for building PWAs with different libraries so the more examples we have the better. Don't worry if there's already one with the same UI library or framework as yours.

SUBMIT