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
- 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
React HN
insin/react-hn
- 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
Preact HN
kristoferbaxter/preact-hn
- Framework/UI libraries:
- Preact
- Module bundling:
- Webpack
- Service Worker:
- Application Shell with SW Precache
- 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
Svelte Hacker News
sveltejs/svelte-hackernews
Vue Hacker News 2.0
vuejs/vue-hackernews-2.0
- 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
Angular HN
housseindjirdeh/angular2-hn
Polymer HN
Polymer/hn-polymer-2
- 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
HackerNews.io
ivanvanderbyl/ember-hackernews-pwa
- Framework/UI libraries:
- Ember.js, Ember Server Worker, Ember Web App, Ember Fetch
- Module bundling:
- Broccoli + Critical + HTMLMin + Imagemin + gzip
- Service Worker:
- Application Shell + data caching
- Performance patterns:
- Prefetch/Preload JS + DNS, Critical CSS, HTTP/2 Server Push
- Server-side rendering:
- None
- API:
- Node-hnapi (unofficial) + CloudFront
- Hosting:
- Cloudfront
Mithril HN
chimon2000/mithril-hn
HNPWA with Vue.js
codebusking/vue-hn-pwa-guide-kit
- 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
HNPWA with Next.js
codebusking/next-hnpwa-guide-kit
- Framework/UI libraries:
- Next.js, 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
HNPWA with Nuxt.js
nuxt/hackernews
HNPWA Vue
anubhav7495/hnpwa-vue
- Framework/UI libraries:
- Vue, vue-router, vue-pwa-boilerplate
- Module bundling:
- Webpack
- Service Worker:
- Application Shell with SWPrecachePlugin
- Performance patterns:
- preload/prefetch resources, client-side data preload, lazy loaded routes, dns-prefetch
- Server-side rendering:
- None
- API:
- Node-hnapi (unofficial)
- Hosting:
- Github Pages
HNPWA Firebase
davideast/hnpwa-firebase
Angular Hacker News
sebastianm/angular-hacker-news
- Framework/UI libraries:
- Angular, Angular Router, Angular HTTP
- Module bundling:
- Webpack
- Service Worker:
- Application Shell + sw-precache
- Performance patterns:
- Lazy loaded modules
- Server-side rendering:
- Angular Universal
- API:
- Firebase Hacker News API + Node-hnapi (unofficial)
- Hosting:
- Digitalocean
Next.js HN
chrisdwheatley/nextjs-hn
- Framework/UI libraries:
- Next.js, Preact
- Module bundling:
- Next.js with additional Webpack config
- Service Worker:
- Application & data caching with sw-precache
- Performance patterns:
- In memory LRU cache, DNS prefetch, preact-compat alias in production
- Server-side rendering:
- Yes
- API:
- Node-hnapi (unofficial)
- Hosting:
- Digital Ocean & Cloudflare
Zuix HN
genielabs/zuix-hn
Vanilla HN
cristianbote/hnpwa-vanilla
Glimmer HN
mhadaily/glimmer-hn-pwa
- Framework/UI libraries:
- Glimmer.js
- Scaffolding:
- Ember CLI
- Module bundling:
- Broccoli
- Service Worker:
- Application Shell + data caching with ESW
- Performance patterns:
- Prefetch/Preload JS + DNS, Critical CSS, HTTP/2 Server Push
- Server-side rendering:
- None
- API:
- Node-hnapi (unofficial)
- Hosting:
- Firebase
HNPWA with React
taehwanno/hnpwa-react
- Framework/UI libraries:
- React, React Router, Redux, Immutable.js
- Module bundling:
- Webpack
- Service Worker:
- Application Shell + data caching and offline google analytics with Workbox
- Performance patterns:
- Server-side data pre-fetching, preload/prefetch resources
- Server-side rendering:
- Yes
- API:
- Node-hnapi (unofficial)
- Hosting:
- Firebase
Angular Hacker News
alfredoperez/ngx-hn
- Framework/UI libraries:
- Angular, ngu-pwa-tools
- Scaffolding:
- Angular CLI
- Module bundling:
- Angular CLI
- Service Worker:
- Application shell generated with ng-pwa-tools and service worker from @angular/service-worker
- Performance patterns:
- Lazy loaded modules
- Server-side rendering:
- None
- API:
- Node-hnapi (unofficial)
- Hosting:
- Firebase with HTTP/2 Server Push
React HN
stephenkingsley/hackerNews-pwa
Stencil HN
ionic-team/ionic-stencil-hn-app
Ember HNPWA
mstewart6/hnpwa-ember
Next.js HN
kulshekhar/next-hnpwa
- Framework/UI libraries:
- Next.js, Preact
- Module bundling:
- Next.js with additional Webpack config
- Service Worker:
- Application & data caching with sw-precache
- Performance patterns:
- In memory LRU cache, preact-compat alias in production, CDN cache
- Server-side rendering:
- Yes
- API:
- Official API (Firebase)
- Hosting:
- Firebase
Viper-news
WebReflection/viper-news
Elm HN
rl-king/elm-hnpwa
Dojo 2
agubler/dojo-2-hn
Vanillia WebComponents
dsolimando/hnpwa-mobileelements
Preact Hacker News
malbernaz/preact-hn
- Framework/UI libraries:
- Preact
- Module bundling:
- Webpack
- Service Worker:
- Application Shell with custom worker-loader
- Performance patterns:
- HTTP/2, route based code splitting, resources preload, server-side data pre-fetch
- Server-side rendering:
- Yes
- API:
- Hacker News Firebase API on the server communicating with the client via socket
- Hosting:
- now.sh
AngularDart HNPWA
dart-lang/angular
Vanilla Web Components with Compost mixins
lamplightdev/compost-hn
MobX TS HN
eugenkiss/hnclient
React Native Web
johanholmerin/rnw-hn
HNPWA with Quasar Framework
quasarframework/quasar-hackernews
- Framework/UI libraries:
- Quasar Framework, 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
Inferno HN
aretheregods/hackerinferno
- Framework/UI libraries:
- Inferno
- Scaffolding:
- create-inferno-app
- Module bundling:
- Webpack
- Service Worker:
- Application Shell + data caching with sw-precache
- Performance patterns:
- PRPL, code-splitting for granular loading
- Server-side rendering:
- None
- API:
- node_hnapi
- Hosting:
- Firebase
- Other details:
- Route-specific pushing
React HN
surielmx/reacthnpwa
Vanilla Web Components HN
alexnoz/vanilla-wc-hnpwa
- Module bundling:
- Webpack
- Service Worker:
- Application Shell + runtime caching with SWPrecachePlugin
- Performance patterns:
- 2 bundles (ES2015+ and transpiled), route-level code splitting, preload/prefetch resources, CSS inlining
- Server-side rendering:
- No
- API:
- api.hnpwa.com/v0/
- Hosting:
- Firebase
CxJS Hacker News
codaxy/cxjs-hackernews
- Framework/UI libraries:
- CxJS, Preact
- Scaffolding:
- Cx CLI
- Module bundling:
- Webpack
- Service Worker:
- Application Shell + runtime data caching with sw-precache (sw-precache-webpack-plugin)
- Performance patterns:
- Code-splitting, CSS and JS inlining
- Server-side rendering:
- None
- API:
- Node-hnapi (unoffical)
- Hosting:
- Netlify
Cycle HN
usm4n/cycle-hn
Angular-HN
ashishdce/hn-pwa-angular
- Framework/UI libraries:
- Angular, Service-Worker, firebase
- Scaffolding:
- Angular CLI
- Module bundling:
- Angular CLI
- Service Worker:
- Application shell generated with ng-pwa-tools and service worker from @angular/service-worker
- Performance patterns:
- Lazy loaded modules
- Server-side rendering:
- Yes
- API:
- Node-hnapi (unofficial)
- Hosting:
- Firebase with HTTP/2 server push
AppRun HN
yysun/apprun-hn
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