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, 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
Svelte Hacker News
sveltejs/svelte-hackernews
- Framework/UI libraries:
- Svelte
- Module bundling:
- Rollup
- Service Worker:
- Application Shell + data caching
- Server-side rendering:
- Yes
- API:
- Hacker News Firebase API
- Hosting:
- Now
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
- 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
Viper-news
WebReflection/viper-news
- 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
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
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