roc

Roc

Build web applications and components using modern JavaScript libraries easily.

Quickly create products powered by libraries like React and Redux ready for deployment in production with minimal additional setup using tools like Webpack and Babel .

At a glance

Roc provides a cli for managing development, building and runtime configuration. It also boasts an architecture that sweeps complexity of npm library compositions away from your application.

• Orchestration complexity moved away from your applications or components
• Application code is exactly that; not boilerplate or glue-like operations
• Consistent configuration and runtime management

Several opinionated packages and plugins exist that can save a lot of time if aligned with your preferences, for example providing Webpack, Babel and React ready to be used.

Introduction

Development toolkit that makes it easier to create web applications and components without the boilerplate fragmentation and complex setup processes. It does this in a modular and extendable way.

Makes it easy to; using existing packages:

• Create production ready React applications featuring universal rendering.
• Create general web applications running on a Koa server.
• First class developer experience with hot reloading and Browsersync.
• Best in class build setup using Webpack and Babel.

Basically Roc composes some great open source tools and make them easy to use with a streamlined command line interface and configuration/extension system. Roc allows for overriding of every aspect of it, so it does not limit you.

Get started

Install Roc

npm install -g roc

This provides you with a really simple command line interface. Only Linux and OS X is currently supported.

Bootstrap React + Redux application

mkdir react-app && cd react-app

roc init web-react

roc dev

This will:

• Create a new directory
• Init a Roc project inside it that uses React and Redux
• Start the project in development mode

Production ready

To build and run in production just use:

roc build

roc start

Where to go from here

Read the documentation for the particular package that is used for more details on what it does. A very common use-case is to make modifications to your roc.config.js. To get a better understanding of all the possible options in the package use the roc list-settings command or --help for a specific command.

Extensions

Roc is highly flexible and makes it easy to create new extensions. It does not enforce limits on what the extensions do or how they do it. It is trivial to both create new extensions in the form of packages and plugins as well as to extend existing ones. For example it would be possible to create a alternative to roc-web that uses Browserify instead of Webpack.

Current Official Packages

Project	Github page
To be added

Current Offical Plugins

Project	Github page
To be added

Example of tasks handled by these extensions

• Building and bundling through Webpack.
• Web server through Koa.
• React (complete with Redux and server side rendering).
• First class developer experience featuring hot code reloading and Browsersync.
• Transpiling from ES2015 (ES6) and beyond using Babel.

Documentation

See the documentation.

Motivation

Roc was born out of the need to create modern applications following the correct conventions and using best practices consistently.

We quickly realized that keeping boilerplate updated within each project over time was unmanageable. It seems natural to have this repeated complexity managed by separated semantically versioned packages.

Development of Roc was started before these posts where created but they still describe what Roc aims to solve in a good way:

• Challenge: Best JavaScript Setup for Quick Prototyping by @vjeux
• Javascript Fatigue by @ericclemmons

Contribute

We are still working on getting the balance between flexibility and easy-of-use. Input here is valuable to us and please contribute if you want, we welcome you to interact.

Thanks

Thanks to Jongleberry for letting us use the roc package name on npm.