I Developed A Visual Development Tool For Web Applications with React

Let’s look at the construction of a modern React Web application. We will look at applications that are created using Create React App.

After the initialization of the project source code, you start creating React components that will be used to build the application pages.

When you already have pages, you need to navigate between pages. You will probably use a React Router so you don’t have to come up with anything new.

Transferring data between components that are on different pages is quite a complex task. There are several approaches suggested to solve this problem. Let’s consider that the best solution is to use Redux.

In fact, you don’t need anything else to create a real big single-page application. Everything looks simple enough — we create different beautiful React components, combine them on pages, and write Redux actions and reducers code to link the components.

The difficulty starts when you have too many different components. And when a new component appears, it has to be built into your slim architecture somehow.

This often leads to refactoring of already existing code. Mostly the code is rewritten for Redux — containers of components, actions, and reducers. Of course, it won’t be much trouble for the team if they pay attention to the correct architecture. But it will take a lot of time.

Therefore, I created Webcodesk to avoid wasting time rewriting the code in the application when you need to add a new component or change the logic of component interaction in the application.

I adopted a component-based approach and found it easier and more fun to combine components and logic on the GUI.

For example, to redesign a page, you can simply drag the desired component to the right place on the page. You can copy and paste the components with the familiar key combinations — Ctrl + C / Ctrl + V, and so on.

You may argue that this is easily done in any code editor — copied a piece of code and pasted it in the right place. Besides, a lot of hints will make an error in the code impossible.

Indeed, it is fair. That is why I went further and made it possible to edit component properties right on the page.

It will be difficult for you to argue because we do not always remember what properties can be in a component. And even hints in the code editor do not always help us to figure out what possible values in a property can be.

Also, when you build a page directly in your browser, you can immediately see the changes.

But we can also live without a page editor. After all, it does not solve the problem of writing Redux code for containers, reducers, etc.

And then I thought that the best way to avoid writing code is to draw how data will be transferred between components. It could be diagrams that show the logic of individual use cases.

There should not be complex diagrams that show all the logic in a scenario. It will be diagrams of data transfer between components and functions.

Functions are components, too. The success of the reusable logic in the separate functions can be seen in React Hooks.

I added the ability to connect components to logic in Webcodesk. You can simply drag the components you need from pages to a diagram, add functions there and connect them with the mouse — no need to write code.

Webcodesk will turn all diagrams into code. Components will be encapsulated in Redux containers, connections will be turned into action creators and reducers. And the functions will be integrated into the data stream.

All you have to write now is React components and functions. You won’t even have to add them to any settings — Webcodesk will recognize the component or function itself and show them on the project workspace.

If you change the code of a component or function, Webcodesk will track the changes. It will show you errors in diagrams or in pages if something has been deleted or renamed, etc.

Now you don’t have to refactor code when you want to add a new component, or change the old one, or change the behavior. All you need to do is to change the links or components in the right diagram or page.

As an experienced developer, I saw another problem in using Webcodesk. Too much magic, that is, you can’t see how the data in the application goes. You can create tests for components or functions, but you cannot make tests for a diagram. For example, when you create another diagram and the application doesn’t work as you expected.

In such cases, Webcodesk offers a visual debugger for data in diagrams. To do this, you can record everything that happens inside when you do something on the application pages in “Live Preview”. When you are done recording, you will see a consolidated diagram of all the nodes in your application. There you can see what data was transferred at a particular point in the diagram node.

Since we are discussing the Web application project created by CRA, you can use all CRA utilities: create tests, build the application, run Webpack Dev Server. Webcodesk does not limit you to make any changes in the code.

So you can consider Webcodesk as a graphic editor integrated into your CRA project.

I think I have told you enough to interest you to try Webcodesk in your new project. Webcodesk has a lot more interesting things like Webcodesk Marketplace, which I will talk about in the next articles.

And you do not need to install it locally to try it out — you can check out Webcodesk online on the website. But the online version works with ready-made components and functions.

So if you want to try Webcodesk in a real project where you will create your components and features, then install it locally and read the User Guide before you start doing anything.

Webcodesk is new, it’s just beginning to develop. If you think it’s the right tool for developers, please help attract community attention to it. This will help to improve it and expand its capabilities.

I am open to suggestions for the growth of Webcodesk: Alex Pustovalov

Ask questions on the Webcodesk forum.

Thank you for reading this article. Keep up with the news about Webcodesk on Twitter.