Schlüsselpunkte für die Front-End-Frame-Auswahl
Auswahl eines geeigneten Front-End-Frameworks auf Unternehmensebene unter Berücksichtigung der Skala, Flexibilität, Offline-Unterstützung, serverseitiges Rendering und Reife des Frameworks. Die praktische Erfahrung ist von entscheidender Bedeutung, und das Autorenteam hat Aurelia verwendet und reagiert, um Authentifizierungsseiten zur Bewertung zu erstellen.
Die endgültige Auswahl von React basiert hauptsächlich auf ihrer Reife, Unterstützung der Gemeinschaft und der einfachen Rekrutierung. Angular 2 wurde beseitigt, weil er die meisten Auswahlkriterien nicht erfüllt hatte. Vue und Aurelia haben sich gut entwickelt und erfüllten die Anforderungen, aber die Einstellung erfahrener Entwickler war der ultimative entscheidende Faktor.
Bei der Bewertung der Core Network -Plattform der CXA -Gruppe von Singapur in Singapur haben wir beschlossen, die alternde bestehende Architektur aufzugeben und das Frontend von Grund auf neu zu erstellen. Eine der Herausforderungen für die Plattform besteht darin, eine Webanwendung zu erstellen, die in 12 Zielländern in ganz Asien von der CXA -Gruppe gut funktioniert.
In Anbetracht der strengen Frist für die Projektabgabe leitete ich die Bewertung einer Reihe von Front-End-JavaScript-Frameworks. Es gibt nur wenige Möglichkeiten für dieses Maß an Veränderung in großen Unternehmensprojekten, daher bemühen wir uns, im Bewertungsprozess so gründlich wie möglich zu sein.
Diese Entscheidung ist wichtig: Da das Unternehmen exponentiell wächst, können wir es uns nicht leisten, Fehler zu machen. Wir müssen auch berücksichtigen, dass niemand im Team wichtige Erfahrung mit jedem Rahmen hat, den wir in Betracht ziehen.
Begrenzen Sie den Bereich
Das neue Front-End-Framework scheint jeden Tag veröffentlicht zu werden, daher haben wir eine Metaanalyse durchgeführt, um den Umfang des von uns berücksichtigten Rahmens zu verringern. Einschließlich der Rahmenbedingungen, von denen wir uns gehört oder uns empfohlen haben, entschieden wir uns für Angular 2 (gehört von), Aurelia (gehört von), Vue.js (empfohlen) und React (empfohlen).
Wir messen die Rangliste jedes Finalisten basierend auf der Liste der wichtigsten Anforderungen. Einige Anforderungen basieren auf dem, was wir wissen, was das Projekt braucht, während andere sich auf das freuen, was wir tun wollen.
Das von uns ausgewählte Framework erfordert eine Reihe von Konfigurationsoptionen und ist relativ einfach anpassen. Dies scheint stark von der architektonischen Philosophie abhängig zu sein: ob Sie in Ihrem Namen architektonische Entscheidungen treffen oder ihnen völlig offen sein.
Angular 2 befindet sich an diesem Ende und trifft jede Wahl für Sie (Statusserver, Router, Handler). Der Vorteil davon ist, dass es einfach ist, schnell loszulegen, und die potenziellen Kosten besteht darin, dass die Module nicht funktionieren können, wie Sie brauchen und nirgendwohin zu gehen sind.
reagieren, Vue und Aurelia befinden sich am anderen Ende der Skala und bieten die Möglichkeit, Komponenten nach Bedarf auszutauschen. Aurelia und Vue haben konfigurierbare Kesselplatten in ihrem ersten Setup, was einen wichtigen Vorteil gegenüber React hat.
Wie Vue bietet React selbst nur einen kleinen Teil dessen, was es braucht, um etwas zu bauen. Von dort aus müssen viele Entscheidungen getroffen werden, was sicherlich entmutigend ist. Seit der ersten Veröffentlichung von React wurden verschiedene Boilerplates (einschließlich React -Boilerplate und Erstellen von React App) erstellt, um den Einführungsprozess zu vereinfachen.
Für unser Test -React -Projekt haben wir beschlossen, eine bestimmte Kesselplatte aufzugeben und direkt in sie zu graben. Wir haben immer noch einige installiert, auch nur als Referenzcode. Dieser Ansatz ist sicherlich schwierig, aber wir haben viel über jede Komponente im React -Stack gelernt und waren im Endergebnis sicherer.
Vue und Aurelia gewannen die Runde mit ihrer reduzierten Lernkurve und ihrer modularen Struktur. React verdient einige Flexibilitätspunkte, auch wenn das anfängliche Setup wesentlich schwieriger ist.
Bei APIs wie Service-Mitarbeitern kann Webanwendungen ohne Echtzeit oder eine stabile Internetverbindung ausgeführt werden. Wir haben in diesem Team in diesem Team nicht viel Erfahrung und haben uns nicht damit befasst, zu bestätigen, dass alle bewerteten Frameworks eine Form der Offline -Unterstützung bieten.
Die an den Client gesendete Bytegröße des Code hat einen großen Einfluss auf die Browserleistung, einschließlich der Bandbreite und der Prozessorzeit. Durch die Hinzufügung von benutzerdefinierten Code und Bibliotheken von Drittanbietern wird die Bytegröße nur immer größer, sodass es entscheidend ist, klein zu beginnen. Der Zielmarkt der CXA Group erstreckt sich auf Länder, in denen die Bandbreite sehr wertvoll ist. Daher ist es wichtig, Kunden so wenig Code wie möglich zu liefern.
Aufgrund des Mangels an harten Daten, die die Produktionskonfiguration widerspiegeln, haben wir die Größe der Kernbibliothek untersucht, um zumindest ein Gefühl dafür zu bekommen, was wir konfrontiert werden. Die tatsächliche Produktionsgröße ist größer als hier gezeigt.
Die Entwickler vonVue haben ihr Bestes getan, um ihre Kernbibliothek auf beeindruckende 23 KB einzugrenzen. React und Aurelia befinden sich in der Mitte (ca. 42 kb bzw. 64 kb), während der Angular 2 ein Schwergewicht mit über 143 kb (einschließlich RXJs für das Staatsmanagement) bleibt.
In der Tat sind Produktionsversionen von Vue, Aurelia und React sehr nahe beieinander und können berücksichtigt werden. Angular 2 fällt falsch auf.
Das Framework der frühen Single -Page -Anwendung (SPA) folgte dem Modell des Sendens des gesamten Codes an den Client. Dies bedeutet, dass die anfängliche Wiedergabe der Seite dem Client überlassen wird und direkt zu einem langsamen Laden der Anfangsseite führt. Das Konzept des serverseitigen Renderings im Spa belastet den Server auf dem Server und ermöglicht es, dass alle anderen Inhalte nach diesem Rendern verzögert werden.
Vue und React verwenden Plugins, um das serverseitige Rendering hinzuzufügen. Angular 2 ist derzeit dabei, seine universellen Fähigkeiten in den Kern zu kombinieren, obwohl seine Fähigkeiten nicht mit dem übereinstimmen, was Vue oder React bietet. Aurelia markiert das Server-Side-Rendering als Funktion in der Entwicklung, aber selbst wenn es andere Leistungstipps hat, fehlt es eine Implementierungszeitleiste.
Bei der Auswahl eines Frameworks für Websites auf Unternehmensebene sind umfassende Unterstützung der Community, Stabilität und Rekrutierungsfunktionen sehr wichtige Faktoren. Es ist schwierig zu spekulieren, ob nach drei Jahren noch ein Rahmen unterstützt wird, aber wir haben uns entschlossen, die aktuelle Gesundheit jedes Rahmens zu betrachten, um eine Entscheidung zu treffen.
Anzeigen des anfänglichen Veröffentlichungsdatums des Frameworks gibt uns eine Vorstellung von der Robustheit jedes Rahmens. Ältere Bibliotheken sollten zumindest theoretisch eine bessere Funktionalität und weniger wichtige Fehler haben.
reags gewann leicht und seine erste öffentliche Veröffentlichung fand im März 2013 statt. Obwohl Vue ursprünglich im Oktober 2015 veröffentlicht wurde, erreichte er erst im September 2016 seinen Höhepunkt. Aurelia ist ein Neuling und erreichte im August 2016 Version 1.0.
Angular 2 ist interessant: Es unterscheidet sich sehr von Version 1 und wurde tatsächlich erstmals im September 2016 veröffentlicht.
Teil dieser Bewertung beinhaltet das Eintauchen in die Entwicklungshistorie jeder Bibliothek, nicht nur das Veröffentlichungsdatum selbst. Eine lange und stabile Geschichte der Entwicklung - sogar im Beta -, steigert sie auch das Vertrauen.
Eine Vielzahl von Teammitgliedern hat auf die Entwicklung von Kandidatenrahmen geprüft, was uns zumindest ein gewisses Verständnis für die Gesamtstabilität jedes Rahmens verleiht. Die problematische Entwicklungsgeschichte von Angular 2 zeichnet sich unter allen Rahmenbedingungen ab, die wir überprüft haben, mit signifikanten Veränderungen und unklaren Freigabedaten. Das Framework wurde schließlich in seiner endgültigen Version veröffentlicht, war aber dabei wirklich unordentlich.
Der ultimative Schlüsselaspekt der Reife (wie oben erwähnt) ist die Fähigkeit, erfahrene Mitarbeiter einzustellen. Angesichts der begrenzten Erfahrung unseres Teams im Rahmen der Bewertung und der radikalen Zeitleiste, mit der wir konfrontiert sind, möchten wir erfahrene Entwickler rekrutieren.
kann jedoch Menschen mit spezifischen Erfahrungen einstellen, aber es wirkt sich in größeren Projekten wie unseren aus. In diesem Stadium haben wir Angular 2 beseitigt, weil es viele unserer früheren Anforderungen nicht erfüllt hat.
Für die verbleibenden Frameworks haben wir zunächst nach verschiedenen Websites für die Arbeitssuche gesucht und für jedes Framework separate Stellenanzeigen veröffentlicht. Wir haben keine Jobanzeigen für Aurelia oder Vue gefunden, und wir haben auch keine Bewerbungen erhalten. Im Gegensatz dazu fanden wir mehrere React-Jobs und erhielten viele hochwertige Anwendungen.
Der Rest unserer Liste - Entwicklungswerkzeuge und Unterstützung für Einheitstests - ist in allen von uns angezeigten Frameworks verfügbar. Das Debuggen ist ohne zuverlässige Entwickler-Tools nahezu unmöglich, und Unit-Tests sind für Anwendungen der Unternehmensklasse wie unserer nahezu wesentlich.
Praktische Erfahrung
Keine Theorie kann mit der praktischen Erfahrung verglichen werden. In diesem Sinne haben wir zwei Frameworks ausgewählt, die die meisten Anforderungen erfüllen - Arelia und React - und parallel mit dem Codieren begonnen. Es gibt keinen guten Grund, Vue in diesem Stadium wegzulassen.
Die angegebene Aufgabe besteht darin, einen Authentifizierungsbildschirm zu erstellen, der den grundlegenden Funktionen unserer vorhandenen Anwendungen entspricht: Melden Sie sich an, rufen Sie die API an und stellen Sie eine Sitzung ein. Den beiden Teammitgliedern wurde ein Rahmen separat zugewiesen und erhielt eine Kalenderwoche, um zu sehen, was sie bauen konnten.
Aurelia Demo ist vollständiger, teilweise aufgrund des einfacheren Setup -Prozesses. Nachdem wir die in jedem Abschnitt geleistete Arbeit ausgewählt haben, haben wir das Gefühl, ein besseres Verständnis dafür zu haben, was sich im React -Stapel befindet. Aurelia gewinnt immer noch leicht in Bezug auf die einfache erste Einrichtung.
Wir können keine wichtigen Schlussfolgerungen ziehen, die ausschließlich auf der praktischen Codierung basieren. Vielleicht ist die einzige Überraschung, wie ähnlich der Code ist: Dies ist hauptsächlich auf die in ECMASScript 6 eingeführten strukturellen Änderungen zurückzuführen, beide Frameworks, die ECMascript 6 verwenden.
Ergebnis
Letztendlich ist unsere Wahl reagiert. Während React der klare Gewinner unserer Standards ist, ist es großartig zu sehen, dass in dem Wettbewerbsrahmen, den wir uns ansehen, so hochwertige Rahmenbedingungen gibt.
Vue und Aurelia waren sich als unmittelbar hinterher. Vue führt leicht mit einer vollständigeren Funktionsliste, aber angesichts unserer Anforderungen wird eines wahrscheinlich gut dienen. Wenn wir keinen Zeitdruck haben, ist die Rekrutierung weniger wichtig und wir werden unsere praktische Arbeit um Vue erweitern.
Angular 2 konnten die meisten unserer Auswahlkriterien nicht erfüllen und waren enttäuschend. Trotz seiner vielen Vorteile passt es uns offensichtlich nicht.
Nach der Auswahl von React und dem Aufbau unseres Projekts ist es unwahrscheinlich, dass wir dies bald wieder tun werden. Welche Kriterien werden Sie unserer Liste hinzufügen? Was haben wir verpasst, wir hätten es besser machen können? Ich freue mich auf Ihre Kommentare und Vorschläge.
Dieser Artikel wurde von Stuart Mitchell, Ralph Mason und Vildan Softic überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erhöhung der Inhalte von SitePoint -Inhalten!
FAQs bei der Auswahl des richtigen Front-End-Frameworks für Ihr Unternehmen
Einige Schlüsselfaktoren sollten Sie bei der Auswahl eines Front-End-Frameworks für Ihr Unternehmen berücksichtigen. Betrachten Sie zunächst die Projektanforderungen. Verschiedene Frameworks haben unterschiedliche Vor- und Nachteile. Daher ist es wichtig, einen auszuwählen, der den Anforderungen Ihres Projekts entspricht. Zweitens betrachten Sie die Lernkurve. Einige Frameworks sind leichter zu lernen als andere, was die Entwicklungsgeschwindigkeit beeinflussen kann. Drittens betrachten Sie Gemeinschaft und Unterstützung. Eine starke Gemeinschaft kann wertvolle Ressourcen bereitstellen und helfen, wenn Sie Probleme haben. Betrachten Sie schließlich die Leistung und Größe des Frameworks. Ein leichtes, leistungsstarkes Framework kann eine bessere Benutzererfahrung mit sich bringen.
Die Größe des Front-End-Rahmens wirkt sich ernsthaft auf die Leistung aus. Größere Frameworks sind normalerweise mit mehr Funktionen und Funktionen ausgestattet, können aber auch langsamer laden und laufen. Dies kann zu einer schlechten Benutzererfahrung führen, insbesondere zu langsameren Internetverbindungen oder schwächeren Geräten. Kleinere Rahmen hingegen sind normalerweise schneller und effizienter, es fehlen jedoch bestimmte Merkmale oder Funktionen. Daher ist es sehr wichtig, die Größe und Leistung des Frameworks entsprechend Ihren Projektanforderungen auszugleichen.
Es gibt viele beliebte Front-End-Frontworks mit jeweils eigenen Vorteilen. Beispielsweise ist React für seine virtuelle DOM und hohe Leistung bekannt, was es zu einer guten Wahl für komplexe dynamische Webanwendungen macht. Angular hingegen ist ein voll funktionsfähiges Framework, das alles enthält, was Sie für die Erstellung einer Webanwendung benötigen, was es zu einer guten Wahl für große Projekte macht. Vue.js ist bekannt für seine Einfachheit und Benutzerfreundlichkeit, was es für neue Entwickler in kleinen Projekten oder Front-End-Frameworks zu einer guten Wahl macht.
Community-Unterstützung ist bei der Auswahl eines Front-End-Frameworks sehr wichtig. Eine starke Gemeinschaft kann eine Fülle von Ressourcen bereitstellen, einschließlich Tutorials, Dokumentation und Foren, in denen Sie Fragen stellen und Hilfe erhalten können. Darüber hinaus zeigen große Gemeinschaften häufig, dass das Rahmen beliebt und weit verbreitet ist, was zu häufigeren Aktualisierungen und Verbesserungen führen kann.
Während technisch mehrere Front-End-Front-Frameworks in einem einzigen Projekt verwendet werden können, wird dies normalerweise nicht empfohlen. Jedes Rahmen hat seine eigene Art, Dinge zu tun, und das Mischen kann zu Verwirrung und Komplexität führen. Stattdessen ist es normalerweise am besten, das Framework zu wählen, das den Anforderungen Ihres Projekts am besten entspricht und dabei bleibt.
Die Lernkurve des Front-End-Frameworks wird die Projektentwicklung ernsthaft beeinflussen. Ein Rahmen mit einer steilen Lernkurve kann länger dauern, bis der Entwicklungsbeginn verzögert wird. Auf der anderen Seite können Sie mit einem Rahmen mit einer sanften Lernkurve schneller mit der Entwicklung beginnen. Einfaches Lernen sollte jedoch nicht der einzige Faktor bei der Auswahl eines Frameworks sein. Es ist auch notwendig, die Funktionalität des Frameworks zu berücksichtigen und wie gut es den Projektanforderungen entspricht.
Front-End-Frameworks spielen eine entscheidende Rolle bei der Webentwicklung. Es bietet Struktur für den Code, um die Wartung und Skalierung zu erleichtern. Es bietet auch vor geschriebenen Code für gemeinsame Aufgaben und beschleunigt somit den Entwicklungsprozess. Darüber hinaus enthalten Front-End-Frameworks häufig Tools zum Testen und Debuggen, sodass die Qualität Ihres Codes sichergestellt wird.
Es ist sehr wichtig, das Front-End-Framework auf dem neuesten Stand zu halten. Updates enthalten normalerweise Fehlerbehebungen, Leistungsverbesserungen und neue Funktionen. Das Aktualisieren des Frameworks kann jedoch auch Änderungen einführen, die den vorhandenen Code brechen. Daher ist es wichtig, Ihre Anwendung nach dem Update gründlich zu testen. Im Allgemeinen sollten Sie Ihr Framework unmittelbar nach der Veröffentlichung einer neuen stabilen Version aktualisieren.
Die Entscheidung zwischen dem monolithischen und dem Micro Front-End-Framework hängt von Ihren Projektanforderungen ab. Das monolithische Rahmen bietet alles, was Sie in einem Paket benötigen, was die Entwicklung vereinfachen kann, kann jedoch auch unnötige Funktionen enthalten. Andererseits bietet das Mikroframewerk nur die Grundlagen, sodass Sie nur die von Ihnen benötigten Funktionen hinzufügen können. Dies kann zu leichteren und effizienteren Anwendungen führen, aber es erfordert möglicherweise auch mehr Arbeit, um zu richten und zu warten.
Es gibt viele Ressourcen, um mehr über Front-End-Frameworks zu erfahren. Online -Tutorials, Dokumente und Kurse sind ein großartiger Ausgangspunkt. Websites wie Stack Overflow und GitHub können auch wertvolle Erkenntnisse und Beispiele liefern. Darüber hinaus haben viele Rahmenbedingungen ihre eigenen Gemeinschaften, in denen Sie Fragen stellen und von anderen Entwicklern lernen können.
Das obige ist der detaillierte Inhalt vonSo wählen Sie den richtigen Front-End-Framework für Ihr Unternehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was bedeutet es, dass der Computer nicht unterstützt wird?
Java-basierte Methoden und Praktiken zur Audioverarbeitung
PS-Seriennummer CS5
Prinzip der bidirektionalen Datenbindung
SVG in JPG umwandeln
Was soll ich tun, wenn sich die Maus nicht mehr bewegt?
Der Unterschied zwischen Zellauffüllung und Zellabstand
BatterieMon
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
