Skip to content
Demonstration of React used to build Hacker News as a PWA.
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Move to React 16 + latest dependencies. Sep 14, 2017
dist Port of Preact HN to React. May 22, 2017
proxy
scripts React 16.2 and dev cert generation. Jan 11, 2018
src Render models instead of HoC. Sep 25, 2017
static/icons Port of Preact HN to React. May 22, 2017
.babelrc.js
.gitignore Port of Preact HN to React. May 22, 2017
LICENSE Initial commit May 22, 2017
README.md
nodemon.config.json
package.json React 16.2 and dev cert generation. Jan 11, 2018

README.md

React Hacker News Example

See this application live at: https://react-hn.kristoferbaxter.com

This is an example of a PWA built using React, Webpack, and some small opinions. Please do not think of this as the way to build your application. Instead, view this as an example of some concepts used in modern web applications (sw, h2, h2push).

Made with kindness in California. 🏄

Installation

  1. Install yarn
  2. Install h2o Proxy (to allow for local h2 and h2 push)
    • Depends on your OS. Tend to use 'brew' on MacOS -- 'brew update; brew install h2o'
  3. Install Brotli and Zopfli CLI
  4. Install Yarn Dependencies
    • yarn install
  5. Run Locally
    • yarn start (chrome only)
    • yarn bundle:prod; yarn start (all browsers)
  6. Access using your favorite browser

Details

I've focused mostly on first initial load performance, with the small caveat of using Webpack instead of Rollup. I'd like the route based code splitting to provide a extensible model for keeping initial view rendering costs low.

In the future there are plenty of things to do:

  1. Move away from needlessly spamming the Firebase API (see src/restify/storage/*) and instead leverage the firebase client in the node server.
  2. Write a Webpack plugin to allow for split css files based on packages.
  3. Internationalization/Localization, including RTL layout.
  4. Support AppCache (even though it's kind of a jerk)
  5. Allow for posting comments!
  6. FIX LOTS OF BUGS! ZOMG SO MANY BUGS!
You can’t perform that action at this time.