Codeflow designer

This chapter provides an overview of Codeflow designer, the Integrated Development Environment (IDE) for creating Codeflow projects.

Few features of the designer:

• Dashboard with samples & templates to get started quickly.

• Embedded Codeflow engine for executing flows without leaving the designer.

• Integrated package manager for exploring and installing Codeflow packages.

• Embedded debugger for real-time inspection of data flow and data.

• NPM integration for managing native Node.js packages.

• Visual schema builder.

• Visual JSON editor.

• Code editor for all other popular formats.

Dashboard

After opening, the Codeflow designer shows a dashboard screen as shown below:

The dashboard contains the following options and features:

• Projects list - List of all projects created or opened with the designer. Click to open the project in a separate project window.

• Buttons to create and open projects - Buttons to create or open Codeflow projects.

• Samples list - A list of sample projects ready for cloning and use.

• Settings page - Pages to sign in to Codeflow or view user profile if already signed in and other miscellaneous things.

Creating a project

Clicking the Create new button will show the create project dialog as shown below. Set a name and choose the location to place the project folder. Codeflow always creates a new folder with the given name. If you want to instead open an existing project choose the Add existing button.

Adding an existing project

Below animation shows how to open an existing project:

Removing a project

Below animation shows how to remove a project:

Project window

The project window looks like a typical IDE and contains a menubar, file tree, packages panel, editor for flows and other file types. Below is an annotated image that shows the project window with a flow file opened:

Project structure

When a new project is created, there are only two files created, a package.json and .codeflow as shown below:

The package.json that holds information about project like name, description, dependent packages etc. The package.json shares a similar structure with Node.js/NPM projects and Codeflow extends it additional properties. The .codeflow file is a meta file that stores recently opened files and other IDE related meta properties.

Organizing files

In Codeflow, there are no restrictions or conventions on folder structures or file naming. For any non-trivial app, it is recommended to keep the flows, schemas, and other assets in separate folders. For web apps, the views (html files) and other static assets (js, css) can also be placed in separate folders just like you would do in a typical project.

Creating and editing flows

To create a new flow, choose new from the file menu and choose flow. By default flow will have two steps - the start and the end, representing the entry and the exit points respectively. You can place any number of steps in between the start and the end. Steps are connected together by dragging a connection between them. The connections are called as transitions. For a more detailed insight into how flow works, please read the reference guide.

Executing & debugging flows

The designer comes with an integrated engine and debugger and can be used to execute and debug a flow without leaving the editor.

Run vs debug

Executing a flow can be done using either the 'run' mode or 'debug' mode. In run mode, the debugger is not attached but will be run slightly faster without the overhead of the Debugger. Use run mode if you want to test the performance that you would get while running the project in production.The debug mode starts the debugger which will allow you to visualize the data path, put breakpoints, step through modules and even parallel paths etc, all asynchronously.

The debugger in action.

Starting a single flow

To test a single flow simply click run or debug button and there will be a dialog box to enter input data, according to the input schema specified.

Starting the whole project

You can also start all the trigger flows in the entire project in one go. For that use the debug menu in the menubar and select Debug->Debug Project (or Debug->Run project).

Managing Packages

Installing packages

The designer includes built-in package manager that can install and manage Codeflow packages. Once installed, the modules from installed packages can be used like any other standard package. The below animation shows installing a third-party package in just few clicks:

Removing packages

To uninstall a package, just click on the trash icon next to the package's header.

Publishing packages

Codeflow designer makes it easy to publish your own package without leaving the designer. Custom packages are published and maintained through the designer using an easy to use wizard. It is explained in detail in the chapter - publishing packages.

Managing Node modules

Codeflow designer is integrated with NPM so to let you quickly install Node.js packages within the designer. Node.js packages installed can then be used directly from the flow.

Installing node modules

Sometimes you need to directly invoke a Node.js module from NPM. Codeflow has in-built support for searching, installing and managing NPM modules.

Managing node modules

You can also list and uninstall Node.js modules directly from the designer, as shown in the below video:

Summary

This chapter provided a high level overview of Codeflow designer and its basic working. The designer can be considered as a regular IDE that is also capable of creating and editing flows as well as most other file formats.

What's next?

Flows