MoleculeAlightweightWebIDEUIframeworkIntroductionMolecule是一个WebIDEUI框架，其灵感来自VSCode，并使用React.js构建。通过类似VSCode的扩展机制（Extension），可以快速轻松地搭建一个高度抽象的WebIDEUI系统。同时，在MonacoEditor的基础上，内置QuickAccess、Keybinding等功能，并提供简单的API使用。得益于扩展机制和React组件化技术，Molecule可以自定义WorkbenchUI、ColorTheme、自定义热键、快速访问等功能。此外，开发人员可以将业务代码与IDEUI架构解耦。在保持业务高速迭代的同时，产品交互体验依然保持良好的可持续演进能力。DTInsight中的离线、实时任务开发、算法开发等产品，其直接用户多为开发人员，需要在Web端完成代码的编写和调试。因此，我们也希望能为开发者打造良好的在线IDE开发体验。*早期*数字栈开发平台上图中的RD-OS是我们早期版本的数字栈开发平台，当时的产品功能本身比较简单。在前端的初步实现中，整个IDEUI界面都是基于React+AntDesign+Codemirror构建的。另外，由于当时我们很多产品都有这个Workbench场景，所以我们也抽象出一个简单纯React的IDEWorkbenchUI组件，供其他产品复用。*当前WebIDE版本*随着业务的发展和产品的迭代，整个页面的功能变得非常密集和复杂。产品布局、视觉、交互等都在不断更新变化。上图是我们最新的版本设计。然而，面对这些新的交互和视觉需求，早期简单的堆叠式技术架构会显得有些捉襟见肘。由于装修成本高昂，设计师的新计划难以实施。2019年前后，团队和产品交流了市面上比较好的WebIDE产品，比如Cloud9IDE、VSCode、EclipseTheia等，这些产品有很好的UI抽象，扩展性好，自定义主题等方便的功能.但是，这些产品功能比较齐全的IDE，应用到我们的产品上就有些沉重了，对团队的技术挑战也比较大。最主要的是技术迁移成本比较高，自定义UI不够灵活。基于这些考虑，团队试图找到一个平衡的解决方案。我们希望这个方案对新功能有很好的UI抽象，可定制的UI，ColorTheme的轻松定制，React项目的无缝对接，以及产品交互的不断进化。在研究了VSCode的源码后，我们萌生了Molecule项目的想法。核心功能参考了VSCode的设计，重新梳理了UI抽象、编辑器、颜色主题等，Molecule目前的核心功能如下：内置React版本的VisualStudioCodeWorkbenchUI为基本兼容VisualStudioCode的ColorTheme支持使用React组件自定义WorkbenchUI风格内置MonacoEditorCommandPalette、Keybinding等模块，并支持扩展i18n支持，内置简体中文、英文等两种语言内置简单的Settings模块，支持在线编辑修改，扩展内置默认的Explorer、Search等组件，支持Typescript的扩展。上图是重新抽象出来的WorkbenchUI。基于一个简单的扩展（Extension），Workbench、ColorTheme、QuickAccess、Keybinding、i18n、Settings等功能，都可以通过Molecule内置的服务轻松使用和扩展。它与其他开源WebIDE有何不同？React.js应用无缝对接基于React.js的组件库，更好的UI定制能力，基本兼容VSCode中上千种ColorTheme扩展。Molecule只是一个纯WebIDEUI交互框架，不涉及诸如文件系统等更复杂的IDE功能，如版本管理、LSP、DAP、Terminal等，需要开发者手动实现。如何使用？请阅读快速入门文档。?下一个计划Molecule目前还是Beta版本，很多API还不够稳定。前期参考了一些VSCode的设计理念，API设计不够简单；目前默认的Workbench是VSCode版本的布局，以后会考虑丰富的布局（Layout）系统；ColorTheme交互还有很多细节需要优化。
