This is a Hacker News client in plain vanilla JavaScript. It depends on zero frontend frameworks. There is no React, no Vue, no Ember, just modern JavaScript.
- Uses zero frameworks on the client side
- Fully universal with server side rendering and state hydration
- An architecture much like a modern React stack
It takes many modern web-dev ideas and uses non-framework solutions to implement them. For JSX like templates, it uses template strings. For components, it uses functions that return template strings. For data-flow and effects, it uses async generators. For routing, it uses a simple switchPath function that matches a route to an async function that returns a component. The architecture is designed to reveal the problems that frameworks like React were built to solve.
Note: This is meant as a learning example and I highly recommend you use a framework in real world applications.
You can install all the dependencies by running:
$ yarn installYou can start up a dev server by running:
$ yarn run devThis will boot up webpack-dev-server on port 9000. There is no hot-reloading but the page will refresh when there are changes.
You can start the production server by running start:
$ yarn run startYou can build the dev version of the app by running:
$ yarn run webpackYou can build the client by running
$ yarn run build.clientTo build the server run:
$ yarn run build.serverTests are done using Chai and Jest. You can run them like this:
$ yarn run testNote: Run $ yarn run build.client the first time you run the tests or the test that tests assets are served will fail.
To get coverage details run:
$ yarn run coverageThe app is designed to be static and once built to dist it can be deployed pretty much anywhere. It also comes with a SSR version that can be deployed to any node host.
To deploy to Zeit run:
$ yarn run deploy.zeitTo deploy to GitHub run:
$ yarn run deploy.ghThe app is made up of components, events, and sagas.
The components are functions that take state and return a string representation of that state. They are a lot like React components except they use template strings instead of JSX and they don't use a virtual DOM. Instead of a virtual DOM we use innerHTML and keep track of what state has changed and the corresponding component for that state.
The events are a lot like Flux. They are plain objects that get passed into a Store; the store dispatches the events to Sagas to be processed and finally new state is generated which causes re-renders.
Sagas are async generators that respond to actions by yielding effects. Effects are where all the bad stuff is handled. They are where we do stuff that manipulates the state and the DOM.
You can read more about the app's architecture in the docs
- Routes with the dev server are not universal i.e you can't bookmark a story and return to it -- a refresh returns a 404.
- Needs to hashes for pages (e.g #ask) on the static version so URLS like /ask don't 404
- Improved loading indicators
- Login/Signup
- hot-reload
- Replace Koa usage with plain node http servers
The design of this is a direct port of next-news
Licensed under MIT
I'm looking for work! Drop me a line k@2052.me if you are hiring.