hops

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 and Flow, 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.

Install

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 Tape, Enzyme and Istanbul.

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 code coverage reporting.

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. If passed only a namespace string, a generic reducer using React's immutability helpers is created for that namespace. It's return value is an object containing a selector function for use in ReactRedux' connect() and a generic action creator (update()) working with the update reducer.

import { register } from 'hops';

export const { select, update } = register('foo');

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.