It has been over two years after Rekit 2.0. But that’s not because the project was dead. Actually, it’s actively maintained and used during the period. Though not well prepared we still want to announce that the 3.0 is stable for public usage now, since before now we’ve released more than 30 beta versions.

This article is not intended to loudly announce the new release, but mainly to be an update of the current Rekit status. That’s mainly because it’s lack of documentation about the new plugin mechanism of the IDE, Typescript support is still under development and the available project types are still limited to our opinionated React SPA project boilerplates.

Why Rekit?

Creating an IDE is not easy, especially when it’s mainly a personal side project. But we believe Rekit is necessary and valuable because of below special features together with the new plugin mechanism:

Visualized user interface Extensible project types Virtual project explorer Intuitive code generation

Ideally, for end users, Rekit help to increase productivity. For plugin contributors, Rekit provides the ability to deliver better development experience.

Fully Plugin Based

The new Rekit is fully plugin based, you can create a Rekit plugin to as big as to support a new project type, like VueJs, Angular; or as small as a context menu to show a dialog of some information. So, Rekit is a highly customizable and extensible IDE for you to extend. It uses the extension point mechanism that is similar with Eclipse.

But why you want to extend Rekit while other more popular IDEs also support plugins? The most important reason is: visualized. Almost all UI elements of the IDE can be extended.The second reason may be, it’s web based, though we suggest using Rekit 3.0 with our desktop app now, it’s still able run in a browser, that means it’s easy to build cloud IDE based on Rekit.

Visualized User Interface

In the past, creating a frontend project begins with an empty folder, then npm init , npm install a,b,c... . Later, you use CLI tools to bootstrap projects(that’s also Rekit 1.0 did). Now you can create projects with interface like below:

Create a New Project with Rekit 3.0

Extensible Project Types

Rekit introduced the project type concept. You can think project type as project boilerplates, the most famous one maybe project initialized by Create React App. But a project type in Rekit not only means project initialization, but also together with tools and code generators. The current publicly supported project types in Rekit are React, Rekit React and Rekit Plugin. You can create plugins to provide your own project type and tools, code generators with intuitive UIs. Below is a screenshot of a private plugin that provides Node.js project support:

You can publish a new project type either publicly or privately inside your company.

Virtual Project Explorer

Almost all IDEs for front-end development just display files in the same way as the folder structure. People complain that navigating between files is frustrating. To make matters worse, there seems to be no way to improve, because code editors don’t know which file is a component, which is an action, etc. While the project structure is in free style it will never be improved.

Unlike most of other IDEs, Rekit knows your project elements, so your source code can be organized in a meaningful way.

Below are two examples of the virtual project explorer:

Project explorer usually consists of project elements rather than raw folder structure. You can define your own element types and how to show them in a meaningful way in the project explorer.

Intuitive Code Generation

Just like traditional IDEs like Eclipse for Java, or Visual Studio for .Net, Rekit helps to create code boilerplates with its intuitive UI without any learning cost. For example, to create a Redux action, right click a feature node in the project explorer and click `Add Action`.

Create a Redux Action with Rekit 3.0

The code generation logic is fully extensible and it’s usually tied with project types. While you define an element type for a project type, you usually provide the logic for adding, renaming or deleting those virtual elements.

Other New Features

Besides the highlights above, Rekit 3.0 comes up with a couple of notable new features:

New desktop app. Quick search by cmd/ctrl + p . Extensible bottom tabs including scripts manager, dependency manager, built-in terminal etc. Language server protocol support. It means Rekit is now not limited to javascript. The under development Typescript plugin is just using this feature. This also provides the ability to support even Java, C#, python, etc by creating plugins. Git status support: there’s a new built-in git manager plugin to provide basic information about the git repo status.

Install

Rekit 3.0 provides both command line tools and a desktop app. The simplest way it to download the latest version of the desktop app from: https://github.com/rekit/rekit-app/releases .

If you just want to use the command line tools:

npm install -g rekit rekit-studio

Then use command line like:

# create a new project

rekit create <my-project> -t <project-type> # add a component

rekit add component home/MyComponent # add an action

rekit add action home/fetchFile -a

For more usage, please type rekit -h to get help. While you create Rekit plugins to provide new features, the command line tool is also extended.

If you want to use Rekit Studio in a browser, go to your project folder then:

rekit-studio -p 3040

Then you can access the IDE at: http://localhost:3040

Install Plugins

To install a plugin, now you can only do it with rekit command:

rekit install deps-manager

The deps-manager plugin is used to manage dependencies of a npm based project:

Dependency Manager

It’s the only available plugin on Rekit 3.0 for now.

Rekit plugins are published via npm, you can choose to publish to either public or private npm registry. If private, you may provide the registry when install:

rekit install my-plugin --registry=https://my-npm-registry.com

Compatibility

Rekit 3.0 is fully backward compatible, you can use it to open any old Rekit projects.

Rekit React Project Type

Rekit 3.0 is still very useful for creating scalable React, Redux single page applications by the built-in Rekit React project type which was the main purpose of Rekit 2.0. Now it’s also evolved to support React Hooks and provide code boilerplates of best practice for the usage with Redux.

If you are not familiar this feature with Rekit before, read the article at: https://medium.com/free-code-camp/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542 .

Conclusion

Rekit 3.0 is designed for visualized development, and easy to integrate best practices. By creating Rekit plugins, you can help the team to write consistent code which follows best practices and finally improve the development efficiency.

For now, there is very limited documentation about plugin development. If you are interested, feel free to contact me or look into code of existing plugins.