file

Molecule

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

Введение

Moleculeявляется предметомVS Codeвдохновлять, использоватьReact.jsпостроенWeb IDE UIРамка. С помощью механизма расширения, подобного VS Code (Extension), вы можете быстро и легко создать высоко абстрактныйWeb IDE UIсистема. В то же время, основанный на редакторе Monaco, он объединяет такие функции, как QuickAccess и Keybinding, и предоставляет простой API для использования.

выгода отмеханизм расширенияиРеагировать на компонентизациютехнологии, Molecule может ориентироваться, например.Интерфейс рабочего места, ColorTheme,пользовательская горячая клавиша,быстрый доступи другие функции для пользовательских расширений. Кроме того, разработчики могутБизнес-коди архитектура пользовательского интерфейса IDEразъединение, сохраняя высокую скорость итерации бизнеса,опыт взаимодействия с продуктомвсе еще в хорошем состоянииСпособность к устойчивой эволюции.

file

мотивация

Стек данных (DTInsight)НапримерОффлайн, разработка задач в реальном времени, разработка алгоритмови другие продукты, большинство их непосредственных пользователейРазработчики,нужно сделать в сетинаписание кода, отладкаждать работы. Поэтому мы также надеемся создать для разработчиков хороший опыт онлайн-разработки IDE.

file

                                                                 *早期的*数栈开发平台

RD-OS на картинке выше — это ранняя версия нашей платформы разработки стека данных, когда сама функция продукта была относительно простой. В начальной реализации внешнего интерфейса весь интерфейс UI IDE построен на основе React + Ant Design + Codemirror. Кроме того, поскольку в то время эта сцена Workbench использовалась во многих наших продуктах, мы также абстрагировали простой и чистый компонент React пользовательского интерфейса IDE Workbench для повторного использования другими продуктами.

file

                                                       *当前的 Web IDE 版本*

С развитием бизнеса и постоянной итерацией продукта функции всей страницы также стали очень функциональными.плотный и сложный.Были обновлены и изменены макет продукта, видение, взаимодействие и т. д. Изображение выше — это уже наша последняя версия дизайна. Однако перед лицом этих новыхинтерактивный, визуальныйпо апелляции, когда ранопростая укладкаТехническая архитектура будет казаться немного растянутой. Новый план дизайнера, обусловленныйСтоимость модернизацииочень высока и сложна в реализации.

Примерно в 2019 году команда и продукт сообщили о лучших продуктах Web IDE на рынке, таких какCloud9 IDE,VS Code,Eclipse TheiaЖдать. Эти продукты имеют очень хорошую абстракцию пользовательского интерфейса, хорошую расширяемость и удобные функции, такие как пользовательские темы. Однако IDE с относительно полным функционалом этих продуктов немного тяжеловаты применительно к нашим продуктам, а также создают большие технические проблемы для команды.Стоимость миграцииОн также относительно высок, а пользовательский интерфейс недостаточно гибок.

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

основная функция

Мы обращаемся к дизайну VS Code и реорганизуем абстракцию пользовательского интерфейса, редактор, цветовую тему и т. д. Текущие основные функции Molecule следующие:

Код Visual Studio со встроенной версией ReactWorkbench UI
В основном совместим с Visual Studio CodeColorTheme
Поддерживает настройку с помощью компонентов ReactWorkbenchстиль пользовательского интерфейса
Встроенный редактор МонакоCommand Palette,Keybindingи другие модули, а также поддерживает расширения
служба поддержки i18n, встроенный упрощенный китайский, английский и другие языки
Простой встроенныйSettingsМодуль, поддержка онлайн редактирования, модификации и расширения
Встроенный по умолчаниюExplorer, Searchи другие компоненты, а также поддерживает расширения
Typescript

file

Изображение выше — повторно абстрагированный пользовательский интерфейс Workbench. На основе простого расширения, такого какWorkbench,ColorTheme,QuickAccess,Keybinding,i18n,SettingsИ так далее, с помощью встроенных сервисов Molecule его можно легко использовать и расширять.

В чем разница с другими веб-IDE с открытым исходным кодом?

Полная интеграция приложений React.js
Библиотека компонентов на основе React.js, лучшенастройка пользовательского интерфейсаспособность
В основном совместим с тысячами расширений ColorTheme VS Code.
Молекула это простоWeb IDE Взаимодействие с пользовательским интерфейсомрамки, не включает, например.Файловая система,Управление версиями,ЛСП, ДАП,TerminalДля более сложных функций IDE разработчикам необходимо реализовать их вручную.

как пользоваться?

пожалуйста прочтибыстрый стартдокументация. ‣

следующий план

Молекула по-прежнемуBetaверсии многие API недостаточно стабильны. В первые дни были ссылки на некоторые концепции дизайна VS Code, а дизайн API был недостаточно простым; текущий Workbench по умолчанию — это макет версии VS Code, а богатая система макетов будет рассмотрена позже; есть еще много деталей для взаимодействия с цветовой темой, которое необходимо оптимизировать. Molecule — это основанная на VS Code среда веб-интерфейса IDE, созданная с помощью React.js. С помощью механизма расширения, подобного VS Code (Extension), вы можете быстро и легко создать высоко абстрактныйWeb IDE UIсистема. В то же время, основанный на редакторе Monaco, он объединяет такие функции, как QuickAccess и Keybinding, и предоставляет простой API для использования.