집 >웹 프론트엔드 >JS 튜토리얼 >[편집 및 공유] 알리바바의 상위 15개 프론트엔드 오픈소스 프로젝트, 어떤 프로젝트를 사용해 왔는지 확인해보세요!

[편집 및 공유] 알리바바의 상위 15개 프론트엔드 오픈소스 프로젝트, 어떤 프로젝트를 사용해 왔는지 확인해보세요!

青灯夜游앞으로: 2022-08-25 19:09:272989검색

이 기사에서는 Alibaba의 인기 있는 프런트엔드 오픈소스 프로젝트를 살펴봅니다. 이전에 사용해 본 적이 없다면 시도해 볼 수 있습니다!

전체 텍스트 개요:

Ant 디자인: 엔터프라이즈급 UI 디자인 언어 및 React 구성 요소 라이브러리
Element UI: Vue 2.0 기반 데스크톱 구성 요소 라이브러리
Egg.js: 엔터프라이즈 수준 Node.js 프레임워크
Icejs: React 기반 중간 및 백엔드 애플리케이션 솔루션
UmiJS: 플러그형 엔터프라이즈 수준 React 애플리케이션 프레임워크
G2 : 데이터 기반 고상호작용 시각적 그래픽 문법
ahooks : 고품질의 안정적인 React Hooks 라이브러리
Formily : MVVM 양식 솔루션
Rax : 크로스 -컨테이너 렌더링 엔진
LowCodeEngine: 로우 코드 엔진
Midway: 미래 지향적 클라우드 통합 Node.js 프레임워크
BizCharts: 범용 차트 구성 요소 라이브러리
Hilo: HTML5 대화형 게임 엔진
엔터프라이즈급 UI 디자인 언어 및 React 구성 요소 라이브러리입니다. 다음과 같은 특징을 가지고 있습니다.
즉시 사용 가능한 고품질 React 구성요소. TypeScript를 사용하여 개발되었으며 완전한 유형 정의 파일을 제공합니다.

다양한 국제 언어 지원. 모든 세부 사항을 자세히 다루는 테마 사용자 정의 기능.

Ant Design Github(⭐️ 81.5k):
github.com/ant-design/…
Ant Design Pro Github(⭐️ 32.7k):
github.com/ant- design/…

[편집 및 공유] 알리바바의 상위 15개 프론트엔드 오픈소스 프로젝트, 어떤 프로젝트를 사용해 왔는지 확인해보세요!

Ant Design Mobile Github(⭐️ 10.5k):

github.com/ant-design/…2.Element는 개발자, 디자이너 및 제품을 위한 제품군입니다. 관리자가 준비한 Vue 2.0 기반의 컴포넌트 라이브러리입니다.
Github(⭐️ 52.5k):
github.com/ElemeFE/ele…3. Egg.js

플러그인은 한 가지 작업만 수행합니다

. Egg는 프레임워크를 통해 이러한 플러그인을 집계하고 자체 비즈니스 시나리오에 따라 구성을 사용자 정의하므로 애플리케이션 개발 비용이 매우 낮아집니다. 여기에는 다음과 같은 기능이 있습니다.

Egg 기반 상위 계층 프레임워크를 사용자 정의하는 기능 제공

[편집 및 공유] 알리바바의 상위 15개 프론트엔드 오픈소스 프로젝트, 어떤 프로젝트를 사용해 왔는지 확인해보세요! 확장성이 뛰어난 플러그인 메커니즘

다중 프로세스 관리 내장 Koa 기반 개발, 우수한 성능 프레임워크 안정성, 높은 테스트 적용 범위

프로그레시브 스타일 개발

Github(⭐️ 18.1k):
github.com/eggjs/egg
Feibing은 React 기반 R&D 솔루션입니다. 애플리케이션 개발 프레임워크를 중심으로 제공 icejs 기본 구성, 라우팅, 디버깅과 같은 기본 기능은 물론 마이크로 프런트 엔드, 통합 및 기타 분야의 기능을 제공하는 동시에 시각적 작업, 재료 재사용 및 기타 솔루션을 결합하여 연구 및 개발 임계 값. 다음과 같은 특징이 있습니다:
- Vite 및 Webpack 모드를 모두 지원하며 기업은 필요에 따라 선택할 수 있습니다.
- 즉시 사용 가능한 엔지니어링 기능: TypeScript/Webpack5/Vite/Style Scheme/Mock/...
- 비즈니스에 적합한 모범 사례: 디렉터리 사양 , 코드 사양, 라우팅 솔루션, 상태 관리, 데이터 요청 등
- 다양한 응용 프로그램 모드: SPA, MPA 지원, 서버 측 렌더링 SSR 및 SSG의 정적 구성 지원
- 강력한 플러그인 기능: 모든 공식 기능 기업은 플러그인을 통해 다양한 기능을 확장할 수 있습니다
- 풍부한 도메인 솔루션: 마이크로 프론트엔드 솔루션 icestark, 통합 솔루션, React Hooks 솔루션 ahooks, form 솔루션 Formily 등
Github(⭐️ 17.3k): github.com/alibaba/ice

5. UmiJS

umi는 플러그형 엔터프라이즈 수준 반응 애플리케이션 프레임워크입니다. Umi는 라우팅을 기반으로 하며 구성된 라우팅과 기존 라우팅을 모두 지원하여 완전한 라우팅 기능을 보장하고 그에 따라 기능을 확장합니다. 그런 다음 소스 코드부터 제품 구축까지 모든 라이프사이클을 포괄하여 다양한 기능 확장과 비즈니스 요구를 지원하는 완전한 라이프사이클을 갖춘 플러그인 시스템을 갖추고 있습니다. 여기에는 다음과 같은 매우 흥미로운 기능이 많이 있습니다.
- 엔터프라이즈 수준, 보안, 안정성, 모범 사례 및 제한 기능에 더 많은 고려가 주어질 것입니다.
- 플러그인, 모든 것이 변경 가능, Umi 자체도 플러그로 만들어졌습니다. -ins
- Vite보다 빠른 Webpack 패키징 솔루션인 MFSU를 구성
- React Router 6의 완전한 라우팅 기반
- 기본적으로 가장 빠른 요청
- SSR & SSG
- ESLint 및 Jest의 안정적인 화이트 박스 성능
- React 18 프레임워크 수준 액세스
- Monorepo 모범 사례
Github(⭐️ 12.9k): github.com/umijs/umi

6 G2

G2 데이터에 대한 일반 통계 차트 세트 사용 편의성과 확장성이 뛰어난 구동형 대화형 시각적 그래픽 문법입니다. G2를 사용하면 차트의 지루한 구현 세부 사항에 신경 쓰지 않고 단 하나의 명령문으로 Canvas 또는 SVG를 사용하여 다양한 대화형 통계 차트를 구축할 수 있습니다.

Github(⭐️ 11.3k): github.com/antvis/g2

7. ahooks

ahooks는 현재 개발 과정에서 사용되는 고품질의 안정적인 React Hooks 라이브러리입니다. React 프로젝트, 유용한 React Hooks 라이브러리 세트가 필수적입니다. ahooks가 여러분의 선택이 되기를 바랍니다. 다음과 같은 특징이 있습니다.
- 배우고 사용하기 쉽습니다
- SSR을 지원합니다
- 입력 및 출력 기능의 특수 처리 및 클로저 문제 방지
- 비즈니스에서 개선된 고급 Hooks가 다수 포함되어 있습니다
- 풍부한 내용이 포함되어 있습니다. 기본 Hooks
- TypeScript를 사용하여 구축되었으며 완전한 유형 정의 파일을 제공합니다
Github(⭐️ 10.1k): github.com/alibaba/hoo…

Formily는 추상 형식입니다. 도메인 모델 MVVM 양식 솔루션. React에서는 양식의 전체 트리 렌더링 문제가 제어 모드에서 매우 두드러집니다. 특히 데이터 연결 시나리오의 경우 페이지 정지 현상이 발생하기 쉽습니다. 이를 해결하기 위해 Formily는 각 양식 필드의 상태를 분산 관리하여 양식 작업 성능을 크게 향상시킵니다. 동시에 JSON 스키마 프로토콜을 깊이 통합하여 백엔드 기반 양식 렌더링 문제를 신속하게 해결하는 데 도움이 됩니다. 다음과 같은 특징이 있습니다.

고성능
- 즉시 사용 가능
- 높은 효율성을 달성하기 위한 연결 로직
- 크로스 터미널 기능, 프레임워크와 크로스 터미널에서 로직 재사용 가능
- 동적 렌더링 기능
Github(⭐️ 8.3k):
github.com/alibaba/for…9 Rax

Rax는 개발자가 소규모 웹을 작성할 수 있도록 지원하는 Alibaba의 가장 널리 사용되는 크로스 엔드 솔루션입니다. 프로그램, Flutter와 같은 다양한 컨테이너의 크로스엔드 애플리케이션. 다음과 같은 특징이 있습니다:
- Rax의 구문 수준은 React를 기반으로 하며 Hooks 및 Context와 같은 React API를 80% 이상 지원하여 사용할 수 있습니다.
- 공식 지원 R&D 프레임워크 Rax 앱은 TypeScript, Less/Sass와 같은 기본 엔지니어링 기능을 지원합니다. , MPA 및 SPA도 지원합니다. , SSR 다중 기능
- 완벽한 Rax 구문을 통해 Alipay/WeChat/Byte와 같은 다양한 공급업체의 소규모 프로그램 개발을 지원하며 Web으로 다운그레이드할 수 있습니다
- 웹 표준을 기반으로 지원합니다. 웹 애플리케이션, Flutter 애플리케이션(Kraken), Weex 애플리케이션을 포함한 여러 컨테이너에 걸친 크로스엔드 애플리케이션
- 크로엔드 구성요소 Fusion Mobile, 크로스엔드 API Uni API
과 같은 풍부한 크로스엔드 생태계 Github(⭐️ 7.8k): github.com/alibaba /rax

10. LowCodeEngine

LowCodeEngine 로우 코드 엔진은 로우 코드 플랫폼 개발자에게 제공되는 강력한 확장성을 갖춘 로우 코드 R&D 프레임워크입니다. Alibaba Front-end Committee와 DingTalk가 공동으로 제작했습니다. 사용자는 로우코드 엔진을 기반으로 비즈니스 요구 사항을 충족하는 로우코드 플랫폼을 신속하게 맞춤화할 수 있습니다. 다음과 같은 특징을 가지고 있습니다.
- 엔터프라이즈급 로우코드 플랫폼에서 추출한 확장형 커널 엔진으로, 가장 작은 커널과 가장 강한 생태학이라는 설계 컨셉을 고수합니다.
- 즉시 사용할 수 있는 고품질 생태학적 요소 , 재료 시스템 및 설정 포함
- 재료 시스템, 설정기, 플러그인 및 기타 생태학적 요소의 전체 링크 R&D 주기를 지원하는 완전한 도구 체인
- 강력한 확장 기능으로 거의 100가지에 달하는 다양한 수직 로우 코드 사용을 지원했습니다. 플랫폼
- 완전한 유형 정의 파일을 제공하는 TypeScript 개발
Github(⭐️ 7.6k): github.com/alibaba/low…

11Midway는 다음에 적합한 서버리스 서비스입니다. 전통적인 애플리케이션, 마이크로서비스 및 미니 프로그램 백엔드를 위한 Node.js 프레임워크를 구축합니다. Koa, Express 또는 Egg.js를 기본 웹 프레임워크로 사용할 수 있습니다. 또한 Socket.io, GRPC, Dubbo.js 및 RabbitMQ 등과 같은 독립형 사용을 위한 기본 솔루션도 제공합니다. 또한 Midway는 프런트엔드/풀 스택 개발자를 위한 Node.js 서버리스 프레임워크이기도 합니다. 향후 10년의 앱을 구축하세요. AWS, Alibaba Cloud, Tencent Cloud 및 기존 VM/컨테이너에서 실행할 수 있습니다. React 및 Vue와 쉽게 통합됩니다.

Github(⭐️ 5.9k):
github.com/midwayjs/mi…12 BizCharts

BizCharts는 Alibaba의 일반 차트 구성 요소 라이브러리로 효율적이고 전문적이며 편리한 중간 및 백엔드 엔터프라이즈 데이터 시각화 솔루션은 G2 및 G2Plot으로 캡슐화된 React 차트 라이브러리를 기반으로 하며 3년 동안 Alibaba의 복잡한 비즈니스 시나리오를 통해 세례를 받았으며 유연성, 사용 편의성 측면에서 기존 차트와 고도로 맞춤화된 차트의 요구 사항을 모두 충족합니다. , 그리고 풍요를 달성합니다.

Github(⭐️ 5.9k):
github.com/alibaba/Biz…13. Hilo

Hilo는 Alibaba Group에서 개발한 HTML5 크로스 터미널 게임 솔루션입니다. 개발자가 빠르게 도움을 받을 수 있습니다. HTML5 게임을 만듭니다. 여기에는 다음과 같은 기능이 있습니다.

Hilo는 AMD, CMD, COMMONJS 및 Standalone을 포함한 여러 모듈 패러다임의 패키지 버전을 지원합니다. 또한 필요에 따라 모듈과 유형을 추가하고 확장할 수 있습니다.
- 완전히 객체 지향적인 매우 효율적인 모듈 설계
- 다양한 렌더링 방법, DOM, Canvas, Flash, WebGL 및 기타 렌더링 솔루션 제공(현재 특허 출원 중)
- 완전한 브라우저 지원 및 고성능 솔루션, 고유한 플래시 렌더링 솔루션으로 낮은 버전의 IE 브라우저에서도 "멋진" 게임을 실행할 수 있습니다. DOM 렌더링 솔루션은 저사양 휴대폰의 문제를 크게 해결할 수 있습니다. 브라우저별
- 물리 엔진 지원 - Chipmunk, 자체 확장형 물리 구현 지원 - DragonBones 및 내장형 뼈대 애니메이션 시스템 - Tahiti(현재 내부적으로 사용됨), 프레임워크는 성숙되었으며 여러 Alibaba Double Eleven 및 연중 프로모션 대화형 마케팅 활동을 통해 테스트되었습니다.
Github(⭐️ 5.8k):
github.com/hiloteam/Hi…
14. XRender

XRender는 사용하기 쉬운 중간 및 백엔드 "폼/테이블/차트" 솔루션입니다.

Github (⭐️ 4.9k): github.com/alibaba/x-r…

15. 퓨전 디자인

퓨전 디자인은 디자인과 개발 사이에서 UI 구축의 효율성을 향상시키는 것을 목표로 하는 작업 방식입니다. . DPL 모델을 기반으로 디자인과 프런트엔드 간의 표준 프로토콜과 워크플로우를 구축함으로써 비즈니스 요구 사항을 충족하는 DPL을 신속하게 구축하고, DPL 구축 효율성과 애플리케이션 효율성을 향상시키며, 기업이 UI 구축을 신속하게 구현할 수 있도록 지원합니다.

Github (⭐️ 4.2k): github.com/alibaba-fus…

원본 주소: https://juejin.cn/post/7135382523672002590

( 학습 영상 공유: 웹 프론트엔드 시작하기)