OpenSumi Lite: 간편한 코드 확인 및 편집을 위한 순수 프런트엔드 IDE 솔루션

2.1K 00

일반 소개

오픈수미 라이트는 오픈수미 프로젝트에 기반한 순수 프런트엔드 IDE 솔루션으로, Node.js 환경 없이도 코드 보기 및 편집 기능을 제공하는 것을 목표로 합니다. 알리바바 그룹과 앤트 그룹이 공동 개발하고 MIT 라이선스에 따라 오픈소스화된 OpenSumi Lite는 코드 보기, 코드 리뷰 등 특정 시나리오를 위한 간단한 B/S 아키텍처를 통해 순수 브라우저 환경에서 비교적 완벽한 IDE 기능을 구현합니다. 사용자는 온라인 미리 보기 페이지를 통해 프로젝트를 직접 체험하거나 GitHub 리포지토리를 복제하여 로컬에서 실행할 수 있습니다.

기능 목록

코드 보기GitHub 리포지토리의 코드 파일 및 디렉토리 구조 보기를 지원합니다.
코드 편집기구문 강조 표시 및 코드 힌트를 포함한 기본적인 코드 편집 기능을 제공합니다.
플러그인 지원웹 확장 플러그인 지원: 사용자가 사용자 지정 플러그인을 추가하여 편집기의 기능을 향상시킬 수 있습니다.
다국어 지원여러 프로그래밍 언어를 위한 구문 강조 표시 및 코드 힌트 플러그인이 내장되어 있습니다.
온라인 미리보기온라인 미리 보기 페이지가 제공되므로 사용자가 설치하지 않고도 IDE 기능을 체험할 수 있습니다.
브랜칭 및 태그 지원지정된 브랜치 또는 태그 버전으로 리포지토리 열기를 지원합니다.

도움말 사용

설치 및 운영

복제 프로젝트::

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

종속성 설치::

   yarn

프로젝트 시작::

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

파일을 저장한 후 프로젝트를 다시 시작하여 새 언어 지원 구성을 로드합니다.

온라인 미리보기

온라인 미리 보기 페이지를 방문하세요:오픈수미 라이트 온라인 미리보기.
미리보기 페이지에서 사용자는 소프트웨어를 설치하지 않고도 코드 보기 및 편집 기능을 직접 체험해 볼 수 있습니다.

오픈수미 라이트 오픈소스 소개

거의 3년이 지난 지금, 알리 그룹과 앤트 그룹의 공동 구축 팀의 노력으로 강력한 커스터마이징, 고성능, VS 코드 플러그인 시스템과의 호환성을 갖춘 최초의 IDE 개발 프레임워크인 OpenSumi가 오늘 공식 오픈소스로 공개되었습니다.

오픈수미란 무엇인가요?

OpenSumi는 수직 지향의 낮은 임계값, 고성능, 고도로 사용자 정의 가능한 듀얼 엔드(웹 및 전자) IDE 개발 프레임워크입니다.

알리 그룹 타오 시스템 엔지니어링 팀과 앤트 그룹 경험 기술 부서, R&D 성능 팀이 공동으로 IDE 표준화 R&D 프레임워크의 공동 개발에 착수했습니다. 이 프레임워크는 TypeScript +를 기반으로 합니다. React 코딩, 리소스 관리자, 편집기, 디버깅, Git 패널, 검색 패널 등 핵심 기능 모듈 구현, 개발자는 간단한 구성을 위해 시작 프로젝트를 기반으로 자체 로컬 또는 클라우드 IDE 제품을 빠르게 구축 할 수 있으며 프레임 워크 자체는 VS Code 플러그인 생태계와 호환되며 주요 VS Code 플러그인은 OpenSumi 개발을 기반으로 한 제품에서 원활하게 실행될 수 있습니다! 프레임워크는 VS 코드 플러그인 에코시스템과 호환되며, 모든 주요 VS 코드 플러그인은 OpenSumi 기반 제품에서 원활하게 실행될 수 있습니다. 또한 프레임워크는 개발자에게 저비용의 고도로 사용자 정의 가능한 다양한 뷰 사용자 정의 기능을 제공하여 IDE 시나리오에서 대부분의 뷰 사용자 정의 시나리오를 충족할 수 있습니다.

IDE 개발의 경우 이미 코드 서버, Theia 및 기타 오픈 소스 솔루션이 시장에 나와 있는데 왜 자체 연구에서 구현하기로 선택했을까요? 2019년 초부터 알리, 앤트 그룹 내에는 많은 IDE 제품이 있고, 대부분의 제품이 동일한 사전 구축 작업을 하고 있지만 이 사전 구축 작업은 짧게는 몇 개월, 길게는 6개월에서 1년 이상 한 팀이 소요되고, 노력의 중복이 많으며 일부 팀에서 오픈소스 솔루션을 사용하는 과정에서 제한된 커스터마이징 기능, 깊은 소스 코드 종속성, 유지보수 등의 문제도 어느 정도 발생하고 있다는 것을 발견했습니다. 일부 팀에서 오픈 소스 솔루션을 사용하는 과정에서 제한된 커스터마이징 기능, 소스 코드에 대한 깊은 의존성, 유지보수의 어려움, 내부 용량 요구 사항을 충족하지 못하는 등 몇 가지 문제가 다소 발생했습니다. 결국 여러 팀의 힘을 모아 자체 연구 및 구현의 길을 걷기로 결정했습니다.

오픈수미의 장점은 무엇인가요?

앞서 언급했듯이 OpenSumi는 수직 지향, 낮은 임계값, 고성능, 고도로 사용자 정의 가능한 듀얼 엔드(웹 및 전자) IDE 개발 프레임워크입니다. 그 특징은 주로 다음과 같은 점에 반영되어 있습니다:

1. 포괄적인 보기 사용자 지정 기능

메인스트림 브라우저와 비슷한 성능과 코딩 경험을 제공하는 것은 물론, 비즈니스 중심의 업종에서는 기본 프레임워크를 기반으로 모듈이나 플러그인을 통해 IDE 제품을 자유롭게 커스터마이징할 수 있어 진정한 의미의 '풀뷰 커스터마이징' 기능을 구현할 수 있는 프레임워크보다 훨씬 많은 사용자 지정 기능을 제공합니다.

많은 내부 제품 구현 단계에서 모듈을 통해 기본 기능을 구현하고 플러그인을 통해 비즈니스 관점이나 기능의 사용자 정의를 구현함으로써 자연스럽게 유지보수성을 향상시키며 더 높은 수준의 사용자 정의를 달성할 수 있습니다. Ali의 내부 R&D 시나리오를 예로 들어보면 다음과 같이 계층화된 구조가 있습니다:

2. 수직적 R&D 지원에 대한 광범위한 경험

공식 오픈소스 이전, 알리와 앤트 그룹 내부 인큐베이팅이 2년 동안 계속되어 왔으며, 그 동안 강수량은 R&D 사례 중 대표적인 수직 영역에 착륙했고, 여러분이 생각할 수 있는 대부분의 R&D 실무 시나리오는 오픈수미에서 실무 경험을 쌓을 수 있습니다.

애플릿 개발 시나리오

애플릿 개발을 위해 알리페이 애플릿 개발자 도구와 타오바오 애플릿 개발자 도구는 오픈수미를 핵심 프레임워크로 사용하여 구현되었으며, 현재까지 서비스한 개발자 수는 월 2W 이상에 달합니다.

툴바 기여 포인트와 추가 sumi API를 사용하면 플러그인을 통해 보기를 더욱 맞춤화할 수 있습니다. 예를 들어

1) 다양한 툴바 표시 사용자 지정

2) 독립적으로 통신 가능한 창 스케줄링 구현(예: 시뮬레이터)

동시에 공유된 기본 계층과 플러그인 기능을 통해 엔드투엔드 빠른 포팅이 가능합니다. 알리페이 애플릿 개발자 도구와 관련된 플러그인을 포팅하여 기능은 비슷하지만 사용 시나리오가 다른 타오바오 애플릿 개발자 도구의 초기 버전에 대한 지원을 완료하고 한 달이라는 짧은 기간 동안 내부용으로 O2 클라이언트를 인큐베이팅했습니다.

클라우드 통합 R&D 링크

클라우드 통합 R&D 링크의 경우, 외부에는 AliCloud 개발 플랫폼이 있고 내부에는 O2, Ant 코드스페이스 및 기타 제품이 있습니다.

정기적인 R&D 링크는 아래 그림의 상단 절반에 나와 있습니다.

우리는 종종 프로젝트 연구 개발을 시작하기 전에 간단하거나 번거로운 환경 구성 작업을 거쳐야하며, 코딩 환경과 클라우드 환경이 분할되어 있으며, AliCloud 및 기타 클라우드 제품, 컨테이너 기능의 도움으로 OpenSumi를 통해 구축 할 수있는 기업 또는 팀의 클라우드 코딩 환경에 속하므로 개발자가 클라우드에서 모든 작업의 개발을 완료하는 문제를 구성하는 환경을 실제로 절약 할 수 있습니다.

심층적인 프로세스 사용자 지정 기능을 통해 개발자가 빠르게 개발에 착수할 수 있습니다.

내부 R&D 플랫폼과 연결하여 개발, 테스트 및 배포를 원스톱으로 수행할 수 있습니다.

순수 프런트엔드 빌드

순수 프론트엔드 빌드 기능은 알리(Ali)와 앤트 그룹에서 가장 널리 사용되는 오픈수미의 기능으로, 서버에 의존하지 않아도 에디터가 시작되고, 순수 프론트엔드 리소스와 정적 인터페이스 정의를 통해 에디터의 기본 인터페이스를 직접 구축할 수 있는 일종의 Node.js 서비스를 제공하는 기능입니다.

구현의 핵심은 원래 서비스 계층 추상화 계층을 위해 Node에 의존하는 파일, Git 및 기타 서비스를 통해 개발자가 파일 읽기 및 쓰기 서비스의 특정 로직을 수동으로 정의 할 수 있도록하는 동시에 브라우저의 웹 워커 환경에서 실행되는 언어 서비스 인 OpenSumi에서 제공하는 웹 워커 API를 기반으로하여 순수한 프런트 엔드 구축 효과를 달성하기 위해 Node의 프레임 워크를 달성하는 것입니다. 순수한 프론트엔드 구축의 효과를 얻기 위해.

이 구현 계층을 기반으로 순수한 프런트엔드 편집기를 구현하기 위해 GitHub Rest API를 완전히 기반으로 할 수 있으며, GitHub 코드 보기 상단에서 직접 편집 및 제출 작업을 수행할 수 있으며, 해당 사례를 고려할 것입니다. 내부적으로 일반적인 적용 사례는 다음과 같은 시나리오입니다:

1.코드 검토

2. 코드 표시

3. 원격 필기 시험

또한, opensumi/ide-startup-lite[1]의 OpenSumi 리포지토리에서 쉽게 시작할 수 있는 방법을 제공하거나 미리보기 페이지[2]에서 직접 데모를 확인할 수 있습니다.

3. VS Code의 플러그인 기능 완벽 지원

Theia의 IDE 프레임 워크에주의를 기울인 학생들은 Theia에 익숙하지 않아야한다고 생각하며, VS 코드 플러그인 호환 IDE 프레임 워크 인 Theia는 실제로 일부 VS 코드 플러그인 기능과 호환되지만 이후의 VS 코드 API 호환성은 점점 줄어들고 기본적으로 커뮤니티에 의존하여 개발자의 발견에 기여합니다.

오픈수미는 VS Code 플러그인 생태계와 호환되도록 설계되었으므로 프레임워크에 대한 지속적인 요구 사항이 있습니다. 오픈소스화 이후 3개월마다 VS Code 플러그인 API의 적응을 완료할 계획이며, 적응 계획은 해당 버전 관리자가 토론 포럼에서 정리할 것입니다. 표준 API는 VS Code v1.60.0에 맞게 조정되었으며, 진행 상황은 조정 계획에서 확인할 수 있습니다.

OpenSumi와 시장의 주류 프레임워크의 차이점

1. VS 코드와의 관계

IDE 제품의 핵심인 프레임워크의 본질은 우리의 속성과 차이가 있으며, 전반적으로 ToC 제품이며, 개발자가 임계값과 높은 비용을 사용자 지정할 수 있으며, 콘텐츠도 상대적으로 제한적이며, 제한된 확장 형태를 통해 대부분의 플러그인을 사용자 지정할 수 있습니다.

당사의 프레임워크는 주로 ToB 사용자를 대상으로 하며, IDE 프레임워크를 통해 자체 CloudIDE/로컬 IDE 제품을 구축해야 하지만 기술 R&D 역량이 부족한 중소기업을 위한 간단하고 편리한 개발 옵션입니다.

2. 테아이아와의 관계

거의 몇 년 동안 개발과 성숙을 거친 후 VS Code의 일부 디자인 개념을 차용한 신생 기업인 Theia는 커뮤니티가 비교적 번성하고 Eclipse 재단의 지원을 받고 있으며 IDE 개발자도 좋은 개발 옵션이며 OpenSumi 프레임워크는 경쟁력이 있습니다.

테아 자체는 모듈식 구조의 IDE 제품을 제공하며, 뷰의 대부분의 사용자 지정은 모듈식 접근 방식을 통해 확장할 수 있고(이 점은 오픈수미에서도 해당 아이디어를 기반으로 합니다), 플러그인 기능에서 대부분의 VS 코드 플러그인과 호환되며, VS 코드 플러그인 API의 하위 집합을 제공하며, 일부 플러그인 API(디버깅 언어 등)는 완전히 구현되지 않았고 지속적인 후속 조치 계획이 없습니다. (일부 플러그인 API(디버그, 언어 등)가 완전히 구현되지 않았으며 후속 계획이 없습니다.

위와 같은 점을 바탕으로 오픈수미 프레임워크는 기본적인 모듈식 확장을 지원할 뿐만 아니라 플러그인 수준에서 VS Code 표준 API(현재 구현된 VS Code 1.16.0 버전의 API) 기획에 대한 후속 조치를 지속해 왔으며, 동시에 프론트엔드 샌드박스 구현을 기반으로 플러그인을 통해 자유롭게 뷰 기능을 확장할 수 있는 일련의 수미 API를 제공하고 있습니다. 동시에 프론트엔드 샌드박스를 구현하여 플러그인을 통해 자유롭게 뷰 기능을 확장할 수 있는 일련의 수미 API를 제공함으로써 React에 익숙한 프론트엔드 학생들도 직접 프론트엔드 컴포넌트 작성을 시작하고, 우리가 제공하는 풍부한 API를 통해 뷰의 해당 기능을 실현할 수 있도록 했습니다.