Облегченная среда пользовательского интерфейса Web IDE

Введение

Molecule — это облегченная среда пользовательского интерфейса Web IDE, созданная с помощью React.js и вдохновленная VS Code. Мы разработали API-интерфейсы расширений, аналогичные VS Code, чтобы помочь разработчикам более эффективно разрабатывать систему Web IDE. Molecule встроен в редактор Monaco, мы предоставили API-интерфейсы извлечения Keybinding и QuickAccess.

Благодаря механизму расширения разработчики могут отделить бизнес-код от пользовательского интерфейса IDE, но, чтобы сосредоточиться на бизнес-итерации, часть пользовательского интерфейса IDE почти полностью переместится в изолированную итерацию. Это лучший способ заставить продукт продолжать двигаться.

Мотивация

В DTSTack у нас есть много веб-приложений, таких как разработка пакетных/потоковых задач, анализ, управление источниками данных, разработка алгоритмов. Разработчикам нужно кодировать, отлаживать на нашей платформе, поэтому IDE — частая сцена в нашем продукте.

На этом снимке экрана показана ранняя версия IDE, и продукт пока еще прост. Пользовательский интерфейс IDE основан на технологиях React.js, Ant Design и Codemirror. Кроме того, из-за того, что IDE Workbench применяется во многих наших продуктах, нам приходится абстрагировать простой компонент IDE UI React, чтобы делиться им с другими продуктами.

С ростом бизнеса и итерацией продукта функции Workbench становятся все более и более сложными. Как вы все знаете, продукт интерактивного и визуального обновления каждый год, но ранняя архитектура Front end настолько толстая, плохо расширяемая, что не может поддерживать новые функции и проекты. Дизайнеры пользовательского интерфейса всегда недоумевают, почему стоимость обновления внешнего интерфейса так высока.

В 2019 году мы исследовали решения Cloud9 IDE, VS Code, Eclipse Theia. Эти продукты обладают хорошей абстракцией пользовательского интерфейса, расширяемостью и полным набором функций для IDE. Но так много функций бесполезны для нашего продукта, и его слишком сложно настроить для нашей команды. Другая причина заключается в том, что наш код React.js также трудно интегрировать с этими решениями.

Итак, нам нужно решение с хорошей абстракцией пользовательского интерфейса, простым в настройке пользовательским интерфейсом, цветовой темой, дружественной для приложений React.js. Наконец, VS Code вдохновил нас. Команда попыталась сделать Молекулу.

Основные особенности

Molecule написала на Typescript и применила React.js, Monaco Editor и другие технологии, а основные функции:

  • Встроенный пользовательский интерфейс VS Code Workbench.
  • Совместимость с VS Code ColorTheme
  • Легко настраивайте Workbench с помощью React Component
  • Встроенная палитра команд Monaco-Editor, функции привязки клавиш
  • Поддержка i18n, встроенного zhCN и английского языка.
  • Встроенные настройки, поддержка редактирования и расширения через расширение
  • Встроенный базовый проводник, компоненты поиска и поддержка расширения через расширение
  • Машинопись готова

Это изображение является рабочей средой IDE по умолчанию для Molecule, в основном, такие как Workbench, ColorTheme, QuickAccess, Keybinding, i18n, Settings и т. д., функции легко расширяются с помощью Extension API.

Каковы отличия Molecule от других решений Web IDE?

  • React.js дружественный к приложению
  • Построен на компоненте React.js и более мощном пользовательском интерфейсе.
  • Совместимость с кодом VS, так много расширений ColorTheme
  • Сосредоточившись только на пользовательском интерфейсе, это легко понять разработчикам переднего плана.
  • Поддержка расширения таких функций, как файловая система, контроль версий, LSP, DAP, терминал и т. д., если вы хотите

Как это использовать?

Прочтите Быстрый старт, пожалуйста.

Будущее

В настоящее время Molecule выпустила только бета-версию. API недостаточно стабильны. Некоторые концепции, упомянутые в VS Code, переработаны. Мы собираемся сделать Extension API более мощным. Продолжайте оптимизировать детали пользовательского интерфейса и ColorTheme, разрабатывая более богатую систему макетов.

Окончательно

Надеемся, наш опыт будет вам полезен！