Meet React Buddy – an IDE plugin increasing React development productivity!

Hello world! I’m happy to introduce React Buddy - a plugin for Jetbrains IDEs, that aims to increase React development speed and efficiency.

We published the beta version in Oct 2021 and now, after several months of polishing, the first stable version is available for everyone! The plugin can be used in any JetBrains IDE which supports JavaScript – primarily we talk about WebStorm and IJ Ultimate.

The story behind

Our team also works on a platform for rapid business application development. The idea of the platform is to provide an alternative to low-code/no-code solutions with similar efficiency in terms of typical development tasks but with fully transparent code generation for the battle-proven stack, instead of proprietary high-level abstractions and DSLs. One of the integral parts of the platform is UI development. We made an RnD and realized that it is possible to bring visual tools right into the IDE, closing the gap to WYSIWIG editors. The crucial part is that developers still stay on the familiar and convenient ground of their favorite IDE.

Also, despite IntelliJ providing excellent capabilities to work with code (refactoring, code completion etc) it seems there is a lack of specific support for React.js which we can fulfill.

Gradually we realized that it’s not fair to limit the audience of the tooling we make by our brand-new framework users only. We made a humble assumption that it may be useful for a wider audience of developers.

Finally, we’ve got a similar, very successful experience of extracting dedicated framework tooling to a generic plugin for a wide audience of Java Persistence users. The JPA Buddy plugin is proven to be useful for hundreds of thousands of developers.

That’s how the idea of React Buddy plugin was born.

Mission

We formulated several goals and principles that guide our movement:

• Make development faster by reducing the amount of boilerplate required to be hand-coded
• Make code -> visual representation (visual testing) and vice-versa as seamless as possible
• Provide means to utilize reusable components
• Stay non-invasive: don’t break existing code, don’t force to use any (coding) conventions, in other words leave as much freedom of choice as possible
• Aid to write correct code

Scope

Component preview

One of the major features of the plugin is the live component preview right inside the IDE. The preview is based on the project’s dev server and requires minimal setup.

• Using the gutter icon, you can toggle the preview of a particular component
• The Preview has introspection capabilities: a click on any UI element navigates to the source code and vice versa
• The selected component is highlighted in the preview
• We can see the rendered component side-by-side to the code or detach the preview window

In order to make the preview work we should add the @react-buddy/ide-toolbox dependency to the project and inject <DevSupport> tag to the root component tree. The plugin helps to automate this process by executing all necessary steps.

Palette

Typically, when some UI Kit is used developers frequently peek at documentation to search for the suitable component and in most cases copy-paste example code. The Palette is a tool-window containing those reusable components - primarily UI Kit elements. It can contain any JSX though – consider it as building blocks.

So, the main problem Palette solves is the UI Kit discoverability – no need to open the website with documentation and examples. A developer can iterate through the component list right in the IDE. Components are categorized and may have several variants according to use-cases. For example, the Button component in MUI palette has three variants: text, contained and outlined. Any component (variant) can also be previewed:

The second feature is code generation – you can just drag’n’dop (or double click) any component right into the source code editor and React Buddy will paste it to the corresponding position. The palette can be defined in the project or brought as a dependency – developers can create their own palettes (for popular or proprietary UI libraries) and publish them as npm packages. See two demo projects with pre-configured MUI and Ant Design palettes:

https://github.com/react-buddy/demo-mui-v5
https://github.com/react-buddy/demo-antd-v4

JSX Outline

JSX Outline provides a structural (tree) representation of React components. The goal is to help to discover the complex component structure and provide navigation to the code. It displays the following nodes:

• Components and render functions defined in the file
• Hooks (and returned objects)
• Handler functions
• JSX structure:
  • conditional rendering (guards)
  • lists (maps)
  • handlers (with navigation to handler function)

It is not just read-only and allows to manipulate JSX nodes: copy/paste, cut and even drag’n’drop components from the Palette.

Coding Assistance

We know that a fair number of developers don’t like visual tools at all, thus, we offer code editor features. It’s possible to generate event handlers with a valid TypeScript signature (typed parameters) using IDE’s code generation action and quick fix.

The code editor is enriched with gutter icons designating React hooks and handler functions. That helps to observe the component structure and navigate the corresponding usage(s).

What’s Next?

Thankfully the strategy of the product evolution looks relatively straightforward:

• Collect more needs and pain points of React developers and try to facilitate solving them
• Analyze what the most popular approaches and libraries in React ecosystem are and design more visual tools to increase efficiency

We cannot share the concrete roadmap yet, but the nearest releases will include:

• More powerful palette/snippets mechanism, which will be parametrized and allow to generate more sophisticated and high-level code (including hooks, handlers, etc.). The ultimate goal is to generate data-bound UI in a few clicks
• Components metadata protocol: will help to provide more meaningful captions in the JSX Outline and group properties in the component inspector

There are some ideas for further releases:

• Modern live templates for React
• Storybook integration
• More ready-to-use palettes

Anyway, we will align further development according to users’ feedback.

What about VS Code?

We love VS Code and realize it’s the most popular IDE for React development. However, the IntelliJ platform provides excellent code analysis/generation capabilities, that’s why we decided to develop the plugin primarily for it. Also, we have limited resources and need to concentrate on a single platform right now. Once we create a fully functional and successful product for one platform, we will definitely put the idea of VS Code analogue on the table.

Conclusion

This article presents a new plugin for React developers who use WebStorm (or IDEA Ultimate). Some unique features of the tool are described, but we realize that a long road of product polishing is ahead. The plugin intended to be useful for any React developer. Try it out and share your feedback with us - this will help a lot to steer the product in the right direction!