https://github.com/kristoferbaxter/preact-hn

Demonstration of Preact used to build Hacker News as a PWA.
https://github.com/kristoferbaxter/preact-hn

Last synced: 4 days ago
JSON representation

Demonstration of Preact used to build Hacker News as a PWA.

• Host: GitHub
• URL: https://github.com/kristoferbaxter/preact-hn
• Owner: kristoferbaxter
• License: mit
• Created: 2017-03-12T21:05:15.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-16T16:48:15.000Z (over 6 years ago)
• Last Synced: 2024-12-25T18:08:46.935Z (11 days ago)
• Language: TypeScript
• Size: 390 KB
• Stars: 296
• Watchers: 11
• Forks: 28
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-preact - Preact HN - Demonstration of Preact used to build Hacker News as a PWA. (Uncategorized / Uncategorized)

README

        
## Preact Hacker News Example

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

This is an example of a PWA built using Preact, 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

    * https://yarnpkg.com/en/docs/install

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

    * Again, depends on your OS. Typically just use 'brew', 'brew update; brew install brotli; brew install zopfli'

    * https://github.com/google/brotli

    * https://github.com/google/zopfli

4. Install Yarn Dependencies

    * yarn install

5. Run Locally

    * yarn start (chrome only)

    * yarn bundle:prod; yarn run start (all browsers)

6. Access using your favorite browser

    * https://localhost:5443

## 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. Write a Webpack plugin to allow for split css files based on packages.

2. Internationalization/Localization, including RTL layout.

3. Support AppCache (even though it's kind of a jerk)

4. Allow for posting comments!

5. FIX LOTS OF BUGS! ZOMG SO MANY BUGS!