Webcodesk organizes code in a big React Web Application

Webcodesk helps organize code in a big React Web Application

Webcodesk — an open-source rapid development tool for React Web applications

In this article, I’d like to reveal an idea about how Webcodesk helps teams to develop big Web applications without wasting time on writing the boilerplate code and understanding what is going on in each particular case because of the code complexity.

As the React app project grows, its source code is getting complicated and messy. You might say that there are many practices to organize code in the Web application project. Of course, we can utilize some efficient code structure, and force everyone in the team to follow the rules and code conventions.

However, if you’ve ever used Redux in the big project, you should have noticed, that the powerful flexibility of Redux makes it quite hard to follow even the most tuned code convention.

Even though each member of the team strictly follows the rules and each code review removes the harmful code structure, the newcomers struggle to understand the logic and data flows in the application jumping back and forth between the files.

I have some thoughts about why it is so and how to eliminate this, but now, I’d like to talk about how to avoid this using Webcodesk.

Webcodesk is a standalone application and stays apart of the project’s source code. However, the structure of the source code should be recognizable and understandable for Webcodesk.

That’s why Webcodesk lets you bootstrap the project structure with the modified version of the Create React App tool. Read more about the structure in the “Source Code Structure” chapter.

Once you create a project, you can start to write the code using any IDE of your choice.

The “Why Webcodesk” chapter of the Webcodesk’s guide says that

“You can define, implement and compose loosely coupled independent components and functions in your application.”

It means that you can implement completely autonomous React components and functions of the business logic, and then compose them in Webcodesk.

Webcodesk automatically recognizes the React components in the source code and lets you preview them like React Storybook is doing.

You can edit the source code in the IDE and see the changes in the component preview immediately due to the hot reloading feature. Learn more about this feature in the “Create React component” chapter.

As for the functions, Webcodesk recognizes the particular form of arrow functions as the elements of the business logic.

If you are familiar with Redux, you can draw an analogy between functions in Webcodesk and the action creators in Redux.

That’s it what you have to write manually. You don’t have to write the glue code for Redux containers to make the React components talk to each other and call the functions, and you don’t have to write the code for pages and routes — Webcodesk tackles with this for you.

Instead of writing a bunch of files you will draw fancy flow diagrams. Drawing the diagrams is as easy as writing user stories. You can create as many diagrams as your application has use cases. It is quite easy to redraw them or even switch off or on while the live preview.

Also, you don’t need to worry about if your flows intersect in certain cases — Webcodesk reconciles the flows into the one big flow and removes any duplicated or redundant logic.

Then you will combine React components on the pages visually.

I know that WYSIWYG went out of fashion, but here it has a practical goal — we decoupling the layouts and components, and reuse them on different pages. Moreover, the pages participate in the flows as well. That’s why you don’t need to create the routes between pages manually.

Summary

Webcodesk lets efficiently spread the responsibilities among the team players due to its low-code approach.

Thus, for example, some part of the team can develop React components and test them separately. Another part can develop the business logic by the requirements and test it separately as well.

Finally, there may be the only person who draws the flows and builds the pages.

In the next article, I’ll try to tell you about how to migrate the legacy project to the project for Webcodesk.

Thanks for the reading. Let me know what you think about Webcodesk — I’d much appreciate any feedback. Also, please share this article if you like the approach described here.

Webcodesk resources list: https://github.com/webcodesk/webcodesk

Webcodesk organizes code in a big React Web Application was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.