Rekit Studio: IDE for React Applications

Original author: Nate Wang
  • Transfer
Today we are publishing a translation of the material by Nate Wang, creator of Rekit. Here he talks about the new stable release of the system, Rekit Studio . This is a full-fledged IDE for developing applications built using React, Redux, and React Router technologies. He says his team has been building complex web applications with Rekit for more than a year now.

The previous version of Rekit Studio was called Rekit Portal. She did not support code editing capabilities. Now, thanks to the Monaco Editor , the one used by VS Code , and thanks to the wonderful tool for formatting prettier code , Rekit Studio allows you to conveniently work with the code. That is why the word "studio" appeared in the name of the system.

Rekit Studio

Like other IDEs, in addition to editing program texts, Rekit Studio can generate boilerplate code, supports the creation of dependency diagrams, helps the developer to refactor, build, unit-test projects, and contains convenient tools for moving around the code. Rekit Studio takes on such tasks as setting up a project, configuring webpack, organizing the directory structure. Rekit Studio is an environment that contains tools for managing projects. This is what sets it apart from regular code editors like Sublime Text or VS Code.

Before we continue the story about Rekit Studio, we suggest watching this demo video on the practical use of this IDE to control Redux actions.
As you can see, the task of the developer when using Rekit Studio is to implement the main functionality of the application, while this development environment takes care of the routine operations.

Install and launch Rekit Studio


It is best to read the continuation of the material, while at the same time testing independently what will be discussed in Rekit Studio. You can do this by using one of the following two methods:

  1. Connect to the online demo environment available at http://demo.rekit.org/ . This is a Rekit Studio instance launched in read-only mode. Therefore, working with it, you cannot make changes to a project open in the IDE (this is Rekit code).
  2. Build the application with Rekit yourself. To do this, you need to perform only three steps:


Install Rekit, create and launch the application.

After launching the application, go to http: // localhost: 6075 . Rekit Studio uses this address by default.

As you can see, Rekit Studio is just one of the npm packages in your project, the environment in which the IDE runs is a browser. Thanks to this approach, each application has its own instance of Rekit Studio, as a result, you will never encounter problems regarding version compatibility.

Modes for viewing project files and code


Almost all IDEs for front-end developers contain simple tools for viewing the structure of folders and files. As a result, project navigation, organized by means of these IDEs, does not take into account the features of projects that programmers do not like. Code editors are not aware of the role of files, that is, they do not know that one file is a component, another is an action, they have no information about which style file belongs to a certain component, where the routing rules are defined, and so on. . Unfortunately, without such information it is impossible to organize a more convenient navigation on the project, it is impossible to improve the situation.

When working with projects, Rekit Studio follows the organization pattern of a scalable web application. And, based on this, Rekit Studio understands the role of individual parts of the project. Read more about this here and here .

Based on the template, Rekit Studio knows which files are components, which are actions, where routing rules are defined, and so on. Therefore, the project browser can show the structure of the project in a meaningful way. For example, as shown below.


Project Explorer

IDE Rekit Studio is aware of the features of the project elements, for example, which actions are asynchronous (marked with a blue A), which components are connected to the Redux repository (they are marked with a green C), which components are controlled by the React router (they have orange icon R), that is, are used in some routing rules.

Thanks to a powerful browser, you can easily navigate between project elements and get a lot of information about the elements without opening them and without reading their code.

It is worth saying that the project browser shows only the files from the project folder src, so it has good performance. At the same time, if you want to edit files that are outside the folder src, such aspackage.jsonor .gitignore, you may need a regular text editor.

Code generation


Like any other real IDE, such as Eclipse for Java or Visual Studio for the .Net platform, Rekit Studio helps you create boilerplate code using the user interface, which is extremely simple to work with. For example, to create a component, right-click the corresponding node in the project browser and select a command Add Component.


Adding a component

In addition to entering the name of the component, you can indicate whether it is connected to the Redux repository and whether it is used in the rule of the React router. After clicking on the button, the OKsystem will generate all the necessary code and make the necessary settings. The results of all this can be seen in the operation log. For example, there may be records about creating a less / scss file for styling and a test file, information about adding a React router rule to access the component by URL (if the corresponding setting is specified), and so on. Here, in fact, there is nothing supernatural. Rekit Studio simply helps the developer do what they had to do manually before, and thanks to the magazine, the programmer knows exactly what has been done.

To create an asynchronous action Redux, Rekit Studio uses by default redux-thunk.


Adding an Asynchronous Action

Another approach to creating an asynchronous action involves use redux-saga. To do this, install the plugin rekit-plugin-redux-saga. We will talk about plugins below.

All file names, function or variable names, follow in Rekit Studio the predefined rules described here . Therefore, even if you, when creating the component, my componententer a name like in the name input field, Rekit converts it to MyComponent. Thanks to this approach, all the names in the project are always uniform.

The code templates in question are always created using the recommended development approaches. You only need to add the working application code to them, everything else will be done automatically. When the code is generated, it can be freely edited.

Refactoring tools


When creating a large application, refactoring is very important. This allows the code to be clean, readable, and well-managed. Some of the important aspects of refactoring are renaming, moving, deleting project elements. When working with modern front-end development tools, refactoring is overly complicated. For example, if we need to rename an asynchronous action, we usually need to edit several files and modify many dozens of lines of code in different places. Suppose we want to change the name of an asynchronous action from fetchTopicsto fetchTopicList. To do this, the project will have to make the following changes:


Renaming asynchronous actions and changes made to the project

It looks so crazy that few people want to do all this manually. The same inconveniences accompany the movement or removal of components and actions. Without instrumental support, all these problems discourage many of us from refactoring code. This leads to the fact that it becomes difficult to manage our projects very soon after the start of work on them.

Now, thanks to Rekit Studio, to rename, move or delete a component, just use the corresponding menu item called with the right mouse button. Rekit Studio will do everything you need automatically, and the developer can look in the log in order to see a list of completed actions.


Refactoring

Analysis of the project using diagrams


When a project grows, the interactions and interdependencies of its components become complex. Excessive complexity of the relationship between parts of projects is fraught with problems, resulting in the complexity of maintaining the code. Assistance in analyzing the relationships between parts of projects can be provided by appropriate tools. Rekit Studio has such tools. It's about dependency diagrams.

▍ Overview chart


This chart is displayed on the page with the control panel (on the home page). With its help, you can not only see the dependencies between the functionality of the application (in Rekit terminology they are called features and represent high-level component parts of applications), but also analyze the relationship between ordinary modules like components and actions. Thanks to the overview diagram, you can understand, for example, the complexity of the task of refactoring a component. The more dependencies there are, the more carefully you should handle the application component.


Finding Unused Components

This chart also helps in finding unused modules. For example, the figure above shows a diagram for a project in which, in functionality Home, there are two unused components. Typically, these components can be removed without problems. Removing unnecessary code helps reduce the complexity of the project and reduce the size of the application package.

▍ Element Chart


If you open an element from the project browser, you can, in the corresponding panel, see the diagram of the element. With its help, you can evaluate the interaction of the element with other parts of the project.


Element diagram

For example, the diagram above shows a diagram for a SidePanel- a complex component that uses many other components and actions. In addition, it has dependencies on other application functionality. Perhaps this component should be refactored in order to simplify it and increase the usability of it.

Assembly and testing


Like other full-fledged IDEs, Rekit Studio can build and test projects. By default, Rekit Studio will try to run a command npm run buildto build the project and a view command npm test — [test-file-pattern]to run unit tests.

To build the project, select the Buildmain menu item:


Assembling the project

Then you will see a progress bar and information about the results of the assembly. Before you deploy the production server, you can check the build results by contacting the development server, which is available at http: // localhost: 6077 .

To run unit tests, you can either run them all by selecting an item Run testsfrom the main menu, or select a specific test to run.


Running Tests and Test Results

Above are the test results of the functionality diagram. If you run all the tests of the project, a report will be generated on the coverage of code tests. You can watch it from the main menu.


Test Report

Plugin support system


We have already said above that Rekit Studio can create templates for the functionality of projects, actions, components. If you need to create some new elements, such as selectors, or you want to change the standard template code, for example, use redux-sagainstead redux-thunkto create asynchronous actions, you can do this by creating plugins. Here you can read more about the Rekit Studio plugin system.

Command line interface


In addition to the graphical interface described above, Rekit Studio has a command line interface with which you can manage projects. In fact, both Rekit Studio and Rekit CLI are used rekit-coreto manage project elements. The command line system supports more kinds of plugins than Rekit Studio. If we talk about the development of the system, it is planned to improve the support of plugins and create a unified interface for working with them.

Migrating from Rekit Portal to Rekit Studio


If your project uses Rekit Portal, switching to Rekit Studio is very easy, as the Rekit Studio IDE is fully compatible with projects created in Rekit Portal. All that is needed is to install Rekit Studio and update the script to start the system in server.js. Here is a description of this process.

Convert an existing project to a Rekit project


If you already have a project based on React, Redux, and React Router, you can convert it to a Rekit project, which will give you the opportunity to use Rekit Studio to work with this project. This is usually not particularly difficult (although a separate article will be needed to explain this). In a nutshell, to transfer an existing project to Rekit Studio, you need to reorganize the files and code in the way that is accepted in Rekit.

About Rekit Development


It should be noted that Rekit Studio is still at an early stage of development, although we have been using it to create web applications for quite some time and we like working in this IDE. We continue to work on Rekit and use this IDE to solve our daily tasks. Here are some of the improvements planned for Rekit:

  • Improved syntax highlighting.
  • Support for native ESlint rules.
  • Improving code completion, for example regarding module names.
  • Quickly open files using hot keys Cmd + P.
  • Support for multiple unsaved files. Now only one file can be in an unsaved state, which is aimed at protecting against the loss of code changes.
  • Support for more chart views.
  • Support for the ability to create, rename, and delete regular files, in addition to component files and actions.
  • Integration with Storybook.
  • TypeScript support.
  • Support for server rendering.

In fact, this list can be expanded - it all depends on the needs of Rekit users.

Summary


Although front-end development technologies are evolving very quickly, Rekit, which is just a set of tools and not a framework, has been demonstrating high stability for about two years now. The principles on which the IDE Rekit Studio is based are technology independent.

As a result, I would like to note that Rekit does not provide any SDK or npm packages for your application. This is just a tool for creating projects and for managing them. And without Rekit, you can use any text editors to write code, you can use the terminal to run scripts for a project created in Rekit. Thus, using Rekit does not mean dependency on it.

Dear readers! Do you plan to use Rekit Studio in your projects?


Also popular now: