Introducing workflow

First posted on https://spectrum.chat/workflow?thread=7679137d-130c-4b8a-8eb2-09acf0d2b27c. Updated code samples to support workflow@2.x.

workflow is a node command line tool that turns declarative layouts into running applications on your screen.

Layouts can be declared as javascript objects or as React applications. Layouts contain apps and their position on the screen, in addition to arguments which are passed to the apps. The code example below is the layout used in the gif above, declared as a React application. The React application is evaluated into javascript objects by a custom reconciler in the render function.

import React from 'react';
import { render, Workspace, requireComponent } from 'workflow-react';

const { SplitH, SplitV } = requireComponent('workflow-layout-tiled');
const { TextEditor, Browser, Terminal } = requireComponent('workflow-apps-defaults');

export const flow = render(
  <Workspace name={'workflow-react-example'}>
    <SplitV percent={1.0}>
      <SplitH percent={0.8}>
        <TextEditor percent={0.5} file={__filename} />
        <Browser percent={0.5} url={'https://github.com/havardh/workflow'} />
      </SplitH>
      <Terminal percent={0.2} cwd={__dirname} />
    </SplitV>
  </Workspace>
);

Support

workflow supports Linux using i3 and OSX. It has experimental support for Windows and Linux using wmctrl (Ubuntu and more). There is support for at least one terminal, browser and text editor for each platform. Upcoming posts will describe how to implement/improve windows manager support and adding support for more applications.

Getting started

$ npm install --global workflow
$ workflow ReactExample.js

When you run workflow for the first time, it will ask you to set up your workflow-home directory. This is the place where you will add all your layouts and supporting libraries. The default location for the workflow-home directory is ~/.workflow.

This post is the first in a series on how to use and extend workflow to suit your needs. The next post describes how to write your own layout declarations. Workflow is still experimental and incomplete, but the foundations are starting to come together. Come join me building the community at https://spectrum.chat/workflow and the development at https://github.com/havardh/workflow.