Hops UI Toolbox

In this repo, we are experimenting with technology that might serve as our next generation front end technology stack: hops spices our brew (i.e. web front end) with ECMAScript, CSS Next and CSS Modules, JSX/React and Flux/Redux. To get an impression take a look at our example app.

Hops is not yet another boilerplate. Hops is a self-contained but highly extensible development and build environment that is packaged as a single module. Batteries included.

Installing

Besides recent versions of Node.js and npm, hops has no global dependencies. If you need those, we recommend using nvm or similar.

mkdir foo && cd foo
npm init -y
npm install -SE hops

A postinstall script will attempt to bootstrap and configure the project hops is being installed to: after installation, you can instantly start developing.

Running

For developing with hops, you can use any decent editor with up-to-date language support. Those without a favorite we recommend Atom with the linter, linter-eslint and linter-stylelint plugins.

npm start (--production)

If called without the --production flag, a development server with hot module replacement is started. In production mode, a static build is initialized.

Testing

If you are developing any kind of real application, you certainly want to be able to test your code. For hops, we chose to include a rather simple testing toolchain consisting of Mocha and Enzyme.

npm test (--coverage)

In hops' default configuration, all files with names ending with .test.js (and outside /node_modules) are being picked up. As to be expected, the coverage flag enables test coverage reporting.

Documenting

Hops is documented using jsdoc. To add documentation support to your own project you need to manually install and configure jsdoc and an optional theme. Hops itself uses hopsdoc.

npm install jsdoc -g
jsdoc -c jsdoc.json

API

render(options: object): function|undefined

render() is hops' main function: it creates a Redux store, sets up React Router and handles rendering both in the browser and in node. Using it is mandatory and its output must be the default export of your main module. And it's a little magic.

import { render } from 'hops';

import { routes } from './routes';

export default render({ routes });

In addition to routes and reducers, an html mountPoint selector and some othes may be passed as options. Please check the defaults for some details.

register(namespace: string[, reducer: function]): object

register() is a helper to streamline store/state interactions in hops based projects. It's return value is an object containing a selector function for use in ReactRedux' connect().

import { register } from 'hops';

export const select = register('foo', (state, action) => state);

Hops supports server-side data fetching for route components: it calls their static fetchData methods and expects them to return promises. Of course, asynchronous actions are supported by using thunks.

Thanks!

The beautiful hops icon used in the logo was created by The Crew at Fusionary and provided via The Noun Project. It is licensed under a Creative Commons license.

drixsonic / hops