I Developed A Visual Development Tool For Web Applications with React

18,079 reads

Hi, my name is Alex, I’m the author of Webcodesk. In this article, I want to tell you why I created Webcodesk and why I consider it a great tool to develop 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.

reactions

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

reactions

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.

reactions

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.

reactions

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.

reactions

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.

reactions

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.

reactions

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.

reactions

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

reactions

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.

reactions

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.

reactions

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

reactions

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.

reactions

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

reactions

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.

reactions

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.

reactions

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.

reactions

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

reactions

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.

reactions

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.

reactions

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.

reactions

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.

reactions

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.

reactions

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.

reactions

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.

reactions

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.

reactions

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

reactions

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.

reactions

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.

reactions

webcodesk.com

reactions

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.

reactions

Webcodesk User Guide

reactions

The GitHub repository

reactions

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.

reactions

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

reactions

Ask questions on the Webcodesk forum.

reactions

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

reactions

Tags