OpenSumi Lite: IDE de interfaz puro para ver y editar código fácilmente

Introducción general

OpenSumi Lite es una solución IDE de front-end pura basada en el proyecto OpenSumi, cuyo objetivo es proporcionar capacidades de visualización y edición de código sin necesidad de un entorno Node.js. Desarrollado conjuntamente por Alibaba Group y Ant Group, y con licencia MIT, OpenSumi Lite implementa una capacidad IDE relativamente completa en un entorno de navegador puro a través de una sencilla arquitectura B/S para escenarios específicos como la visualización y revisión de código. Los usuarios pueden experimentar el proyecto directamente a través de la página de vista previa en línea, o ejecutarlo localmente clonando el repositorio de GitHub.

Lista de funciones

• Vista del código: Soporte para la visualización de archivos de código y estructuras de directorios en repositorios GitHub.
• editor de código: Proporciona funciones básicas de edición de código, incluyendo resaltado de sintaxis y sugerencias de código.
• Soporte para plug-insCompatibilidad con complementos de extensión web, que permiten a los usuarios añadir complementos personalizados para mejorar la funcionalidad del editor.
• Soporte multilingüeComplementos integrados de resaltado de sintaxis y sugerencias de código para varios lenguajes de programación.
• Vista previa en líneaSe proporciona una página de vista previa en línea para que los usuarios puedan experimentar la funcionalidad del IDE sin tener que instalarlo.
• Soporte de ramificación y etiquetado: Permite abrir un repositorio con una rama o versión de etiqueta especificada.

Utilizar la ayuda

Instalación y funcionamiento

1. proyecto de clonación::

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

2. Instalación de dependencias::

   yarn

3. Inicio de proyectos::

   yarn start

acceso posterior al lanzamiento http://127.0.0.1:8081 Puede previsualizar el IDE.

Guía de funcionamiento

Vista del código

• Abra su navegador y visite http://127.0.0.1:8081.
• Introduzca la dirección del repositorio de GitHub en la barra de direcciones, utilizando el botón # No. Añada la dirección del almacén, por ejemplo:http://127.0.0.1:8081#https://github.com/opensumi/core.
• El navegador mostrará los archivos de código y la estructura de directorios del repositorio.

editor de código

• En la página Vista de código, haga clic en cualquier archivo de código para acceder al modo de edición.
• El editor ofrece resaltado de sintaxis y sugerencias de código, y es compatible con una amplia gama de lenguajes de programación.
• Una vez finalizada la edición, pulse el botón Guardar para sincronizar los cambios con el servidor.

Gestión de Plug-ins

• espectáculo (una entrada) web-lite/extension/index.ts para añadir o modificar la lista de plugins.
• La lista de plugins tiene el siguiente formato:

  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" },
];

• Después de guardar el archivo, reinicie el proyecto para cargar la nueva configuración del plugin.

Soporte multilingüe

• espectáculo (una entrada) web-lite/grammar/index.contribution.ts para añadir o modificar la lista de idiomas admitidos.
• La lista de idiomas admitidos tiene el siguiente formato:

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

• Después de guardar el archivo, reinicie el proyecto para cargar la nueva configuración de soporte de idiomas.

Vista previa en línea

• Visite la página de previsualización en línea:Vista previa en línea de OpenSumi Lite.
• En la página de vista previa, los usuarios pueden experimentar directamente las funciones de visualización y edición de código sin tener que instalar ningún software.

OpenSumi Lite Open Source Introducción

Después de casi 3 años, bajo los esfuerzos del equipo de co-construcción de Ali Group y Ant Group, OpenSumi, como el primer marco de desarrollo IDE con fuerte personalización, alto rendimiento y compatibilidad con el sistema de plug-in VS Code, es oficialmente de código abierto hoy.

¿Qué es OpenSumi?

OpenSumi es un marco de desarrollo IDE vertical, de bajo umbral, alto rendimiento y altamente personalizable de doble extremo (Web y Electron).

Marco temprano por el equipo de ingeniería de sistemas de Ali Group Tao y el departamento de tecnología de experiencia de Ant Group, el equipo de rendimiento de I + D inició conjuntamente el desarrollo conjunto del marco de I + D estandarizado IDE. Se basa en TypeScript + Reaccione ¡Codificación, la aplicación de los módulos funcionales básicos, incluyendo el gestor de recursos, editor, depuración, panel Git, panel de búsqueda, etc, el desarrollador sólo sobre la base de nuestro proyecto de partida para la configuración simple, usted puede construir rápidamente sus propios productos IDE locales o en la nube, el marco en sí es compatible con el ecosistema VS Code plug-in, la corriente principal VS Code plug-ins pueden ser perfectamente en los productos basados en el desarrollo de OpenSumi! El marco es compatible con el ecosistema de plugins de VS Code, todos los principales plugins de VS Code se pueden ejecutar sin problemas en productos basados en OpenSumi. Mientras tanto, el marco también proporciona a los desarrolladores una variedad de capacidades de personalización de vistas de bajo costo y altamente personalizables, que pueden satisfacer la mayoría de los escenarios de personalización de vistas en escenarios IDE.

Para el desarrollo de IDE, ya hay code-server, Theia y otras soluciones de código abierto en el mercado, entonces ¿por qué elegimos implementarlo en nuestra propia investigación? Desde principios de 2019, hemos encontrado que hay muchos productos IDE dentro de Ali y Ant Group, y la mayoría de los productos tienen la misma preconstrucción de productos IDE, pero esta parte del trabajo de preconstrucción ocupa a un equipo menos de unos pocos meses, o más de seis meses y un año, y hay mucha duplicación de esfuerzos, y en el proceso de uso de soluciones de código abierto para algunos de los equipos, también hemos encontrado más o menos algunos problemas, como capacidades de personalización limitadas, profunda dependencia del código fuente, mantenimiento, etc. En el proceso de utilización de la solución de código abierto en algunos equipos, nos hemos encontrado más o menos con algunos problemas, como la limitada capacidad de personalización, la profunda dependencia del código fuente, la dificultad de mantenimiento y la incapacidad para satisfacer las necesidades de capacidad interna. Al final, decidimos reunir las fuerzas de varios equipos para emprender el camino de la autoinvestigación y la implantación.

¿Cuáles son las ventajas de OpenSumi?

Como se ha mencionado anteriormente, OpenSumi es un marco de desarrollo IDE de doble extremo (Web y Electron) orientado a la verticalización, de bajo umbral, alto rendimiento y altamente personalizable. Sus características se reflejan principalmente en los siguientes puntos :

1. Amplias posibilidades de personalización de las vistas

Además de un rendimiento y una experiencia de codificación similares con los navegadores principales, en las verticales orientadas a los negocios, tenemos mucho más que los marcos similares para la personalización, sobre la base de nuestro marco básico, usted es libre de personalizar sus productos IDE a través de módulos o plug-ins, que pueden alcanzar el verdadero significado de las capacidades de "personalización de vista completa".

En muchas fases de implementación de productos internos, naturalmente conseguiremos una mejor mantenibilidad mediante módulos para implementar capacidades básicas, y lograremos una mayor personalización mediante plug-ins para implementar vistas de negocio o personalización de capacidades. Tomando como ejemplo algunos de los escenarios internos de I+D de Ali, la estructura se estratifica de la siguiente manera:

2. Amplia experiencia en apoyo vertical a I+D

OpenSumi antes de que el código abierto oficial, en Ali y Ant Grupo ha sido incubado de forma continua durante dos años, durante los cuales la precipitación de aterrizaje de una serie de áreas verticales representativas en virtud de los casos de I + D, la mayoría de los escenarios de la práctica de I + D que se pueda imaginar, usted puede ser capaz de encontrar experiencia práctica en OpenSumi.

• Escenarios de desarrollo de applets

Para el desarrollo de applets, la herramienta de desarrollo de applets de Alipay y la herramienta de desarrollo de applets de Taobao se implementan utilizando OpenSumi como marco central, y hasta ahora, el número de desarrolladores atendidos ha alcanzado las 2W+ al mes.

Con nuestros puntos de contribución de la barra de herramientas y la API sumi adicional, podemos permitir una mayor personalización de la vista a través de plugins. Por ejemplo:

1) Personalizar las distintas pantallas de la barra de herramientas

2) Aplicar una programación de ventanas comunicables de forma independiente (por ejemplo, simuladores).

Al mismo tiempo, la capa subyacente compartida y las capacidades de los plug-ins también hacen posible una rápida portabilidad de extremo a extremo. Al portar el plug-in relacionado con la herramienta para desarrolladores de applets de Alipay, completamos la compatibilidad con la versión inicial de la herramienta para desarrolladores de applets de Taobao, que tiene una funcionalidad similar pero escenarios de uso diferentes, e incubamos el cliente de O2 para uso interno en el breve plazo de 1 mes.

• Enlaces de I+D integrados en la nube

En cuanto a los vínculos de I+D integrados en la nube, tenemos la plataforma de desarrollo AliCloud externamente y O2, Ant Codespaces y otros productos internamente.

El enlace habitual de I+D se muestra en la mitad superior de la siguiente figura.

A menudo tenemos que ir a través de algunos trabajos de configuración del entorno simple o engorroso antes de iniciar un proyecto de investigación y desarrollo, su entorno de codificación y el entorno de la nube hay una división, con la ayuda de AliCloud y otros productos en la nube, las capacidades de contenedores, podemos construir a través de la OpenSumi pertenece a la empresa o el entorno de codificación de la nube del equipo, por lo que los desarrolladores realmente puede salvar el medio ambiente para configurar el problema de completar el desarrollo de todo el trabajo en la nube.

Con una profunda personalización de los procesos, permite a los desarrolladores entrar rápidamente en el desarrollo.

Al conectar con la plataforma interna de I+D, el desarrollo, las pruebas y la implantación pueden realizarse de una sola vez.

• Construcción de front-end puro

Puro front-end capacidad de construcción es la pieza más utilizada de OpenSumi en Ali y Ant Group, proporciona una especie de servicio Node.js que no necesita depender del servidor para proporcionar el editor para iniciar, y directamente a través de los recursos de front-end puro y definiciones de interfaz estática se puede construir con la capacidad de tener la interfaz básica del editor.

El núcleo de su aplicación es a través del archivo , Git y otros servicios que originalmente se basan en Nodo para una capa de abstracción de la capa de servicio , de modo que los desarrolladores pueden definir manualmente la lógica específica de los servicios de lectura y escritura de archivos , mientras que sobre la base de la API Web Worker proporcionada por OpenSumi , los servicios lingüísticos que se ejecutan en el entorno Web Worker del navegador , a fin de lograr el marco del Nodo para lograr el efecto de la construcción de un front-end puro . Para lograr el efecto de la construcción de front-end puro.

Sobre la base de esta capa de implementación, puede completamente basado en la API de GitHub Rest para lograr un editor de front-end puro, puede directamente desde la parte superior de la vista de código de GitHub, editar y enviar las operaciones, vamos a considerar hacer un caso correspondiente a cabo. Internamente, las aplicaciones típicas son los siguientes escenarios:

1.Revisión de códigos

2.Visualización de códigos

3. Examen escrito a distancia

También hemos proporcionado una manera fácil de empezar en el repositorio OpenSumi en opensumi/ide-startup-lite [1], o puede comprobar la demo directamente en la página de vista previa [2].

3. Compatibilidad total con las funciones de complemento de VS Code

Creo que los estudiantes que han prestado atención al marco IDE de Theia no deben desconocer Theia, Theia como un marco IDE compatible con VS Code plug-in, es de hecho compatible con algunas de las capacidades de VS Code plug-in, pero para la posterior VS Code API de compatibilidad se ha vuelto cada vez menos, básicamente confiar en la comunidad para contribuir al descubrimiento del desarrollador.

OpenSumi fue diseñado para ser compatible con el ecosistema de plugins VS Code, por lo que tenemos requisitos continuos para el marco. Después de open-sourcing, tenemos previsto completar la adaptación de las API de plugins VS Code cada tres meses, y el plan de adaptación será organizado por los administradores de versiones correspondientes en el foro de discusión. La API estándar ha sido adaptada a VS Code v1.60.0, y el progreso puede verse en el Plan de Adaptación.

Diferencias entre OpenSumi y los principales marcos del mercado

Hemos estudiado el código fuente de VS Code y Theia en la fase inicial de diseño, y en el proceso de realización, para ser compatibles con la ecología del plug-in VS Code, y al mismo tiempo compatibles con las funciones y la experiencia de los editores convencionales, hemos remitido parte del código fuente de algunos de los diseños y realizaciones a las realizaciones de los dos profesores, y los bloques de código correspondientes se han marcado con el encabezamiento de la información sobre derechos de autor.

1. Relación con VS Code

VS Code como una gran cuota de mercado del IDE, su núcleo para un producto IDE, la esencia del marco con nuestros atributos hay diferencias, el general es un ToC productos, los desarrolladores para personalizar el umbral y el alto costo, se puede personalizar el contenido también es relativamente limitada, la mayoría de los plug-ins en forma de expansión limitada.

Nuestro marco sirve principalmente a los usuarios de ToB, y es una opción de desarrollo simple y conveniente para las PYME que necesitan construir sus propios productos CloudIDE / IDE locales a través de marcos IDE, pero no tienen suficientes capacidades técnicas de I + D.

2. Relación con Theia

Theia como un recién llegado, basándose en algunos de los conceptos de diseño de VS Code, después de casi unos años de desarrollo y madurez, la comunidad es relativamente próspera, respaldada por la Fundación Eclipse, los desarrolladores de IDE es también una buena opciones de desarrollo, y nuestro marco OpenSumi es competitivo.

Theia en sí proporciona una construcción modular de los productos IDE, la mayor parte de la personalización en la vista se puede ampliar a través de un enfoque modular (este punto en nuestro OpenSumi también se basa en las ideas correspondientes), en la capacidad de plug-in para ser compatible con la mayoría de los plug-ins de VS Code, proporcionando un subconjunto de las API de plug-in de VS Code, algunas de las API de plug-in (como el lenguaje de depuración, etc) no están completamente implementadas y no hay un plan de seguimiento continuo. （Some of the plugin APIs (such as debug, language, etc.) are not fully implemented and there is no follow-up plan.

Sobre la base de los puntos anteriores, OpenSumi marco no sólo es compatible con la expansión modular básica, en el nivel de plug-in, hemos continuado el seguimiento de la planificación de VS Code API estándar (actualmente implementado VS Code 1.16.0 versión de la API), y al mismo tiempo, nos basamos en la implementación de un front-end sandbox, proporciona una serie de sumi API con plug-ins para ampliar nuestras capacidades de vista de una manera libre. Al mismo tiempo, hemos implementado un sandbox front-end, que proporciona una serie de APIs sumi que se pueden utilizar para ampliar libremente las capacidades de nuestra vista a través de plug-ins, de modo que los estudiantes de front-end que estén familiarizados con React puedan empezar directamente a escribir componentes front-end, y realizar la funcionalidad correspondiente de la vista a través de las ricas APIs que proporcionamos.