Drag and Drop Your React App with Webcodesk

Creating a complex single page application with React always involves a set of predictable steps. First, you start with a user story or business requirements. Then, you create several isolated components that you’ll combine and present on the screen. From there, you write the code your data flow, mostly using Redux actions and reducers.

Repeat the same steps a few times, and you’ll have a working app ready for use. But business requirements change over time. A new user story is created to accommodate business growth. As a result, your software needs to change.

Sometimes, You will work on the same codebase that you’ve written before. Yet sometimes (or most of the time) you have to work on parts of your software that you’re not familiar with.

This means before you can refactor the code effectively, you need to understand how it works. You have to know what this alien part of the code does and how it serves your business requirements.

One popular solution for that is using component hubs like Bit.dev that offer a simple way to build and collaborate on independent components. Each component is published to the team’s (cloud) component collection, where it can be examined, installed, or even “cloned” into the project’s repo, to further develop it.

Designing your app as a modular structure composed of independent components makes it much easier for developers unfamiliar with a codebase, to understand and maintain it (among other obvious benefits, like increasing reusability).

Tools like Bit are great for managing independent components but they do not offer a visual way to track how data flows. For that, you may want to complement your component collection with a visual tool like Webcodesk .

A tightly integrated visual builder for React

Webcodesk is a visual builder tool created exclusively for developing React applications. It’s designed to help you navigate and change how data flows in your React application without manually editing your code.

Some advantage of using Webcodesk includes:

• Creating application screens and composing components visually
• Visual editor for data flow
• Recording user actions for debugging the data flow
• Ability to create documentation for each component
• Have Redux configured and ready for use without writing a single Redux code

Webcodesk has a clean user interface with the Live Preview feature, where you can test how your app works directly on the browser. It requires time to get used to its interface though, so check out its tutorial if you’re interested.

Software development with Webcodesk starts from writing your components and functions. And yes, a component can also be a function. In Webcodesk, Functions specifically mean JavaScript functions that connect components together in the flow diagram.

The left sidebar of Webcodesk acts as a panel that tracks all your resources: components, pages, templates, flows, and functions. You can click on the individual component to see how it works in isolation (much like Storybook) and view its README at the bottom:

And you can create a new component and edit the source code directly from Webcodesk:

Although you still have to write code for your components and functions, you don’t have to refactor your code when you want to add a new component to your page. You just need to drag the desired component to the right place on the page:

As I’ve hinted earlier, one of its greatest features is the ability to generate a simple diagram that represents your application interaction. The blue squares represent components, while the green squares represent functions:

The data flow diagrams make it easy to get an idea of how your components interact with each other. You can drag and drop components and functions into the main panel at the center to link them there.

All of the generated data flow shown above are stored as JSON files and served to the internal engine of Webcodesk , which turns diagrams into code.

Finally, Webcodesk has a dedicated marketplace for React templates, which enables you to build your application by leveraging existing code that someone else has written and customize it.

Conclusion

An application starts small and then grow. This makes you need to refactor the code again and again. Sometimes you’ll refactor a small part of your app to serve the new business requirements. Sometimes you might need to do more, like including Redux.

Webcodesk use Redux from the start, so you won’t have to refactor your code later. This might lock you out from other state management libraries like MobX, but it’s a necessary compromise because you don’t need to write any Redux code anyway.

If you’re interested to learn more, give Webcodesk a try. Be warned, though: you might like it.