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.

Run

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.

API

render(options: object): function|undefined

render() is hops main function: it creates a Redux store, sets up React Router and handles rendering both client- and server-side. 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 { reducers } from './reducers';
import { routes } from './routes';

export default render({ routes, reducers });

In addition to routes and reducers, an html mountPoint selector and a createStore factory function may be passed as options.

createFetchAction(key: string, options: string|object): function

createFetchAction() basically allows you to map a json api url to a specific slice of your application's state. It uses the Fetch API under the hood.

import { createFetchAction } from 'hops';

const fetch = createFetchAction('foo', 'https://example.com/foo');

dispatch(fetch());

Both createFetchAction() and the action creator function it returns accept options arguments that are merged and passed straight on to fetch().

createAction(key: string): function

createAction() is just a small helper function to work with reducers generated with createReducer(). It is being used internally by createFetchAction().

import { createAction } from 'hops';

const update = createAction('foo');

dispatch(update({'bar': {'$set': 'baz'}}));

createReducer(key: string): function

createReducer() generates a Redux reducer function using the provided key and React's immutability helpers.

import { createReducer } from 'hops';

export const reducers = { foo: createReducer('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.