JavaScript Web App Starter Kit

This is a boilerplate for fully-functional universal react/redux JavaScript web applications. It's designed to be a lightweight starter kit for small or medium sized apps (Relay is probably a better choice for large, data intensive apps). The primary goals for this are: universal rendering (with async data fetching), immutable state, stateless views, and a fast development cycle – all with as few tools as possible. These features should ideally allow rapid bootstrapping of an elegant, powerful, and easy-to-reason-about (i.e. super hip) JavaScript web application. This is written in JavaScript because I don't know ClojureScript yet.

Features

Universal

Routing, data fetching, and view rendering is handled both on the server and the client. This means that a new request will return a fully rendered app in the correct state, all before any client-side javascript has been run. When client-side javascript has been fetched and run, React hooks into the pre-rendered DOM and takes over (without the need for a full client-side re-render). React Router is used to match routes on the server as well as handle dynamic routing on the client. An ES2016 decorator is used to attach static data-fetching methods to any react components that require remote data. These methods are automatically called server-side for every component in the matched route. They are automatically called client-side on componentDidMount. View rendering is handled entirely by React (ReactDomServer.renderToString on the server, and ReactDom.render on the client).

Immutable

Custom reducer handling code works around Redux's current assumption that the state is a plain objection and allows it to be a single ImmutableJS object (i.e. store.getState() returns an immutable object). This allows for cleaner, more efficient reducer code and ensures that the state is not accidentally mutated. And of course React ensures that the UI is immutable (no custom DOM manipulations).

Testable

Substack's Tape library, which uses the tried-and-true Test Anything Protocol, is used as an all-in-one testing/assertion solution. React's Test Utils allow for shallow rendering of components, meaning that individual components can be easily isolated and tested without the need for a DOM or complex mocking/stubbing.

Developable

All of the awesome dev tools from Mr. Abramov are included when the app is run in development mode. This means: hot module replacement (auto-reloading of javascript and sass w/o browser refreshes or lost state), in-browser error display, and the default redux dev tools (action logging, time travel, etc.).

Setup

1. Clone the repo
2. cd into the repo base directory
3. Run npm install to install dependencies
4. Run npm run dev to build and run in development mode

Technologies

Build

• Sass - Cause inline styles just aren't there yet.
• Webpack - Handles everything from building and preprocessing to minifying and concatenating. No need for a complicated chain of custom build tools.

Run

• Babel - ESNext everywhere!
• ImmutableJS - Forcing immutability is always better than relying on good intentions.
• Node - JavaScript everywhere...
• React Router - Handy dandy universal routing for react.
• React - Views with unidirectional data flow.
• Redux - The tiny, awesome state container.

Test

• Tape - Simple dom-less testing using the transcendent Test Anything Protocol.