OpenSumi Lite: 簡単なコード表示と編集のための純粋なフロントエンドIDEソリューション

はじめに

OpenSumi Liteは、OpenSumiプロジェクトに基づく純粋なフロントエンドIDEソリューションで、Node.js環境を必要とせずにコードの表示と編集機能を提供することを目的としています。アリババグループとアントグループによって共同開発され、MITライセンスの下でオープンソース化されたOpenSumi Liteは、コードの閲覧やコードレビューといった特定のシナリオのために、シンプルなB/Sアーキテクチャを通じて、純粋なブラウザ環境に比較的完全なIDE機能を実装しています。ユーザーはオンラインプレビューページから直接プロジェクトを体験したり、GitHubリポジトリをクローンしてローカルで実行することができる。

機能一覧

• コード表示GitHub リポジトリのコードファイルやディレクトリ構造の表示をサポート。
• コードエディタシンタックスハイライトやコードヒントを含む基本的なコード編集機能を提供します。
• プラグイン対応Web Extensionプラグインをサポートし、エディターの機能を強化するカスタムプラグインを追加できます。
• 多言語サポート複数のプログラミング言語用のシンタックスハイライトとコードヒンティングプラグインを内蔵。
• オンライン・プレビューIDEをインストールすることなく、IDEの機能を体験できるオンラインプレビューページが用意されています。
• 分岐とタグ付けのサポートブランチやタグのバージョンを指定してリポジトリを開くことができます。

ヘルプの使用

インストールと操作

1. クローンプロジェクト::

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

2. 依存関係のインストール::

   ヤーン

3. プロジェクトの開始::

   ヤーンスタート

発売後のアクセス 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: "alex.typescript-language-features-worker", version: "1.0.0-beta.2" }, { id: "alex.typescript-language-features-worker", version: "1.0.0-beta.2" }, }.
];

• ファイルを保存したら、プロジェクトを再起動して新しいプラグイン設定をロードします。

多言語サポート

• 見せる web-lite/grammar/index.contribution.ts ファイルを使用して、言語サポート・リストを追加または修正してください。
• 言語サポートリストは以下のようなフォーマットになっている：

  const言語 = [
"html"、
「html"、"html"、"css"、



「typescript"。
];.

• ファイルを保存した後、プロジェクトを再起動して新しい言語サポート設定をロードします。

オンライン・プレビュー

• オンライン・プレビューのページをご覧ください：OpenSumi Lite オンラインプレビュー.
• プレビューページでは、ユーザーはソフトウェアをインストールすることなく、コードの表示と編集機能を直接体験することができます。

OpenSumi Lite オープンソース紹介

アリグループとアントグループの共同構築チームの努力の下、約3年の歳月を経て、OpenSumiは、強力なカスタマイズ性、高いパフォーマンス、VS Codeプラグインシステムとの互換性を持つ最初のIDE開発フレームワークとして、本日正式にオープンソース化されました。

OpenSumiとは？

OpenSumiは、垂直指向、低閾値、高性能、高度にカスタマイズ可能なデュアルエンド（WebとElectron）IDE開発フレームワークです。

アリグループのタオシステムエンジニアリングチームとアントグループの経験技術部門、R＆Dパフォーマンスチームが共同でIDEの標準化されたR＆Dフレームワークの共同開発に着手したフレームワーク早期。これはTypeScript +に基づいています。 反応 コーディング、リソースマネージャ、エディタ、デバッグ、Gitパネル、検索パネルなどを含むコア機能モジュールの実装は、開発者は、単純な構成のための私たちの開始プロジェクトに基づいて、すぐに独自のローカルまたはクラウドIDE製品を構築することができます、フレームワーク自体は、VS Codeのプラグインエコシステムと互換性があり、主流のVS Codeのプラグインは、OpenSumiの開発に基づいて製品でシームレスに実行することができます！フレームワークはVS Codeプラグインエコシステムと互換性があり、すべての主要なVS CodeプラグインはOpenSumiベースの製品でシームレスに実行することができます。 一方、フレームワークは開発者に低コストで高度にカスタマイズ可能な様々なビューカスタマイズ機能を提供し、IDEシナリオのビューカスタマイズシナリオのほとんどを満たすことができます。

IDE開発については、すでにcode-serverやTheiaなどのオープンソースソリューションが市場に出回っていますが、なぜ私たちは自分たちの研究に導入することを選んだのでしょうか？2019年に入ってから、AliとAntグループ内には多くのIDE製品があり、ほとんどの製品はIDE製品の事前構築は同じであるが、この事前構築作業の部分は数ヶ月、または半年以上チームを占め、重複した努力が多く、いくつかのチームでオープンソースソリューションを使用する過程でも、多かれ少なかれ、カスタマイズ機能の制限、ソースコード依存の深さ、メンテナンスなどの問題に遭遇した。いくつかのチームでオープンソースのソリューションを使用する過程で、カスタマイズ能力の限界、ソースコードへの深い依存、メンテナンスの難しさ、社内のキャパシティ要件を満たすことができないなどの問題に多かれ少なかれ遭遇しました。結局、私たちは複数のチームの力を結集して、自己研究と実装の道に乗り出すことにした。

オープンスミの利点は何ですか？

前述したように、OpenSumi は、垂直指向、低閾値、高性能、高度にカスタマイズ可能なデュアルエンド (Web と Electron) IDE 開発フレームワークです。その特徴は主に以下の点に反映されています：

1.包括的なビューのカスタマイズ機能

主流のブラウザで同様のパフォーマンスとコーディング経験に加えて、ビジネス指向の垂直方向では、私たちはカスタマイズのための類似のフレームワークよりもはるかに多くを持っています。私たちの基本的なフレームワークに基づいて、あなたはモジュールやプラグインを介して自由にあなたのIDE製品をカスタマイズすることができます。

多くの社内製品導入フェーズでは、基本的な機能を実装するモジュールによって保守性を向上させ、ビジネスビューや機能のカスタマイズを実装するプラグインによって高度なカスタマイズを実現するのが自然である。アリ社内の研究開発シナリオの一部を例にとると、以下のような階層構造になっている：

2.垂直的研究開発支援における豊富な経験

OpenSumiは、正式なオープンソースの前に、アリとアントグループの内部インキュベーションは2年間続けている、その間に沈殿物は、R＆Dのケースの下に代表的な垂直ドメインのシリーズを着陸させる、あなたが考えることができるR＆Dの実践シナリオのほとんどは、OpenSumiで実用的な経験を見つけることがあります。

• アプレット開発シナリオ

アプレットの開発については、アリペイのアプレット開発者ツールとタオバオのアプレット開発者ツールがOpenSumiをコアフレームワークとして実装されており、現在までに、サービスを提供した開発者数は月間2W以上に達している。

ツールバーの貢献ポイントと追加されたsumi APIにより、プラグインを通じてさらにビューをカスタマイズできるようになりました。例えば

1) ツールバー表示のカスタマイズ

2) 独立した通信可能なウィンドウスケジューリングの実装（シミュレーターなど）

アリペイのアプレット開発ツールに関連するプラグインを移植することで、機能は似ているが利用シーンが異なるタオバオのアプレット開発ツールの初期バージョンのサポートを完了し、1ヶ月という短いスパンでO2クライアントを社内向けにインキュベートした。

• クラウドに統合された研究開発リンク

クラウドに統合された研究開発のリンクという点では、社外にはAliCloud開発プラットフォームがあり、社内にはO2、Ant Codespacesやその他の製品があります。

通常のR&Dリンクは下図の上半分に示されている。

我々は多くの場合、プロジェクトの研究開発を開始する前に、いくつかの単純なまたは面倒な環境設定作業を通過する必要がある、あなたのコーディング環境とクラウド環境は、AliCloudや他のクラウド製品、コンテナ機能の助けを借りて、我々はOpenSumiを介して構築することができます企業やチームのクラウドのコーディング環境に属しているので、開発者は本当にクラウド上のすべての作業の開発を完了するための問題を構成する環境を保存することができます。

プロセスを深くカスタマイズできるため、開発者はすぐに開発に取り掛かることができる。

社内のR&Dプラットフォームと連携することで、開発、テスト、展開をワンストップで行うことができる。

• 純粋なフロントエンド構築

純粋なフロントエンド構築機能は、AliとAntグループでOpenSumiの最も広く使用されている部分です。それは、エディタを起動するために提供するサーバーに依存する必要がなく、直接純粋なフロントエンドリソースと静的なインターフェイス定義を通じて、エディタの基本的なインターフェイスを持つ機能を構築することができる一種のNode.jsサービスを提供します。

その実装の中核は、ファイル、Gitやその他のサービスを通じて、もともとサービス層の抽象化の層のNodeに依存しているので、開発者が手動でファイルの読み取りと書き込みサービスの特定のロジックを定義することができます、OpenSumiによって提供されるWeb Worker APIに基づいている間、言語サービスは、ブラウザのWeb Worker環境で実行されるように、純粋なフロントエンドを構築する効果を達成するためにNodeのフレームワークを達成するために 。純粋なフロントエンド構築の効果を達成する。

実装のこの層に基づいて、あなたは完全に純粋なフロントエンドのエディタを実現するためにGitHubのRest APIに基づいて、あなたは直接GitHubのコードビューの上から、編集、および操作を送信することができます、我々は対応するケースを行うことを検討します。内部的には、典型的なアプリケーションは、次のシナリオです：

1.コードレビュー

2.コード表示

3. 遠隔筆記試験

OpenSumi リポジトリ opensumi/ide-startup-lite [1] で簡単に始めることもできますし、プレビューページ [2] で直接デモをチェックすることもできます。

3.VSコードのプラグイン機能をフルサポート

VSコードのプラグイン互換IDEフレームワークであるTheiaは、確かにVSコードのプラグイン機能の一部と互換性がありますが、その後のVSコードのAPI互換性は低くなっており、基本的には開発者の発見に貢献するコミュニティに依存しています。

OpenSumiはVS Codeのプラグインエコシステムと互換性を持つように設計されているため、フレームワークに対する継続的な要求があります。 オープンソース化後、3ヶ月ごとにVS CodeプラグインAPIの適応を完了する予定で、適応計画はディスカッションフォーラムで対応するバージョン管理者によって整理されます。標準APIはVS Code v1.60.0に適応され、その進捗は適応計画で確認できます。

OpenSumiと市場で主流のフレームワークの違い

私たちは、設計の初期段階でVS CodeとTheiaのソースコードを研究し、実現の過程で、VS Codeプラグインの生態と互換性があり、同時に主流のエディタの機能と経験とも互換性があるように、いくつかの設計と実現のソースコードの一部は、二人の先生の実現を参照し、対応するコードブロックには著作権情報のヘッダを付けました。

1.VSコードとの関係

IDEの大きな市場シェアとしてVSコードは、IDE製品のそのコアは、私たちの属性とフレームワークの本質は違いがある、全体的なToC製品であり、開発者は、しきい値と高コストをカスタマイズするには、コンテンツをカスタマイズすることができますまた、比較的限られている、プラグインのほとんどは、限られた拡張の形式を介して。

私たちのフレームワークは主にToBユーザーに提供しており、IDEフレームワークを通じて独自のCloudIDE/ローカルIDE製品を構築する必要があるが、十分な技術研究開発能力を持たない中小企業にとって、簡単で便利な開発オプションです。

2.テイアとの関係

Theiaは、VS Codeの設計コンセプトの一部を取り入れた新参者ですが、数年近くの開発と成熟の後、コミュニティはEclipse Foundationに支えられ、比較的繁栄しており、IDE開発者はまた、良い開発オプションであり、私たちのOpenSumiフレームワークは競争力があります。

Theia自体がIDE製品のモジュラー構造を提供し、ビュー上のカスタマイズのほとんどはモジュラーアプローチによって拡張することができる（この点は、我々のOpenSumiでも対応するアイデアを採用している）、プラグイン能力では、VS Codeプラグインのほとんどと互換性があり、VS CodeプラグインAPIのサブセットを提供している、いくつかのプラグインAPI（デバッグ言語など）は完全に実装されておらず、継続的にフォローアップする計画はない。プラグインAPIの一部（デバッグ、言語など）が完全に実装されておらず、継続的なフォローアップの予定がない。

以上の点を踏まえ、OpenSumiフレームワークは、基本的なモジュール拡張をサポートするだけでなく、プラグインレベルでは、VS Code標準APIの企画（現在実装されているAPIはVS Code 1.16.0版）を引き続きフォローアップすると同時に、フロントエンドサンドボックスの実装をベースに、プラグインで自由にビュー機能を拡張できる一連のsumi APIを提供しています。同時に、フロントエンドサンドボックスを実装し、プラグインによってビューの機能を自由に拡張できる一連のsumi APIを提供しています。Reactに慣れたフロントエンドの学生が直接フロントエンドのコンポーネントを書き始め、私たちが提供する豊富なAPIを通じてビューの対応機能を実現できるようにします。