Angular 4 vs React.js vs Polymer und einige Überlegungen zu Komponenten

Diese Woche hatte ich etwas Zeit, um mir Angular 4 und Polymer, die beiden Frameworks für die Entwicklung von komponentenbasiertem SPA, anzuschauen. Da ich React.js seit ungefähr 2 Jahren benutze, wollte ich nur einige meiner Gefühle aufschreiben.

Zuerst zu Angular 4. Es wird gesagt, dass es sich um eine Komponentenbasis handelt, aber als ich andere Projekte sah, die es verwenden, habe ich das Gefühl, dass es wie Angular 1 aussieht. Außerdem ist es ziemlich verwirrend, wann und wo Richtlinien verwendet werden sollen. Wir haben ngrx (die Angular-Version von Redux), aber viele Entwickler missbrauchen es als EventEmitter.

Ich sollte sagen, dass die Lernkurve von Angular 4 zu hoch ist. Wenn Sie es verwenden, ist es sehr einfach, die früheren Erfahrungen mit Angular 1 zu nutzen.

Für Polymer ist es recht gut organisiert und aufgrund der Implementierung von Shadow Dom kann HTML so einfach zu verstehen sein. Obwohl es wie Angular bidirektionale Bindungen hat, ist es immer noch eine UI-Bibliothek, nicht wie Angular als Framework.

So kann Polymer mit Redux einfach umorganisiert werden, indem eine Store-Komponente hinzugefügt und mithilfe eines Singleton-Musters an eine beliebige Stelle übergeben wird.

Im Vergleich zu React.js denke ich, dass Polymer ein guter Konkurrent sein kann. Außerdem werden die Änderungen in DOM stapelweise übernommen und einige Vorgänge können durch bidirektionale Bindung vereinfacht werden.

Dann begann ich darüber nachzudenken, was Komponente für SPA bedeutet. Mit React.js und Polymer können Sie eine Komponente definieren und indem Sie sie mit anderen Komponenten umschließen oder Komponenten höherer Ordnung verwenden, können Sie eine App mit guter Struktur organisieren. Angular 4 kann dasselbe tun, aber wenn man den Aufwand vergleicht, würde ich sagen, dass React.js und Polymer viel besser sind.

Für eine komponentenbasierte App sollten die Komponenten etwas dumm sein, das heißt, sie sollten sich nur um sich selbst kümmern und nur mit den übergebenen Attributen arbeiten. Sie können einen eigenen Status haben (Status in React.js-Komponente und Eigenschaft in Polymer-Komponente). zu steuern, wie es aussieht.

Außerdem ist es ihm egal, wie die Kinder aussehen. Indem wir etwas umbrechen, können wir einfach eine neue Komponente mit neuen Funktionen erstellen.

Dies kann die Verwendbarkeit der Komponenten dramatisch erhöhen. Wir können es überall einsetzen und es sollte einfach funktionieren. :)

Auf diese Weise kann es auch leicht in andere Bibliotheken wie Redux integriert werden, um Modelldaten zu steuern.

Eine Warnung ist, wenn ein Zustand nur auf eine bestimmte Komponente bezogen ist, dann sollte er nicht eingelagert werden. Missbrauchen Sie Redux nicht, um alles zu speichern.

Ein gutes Beispiel ist Polymers Iron-Page. Durch Definieren des ausgewählten Attributs und des Zielattributs wird einfach die richtige untergeordnete Komponente ausgewählt und ein neues Attribut hinzugefügt.

Genauso wie beim React-Router, definieren Sie einfach die Struktur und es funktioniert einfach.

Im Vergleich zu diesen beiden ist der Router von Angular 4 übrigens etwas hässlich. Es braucht ein Json-Objekt ... das überhaupt nicht direkt ist ...

Daher kann ich für mein nächstes Projekt immer noch React.js auswählen und die Komponenten wiederverwenden, die ich in meinen anderen Projekten erstellt habe.