Welche Frameworks gibt es für Web-Frontend?

Web-Frontend-Frameworks umfassen: 1. Angular, ein Frontend-Framework zum Erstellen einer einzelnen Anwendungsschnittstelle; 2. React, ein JavaScript-Entwicklungsframework zum Erstellen von Benutzeroberflächen; 3. Vue, eine Reihe von Tools zum Erstellen von Benutzeroberflächen Progressives JavaScript-Framework; 4. Bootstartp, ein Front-End-Framework basierend auf HTML, CSS und JavaScript; 5. QUICK UI, eine Reihe von Web-Front-End-Entwicklungslösungen; 6. SUI, eine Front-End-Komponentenbibliothek; .

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.

Beim Web-Frontend, auch „Client“ genannt, geht es um die visuellen Aspekte der Website, die der Benutzer sehen und erleben kann, also um alles, was der Benutzer sieht und was der Webbrowser anzeigt, einschließlich dessen, was der Benutzer sehen kann Alles sehen, anfassen und erleben; das heißt, das Web-Frontend umfasst die Struktur der Webseite, das visuelle Erscheinungsbild des Webs und die Implementierung der Interaktion auf Webebene.

Was sind die Web-Frontend-Frameworks? 1. Angular

AngularJS wurde 2009 von Misko Hevery und anderen erstellt und später von Google übernommen. Es handelt sich um ein hervorragendes Front-End-JS-Framework, das in vielen Produkten verwendet wird. Es handelt sich nicht nur um ein Front-End-Entwicklungsframework mit fortschrittlichen Konzepten, sondern auch um eine End-to-End-Lösung. Es folgt dem MVC-Muster im Architekturdesign und befürwortet eine lose Kopplung von Daten und logischen Verarbeitungskomponenten. AngularJS realisiert die natürliche Erweiterung von HTML durch Anweisungstechnologie und realisiert eine bidirektionale automatische Synchronisierung von Datenmodell und Anzeigeansicht durch Kompilierungstechnologie, wodurch komplexe DOM-Operationen erleichtert werden. Darüber hinaus bietet es auch eine gute Unterstützung für automatisierte Front-End-Testtechnologie. Angular ist ein Front-End-Framework zum Erstellen einer einzelnen Anwendungsschnittstelle. Es verfügt über viele Kernfunktionen wie Datenbindung, Dienste, Anweisungen, Abhängigkeitsinjektion usw. Es verfügt über leistungsstarke Modulfunktionen und bietet die Vorteile benutzerdefinierter Befehle

1. Gute Anwendungsstruktur

3 . HTML-Vorlage

• 5. Kann eingebettet, eingefügt und getestet werden

• Vorteile:
1. Die Vorlage ist leistungsstark und umfangreich und enthält einen äußerst umfangreichen Satz an Winkelanweisungen.
2. Es handelt sich um ein relativ vollständiges Front-End-Framework, einschließlich Diensten, Vorlagen, bidirektionaler Datenbindung, Modularisierung, Routing, Filter, Abhängigkeitsinjektion und allen anderen Funktionen;
3 Die Direktive kann im Projekt mehrfach verwendet werden.

4.ng-Modularität führt mutig einige Dinge aus Java ein (Abhängigkeitsinjektion), was das Schreiben von wiederverwendbarem Code erleichtert, was für agile Entwicklungsteams sehr hilfreich ist.

• 5.angularjs wurde vom Internetgiganten Google entwickelt, was auch bedeutet, dass es über ein solides Fundament und Community-Unterstützung verfügt.

• Nachteile:
1 Der Einstieg in Angular ist einfach, aber wenn man tiefer in die Materie einsteigt, gibt es viele Konzepte, die beim Lernen schwer zu verstehen sind.
2. Es gibt nur sehr wenige Beispiele in der Dokumentation. Die offizielle Dokumentation spricht im Grunde nur von der API, und in vielen Fällen kommt die konkrete Verwendung davon von Google oder fragt direkt danach Misko, der Autor von Angular.
3. Es ist nicht besonders kompatibel mit IE6/7, aber Sie können jQuery verwenden, um Ihren eigenen Code zu schreiben, um einige Probleme zu lösen.

4. Es gibt nur wenige Best-Practice-Tutorials zur Anwendung von Anweisungen. Wenn Sie sich nicht an die Verwendungsprinzipien einiger Autoren halten, ist es einfach, andere Codes zu schreiben viele DOM-Operationen in js oder jQuery-ähnlichen Ideen.

• 5.DI-Abhängigkeitsinjektion Wenn die Codekomprimierung eine explizite Deklaration erfordert.

2, React
React, produziert von Facebook, die offizielle Version wurde 2013 veröffentlicht, 4 Jahre später als Angular, aber dank seines innovativen VirtualDOM übertrifft es AngularJS in der Leistung Das Feuer war ein Chaos. Es verfügt über viele Funktionen, einschließlich VirtualDOM, JSX, Diff-Algorithmus usw., unterstützt die ES6-Syntax und verwendet funktionale Programmierung. Der Schwellenwert ist etwas höher, aber auch flexibler und ermöglicht mehr Entwicklungsmöglichkeiten.

• Funktionen
1. Deklaratives Design: React übernimmt ein deklaratives Paradigma, das die Beschreibung von Anwendungen erleichtert.

2. Effizient: React minimiert die Interaktion mit dem DOM, indem es das DOM simuliert.

3. Flexibel: React funktioniert gut mit bekannten Bibliotheken oder Frameworks.

Vorteile:

1 Schnell: Während des UI-Rendering-Prozesses implementiert React lokale Aktualisierungen des tatsächlichen DOM durch Mikrooperationen im virtuellen DOM.
2. Browserübergreifende Kompatibilität: Virtual DOM hilft uns bei der Lösung browserübergreifender Probleme. Es stellt uns eine standardisierte API zur Verfügung, was selbst im IE8 kein Problem darstellt.
3. Modularisierung: Schreiben Sie unabhängige modulare UI-Komponenten für Ihr Programm, sodass Sie bei Problemen mit einer oder mehreren Komponenten diese problemlos isolieren können.

4. Einweg-Datenfluss: Flux ist eine Architektur zum Erstellen einer Einweg-Datenschicht in JavaScript-Anwendungen. 5. Isomorphes, reines JavaScript: Weil Suchmaschinen-Crawler auf serverseitige Antworten und nicht auf JavaScript angewiesen sind. Die Ausführung von pre -Das Rendern Ihrer App hilft bei der Suchmaschinenoptimierung. 6. Gute Kompatibilität: RequireJS wird beispielsweise zum Laden und Packen verwendet, während Browserify und Webpack zum Erstellen großer Anwendungen geeignet sind. Sie machen diese schwierigen Aufgaben weniger entmutigend. Nachteile: React selbst ist nur ein V, kein vollständiges Framework. Wenn Sie also ein vollständiges Framework für ein großes Projekt wünschen, müssen Sie grundsätzlich ReactRouter und Flux hinzufügen, um große Anwendungen zu schreiben. 3, Vue , Komponentisierungsentwicklung usw.) und relevante Optimierungen vorgenommen, um die Verwendung komfortabler, den Einstieg zu erleichtern und für Anfänger weniger geeignet zu machen.

Funktionen:

1. Leichtes Framework

2. Befehle

• Vorteile:

• 1. Einfach: Die offizielle Dokumentation ist sehr klar und einfacher zu erlernen als Angular.

• 2. Schnell: DOM in der asynchronen Stapelverarbeitung aktualisieren.

• 3. Zusammensetzung: Stellen Sie Ihre Anwendung mit entkoppelten, wiederverwendbaren Komponenten zusammen.

4. Kompakt: ~18kbmin+gzip und keine Abhängigkeiten.

5. Leistungsstark: Ausdrücke müssen keine abhängigen ableitbaren Eigenschaften (berechnete Eigenschaften) deklarieren.
6. Modulfreundlich: Es kann über NPM, Bower oder Duo installiert werden. Es zwingt nicht Ihren gesamten Code, den verschiedenen Vorschriften von Angular zu folgen, und die Verwendungsszenarien sind flexibler.
• Nachteile:

• 1. Neuling: Vue.js ist ein neues Projekt, nicht so ausgereift wie Angular.

• 2. Die Auswirkungen sind nicht sehr groß: Ich habe gegoogelt und festgestellt, dass die Vielfalt oder der Reichtum von Vue.js geringer ist als die einiger anderer berühmter Bibliotheken

• 3.

4. Bootstartp

• Bootstrap ist das Open-Source-Frontend-Framework von Twitter, das auf HTML, CSS und JavaScript basiert. Es handelt sich um ein Front-End-Toolkit, das für die schnelle Entwicklung von Webanwendungen entwickelt wurde. Es unterstützt ein responsives Layout und hält sich nach der V3-Version an die Priorität mobiler Geräte.

Bootstrap bietet elegante HTML- und CSS-Spezifikationen, die in der dynamischen CSS-Sprache Less geschrieben sind. Bootstrap erfreut sich seit seiner Einführung großer Beliebtheit und ist ein beliebtes Open-Source-Projekt auf GitHub, darunter MSNBC (Microsoft National Broadcasting Company) Breaking News der NASA. Einige Frameworks, die inländischen Mobilentwicklern bekannt sind, wie das Front-End-Open-Source-Framework WeX5, sind ebenfalls leistungsoptimiert und basieren auf dem Bootstrap-Quellcode.

• Offizielle Adresse: https://getbootstrap.com
• Chinesische Adresse: http://www.bootcss.com/

Bootstrap-Funktionen

Bootstrap ist dank seiner sehr praktischen Funktionen und Features sehr beliebt . Die wichtigsten Kernfunktionen sind wie folgt: 1) Geräte- und browserübergreifend

Kompatibel mit allen modernen Browsern, einschließlich der stärker kritisierten IE7 und 8. Browser unter IE9 werden in diesem Kurs natürlich nicht mehr berücksichtigt.

2) Responsives Layout

kann nicht nur die Anzeige verschiedener Auflösungen auf dem PC unterstützen, sondern auch die reaktionsfähige Umschaltanzeige von mobilen PADs, Mobiltelefonen und anderen Bildschirmen.

3) Umfassende Komponenten bereitgestellt

Bootstrap bietet äußerst praktische Komponenten, darunter Navigation, Beschriftungen, Symbolleisten, Schaltflächen und eine Reihe von Komponenten, die für Entwickler bequem aufzurufen sind.

4) Integriertes jQuery-Plug-inBootstrap bietet viele praktische jQuery-Plug-ins, die es Entwicklern erleichtern, verschiedene allgemeine Spezialeffekte im Web zu implementieren.

5) Unterstützt HTML5, CSS3

HTML5-semantische Tags und CSS3-Attribute werden gut unterstützt.

6) Unterstützt LESS dynamische Stile

LESS verwendet Variablen, Verschachtelung und gemischte Operationscodierung, um schnelleres und flexibleres CSS zu schreiben. Es lässt sich gut mit Bootstrap entwickeln.

5. QUICK UI

QUICK UI ist ein vollständiger Satz von Web-Frontend-Entwicklungslösungen auf Unternehmensebene, bestehend aus einem Basis-Framework, einer UI-Komponentenbibliothek, einem Skin-Paket, einem Beispielprojekt und einer Dokumentation. Entwickler, die QUICKUI verwenden, können ihre Arbeitsbelastung erheblich reduzieren, die Entwicklungseffizienz verbessern und schnell leistungsstarke, schöne und kompatible Webanwendungssysteme erstellen.

6. MDC Web

Material Components für das Web (MDC Web), ein neues Front-End-Framework, das von Google für das Web entwickelt wurde. MDC Web hilft Entwicklern bei der Implementierung von Material Design, und Komponenten werden vom Google-Kernteam aus Ingenieuren und UX-Designern entwickelt. Diese Komponenten ermöglichen einen soliden Entwicklungsworkflow zum Erstellen schöner und funktionaler Webprojekte.

7、Rein

Bootstrap, Patternfly und MDC Web sind sehr leistungsfähige CSS-Frameworks, aber sehr mühsam und komplex. Wenn Sie ein leichtes CSS-Framework wünschen, empfiehlt es sich, Pure.css auszuprobieren. Es ähnelt eher der CSS-Programmierung, kann aber auch beim Erstellen einer guten Webseite helfen. Pure ist ein leichtes CSS-Framework mit minimalem Platzbedarf. Es wurde von Yahoo entwickelt und ist Open Source unter der BSD-Lizenz.

8. Foundation

Foundation behauptet, das fortschrittlichste responsive Front-End-Framework der Welt zu sein. Es bietet erweiterte Funktionen und Tutorials zum Erstellen professioneller Websites. Dieses Framework wird von vielen Unternehmen und Organisationen verwendet und verfügt über eine umfangreiche Dokumentation.

9, Bulma

Bulmas Open-Source-Framework auf Basis von Flexbox ist Open Source unter der MIT-Lizenz. Ein sehr leichtes Framework, das nur eine CSS-Datei benötigt. Bulma verfügt über eine prägnante und klare Dokumentation, die es Ihnen leicht macht, das gewünschte Thema auszuwählen. Es stehen auch viele Webkomponenten zur Verfügung, die Sie in Ihren Designs verwenden können.

10. Skelett mit leichtem Rahmen. Die Skeleton-Bibliothek ist nur etwa 400 Zeilen lang und das Framework stellt nur einige grundlegende CSS-Framework-Komponenten bereit. Skeleton bietet weiterhin eine detaillierte Dokumentation, um Ihnen den schnellen Einstieg zu erleichtern.

11. Materialise

Materialise ist ein modernes, responsives Front-End-Framework, das auf dem Material Design-Stil basiert und die mühsamste Arbeit löst und benutzerdefinierte Komponenten kombiniert, um Standardstile bereitzustellen. Die Dokumentationsseite von Materialise ist sehr umfassend und leicht verständlich. Die Komponentenseite umfasst Schaltflächen, Karten, Navigation usw.

12. Bootflat

Bootflat ist ein Open-Source-CSS-Framework, das von Twitters Bootstrap abgeleitet ist. Bootflat ist einfacher und leichter als Bootstrap. Meistens Bilder ohne viel Text.

13. PatternFly

PatternFly ist das Open-Source-CSS-Framework von Red Hat, das für diejenigen konzipiert ist, die schöne Websites erstellen möchten, während sich PatternFly hauptsächlich auf Unternehmensanwendungskomponenten wie Balkendiagramme konzentriert. Diagramme, Navigation usw., Red Hat hat es tatsächlich verwendet, um OpenShift zu erstellen. Neben statischem HTML unterstützt PatternFly auch das ReactJS-Framework, ein beliebtes JavaScript-Framework, das von Facebook entwickelt wurde. PatternFly verfügt über viele erweiterte Komponenten wie Balkendiagramme, Diagramme, Muster und Layouts, die für Anwendungen auf Unternehmensebene geeignet sind.

14, Flex

Flex befindet sich noch in der Inkubationsphase und ist noch kein offizielles Apache-Projekt. Flex4.8 ist keine offizielle Apache-Version. Diese Version markiert den Beginn einer neuen Ära für Flex, in der die Zukunft von Flex von der Community und nicht von einem einzelnen Unternehmen vorangetrieben wird. Entwickler können zur Verbesserung von Flex beitragen, indem sie Code beisteuern, z. B. Fehler beheben, Funktionen hinzufügen usw. Die oben genannten sind einige häufig verwendete Frameworks für die Web-Front-End-Entwicklung, die von Xiaoqian geteilt werden. Programmierer können basierend auf ihren Geschäftsanforderungen ein einfaches, intuitives und leistungsstarkes Front-End-Entwicklungsframework auswählen, um ihre Arbeit schneller und einfacher zu machen und die Entwicklungseffizienz zu verbessern.

15. SUI

„SUI ist eine auf Bootstrap basierende Front-End-Komponentenbibliothek. Es handelt sich auch um eine Reihe von Designspezifikationen. Mit SUI können Sie ganz einfach schöne Seiten entwerfen und implementieren.“ Natürlich ist es besser, die langweilige offizielle Werbung direkt zu zitieren, um Ihre eigenen Gehirnzellen zu retten (囧...). Wenn Sie Bootstrap zuvor verwendet haben, können Sie dies natürlich problemlos tun sei das, was Taobao den Front-End-Verlierern gibt. . Github: https://github.com/sdc-alibaba/sui

Offizielle Website: http://sui.taobao.org/sui/docs/index.html

(Lernvideo-Sharing:

Webfront- Ende

)

Das obige ist der detaillierte Inhalt vonWelche Frameworks gibt es für Web-Frontend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!