[Compilation et partage] Les 15 meilleurs projets open source front-end d'Alibaba, voyez lesquels vous avez utilisés !

Cet article examine les projets open source front-end populaires d'Alibaba. Lesquels avez-vous utilisé ? Si vous ne l’avez jamais utilisé auparavant, vous pouvez l’essayer !

Présentation du texte intégral :

• Ant Design : Langage de conception d'interface utilisateur de niveau entreprise et bibliothèque de composants React

• Element UI : Bibliothèque de composants de bureau basée sur Vue 2.0

• Egg.js : Framework Node.js au niveau de l'entreprise

• Icejs : Solutions d'applications mid-end et back-end basées sur React

• UmiJS : Framework d'application React enfichable au niveau de l'entreprise

• G2 : Syntaxe graphique visuelle à haute interaction basée sur les données

• ahooks : Bibliothèque React Hooks fiable et de haute qualité

• Formily : Solution de formulaire MVVM

• Rax : Croix -moteur de rendu de conteneurs

• LowCodeEngine： Moteur Low Code

• Midway： Un framework Node.js intégré au cloud et orienté vers l'avenir

• BizCharts： Bibliothèque universelle de composants de graphiques

• Hilo : Moteur de jeu interactif HTML5

• Un langage de conception d'interface utilisateur de niveau entreprise et une bibliothèque de composants React. Il présente les caractéristiques suivantes :

Le langage interactif et le style visuel extraits des produits middle et back-end au niveau de l'entreprise.

• Composants React de haute qualité prêts à l'emploi. Développé à l'aide de TypeScript, fournissant des fichiers complets de définition de type.

Système d'outils de développement et de conception à lien complet.

Des dizaines de supports linguistiques internationalisés. Capacités de personnalisation du thème qui approfondissent chaque détail.

• 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 est une suite pour les développeurs, les concepteurs et les produits Un ordinateur de bureau. bibliothèque de composants basée sur Vue 2.0 préparée par le manager.
• Github (⭐️ 52,5k) : github.com/ElemeFE/ele…
3 Egg.js

Egg.js est un framework Node.js au niveau de l'entreprise et le plug-in d'Egg. Le mécanisme est hautement évolutif,

Un plug-in ne fait qu'une seule chose

. Egg regroupe ces plug-ins via le framework et personnalise la configuration en fonction de ses propres scénarios commerciaux, de sorte que le coût de développement d'applications devienne très faible. Il présente les fonctionnalités suivantes :

Offre la possibilité de personnaliser le framework de couche supérieure basé sur Egg

Mécanisme de plug-in hautement évolutif Gestion multi-processus intégrée Développé sur la base de Koa, excellentes performances

Stabilité du framework, couverture de tests élevée

Développement de style progressif

• Github (⭐️ 18,1k) :
• github.com/eggjs/egg
• 4. Icejs
• Feibing est une solution de R&D basée sur React. fourni autour du cadre de développement d'applications icejs Des capacités de base telles que la construction de base, le routage et le débogage, ainsi que des capacités dans le micro-front-end, l'intégration et d'autres domaines, tout en combinant des opérations visuelles, la réutilisation des matériaux et d'autres solutions pour réduire la recherche et seuil de développement. Il présente les caractéristiques suivantes :
• • Prend en charge les modes Vite et Webpack, les entreprises peuvent choisir selon leurs besoins
  • Capacités d'ingénierie prêtes à l'emploi : TypeScript/Webpack5/Vite/Style Scheme/Mock/...
  • Meilleures pratiques pour l'ajustement commercial : spécifications d'annuaire , spécifications de code, solutions de routage, gestion d'état, demandes de données, etc.
  • Plusieurs modes d'application : prend en charge SPA, MPA, et prend également en charge le rendu côté serveur SSR et la construction statique de SSG
  • Puissantes capacités de plug-in : toutes les capacités officielles sont implémentés via des plug-ins. Les entreprises peuvent étendre diverses capacités grâce à des plug-ins
  • Solutions de domaine riches : solution micro front-end icestark, solution intégrée, solution React Hooks ahooks, solution de formulaire Formily, etc.

  

  Github (⭐️ 17,3k) : github.com/alibaba/ice

  5 UmiJS

  umi est un framework d'application React enfichable au niveau de l'entreprise. Umi est basé sur le routage et prend en charge à la fois le routage configuré et le routage conventionnel pour garantir des fonctions de routage complètes et étendre les fonctions en conséquence. Ensuite, il est équipé d'un système de plug-ins avec un cycle de vie complet, couvrant chaque cycle de vie, du code source aux produits construits, prenant en charge diverses extensions fonctionnelles et besoins commerciaux. Il possède de nombreuses fonctionnalités très intéressantes, telles que :

  • Niveau Entreprise, une plus grande attention sera accordée à la sécurité, à la stabilité, aux meilleures pratiques et aux capacités de retenue
  • Plug-in, tout peut être modifié, Umi lui-même est également fait de plug -ins Constituant
  • MFSU, une solution de packaging Webpack plus rapide que Vite
  • Basée sur le routage complet de React Router 6
  • La requête la plus rapide par défaut
  • SSR & SSG
  • Performances stables de la boîte blanche d'ESLint et Jest
  • React 18 Accès au niveau du framework
  • Bonnes pratiques Monorepo

  

  Github (⭐️ 12,9k) : github.com/umijs/umi

  6 G2

  G2 Un ensemble de graphiques statistiques généraux pour Data-. grammaire graphique visuelle pilotée et hautement interactive avec une grande facilité d'utilisation et une grande évolutivité. En utilisant G2, vous pouvez créer une variété de graphiques statistiques interactifs en utilisant Canvas ou SVG avec une seule instruction sans prêter attention aux détails fastidieux de mise en œuvre du graphique.

  

  Github (⭐️ 11,3k) : github.com/antvis/g2

  7 ahooks

  ahooks est un ensemble de bibliothèques React Hooks fiables et de haute qualité pendant le processus de développement actuel de. Projet React, un ensemble de bibliothèques React Hooks utiles est essentiel, j'espère que les ahooks deviendront votre choix. Il présente les caractéristiques suivantes :

  • Facile à apprendre et à utiliser
  • Prend en charge SSR
  • Traitement spécial des fonctions d'entrée et de sortie et évite les problèmes de fermeture
  • Contient un grand nombre de Hooks avancés raffinés par les entreprises
  • Contient une richesse de Hooks de base
  • Construits à l'aide de TypeScript, fournissant des fichiers de définition de type complets

  

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

  8 Formily

  Formily est une forme abstraite. Solution de formulaire MVVM de modèle de domaine. Dans React, tout le problème de rendu de l'arborescence pour les formulaires est très visible en mode contrôlé. Surtout pour les scénarios de liaison de données, il est facile de provoquer le gel des pages. Afin de résoudre ce problème, Formily effectue une gestion distribuée de l'état de chaque champ de formulaire, améliorant ainsi considérablement les performances de fonctionnement du formulaire. Dans le même temps, il intègre profondément le protocole JSON Schema, qui peut vous aider à résoudre rapidement le problème du rendu des formulaires piloté par le back-end. Il présente les caractéristiques suivantes :

  • Hautes performances
  • Prêt à l'emploi, prêt à l'emploi
  • Logique de liaison pour atteindre une efficacité élevée
  • Capacités multi-terminaux, la logique peut être réutilisée dans tous les frameworks et multi-terminaux
  • Capacités de rendu dynamique

  

  Github (⭐️ 8,3k) : github.com/alibaba/for…

  9 Rax

  Rax est la solution cross-end la plus utilisée d'Alibaba, aidant les développeurs à écrire du Web, petit. programmes, applications cross-end dans différents conteneurs tels que Flutter. Il présente les caractéristiques suivantes :

  • Le niveau de syntaxe de Rax est basé sur React, et vous pouvez utiliser les API React telles que Hooks et Context avec une prise en charge à plus de 80 %
  • Le cadre de R&D officiel Rax App prend en charge les fonctionnalités d'ingénierie de base telles que TypeScript, Less/Sass. , et prend également en charge MPA et SPA. , SSR multiples capacités
  • Prend en charge le développement de petits programmes chez différents fournisseurs tels que Alipay/WeChat/Byte via la syntaxe Rax complète, et peut être rétrogradé vers Web
  • Basé sur les normes Web, il prend en charge applications cross-end sur plusieurs conteneurs, y compris les applications Web, l'application Flutter (Kraken), l'application Weex
  • Riche écosystème cross-end, tel que le composant cross-end Fusion Mobile, l'API cross-end Uni API

  

  Github (⭐️ 7,8k) : github.com/alibaba /rax

  10. LowCodeEngine

  LowCodeEngine Le moteur Low-code est un framework de R&D low-code avec une puissante évolutivité fourni pour les développeurs de plates-formes low-code. Il est produit conjointement par Alibaba Front-end Committee et DingTalk. Les utilisateurs peuvent rapidement personnaliser une plateforme low-code qui répond à leurs besoins professionnels sur la base d'un moteur low-code. Il présente les caractéristiques suivantes :

  • Moteur de noyau orienté extension extrait d'une plate-forme low-code de niveau entreprise, adhérant au concept de conception du plus petit noyau et de l'écologie la plus forte
  • Éléments écologiques de haute qualité pouvant être utilisés immédiatement , y compris le système matériel et les paramètres
  • Chaîne d'outils complète, prenant en charge le cycle complet de R&D des systèmes matériels, des setters, des plug-ins et d'autres éléments écologiques
  • De puissantes capacités d'expansion, a pris en charge l'utilisation de près de 100 différents low-code verticaux plateformes
  • Développement TypeScript, fournissant des fichiers complets de définition de type

  

  Github (⭐️ 7,6k) : github.com/alibaba/low…

  11. bâtiment, framework Node.js pour les applications traditionnelles, les microservices et les mini-backends de programmes. Il peut utiliser Koa, Express ou Egg.js comme framework Web de base. Il fournit également des solutions de base pour une utilisation autonome, telles que Socket.io, GRPC, Dubbo.js et RabbitMQ, etc. De plus, Midway est également un framework sans serveur Node.js pour les développeurs front-end/full-stack. Construire les applications de la prochaine décennie. Peut fonctionner sur AWS, Alibaba Cloud, Tencent Cloud et les VM/conteneurs traditionnels. S'intègre facilement à React et Vue.

  

  Github (⭐️ 5,9k) :

  github.com/midwayjs/mi…12 BizCharts

  BizCharts est la bibliothèque générale de composants de graphiques d'Alibaba, dédiée à la création d'un intermédiaire efficace, professionnel et pratique. La solution de visualisation de données back-end d'entreprise, basée sur la bibliothèque de graphiques React encapsulée par G2 et G2Plot, a été baptisée par les scénarios commerciaux complexes d'Alibaba depuis trois ans et répond aux besoins des graphiques conventionnels et des graphiques hautement personnalisés en termes de flexibilité, de facilité d'utilisation. , et la richesse accomplir.

  

  Github (⭐️ 5,9k) :

  github.com/alibaba/Biz…13 Hilo

  Hilo est une solution de jeu multi-terminal HTML5 développée par Alibaba Group, pour aider les développeurs rapidement. créer des jeux HTML5. Il possède les fonctionnalités suivantes :

  Hilo prend en charge les versions packagées de plusieurs paradigmes de modules, notamment AMD, CMD, COMMONJS et Standalone. De plus, vous pouvez ajouter et étendre des modules et des types selon vos besoins ;
  • Conception de module extrêmement rationalisée, entièrement orientée objet ;
  • Plusieurs méthodes de rendu, fournissant DOM, Canvas, Flash, WebGL et d'autres solutions de rendu (brevet actuellement appliqué) ;
  • Prise en charge complète du navigateur et solution hautes performances, solution de rendu Flash unique, vous pouvez exécuter des jeux « cool » même dans les navigateurs IE de version basse ; la solution de rendu DOM peut résoudre considérablement le problème des téléphones mobiles à faibles performances. Problèmes de performances rencontrés. par les navigateurs ;
  • Prise en charge du moteur physique - Chipmunk, prend en charge la mise en œuvre de la physique auto-extensible ; Prise en charge de l'animation squelette - DragonBones et du système d'animation squelettique intégré - Tahiti (actuellement utilisé en interne)
  • Cas riches, le framework est mature et a) ; a été testé par plusieurs activités de marketing interactif d'Alibaba Double Eleven et de promotion de milieu d'année

  

  Github (⭐️ 5,8k) :

  github.com/hiloteam/Hi…

  14. XRender

  XRender est une solution "formulaire/table/graphique" intermédiaire et back-end facile à utiliser.

  

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

  15. Fusion Design

  Fusion Design est un travail visant à améliorer l'efficacité de la construction de l'interface utilisateur entre la conception et le développement. . En créant des protocoles et des flux de travail standard entre la conception et le front-end sur la base du modèle DPL, nous pouvons rapidement créer un DPL qui répond aux exigences de l'entreprise, améliorer l'efficacité de la construction du DPL et des applications, et aider les entreprises à mettre en œuvre rapidement la construction de l'interface utilisateur.

  

  Github (⭐️ 4,2k) : github.com/alibaba-fus…

  Adresse originale : https://juejin.cn/post/7135382523672002590

  ( partage de vidéos : Premiers pas avec le front-end Web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!