Keep It Simple, Stupid.
Copy the code

This is the KISS principle that developers are familiar with. It is also like a friendly reminder with a sense of ridicule, reminding everyone in front end that simple user experience and simplified construction logic are the road to simplicity in front end development.

This is also the goal pursued by the front-end development team of Kangaroo Cloud stack.

Data stack is a dedicated one-stop product system, covering the whole data link development process, comprehensive localization compatible, core source independent and controllable cloud native one-stop big data development and governance platform.

Molecule, a lightweight Web IDE component library based on years of big data development experience, is open source on December 16, 2021. On February 22, 2022, Taier, a distributed visualization DAG task scheduling system built by Molecule as one of the important UI components, also joined the open source community.

Today, after Taier has been tested by hundreds of enterprise customers in the production environment, we would like to share with you in this article some of our experience on how Molecule and ANTD fit into Taier’s construction process and their practical performance in the development of Web IDE.

Introduce a,

Taier is a visual DAG task scheduling system built by stack. It was originally built to allow big data developers to focus on the development of business logic instead of being tied down by the complex dependencies of tasks. This goal is achieved through the Web IDE part.

Molecule, which is accumulated in the iterative process of stack platform, as a lightweight Web IDE UI framework, can greatly reduce the time to build the editor, and its Extension mechanism makes it easy to cope with the growth of various demands. Molecule abstracts the online editing configuration of offline tasks in the stack products, and supports the online writing of SQL code that exists in all products. Molecule’s excellence in all aspects made us realize very quickly that it was almost natural to use Molecule as an IDE component in Taier systems.

Second, the advantages of

Molecule’s front end was long Web IDE.

The development of Web IDE has always been a very complicated and cumbersome part of the development of the whole big data platform. Building a Web IDE from scratch usually means a lot of sweat and thinking, and the time cost is countless. Traditional IDE frameworks have a high threshold of familiarity, high maintenance costs, and high requirements for maintenance personnel. Molecule has been committed to the concept of “out-of-the-box and easy to maintain” since its inception, and we can now confidently say that Molecule makes the Web IDE UI framework lightweight and highly scalable. A development component framework with a complete solution that greatly enhances the front-end development experience without sacrificing the possibility of requirements.

Iii. Application and practice

The process of adding Molecule to Taier was not straightforward. To solve the problem of developing a Web IDE and a large number of traditional forms in Taier, we had to introduce both Ant Design and Molecule.

The use of Molecule in a front-end project with two component libraries at the same time immediately caused the problem of style conflict, and the inclusion of Molecule “broke” the development interface that had been used only by ANTD. We have to think about how to resolve style conflicts by using multiple UI component libraries for the same front-end project. Different components have different design architectures, and how do the different architectures interact? After a lot of trial and error and constant tweaking, we found a solution:

3.1 How to resolve style conflicts

First, the overall style color conflict can be resolved by customizing the theme color, and Both Ant Design and Molecule have configurations to modify the overall theme color, such as:

After the above properties are configured, the main brand color used by all Ant Design components is changed to # 3F87FF. In addition, we changed a few other styles to make Ant Design more of Molecule, such as rounded corners, hyperlinks, etc.

In addition to the theme color modification, also need to solve the problem of dynamic theme color adaptation. One of Molecule’s powerful features is the ability to switch between themes as you like, such as Dark Default or Light Default. The reason Molecule can easily switch themes is simply based on CSS variables. Ant Design’s dynamic themes feature is still experimental, so we took a different approach. The Ant Design style files for different theme styles are dynamically loaded through Molecule’s supply that listens for theme color changes. Such as:

The code basically says that when Molecule’s theme is changed, we load Ant Design’s Dark theme style file if the theme is dark, otherwise we remove Ant Design’s Dark theme style file.

Here are two images of the interface you can choose from before and after adaptation:

3.2 How to Adapt to the Interaction System

In the traditional big data platform, when we modify a task and submit the code, we need to jump to the page of task management or scheduling management to check some relevant operation information or scheduling information. Sometimes we do not want to leave the current edit page, and want to enter the scheduling page to check the relevant information, we have to switch back and forth page or open a new page to switch back and forth.

Molecule provides a powerful extension mechanism in which you can highly customize any visible or invisible element of the page to fit your needs. For example, when developing task management, we solved the problem of switching back and forth between pages by adding task management to Molecule’s menu bar and opening Ant Design’s drawer component to render different component contents after listening for events in the menu bar.

3.3 Other Optimizations

In addition to customizing the menu bar, we can also customize any area. For example, in working with the data source center, we added the data source center to the ActivityBar and used the API provided by Molecule to add or edit the data source window to Molecule’s IDE area. The data source center also does not need to switch back and forth page, but through the current page switch panel, open Tab and other ways to modify.

In addition to the menu bar and active panels mentioned above, Molecule supports customization for all the areas you see. Details can be viewed through Molecule’s official documentation.

With the introduction of Molecule, development on Taier will no longer need to lay out individual components from scratch, but will be able to directly populate the different components into their respective layout areas. Molecule’s addition greatly reduces the upfront development time and frees developers from maintaining components and cleaning up the underlying logic of the code to concentrate on the business itself.

At the same time, the introduction of Molecule has optimized the interaction mode of Taier. On the premise of not abandoning the existing Ant Design, Molecule stack has managed to be compatible with Molecule’s style and improved the user experience of one-stop big data development platform.

Four,

The stack technology team has always believed in the vitality of open source culture. The ideal of “all for one, one for all” has been burning in the heart of each stack developer. The big family of data stack gathers a group of like-minded comrade-in-arms, and implements the high energy efficiency and cross-border software development mode of open source collaboration from the beginning until now. The reason why we are determined to open source is not only the importance of technical optimization, but also the sense of community responsibility after we are at the leading level of the industry. We want to make our own contribution to improve the technical level of the entire software industry.

Molecule from precipitation in our daily work, is a “dedicated to a line of developers to develop practical scenario” UI framework, and we believe open source, it will be increase work efficiency of those customers to develop, promote development experience at the same time, also can in be used actually it can still improve optimization problems. We sincerely welcome friends in the community to exchange and explore, we do share, but also in sharing to learn from the strong. We wish to make progress together with the developers in the community and prosper the domestic open source ecosystem