kristoferbaxter / react-hn Goto Github PK

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

License: MIT License

JavaScript 92.31% CSS 7.69%

react-hn's Introduction

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

Install yarn
- https://yarnpkg.com/en/docs/install
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'
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
Install Yarn Dependencies
- yarn install
Run Locally
- yarn start (chrome only)
- yarn bundle:prod; yarn start (all browsers)
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:

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

react-hn's People

Contributors

Stargazers

Watchers

react-hn's Issues

Navigation for / and /top/:page should highlight the "top" tab in header

I don't see a way to pass a custom method to <NavLink> from React-Router for denoting it's active classes.

Idea 1:
Use a custom <Match> component to derive when either url pattern is matched and apply via standard classNames

Idea 2:
Modify React-Router to accept custom methods for determining active states.

Idea 3:
Move away from React-Router entirely and implement a custom router. (Likely don't have time for this).

Rollup.js example

Do you have any example of code and CSS splitting with rollup?

Thks in advance

Hosted version is down

Hi! Looks like the hosted version of this isn’t loading and is instead throwing a cloud flare issue page

Move from 20 to 30 items per page

tastejs/hacker-news-pwas#40

As requested to make implementations more consistent.

Debugging Code in Prod Build

I am slightly unfamiliar with current react versions, but noticed a few artifacts in the prod build worth chasing down.

    "use strict";
    t.exports = function(u) {
        for (var h = arguments.length - 1, g = "Minified React error #" + u + "; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=" + u, v = 0; v < h; v++)
            g += "&args[]=" + encodeURIComponent(arguments[v + 1]);
        g += " for the full message or use the non-minified dev environment for full errors and additional helpful warnings.";
        var N = new Error(g);
        throw N.name = "Invariant Violation",
        N.framesToPop = 1,
        N
    }
}```

I wouldn't expect this to appear in the production minified version. I believe something is amiss with Babili + Webpack as used.