Verschiedene Entwicklungsframeworks entstehen eines nach dem anderen, jedes mit seinen eigenen Stärken. Welche sind für Entwickler am besten geeignet? Basierend auf der Beliebtheit auf GitHub stellt dieser Artikel die 6 beliebtesten Front-End-Entwicklungsframeworks des Jahres 2014 zusammen und bietet eine vergleichende Erläuterung, in der Hoffnung, Freunden, die Hilfe benötigen, dabei zu helfen, das zu ihnen passende Front-End-Framework auszuwählen.

Heutzutage entstehen verschiedene Entwicklungsframeworks eines nach dem anderen, jedes mit seinen eigenen Vorzügen. Welche zogen letztes Jahr mehr Aufmerksamkeit von Entwicklern auf sich? Vor nicht allzu langer Zeit hat Yunshipei die 6 beliebtesten Front-End-Entwicklungsframeworks des Jahres 2014 basierend auf der Beliebtheit auf GitHub zusammengestellt und eine vergleichende Erläuterung bereitgestellt, in der Hoffnung, Freunden, die Hilfe benötigen, dabei zu helfen, das passende Front-End-Framework auszuwählen.

1. Bootstrap

Bootstrap ist zweifellos der führende Vertreter unter den aktuellen Frameworks. Es ist nicht nur beliebt, sondern seine Nutzerbasis wächst auch jeden Tag. Du kannst darauf vertrauen, dass dieses Tool dich nicht im Stich lässt, und du kannst es auch allein verwenden, um deine eigenen Webseiten zu erstellen.

• Ersteller: Mark Otto und Jacob Thornton
• Veröffentlicht: 2011
• Aktuelle Version: 3.3.1
• Beliebtheit: 75,000+ Sterne auf GitHub
• "Bootstrap ist das beliebteste HTML-, CSS- und JavaScript-Framework für die Entwicklung responsiver, Mobile-First-Projekte im Web."
• Kernkonzept/-prinzip: RWD und Mobile-First
• Framework-Größe: 145 KB
• Präprozessor: Less und Sass
• Responsive: Ja
• Modular: Ja
• Starter-Vorlage/Skeleton: Ja
• Icon-Set: Glyphicons
• Andere Plugins: Keine mitgelieferten Plugins; Plugins von Drittanbietern verfügbar
• Einzigartige Komponenten: Jumbotron
• Dokumentation: Gut
• Anpassung: Grundlegende GUI-Anpassung, erfordert jedoch manuelle Änderungen, da kein Farbwähler-Tool vorhanden ist.
• Browser-Unterstützung: Firefox, Chrome, Safari, IE8+ (IE8 erfordert Respond.js)
• Lizenz: MIT

2. Foundation von ZURB

Im Vergleich zu Bootstrap belegt Foundation den zweiten Platz, aber das bedeutet nicht, dass es unbeliebt ist. Mit starker Unterstützung von ZURB im Rücken wird Foundation noch leistungsfähiger! Foundation wird von großen Websites wie Facebook, Mozilla, eBay, Yahoo, National Geographic und so weiter verwendet.

• Ersteller: ZURB
• Veröffentlicht: 2011
• Aktuelle Version: 5.4.7
• Beliebtheit: 18,000+ Sterne auf GitHub
• "Das fortschrittlichste responsive Front-End-Framework der Welt"
• Kernkonzept/-prinzip: RWD, Mobile First, semantisch
• Framework-Größe: 326 KB
• Präprozessor: Sass
• Responsive: Ja
• Modular: Ja
• Starter-Template/Layout: Ja
• Icon-Set: Foundation Icon Fonts
• Weitere Komponenten: Ja
• Einzigartige Komponenten: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• Dokumentation: Gut. Es gibt viele Ressourcen, die als Referenz verfügbar sind.
• Anpassung: Keine GUI-Anpassung, aber Sie können Ihre eigene schreiben.
• Browser-Unterstützung: Chrome, Firefox, Safari, IE9+, iOS, Android, Windows Phone 7+
• Lizenz: MIT
• Was es unterscheidet: Für Branchen wie Business-Transport, Aus- und Weiterbildung und Beratung ist Foundation ein professionelles Framework. Es bietet außerdem viele Ressourcen, damit Sie schnell lernen können.

3. Semantic UI

Semantic UI unternimmt unermüdliche Anstrengungen, die Webentwicklung semantischer zu machen. Regeln der natürlichen Sprache machen Code leichter zu lesen und zu verstehen.

• Ersteller: Jack Lukic
• Veröffentlicht: 2013
• Aktuelle Version: 1.2.0
• Beliebtheit: 12,900+ Sterne auf GitHub
• "Ein UI-Komponenten-Framework, das auf nützlichen Prinzipien der natürlichen Sprache basiert."
• Kernkonzept/-prinzip: Semantik, Tag-Ambiguität, Responsiv
• Framework-Größe: 552 KB
• Präprozessor: Less
• Responsive: Ja
• Modular: Ja
• Starter-Template/Layout: Nein
• Icon-Set: Font Awesome
• Weitere Komponenten: Nein
• Einzigartige Komponenten: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape
• Dokumentation: Sehr umfassend. Semantic bietet Dokumentation auf mehreren strukturellen Ebenen, mit einer separaten Website für Anfänger sowie weiteren Anpassungs-Tutorials usw.
• Anpassung: Keine GUI-Anpassung, aber Sie können Ihre eigene schreiben.
• Was es unterscheidet: Semantic kann als das innovativste und funktionsvollständigste Framework unter den heute besprochenen Frameworks bezeichnet werden. Seine Gesamtarchitektur und Namensregeln haben eine klare Logik und Semantik und übertreffen andere Frameworks.

4. Pure von Yahoo!

Pure ist ein reines CSS-Framework, leichtgewichtig und modular, das verschiedene integrierte und eigenständige Komponenten enthält.

• Ersteller: Yahoo
• Veröffentlicht: 2013
• Aktuelle Version: 0.5.0
• Beliebtheit: 9,900+ Sterne auf GitHub
• "Eine Sammlung kleiner, responsiver CSS-Module, die Sie in jedem Webprojekt verwenden können."
• Kernkonzept/-prinzip: SMACSS, Minimalismus
• Framework-Größe: 18 KB
• Präprozessor: Keiner
• Responsiv：Ja
• Modular: Ja
• Starter-Template/Layout: Ja
• Icon-Set: Keines. Font Awesome kann als Alternative verwendet werden.
• Andere Komponenten: Keine
• Einzigartige Komponenten: Keine
• Dokumentation: Gut
• Anpassung: Einfacher GUI-Skin-Builder
• Browser-Unterstützung: Neueste Versionen von Firefox, Chrome, Safari, IE7+, iOS 6.x, 7.x, Android 4.x.
• Lizenz: Yahoo! Inc. BSD
• Was es anders macht: Pure bietet ein sauberes Basisframework für Ihr Projekt. Für Entwickler, die kein voll ausgestattetes Framework benötigen und nur bestimmte Komponenten brauchen, ist Pure eine gute Wahl.

5. UIkit von YOOtheme

UIkit ist ein kompaktes Set von Komponenten, die einfach zu verwenden und anzupassen sind. Obwohl es nicht so populär ist wie seine Konkurrenten, bietet es die gleiche Funktionalität wie die oben genannten Frameworks, und die Qualität ist ebenfalls recht gut.

• Ersteller: YOOtheme
• Veröffentlicht: 2013
• Aktuelle Version: 2.13.1
• Beliebtheit: 3,800+ Sterne auf GitHub
• „Ein leichtgewichtiges und modulares Frontend-Framework zur Entwicklung schneller und leistungsstarker Weboberflächen.“
• Kernkonzept/-prinzip: RWD, Mobile First
• Framework-Größe: 118 KB
• Präprozessor: Less, Sass
• Responsive: Ja
• Modular: Ja
• Starter-Template/Layout: Ja
• Icon-Set: Font Awesome
• Weitere Komponenten: Ja
• Einzigartige Komponenten: Article, Flex, Cover, HTML Editor
• Dokumentation: Gut
• Anpassung: Erweiterte GUI-Anpassung
• Browser-Unterstützung: Chrome, Firefox, Safari, IE9+
• Lizenz: MIT
• Was den Unterschied ausmacht: UIkit wird in vielen WordPress-Themes verwendet. Durch seinen GUI-Editor und manuelle Bearbeitung bietet es einen flexiblen und leistungsstarken Anpassungsmechanismus.

6.Amaze UI

Amaze UI basiert auf der Mobile-First-Philosophie. Im Vergleich zu ausländischen Frameworks legt es mehr Wert auf chinesische Typografie und wird von Frontend-Entwicklern als das Frontend-Framework gelobt, das Chinesisch am besten versteht. Nur vier Monate nach dem offiziellen Start hatte es bereits über 1.500 Sterne auf GitHub gesammelt, was seine starke Dynamik zeigt.

• Ersteller: Yunshipei
• Veröffentlicht: 2014
• Aktuelle Version: 2.0.0
• Beliebtheit: 1500+ Sterne auf GitHub
• Beschreibung: Amaze UI ist ein Mobile-First-Frontend-Framework für verschiedene Bildschirmgrößen mit umfangreichen Komponenten, mit denen Sie schnell bildschirmübergreifende Seiten mit hervorragenden Oberflächen und Benutzererfahrung erstellen können, was die Entwicklungseffizienz erheblich verbessert.
• Kernkonzepte/-prinzipien: Responsive, Web Components
• Framework-Größe: CSS 40KB, JS 48KB (gzip-komprimiert)
• Präprozessor: Less
• Responsive: Ja
• Modular: Ja
• Starter-Vorlagen/Layouts: Ja
• Icon-Set: Font Awesome
• Weitere Komponenten: Ja
• Einzigartige Komponenten: Lade-Fortschrittsbalken, Seitenleiste, Bildkarussell, fixierte Elemente, Paginierung, einklappbare Panels, Bildergalerie usw.
• Dokumentation: Die Dokumentation von Amaze UI ist sehr vollständig und für Entwickler in allen Phasen geeignet. Sie bietet Dokumentation auf mehreren strukturellen Ebenen mit einem sinnvollen API-Design, das leicht zu erlernen und zu verwenden ist. Fehler-Feedback erfolgt über GitHub, die offizielle QQ-Gruppe, Duoshuo-Kommentare usw., sodass Benutzer Probleme zeitnah melden können.
• Anpassung: Derzeit gibt es keine GUI-basierte Anpassung. Zum Anpassen müssen Sie eine Konfigurationsdatei für die Anpassung herunterladen. Laden Sie den Amaze UI-Quellcode herunter und verwenden Sie das gulp-Build-Tool, um ihn mit benutzerdefinierten Konfigurationen zu kompilieren.
• Browser-Unterstützung: Entwickelt für moderne Browser, mit eingeschränkter Unterstützung für IE 8.
• Was es unterscheidet: Amaze UI fügt mehr Elemente hinzu, die für den chinesischen Markt geeignet sind: optimierte chinesische Typografie, Kompatibilität mit wichtigen lokalen Browsern in China und Web-Komponenten, die nach dem Web-Components-Muster implementiert sind, wobei gängige Komponenten für die mobile Entwicklung in verschiedene Teile aufgeteilt werden, um die Entwicklungseffizienz erheblich zu verbessern.

Welche Art von Framework passt zu Ihnen?Abschließend finden Sie hier einige Empfehlungen, die Ihnen helfen sollen, das am besten zu Ihnen passende Framework auszuwählen:

• Ist das Framework populär genug?

Je populärer es ist, desto mehr Menschen nutzen es, desto mehr Ressourcen sind verfügbar und desto mehr Möglichkeiten gibt es, Ideen auszutauschen. Je geringer die Chance ist, dass es aufgegeben wird, desto beruhigter können Sie es verwenden.

• Wird das Framework kontinuierlich weiterentwickelt?

Ein gutes Framework braucht ständige Aktualisierungen und Verbesserungen, um sich an aktuelle Technologien anzupassen, insbesondere im mobilen Bereich.

• Ist das Framework ausgereift?

Wenn ein Framework nicht in echten Projekten getestet wurde, können Sie es bedenkenlos zum Üben verwenden. Wenn Sie es jedoch für ein dediziertes Projekt verwenden müssen, ist es sicherer, ein relativ ausgereiftes Framework zu wählen.

• Bietet es eine vollständige Dokumentation?

In der Lernphase kann eine vollständige Dokumentation uns helfen, mit halbem Aufwand doppelten Erfolg zu erzielen.

• Wie spezialisiert ist es?

Im Vergleich zu einem spezialisierten Framework kann ein Allzweck-Framework die Entwicklung einfacher machen. In den meisten Fällen erleichtert die Wahl minimaler Styles die Anpassung; neues CSS hinzuzufügen ist einfacher, leichter zu handhaben und effizienter als das Überschreiben vorhandener Styles.

Schließlich: Wenn Sie sich noch nicht sicher sind, ob dieses Framework zu Ihnen passt, können Sie ein oder zwei Komponenten aus verschiedenen Projekten nehmen und sie in Ihr eigenes Projekt einfügen. Auch eine solche Kombination sollte hilfreich sein.