OpenSumi Lite: solução pura de IDE de front-end para fácil visualização e edição de código

Introdução geral

O OpenSumi Lite é uma solução de IDE de front-end puro baseada no projeto OpenSumi, cujo objetivo é fornecer recursos de visualização e edição de código sem a necessidade de um ambiente Node.js. Desenvolvido em conjunto pelo Alibaba Group e pelo Ant Group, e com código aberto sob a licença MIT, o OpenSumi Lite implementa um recurso de IDE relativamente completo em um ambiente de navegador puro por meio de uma arquitetura B/S simples para cenários específicos, como visualização e revisão de código. Os usuários podem experimentar o projeto diretamente por meio da página de visualização on-line ou executá-lo localmente clonando o repositório do GitHub.

Lista de funções

• Visualização do códigoSuporte para visualização de arquivos de código e estruturas de diretório em repositórios do GitHub.
• editor de códigoCódigo de edição: fornece recursos básicos de edição de código, incluindo realce de sintaxe e dicas de código.
• Suporte a plug-insSuporte para plug-ins de extensão da Web, que permitem aos usuários adicionar plug-ins personalizados para aprimorar a funcionalidade do editor.
• Suporte a vários idiomasPlug-ins integrados de realce de sintaxe e de dicas de código para várias linguagens de programação.
• Visualização on-linePágina de visualização on-line: Uma página de visualização on-line é fornecida para que os usuários possam experimentar a funcionalidade do IDE sem precisar instalá-lo.
• Suporte a ramificação e marcaçãoSuporte à abertura de um repositório com uma versão de branch ou tag especificada.

Usando a Ajuda

Instalação e operação

1. projeto de clonagem::

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

2. Instalação de dependências::

   fio

3. Início de projetos::

   início do fio

acesso pós-lançamento http://127.0.0.1:8081 Você pode visualizar o IDE.

Guia de operação de funções

Visualização do código

• Abra seu navegador e acesse http://127.0.0.1:8081.
• Insira o endereço do repositório do GitHub na barra de endereços, usando a opção # Não. Adicione o endereço do depósito, por exemplo:http://127.0.0.1:8081#https://github.com/opensumi/core.
• O navegador exibirá os arquivos de código e a estrutura de diretórios do repositório.

editor de código

• Na página Code View, clique em qualquer arquivo de código para entrar no modo de edição.
• O editor fornece realce de sintaxe e dicas de código, além de oferecer suporte a uma ampla variedade de linguagens de programação.
• Quando a edição estiver concluída, clique no botão Save (Salvar) para sincronizar as alterações com o servidor.

Gerenciamento de plug-ins

• show (um ingresso) web-lite/extension/index.ts para adicionar ou modificar a lista de plug-ins.
• A lista de plug-ins é formatada da seguinte forma:

  const extensionList = [
{ id: "OpenSumi.vsicons-slim", version: "1.0.4" },

{ id: "alex.typescript-language-features-worker", version: "1.0.0-beta.2" }, { id: "alex.typescript-language-features-worker", version: "1.0.0-beta.2" }, }
];

• Depois de salvar o arquivo, reinicie o projeto para carregar a nova configuração do plug-in.

Suporte a vários idiomas

• show (um ingresso) web-lite/grammar/index.contribution.ts para adicionar ou modificar a lista de suporte a idiomas.
• A lista de suporte a idiomas é formatada da seguinte forma:

  const languages = [
"html",
"html", "html", "css",



"typescript".
];.

• Depois de salvar o arquivo, reinicie o projeto para carregar a nova configuração de suporte a idiomas.

Visualização on-line

• Visite a página de visualização on-line:Visualização on-line do OpenSumi Lite.
• Na página de visualização, os usuários podem experimentar os recursos de visualização e edição de código diretamente, sem instalar nenhum software.

Introdução ao OpenSumi Lite Open Source

Depois de quase três anos, sob os esforços da equipe de co-construção do Ali Group e do Ant Group, o OpenSumi, como a primeira estrutura de desenvolvimento de IDE com forte personalização, alto desempenho e compatibilidade com o sistema de plug-ins do VS Code, foi oficialmente aberto hoje.

O que é o OpenSumi?

O OpenSumi é uma estrutura de desenvolvimento de IDE dual-end (Web e Electron) orientada para a verticalidade, de baixo limiar, alto desempenho e altamente personalizável.

A estrutura foi criada pela equipe de engenharia de sistemas Tao do Ali Group e pelo departamento de tecnologia de experiência do Ant Group, e a equipe de desempenho de P&D iniciou conjuntamente o desenvolvimento conjunto da estrutura de P&D padronizada de IDE. Ela é baseada em TypeScript + Reagir Codificação, implementação dos principais módulos funcionais, incluindo gerenciador de recursos, editor, depuração, painel Git, painel de pesquisa, etc., os desenvolvedores apenas com base em nosso projeto inicial para uma configuração simples, você pode criar rapidamente seus próprios produtos IDE locais ou em nuvem, a estrutura em si é compatível com o ecossistema de plug-ins do VS Code, os principais plug-ins do VS Code podem ser executados sem problemas nos produtos baseados no desenvolvimento do OpenSumi! A estrutura é compatível com o ecossistema de plug-ins do VS Code, todos os principais plug-ins do VS Code podem ser executados sem problemas em produtos baseados no OpenSumi. Ao mesmo tempo, a estrutura também oferece aos desenvolvedores uma variedade de recursos de personalização de visualização de baixo custo e altamente personalizáveis, que podem satisfazer a maioria dos cenários de personalização de visualização no cenário do IDE.

Para o desenvolvimento de IDE, já existem soluções de código-servidor, Theia e outras soluções de código aberto no mercado, então por que optamos por implementá-las em nossa própria pesquisa? Desde o início de 2019, descobrimos que há muitos produtos de IDE no Ali e no Ant Group, e a maioria dos produtos tem a mesma pré-construção de produtos de IDE, mas essa parte do trabalho de pré-construção ocupa uma equipe por alguns meses, ou mais de meio ano, e há muita duplicação de esforços, e no processo de usar as soluções de código aberto em algumas das equipes, também encontramos mais ou menos alguns problemas, como recursos de personalização limitados, dependência profunda de código-fonte, manutenção e assim por diante. No processo de uso da solução de código aberto em algumas equipes, encontramos mais ou menos alguns problemas, como capacidade limitada de personalização, grande dependência do código-fonte, dificuldade de manutenção e incapacidade de atender aos requisitos de capacidade interna. No final, decidimos reunir a força de várias equipes para embarcar no caminho da autopesquisa e da implementação.

Quais são as vantagens do OpenSumi?

Como mencionado anteriormente, o OpenSumi é uma estrutura de desenvolvimento de IDE dual-end (Web e Electron) orientada para a verticalidade, de baixo limiar, alto desempenho e altamente personalizável. Seus recursos se refletem principalmente nos seguintes pontos:

1. recursos abrangentes de personalização da visualização

Além do desempenho semelhante e da experiência de codificação com os principais navegadores, em verticais voltadas para negócios, temos muito mais do que estruturas semelhantes para personalização. Com base em nossa estrutura básica, você pode personalizar seus produtos IDE por meio de módulos ou plug-ins, o que pode alcançar o verdadeiro significado dos recursos de "personalização de visualização completa".

Em muitas fases de implementação de produtos internos, naturalmente obteremos melhor capacidade de manutenção por meio de módulos para implementar recursos básicos e maior personalização por meio de plug-ins para implementar visões de negócios ou personalização de recursos. Tomando como exemplo alguns dos cenários internos de P&D da Ali, a estrutura está em camadas da seguinte forma:

2. ampla experiência em suporte vertical a P&D

O OpenSumi antes do código-fonte aberto oficial, no Ali e no Ant Group, foi incubado continuamente por dois anos, durante os quais a precipitação levou a uma série de áreas verticais representativas sob os casos de P&D, a maioria dos cenários de prática de P&D que você possa imaginar, você pode encontrar experiência prática no OpenSumi.

• Cenários de desenvolvimento de applets

Para o desenvolvimento de miniaplicativos, a ferramenta para desenvolvedores de miniaplicativos da Alipay e a ferramenta para desenvolvedores de miniaplicativos da Taobao são implementadas usando o OpenSumi como estrutura principal e, até o momento, o número de desenvolvedores atendidos atingiu mais de 2W por mês.

Com nossos pontos de contribuição da barra de ferramentas e a API sumi adicional, podemos permitir a personalização adicional da visualização por meio de plug-ins. Como, por exemplo:

1) Personalizar diferentes exibições da barra de ferramentas

2) Implementar agendamento de janelas comunicáveis de forma independente (por exemplo, simuladores)

Ao mesmo tempo, a camada subjacente compartilhada e os recursos de plug-in também possibilitam a portabilidade rápida de ponta a ponta. Ao portar o plug-in relacionado à ferramenta de desenvolvimento de applets da Alipay, concluímos o suporte para a versão inicial da ferramenta de desenvolvimento de applets da Taobao, que tem funcionalidade semelhante, mas cenários de uso diferentes, e incubamos o cliente O2 para uso interno em um curto período de um mês.

• Links de P&D integrados à nuvem

Em termos de links de P&D integrados à nuvem, temos a plataforma de desenvolvimento AliCloud externamente e O2, Ant Codespaces e outros produtos internamente.

O link regular de P&D é mostrado na metade superior da figura abaixo.

Muitas vezes, precisamos passar por um trabalho de configuração de ambiente simples ou complicado antes de iniciar a pesquisa e o desenvolvimento de um projeto. Com a ajuda do AliCloud e de outros produtos de nuvem, recursos de contêineres, podemos criar, por meio do OpenSumi, um ambiente de codificação em nuvem que pertença à empresa ou à equipe, para que os desenvolvedores possam realmente salvar o ambiente para configurar o problema de concluir o desenvolvimento de todo o trabalho na nuvem.

Com uma profunda personalização do processo, ele permite que os desenvolvedores entrem rapidamente no desenvolvimento.

Ao se conectar com a plataforma interna de P&D, o desenvolvimento, os testes e a implementação podem ser feitos em um único local.

• Construção de front-end puro

O recurso de criação de front-end puro é a parte mais usada do OpenSumi no Ali e no Ant Group. Ele fornece um tipo de serviço Node.js que não precisa depender do servidor para fornecer o editor para iniciar e, diretamente, por meio dos recursos de front-end puro e das definições de interface estática, pode ser criado com a capacidade de ter a interface básica do editor.

O núcleo de sua implementação é por meio do arquivo, do Git e de outros serviços que originalmente dependem do Node para uma camada de abstração da camada de serviço, de modo que os desenvolvedores possam definir manualmente a lógica específica dos serviços de leitura e gravação de arquivos, enquanto que, com base na API do Web Worker fornecida pelo OpenSumi, os serviços de linguagem são executados no ambiente do Web Worker do navegador, de modo a obter a estrutura do Node para obter o efeito de construir um front-end puro. Para obter o efeito de construção de front-end puro.

Com base nessa camada de implementação, você pode se basear completamente na API de descanso do GitHub para obter um editor de front-end puro, diretamente da parte superior da visualização do código do GitHub, editar e enviar operações. Internamente, os aplicativos típicos são os seguintes cenários:

1. revisão do código

2. exibição do código

3. exame escrito remoto

Também fornecemos uma maneira fácil de começar no repositório do OpenSumi em opensumi/ide-startup-lite [1], ou você pode conferir a demonstração diretamente na página de visualização [2].

3. suporte total aos recursos de plug-in do VS Code

Acredito que os alunos que prestaram atenção à estrutura do IDE do Theia não devem desconhecer o Theia. O Theia, como uma estrutura de IDE compatível com o plug-in do VS Code, é de fato compatível com alguns dos recursos do plug-in do VS Code, mas a compatibilidade subsequente com a API do VS Code tornou-se cada vez menor, dependendo basicamente da comunidade para contribuir com a descoberta do desenvolvedor.

O OpenSumi foi projetado para ser compatível com o ecossistema de plug-ins do VS Code, portanto, temos requisitos contínuos para a estrutura. Após o fornecimento aberto, planejamos concluir a adaptação das APIs do plug-in do VS Code a cada três meses, e o plano de adaptação será organizado pelos gerentes de versão correspondentes no fórum de discussão. A API padrão foi adaptada ao VS Code v1.60.0, e o progresso pode ser visto no Plano de adaptação.

Diferenças entre o OpenSumi e as principais estruturas do mercado

Estudamos o código-fonte do VS Code e do Theia no estágio inicial do projeto e, no processo de realização, para sermos compatíveis com a ecologia do plug-in do VS Code e, ao mesmo tempo, compatíveis com as funções e a experiência dos editores convencionais, alguns dos códigos-fonte de alguns dos projetos e realizações foram referenciados às realizações dos dois professores, e os blocos de código correspondentes foram marcados com o cabeçalho das informações de direitos autorais.

1. relacionamento com o código VS

O VS Code é uma grande fatia do mercado de IDE, seu núcleo para um produto de IDE, a essência da estrutura com nossos atributos há diferenças, o geral é um produto ToC, os desenvolvedores personalizam o limite e o alto custo, o conteúdo pode ser personalizado também é relativamente limitado, a maioria dos plug-ins na forma de expansão limitada.

Nossa estrutura atende principalmente a usuários de ToB e é uma opção de desenvolvimento simples e conveniente para PMEs que precisam criar seus próprios produtos CloudIDE / IDE local por meio da estrutura IDE, mas não têm recursos técnicos suficientes de P&D.

2. relacionamento com Theia

A Theia é uma empresa recém-chegada, baseada em alguns dos conceitos de design do VS Code. Após quase alguns anos de desenvolvimento e maturidade, a comunidade é relativamente próspera, apoiada pela Eclipse Foundation, os desenvolvedores de IDE também têm boas opções de desenvolvimento e nossa estrutura OpenSumi é competitiva.

O próprio Theia fornece uma construção modular de produtos IDE, a maior parte da personalização na visualização pode ser expandida por meio de uma abordagem modular (este ponto em nosso OpenSumi também se baseia nas ideias correspondentes), na capacidade do plug-in de ser compatível com a maioria dos plug-ins do VS Code, fornecendo um subconjunto de APIs de plug-in do VS Code, algumas APIs de plug-in (como linguagem de depuração, etc.) não estão totalmente implementadas e não há nenhum plano de acompanhamento contínuo. （Algumas das APIs de plug-in (como depuração, linguagem, etc.) não estão totalmente implementadas e não há um plano de acompanhamento.

Com base nos pontos acima, a estrutura do OpenSumi não apenas oferece suporte à expansão modular básica, mas também ao nível de plug-in, continuamos a acompanhar o planejamento da API padrão do VS Code (atualmente implementamos a versão 1.16.0 do VS Code da API) e, ao mesmo tempo, com base na implementação de uma sandbox de front-end, fornecemos uma série de APIs sumi com plug-ins para expandir nossos recursos de visualização de forma gratuita. Ao mesmo tempo, implementamos uma sandbox de front-end, que fornece uma série de APIs sumi que podem ser usadas para expandir livremente nossos recursos de visualização por meio de plug-ins, de modo que os alunos de front-end familiarizados com o React possam começar a escrever diretamente componentes de front-end e realizar a funcionalidade correspondente da visualização por meio das APIs avançadas que fornecemos.