Inhalt
- 01. Angular
- 02. Reagiere
- 03. Vue
- Wie vergleicht sich die Syntax von Frameworks?
- Popularität und Markt
- Entwicklung mobiler Apps
- Weitere Rahmenbedingungen, auf die im Jahr 2020 geachtet werden muss
- Fazit
Im Jahr 2020 sind wir mit einer Reihe von Frameworks und Bibliotheken gesegnet, die uns bei der Webentwicklung helfen. Aber es gab nicht immer so viel Abwechslung. Bereits 2005 wurde von einem Mann namens Brendan Eich eine neue Skriptsprache namens Mocha erstellt. Monate nach der Umbenennung in LiveScript wurde der Name erneut in JavaScript geändert. Seitdem hat JavaScript einen langen Weg zurückgelegt.
Im Jahr 2010 haben wir die Einführung von Backbone und Angular als erste JavaScript-Frameworks gesehen. Bis 2016 verwendeten 92 Prozent aller Websites JavaScript. In diesem Artikel werden wir uns drei der wichtigsten JavaScript-Frameworks (Angular, React und Vue) und deren Status im nächsten Jahrzehnt ansehen. Möchten Sie Ihre eigene Website erstellen? Probieren Sie diese Liste der Website-Ersteller aus.
Weitere brillante Ressourcen finden Sie in unserer Liste der besten Webdesign-Tools, in unserer Zusammenfassung der Webhosting-Services und in dieser Liste der hervorragenden Benutzertestsoftware.
01. Angular
AngularJS wurde 2010 veröffentlicht, aber bis 2016 wurde es komplett neu geschrieben und als Angular 2 veröffentlicht. Angular ist ein von Google entwickeltes Web-Framework, das von Wix, Upwork, The Guardian, HBO und anderen verwendet wird.
Vorteile:
- Außergewöhnliche Unterstützung für TypeScript
- Mit MVVM können Entwickler die Arbeit an demselben App-Bereich mit demselben Datensatz trennen
- Hervorragende Dokumentation
Nachteile:
- Hat eine gewisse Lernkurve
- Die Migration von einer alten Version kann schwierig sein.
- Updates werden ziemlich regelmäßig eingeführt, was bedeutet, dass Entwickler sich an sie anpassen müssen
Was kommt als nächstes?
In Angular 9 ist Ivy der Standard-Compiler. Es wurde eingerichtet, um viele Probleme im Zusammenhang mit Leistung und Dateigröße zu lösen. Es sollte Anwendungen kleiner, schneller und einfacher machen.
Wenn Sie frühere Versionen von Angular mit React und Vue vergleichen, wird die
Die endgültigen Bündelgrößen waren bei Verwendung von Angular viel größer. Ivy ermöglicht auch Progressive Hydration, was das Angular-Team auf der I / O 2019 gezeigt hat. Progressive Hydration verwendet Ivy, um progressiv auf den Server und den Client zu laden. Wenn ein Benutzer beispielsweise mit einer Seite interagiert, wird der Code der Komponenten zusammen mit der Laufzeit Stück für Stück abgerufen.
Ivy scheint der große Fokus für Angular zu sein und die Hoffnung ist, es für alle Apps verfügbar zu machen. In Version 9 wird es eine Opt-out-Option bis hin zu Angular 10 geben.
02. Reagiere
React wurde ursprünglich 2013 von Facebook veröffentlicht und wird zum Erstellen interaktiver Webschnittstellen verwendet. Es wird von Netflix, Dropbox, PayPal und Uber verwendet, um nur einige zu nennen.
Vorteile:
- React verwendet das virtuelle DOM, was sich positiv auf die Leistung auswirkt
- JSX ist einfach zu schreiben
- Updates beeinträchtigen die Stabilität nicht
Nachteile:
- Einer der größten Rückschläge besteht darin, dass Bibliotheken von Drittanbietern benötigt werden, um komplexere Apps zu erstellen
- Entwickler bleiben im Dunkeln, wie sie sich am besten entwickeln können
Was kommt als nächstes?
Bei der React Conf 2019 hat das React-Team eine Reihe von Dingen angesprochen, an denen es gearbeitet hat. Die erste ist die selektive Flüssigkeitszufuhr. Hier hält React an, woran gerade gearbeitet wird, um die Komponenten zu priorisieren, mit denen der Benutzer interagiert. Wenn der Benutzer mit einem bestimmten Abschnitt interagiert, wird dieser Bereich hydratisiert. Das Team hat auch an Suspense gearbeitet, dem System von React zur Orchestrierung des Ladens von Code, Daten und Bildern. Dadurch können Komponenten auf etwas warten, bevor sie gerendert werden.
Sowohl die selektive Flüssigkeitszufuhr als auch die Spannung werden durch den gleichzeitigen Modus ermöglicht, der es Apps ermöglicht, schneller zu reagieren, indem React die Möglichkeit erhält, große Blöcke mit Arbeiten mit niedrigerer Priorität einzugeben, um sich auf etwas zu konzentrieren, das eine höhere Priorität hat, z. B. das Reagieren auf Benutzereingaben. Das Team erwähnte die Barrierefreiheit auch als einen weiteren Bereich, den es untersucht hat, indem es sich auf zwei bestimmte Themen konzentrierte - das Verwalten von Fokus- und Eingabeschnittstellen.
03. Vue
Vue wurde 2014 von Evan You, einem ehemaligen Google-Mitarbeiter, entwickelt. Es wird von Xiaomi, Alibaba und GitLab verwendet. Vue gelang es, innerhalb kurzer Zeit und ohne die Unterstützung einer großen Marke an Popularität und Unterstützung von Entwicklern zu gewinnen.
Vorteile:
- Sehr leicht
- Anfängerfreundlich - leicht zu erlernen
- Tolle Community
Nachteile:
- Nicht von einem großen Unternehmen wie React with Facebook und Angular with Google unterstützt
- Keine wirkliche Struktur
Was kommt als nächstes?
Vue hat sich zum Ziel gesetzt, schneller, kleiner und wartbarer zu sein und Entwicklern die Zielerfassung zu erleichtern (wenn Sie Probleme bei der Wartung haben, ziehen Sie einen Webhosting-Dienst in Betracht). Die nächste Version (3.0) ist für das erste Quartal 2020 geplant. Sie enthält ein virtuelles DOM-Rewrite für eine bessere Leistung sowie eine verbesserte TypeScript-Unterstützung. Hinzu kommt die Kompositions-API, mit der Entwickler auf neue Weise Komponenten erstellen und nach Funktionen anstatt nach Operationen organisieren können.
Diejenigen, die Vue entwickeln, haben auch an Suspense gearbeitet, wodurch das Rendern Ihrer Komponenten unterbrochen und eine Fallback-Komponente gerendert wird, bis eine Bedingung erfüllt ist.
Eines der großartigen Dinge bei den Updates von Vue ist, dass sie die Abwärtskompatibilität gewährleisten. Sie möchten nicht, dass Sie Ihre alten Vue-Projekte brechen. Wir haben dies bei der Migration von 1.0 auf 2.0 gesehen, bei der 90 Prozent der API gleich waren.
Wie vergleicht sich die Syntax von Frameworks?
Alle drei Frameworks wurden seit ihrer Veröffentlichung geändert. Entscheidend für das Verständnis ist jedoch die Syntax und die Unterschiede. Schauen wir uns an, wie die Syntax bei der einfachen Ereignisbindung verglichen wird:
Vue: Das v-on Die Direktive wird verwendet, um Ereignis-Listener anzuhängen, die Methoden für Vue-Instanzen aufrufen. Direktiven wird ein Präfix vorangestellt v- um anzuzeigen, dass es sich um spezielle Attribute handelt, die von Vue bereitgestellt werden, und um ein spezielles reaktives Verhalten auf das gerenderte DOM anzuwenden. Ereignishandler können entweder inline oder als Name der Methode bereitgestellt werden.
template> button v-on: click = ”clickHandler”> Klick mich / button> / template> script> exportiere Standard {name: “HelloWorld”, Methoden: {clickHandler: function () {console.log (“Ich wurde angeklickt! ”); }}}; / script>
Reagieren: React setzt Markup und Logik in JS und JSX, einer Syntaxerweiterung für JavaScript. Bei JSX wird die Funktion als Ereignishandler übergeben. Die Behandlung von Ereignissen mit React-Elementen ist der Behandlung von Ereignissen mit DOM-Elementen sehr ähnlich. Es gibt jedoch einige syntaktische Unterschiede. Beispielsweise werden React-Ereignisse nicht mit Kleinbuchstaben, sondern mit camelCase benannt.
Funktion Button () {Funktion clickHandler (e) {console.log ("Ich wurde angeklickt"); } return button onClick = {clickHandler}> Klick mich! / button>; }}
Winkel: Die Ereignisbindungssyntax besteht aus einem Zielereignisnamen in Klammern links neben einem Gleichheitszeichen und einer zitierten Vorlagenanweisung rechts. Alternativ können Sie die verwenden auf- Präfix, bekannt als die kanonische Form.
@Component ({Auswahl: "App-Click-Me", Vorlage: `button (click) =” onClickMe () ”> Click me! / Button>`}) Exportklasse ClickMeComponent {onClickMe () {console.log (“ Du hast mich angeklickt! ”); }}
Popularität und Markt
Beginnen wir mit einem Gesamtbild der drei Frameworks in Bezug auf den Rest des Webs, indem wir die Statistiken von W3Techs untersuchen. Angular wird derzeit von 0,4 Prozent aller Websites verwendet, mit einem Marktanteil der JavaScript-Bibliothek von 0,5 Prozent. React wird von 0,3 Prozent aller Websites und einem Marktanteil von 0,4 Prozent für JavaScript-Bibliotheken verwendet, und Vue hat für beide 0,3 Prozent. Dies scheint ziemlich gleichmäßig zu sein und Sie würden erwarten, dass die Zahlen steigen.
Google-Trends: In den letzten 12 Monaten war React in Bezug auf Suchbegriffe am beliebtesten, dicht gefolgt von Angular. Vue.js ist ziemlich weit dahinter; Eine Sache, an die man sich erinnern sollte, ist jedoch, dass Vue im Vergleich zu den beiden anderen noch jung ist.
Jobsuche: Zum Zeitpunkt des Schreibens sind React und Angular in Bezug auf die Stellenangebote bei Indeed mit Vue ziemlich eng aufeinander abgestimmt. Auf LinkedIn scheint es jedoch mehr Nachfrage nach Vue-Entwicklern zu geben.
Paketüberfluss: Wenn Sie sich die Ergebnisse der Stack Overflow Developer Survey für 2019 ansehen, sind React und Vue.js die beliebtesten und gefragtesten Webframeworks. Angular setzt sich auf den neunten Platz für die am meisten geliebten, aber am dritthäufigsten gesuchten.
GitHub: Vue hat mit 153.000 die meisten Sterne, aber die wenigsten Mitwirkenden (283). React hingegen hat 140.000 Sterne und 1.341 Mitwirkende. Angular hat nur 59,6.000 Sterne, hat aber mit 1.579 die höchste Anzahl von Mitwirkenden unter den dreien.
NPM-Trends: Das Bild oben zeigt Statistiken für die letzten 12 Monate, in denen React im Vergleich zu Angular und Vue eine höhere Anzahl von Downloads pro Monat aufweist.
Entwicklung mobiler Apps
Ein Hauptaugenmerk der großen Drei liegt auf der mobilen Bereitstellung. React verfügt über React Native, das nicht nur für React-Benutzer, sondern auch für die breitere App-Entwickler-Community zu einer beliebten Wahl für die Erstellung von iOS- und Android-Apps geworden ist. Angular-Entwickler können NativeScript für native Apps oder Ionic für hybride mobile Apps verwenden, während Vue-Entwickler zwischen NativeScript und Vue Native wählen können. Aufgrund der Beliebtheit mobiler Anwendungen bleibt dies ein zentraler Investitionsbereich.
Weitere Rahmenbedingungen, auf die im Jahr 2020 geachtet werden muss
Wenn Sie 2020 etwas Neues ausprobieren möchten, sehen Sie sich diese JavaScript-Frameworks an.
Glut: Ein Open-Source-Framework zum Erstellen von Webanwendungen, das auf dem MVVM-Muster basiert. Es wird von mehreren großen Unternehmen wie Microsoft, Netflix und LinkedIn verwendet.
Meteor: Eine Full-Stack-JavaScript-Plattform für die Entwicklung moderner Web- und Mobilanwendungen. Es ist leicht zu lernen und hat eine sehr unterstützende Community.
Fazit
Alle drei Frameworks werden kontinuierlich verbessert, was ein ermutigendes Zeichen ist. Jeder hat seine eigene Perspektive und bevorzugte Lösung, welche er verwenden sollte, aber es kommt wirklich auf die Größe des Projekts an und damit fühlen Sie sich wohler.
Der wichtigste Aspekt ist die fortgesetzte Unterstützung ihrer Gemeinden. Wenn Sie also vorhaben, ein neues Projekt zu starten, und noch nie eines der drei Projekte verwendet haben, sind Sie meiner Meinung nach bei allen in sicheren Händen. Wenn Sie noch keine Gelegenheit hatten, eines der drei Frameworks zu lernen, empfehle ich Ihnen, es zu Ihrem Neujahrsvorsatz zu machen, mit dem Lernen zu beginnen. Die Zukunft wird sich um diese drei drehen.
Dieser Inhalt erschien ursprünglich im Netzmagazin.
