OpenSumi Lite : Solution IDE frontale pure pour une visualisation et une édition aisées du code

Introduction générale

OpenSumi Lite est une solution IDE purement frontale basée sur le projet OpenSumi, qui vise à fournir des capacités de visualisation et d'édition de code sans avoir besoin d'un environnement Node.js. Développé conjointement par Alibaba Group et Ant Group, et mis à disposition sous la licence MIT, OpenSumi Lite met en œuvre une capacité IDE relativement complète dans un environnement de navigateur pur grâce à une architecture B/S simple pour des scénarios spécifiques tels que la visualisation et l'examen du code. Les utilisateurs peuvent expérimenter le projet directement via la page de prévisualisation en ligne, ou l'exécuter localement en clonant le dépôt GitHub.

Liste des fonctions

• Vue du codeSupport pour la visualisation des fichiers de code et des structures de répertoire dans les dépôts GitHub.
• éditeur de codeLe logiciel d'édition de code : fournit des fonctions d'édition de code de base, y compris la mise en évidence de la syntaxe et des indices de code.
• Support de plug-inSupport des plug-ins Web Extension, qui permettent aux utilisateurs d'ajouter des plug-ins personnalisés afin d'améliorer les fonctionnalités de l'éditeur.
• Prise en charge multilingueLes logiciels de mise en évidence de la syntaxe et d'aide à la compréhension du code sont intégrés dans plusieurs langages de programmation.
• Aperçu en ligne: Fournit une page de prévisualisation en ligne qui permet aux utilisateurs d'expérimenter les fonctionnalités de l'IDE sans l'installer.
• Prise en charge des branches et des étiquettesOuverture d'un dépôt avec une branche ou une version d'étiquette spécifiée.

Utiliser l'aide

Installation et fonctionnement

1. projet de clonage: :

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

2. Installation des dépendances: :

   yarn

3. Lancement de projets: :

   yarn start

l'accès après le lancement http://127.0.0.1:8081 Vous pouvez prévisualiser l'IDE.

Guide d'utilisation des fonctions

Vue du code

• Ouvrez votre navigateur et visitez http://127.0.0.1:8081.
• Entrez l'adresse du dépôt GitHub dans la barre d'adresse, en utilisant la commande # Non. Ajoutez l'adresse de l'entrepôt, par exemple :http://127.0.0.1:8081#https://github.com/opensumi/core.
• Le navigateur affiche les fichiers de code et la structure des répertoires du dépôt.

éditeur de code

• Sur la page d'affichage du code, cliquez sur n'importe quel fichier de code pour passer en mode édition.
• L'éditeur propose une mise en évidence de la syntaxe et des conseils de codage, et prend en charge un large éventail de langages de programmation.
• Une fois l'édition terminée, cliquez sur le bouton Enregistrer pour synchroniser les modifications avec le serveur.

Gestion des plug-ins

• spectacle (un billet) web-lite/extension/index.ts pour ajouter ou modifier la liste des plugins.
• La liste des plugins est formatée comme suit :

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

• Après avoir enregistré le fichier, redémarrez le projet pour charger la nouvelle configuration du plugin.

Prise en charge multilingue

• spectacle (un billet) web-lite/grammar/index.contribution.ts pour ajouter ou modifier la liste des langues prises en charge.
• La liste des langues prises en charge est présentée comme suit :

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

• Après avoir enregistré le fichier, redémarrez le projet pour charger la nouvelle configuration de prise en charge des langues.

Aperçu en ligne

• Visitez la page de prévisualisation en ligne :Aperçu en ligne d'OpenSumi Lite.
• Dans la page de prévisualisation, les utilisateurs peuvent découvrir les fonctions de visualisation et d'édition du code directement sans installer de logiciel.

OpenSumi Lite Open Source Introduction

Après près de trois ans, grâce aux efforts de l'équipe de co-construction d'Ali Group et d'Ant Group, OpenSumi, le premier cadre de développement IDE avec une forte personnalisation, de hautes performances et une compatibilité avec le système de plug-in VS Code, est officiellement open-sourcé aujourd'hui.

Qu'est-ce qu'OpenSumi ?

OpenSumi est un cadre de développement IDE orienté vertical, à faible seuil, à haute performance et hautement personnalisable (Web et Electron).

Framework early by the Ali Group Tao system engineering team and Ant Group experience technology department, R & D performance team jointly initiated the joint development of IDE standardised R & D framework. Il est basé sur TypeScript + Réagir Le codage, la mise en œuvre des modules fonctionnels de base, y compris le gestionnaire de ressources, l'éditeur, le débogage, le panneau Git, le panneau de recherche, etc., le développeur simplement basé sur notre projet de départ pour une configuration simple, vous pouvez rapidement construire leurs propres produits IDE locaux ou en nuage, le cadre lui-même est compatible avec l'écosystème de plugins VS Code, les principaux plugins VS Code peuvent être exécutés en toute transparence dans les produits basés sur le développement d'OpenSumi ! Le framework est compatible avec l'écosystème de plugins VS Code, tous les principaux plugins VS Code peuvent être exécutés de manière transparente dans les produits basés sur OpenSumi. Parallèlement, le framework fournit également aux développeurs une variété de capacités de personnalisation de vue peu coûteuses et hautement personnalisables, qui peuvent répondre à la plupart des scénarios de personnalisation de vue dans les scénarios d'IDE.

Pour le développement de l'IDE, il y a déjà code-server, Theia et d'autres solutions open source sur le marché, alors pourquoi choisissons-nous de le mettre en œuvre dans notre propre recherche ? Depuis le début de 2019, nous avons constaté qu'il existe de nombreux produits IDE au sein d'Ali et d'Ant Group, et la plupart des produits ont la même préconstruction de produits IDE, mais cette partie du travail de préconstruction prend à une équipe moins de quelques mois, ou plus de six mois et un an, et il y a beaucoup de duplication des efforts, et dans le processus d'utilisation de solutions open source pour certaines équipes, nous avons également plus ou moins rencontré certains problèmes, tels que les capacités de personnalisation limitées, la dépendance profonde du code source, la maintenance, etc. Au cours du processus d'utilisation de la solution open source dans certaines équipes, nous avons plus ou moins rencontré certains problèmes, tels que des capacités de personnalisation limitées, une forte dépendance à l'égard du code source, des difficultés de maintenance et l'incapacité de répondre aux exigences de capacité interne. En fin de compte, nous avons décidé de rassembler les forces de plusieurs équipes pour nous engager sur la voie de l'auto-recherche et de la mise en œuvre.

Quels sont les avantages d'OpenSumi ?

Comme indiqué précédemment, OpenSumi est un cadre de développement IDE orienté vertical, à faible seuil, très performant et hautement personnalisable, à double extrémité (Web et Electron). Ses caractéristiques se reflètent principalement dans les points suivants :

1. des possibilités étendues de personnalisation de l'affichage

Outre des performances et une expérience de codage similaires avec les principaux navigateurs, dans les secteurs verticaux orientés vers les entreprises, nous disposons de cadres de personnalisation bien plus nombreux que les cadres similaires. Sur la base de notre cadre de base, vous êtes libre de personnaliser vos produits IDE par le biais de modules ou de plug-ins, ce qui permet d'obtenir la véritable signification des capacités de "personnalisation complète".

Dans de nombreuses phases de mise en œuvre de produits internes, nous parviendrons naturellement à une meilleure maintenabilité grâce à des modules permettant de mettre en œuvre les capacités de base, et à une plus grande personnalisation grâce à des modules d'extension permettant de mettre en œuvre des vues d'entreprise ou de personnaliser les capacités. Si l'on prend l'exemple de certains scénarios de R&D internes d'Ali, la structure est stratifiée comme suit :

2. une grande expérience en matière de soutien à la R&D verticale

OpenSumi, avant d'être officiellement un logiciel libre, a été continuellement incubé par Ali et Ant Group pendant deux ans, au cours desquels la précipitation a permis d'atterrir dans une série de domaines verticaux représentatifs dans le cadre des cas de R & D. La plupart des scénarios de pratique de R & D auxquels vous pouvez penser, vous pouvez être en mesure de trouver une expérience pratique dans OpenSumi.

• Scénarios de développement d'applets

Pour le développement d'applets, l'outil de développement d'applets Alipay et l'outil de développement d'applets Taobao sont mis en œuvre en utilisant OpenSumi comme cadre de base, et jusqu'à présent, le nombre de développeurs servis a atteint plus de 2W par mois.

Grâce aux points de contribution de notre barre d'outils et à l'API sumi supplémentaire, nous sommes en mesure de personnaliser davantage l'affichage au moyen de plugins. Par exemple :

1) Personnaliser les différents affichages de la barre d'outils

2) Mise en œuvre d'un calendrier de fenêtres communicable de manière indépendante (par exemple, simulateurs)

En portant le plug-in lié à l'outil de développement de l'applet Alipay, nous avons achevé la prise en charge de la version initiale de l'outil de développement de l'applet Taobao, qui a des fonctionnalités similaires mais des scénarios d'utilisation différents, et nous avons incubé le client O2 pour un usage interne en l'espace d'un mois seulement.

• Liens R&D intégrés dans l'informatique en nuage

En ce qui concerne la chaîne de développement intégrée de l'informatique en nuage, nous avons la plateforme de développement AliCloud en externe et O2, Ant Codespaces et d'autres produits en interne.

Le lien régulier avec la R&D est représenté dans la moitié supérieure de la figure ci-dessous.

Avec l'aide d'AliCloud et d'autres produits cloud, les capacités de conteneur, nous pouvons construire à travers OpenSumi appartient à l'entreprise ou l'environnement de codage cloud de l'équipe, de sorte que les développeurs peuvent vraiment économiser l'environnement de configurer le problème de l'achèvement du développement de tout le travail dans le nuage.

Grâce à une personnalisation poussée des processus, il permet aux développeurs de se lancer rapidement dans le développement.

En se connectant à la plateforme R&D interne, le développement, les essais et le déploiement peuvent être réalisés en une seule fois.

• Construction purement frontale

La capacité de construction frontale pure est l'élément le plus utilisé d'OpenSumi dans Ali et Ant Group, elle fournit une sorte de service Node.js qui n'a pas besoin de s'appuyer sur le serveur pour fournir l'éditeur à démarrer, et directement à travers les ressources frontales pures et les définitions d'interface statiques peuvent être construites avec la capacité d'avoir l'interface de base de l'éditeur.

Le cœur de sa mise en œuvre est à travers le fichier , Git et d'autres services qui s'appuient à l'origine sur Node pour une couche d'abstraction de la couche de service , de sorte que les développeurs peuvent définir manuellement la logique spécifique des services de lecture et d'écriture de fichiers , tout en s'appuyant sur l'API Web Worker fourni par OpenSumi , les services de langue en cours d'exécution dans l'environnement Web Worker du navigateur , de manière à atteindre le cadre de Node pour atteindre l'effet de la construction d'un front-end pur . Pour obtenir l'effet de la construction d'un front-end pur.

Sur la base de cette couche d'implémentation, vous pouvez vous baser entièrement sur l'API GitHub Rest pour obtenir un éditeur frontal pur, vous pouvez directement à partir du haut de la vue du code GitHub, éditer et soumettre des opérations, nous allons envisager de faire un cas correspondant. En interne, les applications typiques sont les scénarios suivants :

1.Examen du code

2. affichage du code

3. l'examen écrit à distance

Nous avons également fourni un moyen facile de démarrer dans le dépôt OpenSumi à opensumi/ide-startup-lite [1], ou vous pouvez vérifier la démo directement sur la page de prévisualisation [2].

3. prise en charge complète des capacités de plug-in de VS Code

Je pense que les étudiants qui ont prêté attention au cadre IDE de Theia ne doivent pas méconnaître Theia, Theia en tant que cadre IDE compatible avec le plug-in VS Code, est en effet compatible avec certaines des capacités du plug-in VS Code, mais pour la compatibilité API VS Code ultérieure est devenue de moins en moins, s'appuyant essentiellement sur la communauté pour contribuer à la découverte du développeur.

OpenSumi a été conçu pour être compatible avec l'écosystème des plugins VS Code, nous avons donc des exigences permanentes pour le cadre. Après l'open-sourcing, nous prévoyons de terminer l'adaptation des API des plugins VS Code tous les trois mois, et le plan d'adaptation sera organisé par les gestionnaires de version correspondants dans le forum de discussion. L'API standard a été adaptée à VS Code v1.60.0, et l'état d'avancement peut être consulté dans le plan d'adaptation.

Différences entre OpenSumi et les cadres classiques du marché

Nous avons étudié le code source de VS Code et de Theia dès le début de la conception, et dans le processus de réalisation, afin d'être compatible avec l'écologie du plug-in VS Code, et en même temps compatible avec les fonctions et l'expérience des éditeurs traditionnels, une partie du code source de certaines conceptions et réalisations a été référencée aux réalisations des deux enseignants, et les blocs de code correspondants ont été marqués avec l'en-tête de l'information sur les droits d'auteur.

1. relations avec le code VS

VS Code représente une part importante du marché de l'IDE, son noyau pour un produit IDE, l'essence du cadre avec nos attributs il y a une différence, l'ensemble est un produit ToC, le développeur pour personnaliser le seuil et le coût élevé, peut être personnalisé le contenu est également relativement limitée, la plupart des plug-ins à travers la forme de l'expansion limitée.

Notre cadre s'adresse principalement aux utilisateurs de la ToB et constitue une option de développement simple et pratique pour les PME qui ont besoin de créer leurs propres produits CloudIDE / IDE locaux par le biais de cadres IDE, mais qui ne disposent pas de capacités techniques suffisantes en matière de recherche et développement.

2. relations avec Theia

Theia est un nouveau venu qui s'inspire de certains concepts de VS Code. Après quelques années de développement et de maturité, la communauté est relativement prospère, soutenue par la Fondation Eclipse, les développeurs d'IDE disposent également de bonnes options de développement, et notre cadre OpenSumi est compétitif.

Theia lui-même fournit une construction modulaire de produits IDE, la plupart de la personnalisation sur la vue peut être étendue par une approche modulaire (ce point dans notre OpenSumi s'inspire également des idées correspondantes), dans la capacité du plug-in à être compatible avec la plupart des plug-ins VS Code, fournissant un sous-ensemble d'API de plug-in VS Code, certaines API de plug-in (telles que le langage de débogage, etc.) ne sont pas entièrement mises en œuvre et il n'y a pas de plan de suivi en continu. （Certaines API de plugin (telles que le débogage, le langage, etc.) ne sont pas entièrement mises en œuvre et il n'y a pas de plan de suivi.

Sur la base des points ci-dessus, le cadre OpenSumi prend non seulement en charge l'expansion modulaire de base, mais au niveau des plug-ins, nous avons continué à suivre la planification de l'API standard VS Code (actuellement mise en œuvre VS Code 1.16.0 version de l'API), et en même temps, nous nous basons sur la mise en œuvre d'un bac à sable frontal, fournit une série d'API sumi avec des plug-ins pour étendre nos capacités de visualisation d'une manière libre. En même temps, nous avons mis en œuvre un bac à sable frontal, qui fournit une série d'API sumi qui peuvent être utilisées pour étendre librement les capacités de notre vue par le biais de plug-ins, de sorte que les étudiants frontaux qui sont familiers avec React peuvent directement commencer à écrire des composants frontaux, et réaliser la fonctionnalité correspondante de la vue à travers les riches API que nous fournissons.