Hackerne.ws client
This is a small experimental, small hackernews client built to experiment with Service Workers and Intersection Observers. It supports the following features:
- Fetch stories sequentially as fast as possible
- Rendering them one by one
- Infinte scrolling using an
IntersectionObserver
- With different loading states: given all have been loaded, an error occured or fetching is in progress
- Offline support using a Service Worker
- When offline the app will still load
- When online requests are served from the cache if possible for rendering performance while the cache is invalided after
Quick Start
- Please first install dependencies with either
yarn
ornpm
. - Run
yarn start
ornpm run start
- This will start both server and client with HMR
Tests
- Tests are called
*.spec.js
are are co-located with the components/modules - Run
yarn test
oryarn test --watch
to run them via Jest - TravisCI is configured to run them too here
Architectural Decisions
- Built using React as a "thin" view layer
- No custom, small or big state management library needed yet
- Seperate concerns: small components, services and utils
- Loading stories is not a React concern and implemented in services
- Tests illustrated at various layers (not 100% coverage yet)
- Use as few libraries as possible (without sacrificing maintainability)
- No library for infinte scrolling but a custom component
- Use razzle (similar to create-react-app) for tooling to not setup stack
- The Service Worker follow a cache then network approach
- Even if an cache entry is found a proactive network request is triggered to potentially invalidate the cache
Follow ups
- Increase test coverage (especially services)
- Other tests give an example how this could look like
- The Service Worker just prune old versions from the cache
- Not needed for now but could be useful to not surpass a maximum cache size
- Add server-side rendering which could speed up initial loading even more (as some requests are likely mostly cached already)