Winkel 2,0 vs Polymer

Hallo Leute! Bevor ich mit dem Vergleich dieser beiden Javascript-Frameworks / -Bibliotheken beginne, ist es wichtig zu verstehen, wie sich die Art und Weise der Webentwicklung ändert und wie die neuen Frameworks versuchen, diese Änderung zu ermöglichen.

Die neue Art der Webentwicklung

Komponenten

  • Modulares Design und Entwicklung sind beliebte Prinzipien bei Entwicklern. In der Welt der Webentwicklung hat sich die komponentenbasierte Entwicklung nach dem Prinzip der Modularität entwickelt.
  • Modularer Code ist einfach zu warten und wiederzuverwenden. Aufgrund der kleineren, isolierten und überprüfbaren Codebasis ist die Wahrscheinlichkeit von Fehlern geringer.
  • Frameworks wie Angular, Ember, React, Backbone und andere haben ihre eigenen Lösungen für die Komponentisierung im Web bereitgestellt.

Webkomponenten

  • Web Components haben das Konzept von Komponenten nativ auf die Browser übertragen. Obwohl wir weiterhin die von Frameworks bereitgestellten Komponentenlösungen verwenden können, bieten native Webkomponenten einen Grad an Wiederverwendbarkeit, den andere Frameworks nicht erreichen können.
  • Webkomponenten fassen Funktionsmodule in der grundlegendsten Einheit von HTML, einem DOM-Element, zusammen. Mit den Fortschritten bei den Webkomponenten haben sie sich zum Weg für modularen Code im Web entwickelt.
  • Webkomponentenspezifikationen werden noch nicht von allen Browsern vollständig implementiert. Die Anbieter von Browsern implementieren jedoch aktiv die verschiedenen Teile der Spezifikation, was bedeutet, dass die Unterstützung für Webkomponenten nur noch besser wird.

Die Brücke zu Webkomponenten

Angular 2.0

  • Angular ist eines der beliebtesten Javascript-Frameworks unter den Entwicklern. Die neueste Version von Angular (Angular 2) befasst sich auch mit dem Konzept von Komponenten.
  • Angular 2 ist ein vollwertiges Javascript-Framework, mit dem Sie nicht nur die Komponenten erstellen, sondern auch verschiedene Aspekte von Webanwendungen wie Routing und Statusverwaltung verwalten können.
  • Winkel 2 kann auch zum Generieren von Webkomponenten konfiguriert werden.

Polymer

  • Die Polymerbibliothek ist eine leichte Zuckerschicht über den Web Components APIs. Polymer ist eine Bibliothek, mit der wir das Potenzial von Webkomponenten voll ausschöpfen können.
  • Im Gegensatz zu einem typischen JavaScript-Framework nutzt Polymer Funktionen, die in die Webplattform selbst integriert sind, um Komponenten zu erstellen.
  • #UseThePlatform ist der Name, den Polymer gibt, um den Wunsch des Browsers darzustellen, all das schwere Heben ohne Bibliotheken durchzuführen.

Wie vergleichen sie

Größe:

Die Größe einer Webanwendung wirkt sich direkt auf die Ladezeitleistung aus. Neben Anwendungscode und Assets erhöhen auch externe Frameworks und Bibliotheken die Anwendungsgröße. Daher ist es wünschenswert, dass der Beitrag externer Bibliotheken so gering wie möglich ist.

Angular 2.0: 566 KB - 766 KB. Die Größe des minimierten Angular 2-Pakets beträgt 566 KB. Winkel 2 beruht auf einem beobachtbaren Muster, das von der Rxj-Bibliothek geliefert wird. Die Größe von Angular 2 mit Rxjs-Bibliothek beträgt 766 KB.

Polymer: 127 KB - 168 KB. Die Größe des minimierten Polymers 1.6 beträgt 127 KB. Für Browser, in denen Webkomponenten nicht nativ unterstützt werden, ist eine Polyfill namens webcomponents.js erforderlich. Größe von webcomponents-lite.js ist 41 KB

Wiederverwendung:

Das Muster der Komponenten bietet viel Spielraum für die Wiederverwendbarkeit. Komponenten sind kleine und isolierte Codeteile, die an mehreren Stellen derselben Anwendung oder anwendungsübergreifend verwendet werden können.

Angular 2.0: Unterstützt Komponenten und Wiederverwendung. Angular 2-Komponenten können nur in Angular2-Anwendungen verwendet werden

Polymer: Unterstützt Komponenten und Wiederverwendung. Polymerkomponenten können idealerweise in jeder Webanwendung wiederverwendet werden. Eine Nicht-Polymer-Anwendung müsste eine Polymerbibliothek importieren, um Polymerkomponenten wiederverwenden zu können.

Anwendungsstruktur:

In großen Anwendungen ist es wichtig, den Code zu strukturieren. Frameworks helfen dabei, dem Code Struktur und Muster zu verleihen.

Angular 2.0: Bestimmt die Struktur des Codes. Angular 2 ist ein vollwertiges Framework. Es bietet eine Möglichkeit, die Anwendung zu strukturieren. Es wird mit integriertem Anwendungsrouting, Statusverwaltung und Datenkommunikation geliefert

Polymer: Keine Aussage über die Struktur. Polymer erleichtert nur die Herstellung von Bauteilen. Das Polymerteam hat jedoch nur wenige Komponenten entwickelt, die zum Fräsen verwendet werden können. Eine separate Bibliothek kann zur Verwaltung der Datenkommunikation verwendet werden. z.B. Redux oder eine andere Flux-basierte Bibliothek.

Langlebigkeit:

Bei der Auswahl des Technologie-Stacks ist es wichtig, die Langlebigkeit von Frameworks / Bibliotheken zu berücksichtigen. Ein Framework, das sehr bald veraltet oder stagniert, ist eine falsche Wahl für die Erstellung von Anwendungen.

Angular 2.0: Angulars Versions-Upgrade von 1.x auf 2 war eine vollständige Überarbeitung und wird praktisch eine vollständige Neuschreibung für Anwendungen zur Folge haben. Angular hat einen Upgrade-Pfad von 1.4-1.5-2 bereitgestellt. Der Aufwand, dem Upgrade-Pfad zu folgen, hätte jedoch einem Neuschreiben gleichkommen können.

Polymer: Polymer soll mit der Entwicklung der Webplattform leichter werden. Polymer 2 Preview-Version ist da. Polymer hat einen Hybridmodus, in dem 1 & 2 zusammen laufen können. Da Polymer nicht gerüstlastig ist, sollten Upgrades einfacher sein.

Lernen:

Angular 2.0: Typescript ist eine neue Sprache, und Javascript-Entwicklern ist auch die Art und Weise, wie sie den Code „dekoriert“ schreibt, nicht bekannt. Obwohl kommende Versionen von Javascript Konzept Dekorateure haben. Entwickler müssen das Framework sowie die Sprache lernen.

Polymer: Polymerkomponenten können / werden normalerweise in ES5 / ES6 Javascript geschrieben. Entwickler müssen sich an das Konzept der Komponenten gewöhnen (auch bei Angular 2). Polymer bietet ein Minimum an syntaktischem Zucker über dem API der Webkomponenten, wodurch keine steile Lernkurve entsteht.

Serverseitiges Rendering:

Server-seitiges Rendering ist wichtig, wenn es um SEO-Freundlichkeit, Vorschau auf soziale Medien und schnelle Anzeige der Seite geht. Es gibt jedoch viele Techniken, um auch beim clientseitigen Rendern ein schnelles erstes Rendern zu erzielen. Google kann auch clientseitig gerenderte Websites indizieren, aber andere Suchmaschinen haben möglicherweise Probleme damit.

Angular 2.0: Angular-Team arbeitet an Angular Universal, das mit Angular 2 verwendet werden kann, um serverseitiges Rendern zu ermöglichen.

Polymer: Polymer unterstützt das serverseitige Rendern noch nicht.

Empfohlener Stapel

Basierend auf dem obigen Vergleich würde ich Folgendes wählen, wenn ich heute einen Front-End-Stack auswählen müsste:

  • Die Polymerbibliothek ist leichter als die Angular 2-Frameworkbibliothek.
  • Polymerkomponenten können in jeder Anwendung wiederverwendet werden, während Angular 2-Komponenten nur in Angular 2-Anwendungen verwendet werden können
  • Polymer beabsichtigt, mit der Entwicklung der Webplattform schlanker zu werden, d. H. Wenn Browser ihre Unterstützung für Webkomponentenspezifikationen verbessern, wird Polymer in der Lage sein, seine Größe zu reduzieren
  • Redux basiert auf dem Flussmuster. Es enthält Richtlinien zur Steuerung des Datenflusses in der App. Dies hilft bei der Erstellung vorhersehbarer und skalierbarer Anwendungen.

Vielen Dank!! Habe Spaß!

Eine etwas detailliertere Version dieser Beschreibung finden Sie in meinem Blog unter http://dotjsfile.blogspot.in/2017/04/angular2-vs-polymer.html