OpenSumi Lite: чистый фронтальный IDE-решение для удобного просмотра и редактирования кода

Общее введение

OpenSumi Lite - это чисто внешнее IDE-решение, основанное на проекте OpenSumi, целью которого является предоставление возможностей просмотра и редактирования кода без необходимости использования среды Node.js. Разработанный совместно Alibaba Group и Ant Group и открытый под лицензией MIT, OpenSumi Lite реализует относительно полные возможности IDE в чисто браузерной среде с помощью простой архитектуры B/S для таких специфических сценариев, как просмотр и рецензирование кода. Пользователи могут ознакомиться с проектом непосредственно на странице предварительного просмотра онлайн или запустить его локально, клонировав репозиторий GitHub.

Список функций

• Просмотр кода: Поддержка просмотра файлов кода и структуры каталогов в репозиториях GitHub.
• редактор кода: Предоставляет базовые возможности редактирования кода, включая подсветку синтаксиса и подсказки по коду.
• Поддержка плагинов: Поддержка плагинов Web Extension, которые позволяют пользователям добавлять пользовательские плагины для расширения функциональности редактора.
• Поддержка нескольких языков: Встроенная подсветка синтаксиса и плагины-подсказки для нескольких языков программирования.
• Предварительный просмотр онлайн: Чтобы пользователи могли ознакомиться с функциональностью IDE без необходимости ее установки, предусмотрена страница предварительного онлайн-просмотра.
• Поддержка ветвлений и тегов: Поддерживает открытие репозитория с указанной веткой или версией тега.

Использование помощи

Установка и эксплуатация

1. проект клонирования::

   git clone https://github.com/opensumi/ide-startup-lite.git
cd ide-startup-lite

2. Установка зависимостей::

   yarn

3. Начало реализации проектов::

   yarn start

доступ после запуска http://127.0.0.1:8081 Вы можете предварительно просмотреть IDE.

Руководство по эксплуатации функций

Просмотр кода

• Откройте браузер и посетите http://127.0.0.1:8081.
• Введите адрес репозитория GitHub в адресную строку, используя # Нет. Добавьте адрес склада, например:http://127.0.0.1:8081#https://github.com/opensumi/core.
• В браузере отобразятся файлы кода и структура каталогов репозитория.

редактор кода

• На странице "Просмотр кода" щелкните на любом файле кода, чтобы перейти в режим редактирования.
• Редактор обеспечивает подсветку синтаксиса и подсказки по коду, а также поддерживает широкий спектр языков программирования.
• После завершения редактирования нажмите кнопку Сохранить, чтобы синхронизировать изменения с сервером.

Управление подключаемыми модулями

• показать (билет) web-lite/extension/index.ts файл, чтобы добавить или изменить список плагинов.
• Список плагинов оформляется следующим образом:

  const extensionList = [
{ id: "OpenSumi.vsicons-slim", version: "1.0.4" },
{ id: "tao.o2-cr-theme", version: "2.6.3" },
{ id: "alex.typescript-language-features-worker", version: "1.0.0-beta.2" },
];

• После сохранения файла перезапустите проект, чтобы загрузить новую конфигурацию плагина.

Поддержка нескольких языков

• показать (билет) web-lite/grammar/index.contribution.ts файл, чтобы добавить или изменить список поддержки языков.
• Список языковой поддержки оформляется следующим образом:

  const languages = [
"html",
"css",
"javascript",
"less",
"markdown",
"typescript",
];

• После сохранения файла перезапустите проект, чтобы загрузить новую конфигурацию поддержки языка.

Предварительный просмотр онлайн

• Посетите страницу предварительного онлайн-просмотра:Онлайн-превью OpenSumi Lite.
• На странице предварительного просмотра пользователи могут непосредственно пользоваться функциями просмотра и редактирования кода без необходимости установки какого-либо программного обеспечения.

OpenSumi Lite с открытым исходным кодом Введение

Спустя почти 3 года совместных усилий Ali Group и Ant Group, OpenSumi, первый фреймворк для разработки IDE с широкими возможностями настройки, высокой производительностью и совместимостью с системой плагинов VS Code, был официально открыт сегодня.

Что такое OpenSumi?

OpenSumi - это вертикально-ориентированная, низкопороговая, высокопроизводительная, хорошо настраиваемая двухсторонняя (Web и Electron) среда разработки IDE.

Рамки рано Ali Group Tao системы инженерной команды и Ant Group опыт технологического отдела, R & D производительности команды совместно инициировали совместную разработку IDE стандартизированный R & D рамки. Он основан на TypeScript + React Кодирование, реализация основных функциональных модулей, включая менеджер ресурсов, редактор, отладка, Git панели, панели поиска и т.д., разработчики просто на основе нашего стартового проекта для простой конфигурации, вы можете быстро построить свой собственный локальный или облачный IDE продуктов, сам фреймворк совместим с VS Code плагин экосистемы, основные VS Code плагины могут быть бесшовные в продуктах на основе развития OpenSumi! Фреймворк совместим с экосистемой плагинов VS Code, все основные плагины VS Code могут быть легко запущены в продуктах на базе OpenSumi. Между тем, фреймворк также предоставляет разработчикам различные недорогие, высоко настраиваемые возможности настройки представления, которые могут удовлетворить большинство сценариев настройки представления в сценариях IDE.

Для разработки IDE на рынке уже существуют code-server, Theia и другие решения с открытым исходным кодом, так почему же мы решили реализовать их в своем собственном исследовании? С начала 2019 года мы обнаружили, что в Ali и Ant Group существует множество продуктов IDE, и большинство из них имеют одинаковую предварительную конструкцию продуктов IDE, но эта часть предварительной работы занимает у команды несколько месяцев или более полугода, и возникает много дублирования усилий, а в процессе использования решений с открытым исходным кодом в некоторых командах мы также более или менее столкнулись с некоторыми проблемами, такими как ограниченные возможности настройки, глубокая зависимость от исходного кода, обслуживание и так далее. В процессе использования решений с открытым исходным кодом в некоторых командах мы в той или иной степени столкнулись с некоторыми проблемами, такими как ограниченные возможности кастомизации, глубокая зависимость от исходного кода, сложности в обслуживании и невозможность удовлетворить внутренние требования к производительности. В итоге мы решили объединить усилия нескольких команд и встать на путь самостоятельных исследований и внедрения.

В чем преимущества OpenSumi?

Как уже упоминалось ранее, OpenSumi - это вертикально-ориентированная, низкопороговая, высокопроизводительная, хорошо настраиваемая двухсторонняя (Web и Electron) среда разработки IDE. Его особенности в основном отражены в следующих пунктах:

1. Широкие возможности настройки представлений

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

На многих этапах внедрения внутренних продуктов мы, естественно, добиваемся лучшей ремонтопригодности с помощью модулей для реализации базовых возможностей и достигаем более высокой степени кастомизации с помощью плагинов для реализации бизнес-представлений или настройки возможностей. Если взять в качестве примера некоторые сценарии внутренних исследований и разработок Ali, то структура будет выглядеть следующим образом:

2. обширный опыт поддержки вертикальных исследований и разработок

OpenSumi до официального открытого источника, в Али и Ant Group был непрерывно инкубируется в течение двух лет, в течение которых осадки посадки ряд представительных вертикальных областях под R & D случаев, большинство R & D сценариев практики, которые вы можете думать, вы можете быть в состоянии найти практический опыт в OpenSumi.

• Сценарии разработки апплетов

Для разработки апплетов, инструмент разработчика апплетов Alipay и инструмент разработчика апплетов Taobao реализованы с использованием OpenSumi в качестве основного фреймворка, и до сих пор количество обслуживаемых разработчиков достигло 2W+ в месяц.

Благодаря нашим пунктам вклада Toolbar и дополнительному API sumi, мы можем обеспечить дальнейшую настройку представлений с помощью плагинов. Например:

1) Настройка различных отображений панели инструментов

2) Реализовать независимое планирование окон (например, с помощью симуляторов)

В то же время общий базовый слой и возможности плагинов делают возможным сквозное быстрое портирование. Перенеся плагин, связанный с инструментом разработчика апплетов Alipay, мы завершили поддержку начальной версии инструмента разработчика апплетов Taobao, который имеет схожую функциональность, но разные сценарии использования, и за короткий срок (1 месяц) выпустили клиент O2 для внутреннего использования.

• Интегрированные в облако научно-исследовательские связи

Если говорить об облачных R&D связях, то у нас есть внешняя платформа разработки AliCloud и внутренние продукты O2, Ant Codespaces и другие.

Обычная связь с R&D показана в верхней половине рисунка ниже.

Мы часто должны пройти через некоторые простые или громоздкие работы по настройке среды перед началом исследования и разработки проекта, ваша среда кодирования и облачной среды есть разделение, с помощью AliCloud и других облачных продуктов, контейнерные возможности, мы можем построить через OpenSumi принадлежит предприятию или облачной среды кодирования команды, так что разработчики могут действительно сохранить среду для настройки проблемы завершения разработки всех работ в облаке.

Глубокая настройка процессов позволяет разработчикам быстро приступить к разработке.

Благодаря соединению с внутренней платформой R&D разработка, тестирование и внедрение могут осуществляться в режиме "одного окна".

• Чистая фронтальная сборка

Возможность создания чистого фронтенда является наиболее широко используемой частью OpenSumi в Ali и Ant Group, она предоставляет своего рода Node.js сервис, который не должен полагаться на сервер для обеспечения запуска редактора, а непосредственно через ресурсы чистого фронтенда и статические определения интерфейса может быть построен с возможностью иметь базовый интерфейс редактора.

Основу его реализации составляют файловые, Git и другие сервисы, которые изначально полагаются на Node для уровня абстракции сервисного уровня, так что разработчики могут вручную определять конкретную логику чтения и записи файлов, в то время как на основе Web Worker API, предоставляемого OpenSumi, языковые сервисы работают в среде Web Worker браузера, так что для достижения структуры Node для достижения эффекта построения чистого фронтенда. Для достижения эффекта построения чистого фронтенда.

Основываясь на этом уровне реализации, вы можете полностью опираться на GitHub Rest API для достижения чистого фронтенд-редактора, вы можете прямо из верхней части GitHub просматривать код, редактировать и отправлять операции, мы рассмотрим соответствующий кейс из. Внутри компании типичными приложениями являются следующие сценарии:

1.Обзор кодов

2.Отображение кода

3. дистанционный письменный экзамен

Мы также предоставили простой способ начать работу в репозитории OpenSumi по адресу opensumi/ide-startup-lite [1], или вы можете ознакомиться с демо-версией непосредственно на странице предварительного просмотра [2].

3. полная поддержка возможностей подключаемых модулей VS Code

Я считаю, что студенты, которые обратили внимание на IDE-фреймворк Theia, не должны быть незнакомы с Theia, Theia как IDE-фреймворк, совместимый с плагинами VS Code, действительно совместим с некоторыми возможностями плагинов VS Code, но для последующего VS Code API совместимость становится все меньше и меньше, в основном полагаясь на сообщество, чтобы способствовать открытию разработчика.

OpenSumi был разработан для совместимости с экосистемой плагинов VS Code, поэтому у нас есть постоянные требования к фреймворку. После открытого сорсинга мы планируем завершать адаптацию API плагинов VS Code каждые три месяца, и план адаптации будет организован менеджерами соответствующих версий на дискуссионном форуме. Стандартный API был адаптирован к VS Code v1.60.0, и прогресс можно увидеть в Плане адаптации.

Различия между OpenSumi и основными фреймворками на рынке

Мы изучили исходный код VS Code и Theia на ранней стадии разработки, и в процессе реализации, чтобы быть совместимыми с экологией плагина VS Code, и в то же время совместимыми с функциями и опытом основных редакторов, некоторые исходные коды некоторых разработок и реализаций мы отнесли к реализациям двух учителей, и соответствующие блоки кода были помечены заголовком с информацией об авторских правах.

1. Взаимоотношения с VS Code

VS Code как большая доля рынка IDE, его ядро для IDE продукта, суть рамки с нашими атрибутами есть различия, в целом является ToC продуктов, разработчики настроить порог и высокую стоимость, может быть настроен содержание также относительно ограничен, большинство плагинов в виде ограниченного расширения.

Наш фреймворк в основном предназначен для пользователей ToB и является простым и удобным вариантом разработки для малых и средних предприятий, которым необходимо создать свои собственные продукты CloudIDE / локальные IDE с помощью фреймворков IDE, но у которых нет достаточных технических возможностей для исследований и разработок.

2. Отношения с Теей

Theia, как новичок, опираясь на некоторые концепции дизайна VS Code, после почти нескольких лет развития и зрелости, сообщество является относительно процветающим, поддерживается Eclipse Foundation, разработчики IDE также хорошие варианты развития, и наш OpenSumi рамки является конкурентоспособным.

Theia сама по себе обеспечивает модульную конструкцию продуктов IDE, большинство настроек на вид может быть расширено с помощью модульного подхода (этот пункт в нашем OpenSumi также опирается на соответствующие идеи), в плагине способность быть совместимым с большинством VS Code плагинов, предоставляя подмножество VS Code плагин API, некоторые API плагинов (например, язык отладки и т.д.) не полностью реализованы и нет плана непрерывной последующей работы. （Некоторые API плагинов (такие как отладка, язык и т.д.) реализованы не полностью, и нет плана последующих действий.

Исходя из вышеизложенного, фреймворк OpenSumi не только поддерживает базовое модульное расширение, на уровне плагинов мы продолжаем следить за планированием стандартного API VS Code (в настоящее время реализована версия API VS Code 1.16.0), и в то же время, основываясь на реализации фронтенд-песочницы, мы предоставляем серию API sumi с плагинами для свободного расширения возможностей представления. В то же время мы реализовали фронтенд-песочницу, которая предоставляет серию API sumi, которые можно использовать для свободного расширения возможностей представления с помощью плагинов, так что студенты, знакомые с React, могут сразу начать писать фронтенд-компоненты и реализовывать соответствующую функциональность представления с помощью богатых API, которые мы предоставляем.