[Zusammenstellung und Weitergabe] Alibabas 15 Top-Front-End-Open-Source-Projekte, sehen Sie, welche Sie verwendet haben!

Dieser Artikel wirft einen Blick auf Alibabas beliebte Front-End-Open-Source-Projekte. Welche haben Sie verwendet? Wenn Sie es noch nicht verwendet haben, können Sie es ausprobieren!

Volltextübersicht:

• Ant Design: UI-Designsprache auf Unternehmensebene und React-Komponentenbibliothek

• Element UI: Desktop-Komponentenbibliothek basierend auf Vue 2.0

• Egg.js: Node.js-Framework auf Unternehmensebene

• Icejs: Reaktionsbasierte Mid- und Back-End-Anwendungslösungen

• UmiJS: Steckbares React-Anwendungsframework auf Unternehmensebene

• G2: Datengesteuerte visuelle Grafiksyntax mit hoher Interaktion

• ahooks: Hochwertige und zuverlässige React Hooks-Bibliothek

• Formily: MVVM-Formularlösung

• Rax: Kreuz -Container-Rendering-Engine

• LowCodeEngine: Low-Code-Engine

• Midway: Das zukunftsorientierte Cloud-integrierte Node.js-Framework

• BizCharts: Universelle Diagrammkomponentenbibliothek

• Hilo: Interaktive HTML5-Game-Engine

• Eine UI-Designsprache der Enterprise-Klasse und eine React-Komponentenbibliothek. Es weist die folgenden Merkmale auf:

Die interaktive Sprache und der visuelle Stil, die aus Mid- und Back-End-Produkten auf Unternehmensebene extrahiert wurden.

• Hochwertige React-Komponenten sofort einsatzbereit. Entwickelt mit TypeScript, Bereitstellung vollständiger Typdefinitionsdateien.

Full-Link-Entwicklungs- und Design-Tool-System.

Dutzende internationalisierte Sprachunterstützung. Funktionen zur Themenanpassung, die bis ins Detail gehen.

• 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 ist eine Suite für Entwickler, Designer und Produkte. Ein Desktop Vom Manager erstellte Komponentenbibliothek basierend auf Vue 2.0.
• Github (⭐️ 52,5k): github.com/ElemeFE/ele…
3. Egg.js

Egg.js ist ein Node.js-Framework auf Unternehmensebene und Eggs Plug-in Der Mechanismus ist hohe Skalierbarkeit: „Ein Plug-in macht nur eine Sache.“ Egg aggregiert diese Plug-Ins über das Framework und passt die Konfiguration an seine eigenen Geschäftsszenarien an, sodass die Kosten für die Anwendungsentwicklung sehr niedrig werden. Es verfügt über die folgenden Funktionen:

Bietet die Möglichkeit, das Oberschicht-Framework basierend auf Egg anzupassen.

Hoch skalierbarer Plug-in-Mechanismus.

Eingebaute Multiprozessverwaltung. Entwickelt auf Basis von Koa, hervorragende Leistung. Rahmenstabilität, hohe Testabdeckung

Progressive Stilentwicklung

• Github (⭐️ 18.1K):
• github.com/Eggjs/Egg
• 4. Rund um das Anwendungsentwicklungs-Framework icejs werden grundlegende Funktionen wie grundlegende Konstruktion, Routing und Debugging sowie Funktionen in den Bereichen Micro-Front-End, Integration und anderen Bereichen bereitgestellt, während visuelle Operationen, Materialwiederverwendung und andere Lösungen kombiniert werden, um den Forschungsaufwand zu senken und Entwicklungsschwelle. Es hat folgende Eigenschaften:
• • Unterstützt sowohl den Vite- als auch den Webpack-Modus, Unternehmen können nach Bedarf wählen
  • Out-of-the-box-Engineering-Funktionen: TypeScript/Webpack5/Vite/Style Scheme/Mock/...
  • Best Practices für die Geschäftsanpassung: Verzeichnisspezifikationen , Codespezifikationen, Routing-Lösungen, Zustandsverwaltung, Datenanforderungen usw.
  • Mehrere Anwendungsmodi: Unterstützt SPA, MPA und unterstützt auch serverseitiges Rendering von SSR und statischen Aufbau von SSG.
  • Leistungsstarke Plug-in-Funktionen: Alle offiziellen Funktionen werden durch Plug-ins implementiert. Unternehmen können verschiedene Funktionen durch Plug-ins erweitern
  • Rich-Domain-Lösungen: Micro-Front-End-Lösung Icestark, integrierte Lösung, React Hooks-Lösung Ahooks, Formularlösung Formily usw.

  

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

  5 UmiJS

  umi ist ein steckbares Reaktionsanwendungsframework auf Unternehmensebene. Umi basiert auf Routing und unterstützt sowohl konfiguriertes Routing als auch konventionelles Routing, um vollständige Routing-Funktionen sicherzustellen und die Funktionen entsprechend zu erweitern. Anschließend wird es mit einem Plug-in-System mit einem vollständigen Lebenszyklus ausgestattet, das jeden Lebenszyklus vom Quellcode bis zum gebauten Produkt abdeckt und verschiedene Funktionserweiterungen und Geschäftsanforderungen unterstützt. Es verfügt über viele sehr interessante Funktionen, wie zum Beispiel:

  • Enterprise-Ebene, Sicherheit, Stabilität, Best Practices und Zurückhaltungsmöglichkeiten werden stärker berücksichtigt
  • Plug-in, alles kann geändert werden, Umi selbst besteht ebenfalls aus Plug -ins Bildet
  • MFSU, eine Webpack-Paketierungslösung, die schneller als Vite ist
  • Basierend auf dem vollständigen Routing von React Router 6
  • Standardmäßig die schnellste Anfrage
  • SSR & SSG
  • ESLint und Jest mit guter, stabiler White-Box-Leistung
  • React 18 Framework-Zugriff
  • Best Practices für Monorepo

  

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

  6. G2

  G2 Eine Reihe von allgemeine Statistik Diagramme zu datengesteuerter, hochgradig interaktiver visueller Grafikgrammatik mit hoher Benutzerfreundlichkeit und Skalierbarkeit. Mit G2 müssen Sie sich nicht um die mühsamen Implementierungsdetails von Diagrammen kümmern. Sie können Canvas oder SVG verwenden, um eine Vielzahl interaktiver statistischer Diagramme mit einer einzigen Anweisung zu erstellen.

  

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

  7. ahooks

  ahooks ist eine Reihe hochwertiger und zuverlässiger React Hooks-Bibliotheken React-Projekt: Eine Reihe nützlicher React-Hooks-Bibliotheken ist unerlässlich. Ich hoffe, dass Ahooks Ihre Wahl wird. Es hat die folgenden Eigenschaften:

  • Einfach zu erlernen und zu verwenden
  • Unterstützt SSR
  • Spezielle Verarbeitung von Eingabe- und Ausgabefunktionen und vermeidet Schließungsprobleme
  • Enthält eine große Anzahl erweiterter Hooks, die aus der Geschäftswelt verfeinert wurden.
  • Enthält eine Fülle von Grundlegende Hooks
  • Mit TypeScript erstellt und vollständige Typdefinitionsdateien bereitstellen

  

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

  8. Formily ist eine abstrakte Form Domänenmodell MVVM-Formularlösung. In React ist das Problem mit der Darstellung des gesamten Baums für Formulare im kontrollierten Modus sehr auffällig. Insbesondere bei Datenverknüpfungsszenarien kann es leicht zum Einfrieren von Seiten kommen. Um dieses Problem zu lösen, führt Formily eine verteilte Verwaltung des Status jedes Formularfelds durch und verbessert so die Leistung des Formularvorgangs erheblich. Gleichzeitig ist das JSON-Schema-Protokoll tief integriert, was Ihnen helfen kann, das Problem der Back-End-gesteuerten Formularwiedergabe schnell zu lösen. Es verfügt über die folgenden Eigenschaften:

  Hohe Leistung
  • Sofort einsatzbereit
  • Verknüpfungslogik zur Erzielung hoher Effizienz
  • Terminalübergreifende Funktionen, Logik kann über Frameworks und Terminals hinweg wiederverwendet werden
  • Dynamische Rendering-Funktionen

  

  Github (⭐️ 8.3k):

  github.com/alibaba/for…9. Rax ist Alibabas am weitesten verbreitete Cross-End-Lösung, die Entwickler beim Schreiben kleiner Webinhalte unterstützt Programme, Cross-End-Anwendungen in verschiedenen Containern wie Flutter. Es hat folgende Eigenschaften:

  • Die Syntaxebene von Rax basiert auf React und Sie können React-APIs wie Hooks und Context mit mehr als 80 % Unterstützung verwenden.
  • Das offizielle unterstützende F&E-Framework Rax App unterstützt grundlegende Engineering-Funktionen wie TypeScript, Less/Sass , und unterstützt auch MPA und SPA, SSR-Mehrfachfunktionen
  • Unterstützt die Entwicklung kleiner Programme verschiedener Anbieter wie Alipay/WeChat/Byte durch vollständige Rax-Syntax und kann auf Web heruntergestuft werden
  • Basierend auf Webstandards unterstützt es Cross-End-Anwendungen über mehrere Container hinweg, einschließlich Webanwendungen, Flutter-Anwendung (Kraken), Weex-Anwendung
  • Reichhaltiges Cross-End-Ökosystem, wie Cross-End-Komponente Fusion Mobile, Cross-End-API Uni API

  

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

  10. LowCodeEngine

  LowCodeEngine Low-Code-Engine ist ein Low-Code-F&E-Framework mit leistungsstarker Skalierbarkeit für Low-Code-Plattformentwickler. Es wird gemeinsam von Alibaba Front-end Committee und DingTalk produziert. Benutzer können auf Basis einer Low-Code-Engine schnell eine Low-Code-Plattform anpassen, die ihren Geschäftsanforderungen entspricht. Es weist die folgenden Eigenschaften auf:

  • Erweiterungsorientierte Kernel-Engine, die aus einer Low-Code-Plattform auf Unternehmensebene extrahiert wurde und dem Designkonzept des kleinsten Kernels und der stärksten Ökologie folgt.
  • Hochwertige ökologische Elemente, die sofort verwendet werden können , einschließlich Materialsystem und Einstellungen
  • Komplette Werkzeugkette, die den vollständigen F&E-Zyklus von Materialsystemen, Settern, Plug-Ins und anderen ökologischen Elementen unterstützt
  • Leistungsstarke Erweiterungsmöglichkeiten, hat die Verwendung von fast 100 verschiedenen vertikalen Low-Code unterstützt Plattformen
  • TypeScript-Entwicklung, Bereitstellung vollständiger Typdefinitionsdateien

  

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

  11. Midway

  Midway ist ein serverloser Dienst, der für geeignet ist Building, Node.js-Framework für traditionelle Anwendungen, Microservices und Miniprogramm-Backends. Es kann Koa, Express oder Egg.js als Basis-Webframework verwenden. Es bietet auch Basislösungen für die eigenständige Verwendung, wie Socket.io, GRPC, Dubbo.js und RabbitMQ usw. Darüber hinaus ist Midway auch ein serverloses Node.js-Framework für Front-End-/Full-Stack-Entwickler. Erstellen Sie die Apps des nächsten Jahrzehnts. Kann auf AWS, Alibaba Cloud, Tencent Cloud und herkömmlichen VMs/Containern ausgeführt werden. Einfache Integration mit React und Vue.

  ... Die Backend-Unternehmensdatenvisualisierungslösung, die auf der von G2 und G2Plot gekapselten React-Diagrammbibliothek basiert, ist seit drei Jahren auf die komplexen Geschäftsszenarien von Alibaba getauft und erfüllt die Anforderungen sowohl herkömmlicher Diagramme als auch hochgradig angepasster Diagramme in Bezug auf Flexibilität und Benutzerfreundlichkeit , und Reichtum erreichen.

  Github (⭐️ 5,9k):

  github.com/alibaba/Biz…

  13. Hilo

  Hilo ist eine HTML5-terminalübergreifende Spielelösung, die von der Alibaba Group entwickelt wurde und Entwicklern schnell helfen kann Erstellen Sie HTML5-Spiele. Es verfügt über die folgenden Funktionen:

  Hilo unterstützt Paketversionen mehrerer Modulparadigmen, einschließlich AMD, CMD, COMMONJS und Standalone. Darüber hinaus können Sie nach Bedarf Module und Typen hinzufügen und erweitern. Extrem optimiertes Moduldesign, vollständig objektorientiert.

  Mehrere Rendering-Methoden, Bereitstellung von DOM, Canvas, Flash, WebGL und anderen Rendering-Lösungen (derzeit angemeldetes Patent);
  Vollständige Browserunterstützung und Hochleistungslösung, einzigartige Flash-Rendering-Lösung, Sie können „coole“ Spiele auch in IE-Browsern mit niedriger Version ausführen; die DOM-Rendering-Lösung kann das Problem von Leistungsproblemen bei Mobiltelefonen erheblich lösen von Browsern;
  Physik-Engine-Unterstützung – Chipmunk, unterstützt selbsterweiternde Physik-Implementierung – DragonBones und integriertes Skelett-Animationssystem – Tahiti (wird derzeit intern verwendet); wurde von mehreren interaktiven Marketingaktivitäten von Alibaba Double Eleven und zur Jahresmitte getestet;

  14. XRender

  XRender ist eine benutzerfreundliche Middle- und Back-End-Lösung „Formular/Tabelle/Diagramm“.

  

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

  15. Fusion Design

  Fusion Design ist eine Arbeit, die darauf abzielt, die Effizienz der UI-Konstruktion zwischen Design und Entwicklung zu verbessern . Durch die Erstellung von Standardprotokollen und Arbeitsabläufen zwischen Design und Front-End auf der Grundlage des DPL-Modells können wir schnell eine DPL erstellen, die den Geschäftsanforderungen entspricht, die DPL-Konstruktions- und Anwendungseffizienz verbessern und Unternehmen bei der schnellen Implementierung der UI-Konstruktion unterstützen.

  

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

  Originaladresse: https://juejin.cn/post/7135382523672002590

  (Lernen Video-Sharing: Erste Schritte mit dem Web-Frontend)

Das obige ist der detaillierte Inhalt von[Zusammenstellung und Weitergabe] Alibabas 15 Top-Front-End-Open-Source-Projekte, sehen Sie, welche Sie verwendet haben!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!