[Compilation and Sharing] Alibaba's 15 top front-end open source projects, see which ones you have used!

This article takes a look at Alibaba’s popular front-end open source projects. Which ones have you used? If you haven’t used it before, you can try it!

Full text overview:

• Ant Design: Enterprise-level UI design language And React component library

• Element UI: Desktop component library based on Vue 2.0

• Egg. js: Enterprise-level Node.js framework

• Icejs: React-based mid- and back-end application solutions

• UmiJS： Pluggable enterprise-level React application framework

• G2： Data-driven high-interaction visual graphics syntax

• ahooks: High-quality and reliable React Hooks library

• Formily: MVVM form solution

• Rax： Cross-container rendering engine

• ##LowCodeEngine： Low code engine

• Midway： The future-oriented cloud-integrated Node.js framework

• BizCharts： Universal chart component library

• Hilo： HTML5 interactive game engine

• Solution

• Fusion Design:

  Enterprise-level mid- and back-end UI solution

1. Ant Design

Ant Design is an enterprise-level UI design language and React component library. It has the following characteristics:

The interactive language and visual style extracted from enterprise-level mid- and back-end products.

• High quality React components out of the box.
• Developed using TypeScript, providing complete type definition files.
• Full-link development and design tool system.
• Dozens of international languages ​​supported.
• Theme customization capabilities that go deep into every detail.

##Ant Design Github (⭐️ 81.5k):

• github.com/ant-design/…Ant Design Pro Github (⭐️ 32.7k):
• github.com/ant-design/…Ant Design Mobile Github (⭐️ 10.5k):
• github.com/ant-design/…2. Element UI

Element is a set of tools for development A desktop component library based on Vue 2.0 prepared by authors, designers and product managers.

Github (⭐️ 52.5k):

github.com/ElemeFE/ele…3. Egg.js

Egg.js is an enterprise-level Node.js framework. Egg's plug-in mechanism is highly scalable.

A plug-in only does one thing

. Egg aggregates these plug-ins through a framework and customizes configurations according to its own business scenarios, so that application development costs become very low. It has the following characteristics:

Provides the ability to customize the upper-layer framework based on Egg

Highly scalable plug-in mechanism
• Built-in multi-process management
• Developed based on Koa, with excellent performance
• Stable framework, high test coverage
• Progressive development

##Github (⭐️ 18.1k):

github.com/eggjs/egg

4. IcejsFeibing is a React-based R&D solution that focuses on applications The R&D framework icejs provides basic capabilities such as basic construction, routing, and debugging, as well as capabilities in areas such as micro-front-end and integration. It also combines visual operations, material reuse and other solutions to lower the R&D threshold. It has the following characteristics:

• Supports both Vite & Webpack modes, businesses can choose as needed
• Out-of-the-box engineering capabilities: TypeScript/Webpack5/Vite/Style Scheme/Mock/...
• Best practices that fit the business: directory specifications, code specifications, routing schemes, status management, data requests, etc.
• Multiple application modes: supports SPA, MPA, and also supports server-side rendering SSR and static construction SSG
• Powerful plug-in capabilities: All official capabilities are implemented through plug-ins, and business can expand various capabilities through plug-ins
• Rich domain solutions: micro front-end solution icestark, integrated solution, React Hooks solution ahooks, form solution Formily, etc.

Github (⭐️ 17.3k): github.com/alibaba/ice

5. UmiJS

umi is a pluggable enterprise-level react application framework. Umi is based on routing and supports both configured routing and conventional routing to ensure complete routing functions and expand functions accordingly. Then it is equipped with a plug-in system with a complete life cycle, covering every life cycle from source code to built products, supporting various functional expansions and business needs. It has many very interesting features, such as:

• Enterprise level, more
• plug-ins will be considered in terms of security, stability, best practices, and constraint capabilities. Everything can be changed, Umi itself is also composed of plug-ins
• MFSU, a Webpack packaging solution that is faster than Vite
• Complete routing based on React Router 6
• The fastest by default Request
• SSR & SSG
• Stable white box performance and good ESLint and Jest
• Frame-level access to React 18
• Monorepo best practices

Github (⭐️ 12.9k): github.com/umijs/umi

6. G2

G2 is a set of data-driven, highly interactive visual graphics syntax for conventional statistical charts, with high ease of use and scalability. Using G2, you don’t need to pay attention to various tedious implementation details of charts. You can use Canvas or SVG to build a variety of interactive statistical charts with one statement.

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

7. ahooks

ahooks is a set of high-quality and reliable React Hooks library. In the current development process of React project, a set of easy-to-use React Hooks library is indispensable. I hope ahooks can become your choice. It has the following characteristics:

• Easy to learn and use
• Supports SSR
• Special processing of input and output functions, and avoids closure problems
• Contains a large number of advanced Hooks refined from the business
• Contains a wealth of basic Hooks
• Built using TypeScript, providing a complete type definition file

Github (⭐️ 10.1k): github.com/alibaba/hoo…

8. Formily

Formily is an abstraction MVVM form solution based on the form domain model. In React, the whole tree rendering issue for forms is very noticeable in controlled mode. Especially for data linkage scenarios, it is easy to cause page freezes. In order to solve this problem, Formily performs distributed management of the status of each form field, thereby greatly improving form operation performance. At the same time, it deeply integrates the JSON Schema protocol, which can help you quickly solve the problem of back-end driven form rendering. It has the following characteristics:

• High performance
• Ready to use out of the box
• Linkage logic to achieve high efficiency
• Cross-end capabilities, logic can cross frameworks , cross-terminal reuse
• Dynamic rendering capability

Github (⭐️ 8.3k): github. com/alibaba/for…

9. Rax

Rax is Alibaba’s most widely used cross-end solution, supporting developers to write Web, small programs, Cross-end applications in different containers such as Flutter. It has the following characteristics:

• The syntax level of Rax is based on React, and you can use the React API with more than 80% support such as Hooks and Context.
• The official supporting R&D framework Rax App supports TypeScript, Less/Sass and other basics. Engineering capabilities, supporting MPA, SPA, SSR and multiple capabilities
• Supports development of small programs across different vendors such as Alipay/WeChat/Byte through complete Rax syntax, and can be downgraded to Web
• Based on Web standards, support cross-end applications across multiple containers, including Web applications, Flutter applications (Kraken), and Weex applications
• Rich cross-end ecosystem, such as cross-end component Fusion Mobile, cross-end API Uni API

Github (⭐️ 7.8k): github.com/alibaba/rax

10 . LowCodeEngine

LowCodeEngine Low-code engine is a low-code R&D framework with powerful expansion capabilities provided for low-code platform developers. It is jointly produced by Alibaba Front-end Committee and DingTalk. Users can quickly customize a low-code platform that meets their business needs based on a low-code engine. It has the following characteristics:

• Extracted from the enterprise-level low-code platform, the core engine is designed for expansion and pursues the design concept of the smallest kernel and the strongest ecology.
• Ready to use out of the box High-quality ecological elements, including material systems, setters, plug-ins, etc.
• Complete tool chains that support the full-link R&D cycle of material systems, setters, plug-ins and other ecological elements
• Powerful Extensibility, has supported nearly 100 various vertical low-code platforms
• Developed using TypeScript, providing complete type definition files

Github (⭐️ 7.6k): github.com/alibaba/low…

11. Midway

Midway is a tool suitable for building Serverless services. Node.js framework for traditional applications, microservices, and mini program backends. It can use Koa, Express or Egg.js as the base web framework. It also provides basic solutions for standalone use, such as Socket.io, GRPC, Dubbo.js and RabbitMQ, etc. Additionally, Midway is also a Node.js serverless framework for front-end/full-stack developers. Building the apps of the next decade. Can run on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/containers. Easy integration with React and Vue.

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

12. BizCharts

BizCharts is Alibaba's general chart component library, dedicated to creating efficient, professional, and convenient data visualization solutions for enterprise middle and backends. It is a React chart library based on G2 and G2Plot encapsulation, and has experienced Alibaba's complex business scenarios for a long time. After three years of baptism, it meets the needs of business implementation of conventional charts and highly customized charts in terms of flexibility, ease of use, and richness.

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

13. Hilo

Hilo is an HTML5 cross-terminal game solution developed by Alibaba Group. It can help developers quickly create HTML5 games. It has the following features:

• Hilo supports packaged versions of multiple module paradigms, including AMD, CMD, COMMONJS, and Standalone. In addition, you can add and expand modules and types as needed;
• Extremely streamlined module design, completely object-oriented;
• Multiple rendering methods, providing DOM, Canvas, Flash, WebGL, etc. Multiple rendering solutions (currently patented);
• full-end browser support and high-performance solution, unique Flash rendering solution, can run "cool" even in low-version IE browsers "Game; DOM rendering solution can significantly solve the performance problems encountered by low-performance mobile browsers;
• Physics engine support - Chipmunk, supports self-expanding physics implementation; Bone animation support - DragonBones, with built-in bones Animation system - Tahiti (currently used internally);
• Rich cases, mature framework, has been tested by multiple Alibaba Double Eleven and mid-year promotion interactive marketing activities;

Github (⭐️ 5.8k): github.com/hiloteam/Hi…

14.

Github (⭐️ 4.9k):

github.com/alibaba/x-r…15. Fusion Design

Fusion Design is a working method designed to improve the efficiency of UI construction between design and development. By building standard protocols and workflows between design and front-end based on the DPL model, we can quickly build DPL that meets business requirements, improve DPL construction efficiency and application efficiency, and help businesses quickly implement UI construction.

Github (⭐️ 4.2k):

github.com/alibaba-fus…

Original address: https://juejin.cn/post/7135382523672002590

(Learning video sharing:

Getting started with web front-end

)

The above is the detailed content of [Compilation and Sharing] Alibaba's 15 top front-end open source projects, see which ones you have used!. For more information, please follow other related articles on the PHP Chinese website!