\n Eine Frage, die mir fast t\u00e4glich gestellt wird, ist, ob ich mit ReactJS oder Angular anfangen soll? Bevor ich jedoch fortfahre, lassen Sie mich Ihnen einen Haftungsausschluss geben.\n<\/p>\n
\n Es ist kein Blog, in dem ich das eine oder andere schlecht mache oder sage, dass man immer eines \u00fcber dem anderen verwenden sollte. Jeder Entwickler und jedes Projekt sind v\u00f6llig anders und haben unterschiedliche Anforderungen, daher ist es verdammt dumm zu sagen, dass Sie immer ReactJS oder immer Angular verwenden sollten.\n<\/p>\n
\n Sie k\u00f6nnen argumentieren, dass Angular ein Framework ist und React technisch gesehen eine Bibliothek f\u00fcr sich ist. Ich leugne diese Tatsache nicht, aber auf dieses Argument m\u00f6chte ich jetzt nicht eingehen. Es gibt Pakete, die Sie React hinzuf\u00fcgen k\u00f6nnen, die es in ein Framework verwandeln, das direkt mit Angular konkurriert. Wir vergleichen die beiden \u00d6kosysteme, nicht das genaue Framework mit der genauen Bibliothek.\n<\/p>\n
\n Beginnen wir mit Angular. Noch ein weiterer Haftungsausschluss: Wenn ich Angular sage, spreche ich von Angular 4, nicht von AngularJS.\n<\/p>\n
\n Angular ist ein gro\u00dfes Framework, was bedeutet, dass es m\u00e4chtig ist und viel beinhaltet. Es gibt viel zu lernen. Sie werden eine Menge neuer einsch\u00fcchternder Vokabeln wie Dependency Injection, Direktiven Decorators, Pipes usw. h\u00f6ren. Dann m\u00fcssen Sie sich mit Typescript befassen, das JavaScript plus eine Reihe anderer Funktionen ist, einschlie\u00dflich statischer Typisierung.\n<\/p>\n
\n Angular ist eigensinniger als React, was meiner Meinung nach einer der Vorteile ist, denn mit React kann man dasselbe auf eine Million verschiedene Arten tun. Bei Angular gibt es im Allgemeinen ein oder zwei M\u00f6glichkeiten, bestimmte Dinge zu tun, was das Befolgen erleichtert und Ihnen viel klarere Anweisungen gibt, was Sie tun sollen.\n<\/p>\n
\n Aber dann kommt es auch wieder auf die Pr\u00e4ferenz an. Vielleicht gef\u00e4llt Ihnen die Flexibilit\u00e4t, Dinge auf unterschiedliche Weise zu erledigen. Wie ich bereits erw\u00e4hnt habe, ist ReactJS eine Bibliothek, wenn wir nur \u00fcber die Kernbibliothek sprechen, sie ist viel kleiner und viel einfacher zu erlernen als das Angular-Framework. Sie k\u00f6nnen sagen, dass Sie React in k\u00fcrzerer Zeit lernen werden. React ist selbst eine gro\u00dfartige Ansichtsbibliothek, aber f\u00fcr gro\u00dfe Anwendungen ist sie nicht einmal ann\u00e4hernd so leistungsf\u00e4hig. Wenn Sie Routing, Validierung und HTTP-Anforderungen in React m\u00f6chten, m\u00fcssen Sie andere Pakete installieren, und das tr\u00e4gt zur Lernkurve bei.\n<\/p>\n
\n Wenn Sie sich React-Code von zwei verschiedenen Entwicklern ansehen, werden sie wahrscheinlich v\u00f6llig unterschiedlich aussehen, unabh\u00e4ngig davon, ob sie HTTP-Anforderungen stellen oder Status und Eigenschaften verarbeiten. All diese Dinge k\u00f6nnen sehr unterschiedlich gehandhabt werden und oft kann es falsch sein.\n<\/p>\n
\n Sie finden die besten Praktiken und alle Probleme verschwinden, aber das tr\u00e4gt zur Lernkurve bei.\n<\/p>\n
\n Im Gegensatz zu Angular React werden keine Vorlagen verwendet. Es verwendet eine sogenannte JSX- oder JavaScript-Erweiterung oder JavaScript-Syntaxerweiterung, mit der wir HTML in JavaScript einbetten k\u00f6nnen. Auf den ersten Blick kann dies ein wenig skurril erscheinen. Vor allem, wenn Ihnen wahrscheinlich beigebracht wurde, Ihr Markup und Ihr JavaScript zu trennen.\n<\/p>\n
\n Stellen Sie sich das so vor, als ob Sie HTML mit ein paar verschiedenen \u00c4nderungen in JavaScript einf\u00fcgen: Sie k\u00f6nnen das Klassenattribut nicht verwenden und m\u00fcssen den Klassennamen verwenden.\n<\/p>\n
\n Schlie\u00dflich haben wir Redux. React wird oft mit Redux oder Flux verwendet, die Zustandsmanager auf Anwendungsebene sind. Meiner Meinung nach ist Redux verdammt schwer, es einfach einzurichten und die Konzepte davon zu lernen, ist schwer.\n<\/p>\n
\n Ich denke, es wird \u00fcberstrapaziert. Ich denke, dass viele Entwickler Redux verwenden, wo es nicht ben\u00f6tigt wird. Sie brauchen es nicht f\u00fcr kleinere Anwendungen, aber viele Entwickler bestehen darauf, es zu verwenden. Das kommt wiederum auf die Pr\u00e4ferenz an. Redux ist sehr m\u00e4chtig, das m\u00f6chte ich Ihnen nicht nehmen. Wenn man von der Lernkurve spricht, ist das verdammt schwer zu fassen.\n<\/p>\n
| \n Merkmale<\/span><\/span>\n <\/td>\n | \n Reagieren<\/span><\/span>\n <\/td>\n | \n Eckig<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Programmiersprache<\/span><\/span>\n <\/td>\n | \n JavaScript<\/span><\/span>\n <\/td>\n | \n Typoskript<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Codestruktur<\/span><\/span>\n <\/td>\n | \n Rechthaberisch<\/span><\/span>\n <\/td>\n | \n Flexibel<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Core-Bibliothek<\/span><\/span>\n <\/td>\n | \n Klein<\/span><\/span>\n <\/td>\n | \n Sehr gro\u00df<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Vorlagen<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Kompetenz<\/span><\/span>\n <\/td>\n | \n Kleine Anwendungen<\/span><\/span>\n <\/td>\n | \n Anwendungen im gro\u00dfen Ma\u00dfstab<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Gewinner: Es ist ein Unentschieden<\/strong>\n<\/p>\n \n Es ist nicht fair, die Leistung von Angular direkt mit React zu vergleichen. Angular ist ein komplettes Front-to-Back-Framework, das Routing, Formular-Tools, HTTP-Bibliothek, reaktive Erweiterungen usw. umfasst. All diese Funktionen bl\u00e4hen das Framework auf und machen es langsamer. React selbst ist jedoch nur eine Ansichtsbibliothek, die viel kleiner und schneller ist.\n<\/p>\n \n Sobald Sie anfangen, Pakete wie den Router, den HTTP-Client oder was auch immer Sie zu Ihrer React-Anwendung hinzuf\u00fcgen m\u00f6chten, wird es ein wenig mehr zu Angular kommen, und dann k\u00f6nnen Sie anfangen, sie fair zu vergleichen, aber auch danach reagieren Sie noch gewinnt die Leistungsabteilung. Es ist im Allgemeinen eine sehr schnelle Technologie.\n<\/p>\n \n Durch den Wechsel von Angular 2 zu Angular 4 unter der Haube haben sie einiges getan, um die Leistung zu steigern. Angular 4 ist leistungsst\u00e4rker als Angular 2. Trotzdem gewinnt React immer noch in der Leistungsabteilung.\n<\/p>\n \n \n Gewinner: Reagieren<\/strong>\n<\/p>\n \n Beide Frameworks haben viele der gleichen allgemeinen Funktionen und Vorteile: Sie organisieren Ihren Code, sie sind komponentenbasiert, sie bieten dynamisches Markup usw. Sie sind daran gew\u00f6hnt, viele der gleichen Dinge zu tun, und sie teilen sich a viele der gleichen Funktionen.\n<\/p>\n \n Wir werden uns einige der einzelnen Funktionen ansehen. Angular hat offensichtlich viel mehr Funktionen als React im Kern. Ich m\u00f6chte Sie daran erinnern, dass wir \u00fcber zwei \u00d6kosysteme und gemeinsame Pakete sprechen, die mit React verwendet werden.\n<\/p>\n \n Angular ist ein allumfassendes Framework. Es enth\u00e4lt einen Komponenten-Router, reaktive Erweiterungen f\u00fcr Observables, einen HTTP-Client, ein Formularmodul zur Validierung und die Liste geht weiter. Dar\u00fcber hinaus bietet es eine bidirektionale Datenbindung auf eine Weise, die kein anderes Framework wirklich bietet. Das Binden von Daten aus der Ansicht an das Modell ist mit der ng model-Direktive extrem einfach.\n<\/p>\n \n Angular unterst\u00fctzt auch MVC (Model View Controller) oder zumindest andere Aspekte dieses Entwurfsmusters. Es verf\u00fcgt auch \u00fcber Funktionen, mit denen Sie Tests einfach implementieren k\u00f6nnen: sowohl Unit-Tests als auch End-to-End-Tests. Angular ist vollgepackt mit Funktionen zum Erstellen von Front-End-Anwendungen auf Unternehmensebene. React hingegen beinhaltet im Kern nicht viel. Es k\u00f6nnen jedoch Dinge hinzugef\u00fcgt werden, um ihm die Funktionen zu geben, die Angular standardm\u00e4\u00dfig enth\u00e4lt, sowie einige zus\u00e4tzliche.\n<\/p>\n \n React verwendet ein virtuelles DOM, das sehr leistungsf\u00e4hig ist. Es erstellt eine eigene leichtgewichtige Version des eigentlichen Doms und enth\u00e4lt und aktualisiert nur das, was ben\u00f6tigt wird, anstatt das Ganze zu aktualisieren. Virtual DOM ist einer der Hauptgr\u00fcnde daf\u00fcr, dass React unglaublich schnell ist.\n<\/p>\n \n React verwendet JSX, das leistungsf\u00e4higer ist als Standardvorlagen, da Sie absolut jede Art von JavaScript einf\u00fcgen k\u00f6nnen, die Sie m\u00f6chten. JSX ist nicht erforderlich, um React zu verwenden, aber es macht die Dinge verdammt viel einfacher. Ich kann mir keinen Grund vorstellen, warum Sie JSX nicht auch mit Angular verwenden w\u00fcrden. React leistet auch wirklich gute Arbeit bei der Verwaltung des Zustands und der Eigenschaften von Komponenten. Es macht es wirklich einfach, mit Daten zu arbeiten und sie zwischen Komponenten zu \u00fcbertragen. Das \u00dcbergeben von Daten zwischen Komponenten ist in Angular viel schwieriger als in React.\n<\/p>\n \n Core React kann den Status auf App-Ebene nur schwer aufrechterhalten. Der Komponentenstatus ist einfach, aber wenn Sie eine echte Statusverwaltung auf App-Ebene w\u00fcnschen, ben\u00f6tigen Sie Redux oder Flux, was, wie ich bereits sagte, ziemlich verwirrend zu lernen ist. Externe Pakete, die oft verwendet werden, wie die neue React-Router-Version 4, sind etwas schwierig zu verstehen, aber sie sind auch sehr leistungsf\u00e4hig, sobald sie gelernt haben, sie auszuf\u00fchren und einzurichten. Es gibt auch viele verschiedene M\u00f6glichkeiten, es zu verwenden. React hat keine HTTP-Kernkomponente wie Angular, aber Sie k\u00f6nnen Fetch oder Axios verwenden, einen externen HTTP-Client, und dann ist Enzyme beliebt, um React zu best\u00e4tigen. Es gibt einige der verschiedenen Pakete, die h\u00e4ufig mit React verwendet werden, obwohl sie nicht Teil der eigentlichen Bibliothek sind.\n<\/p>\n \n W\u00e4hrend beide Technologien eine gro\u00dfe Anzahl von Funktionen gemeinsam haben, ist Angular der Gewinner, wenn Sie nur die Kerntechnologien vergleichen.\n<\/p>\n \n Gewinner: Eckig<\/strong>\n<\/p>\n \n Angular und React haben einige ziemlich nette Befehlszeilenschnittstellen. Die Angular CLI und die Create React App sind beide ziemlich gro\u00dfartig und erm\u00f6glichen es uns wirklich, die Entwicklung zu rationalisieren. Die Angular-CLI ist etwas leistungsf\u00e4higer, da wir schnell Dinge wie Komponenten und Dienste generieren k\u00f6nnen. Create React kann das nicht. Bis auf die Dateien und die Grundstruktur m\u00fcssen Sie alles selbst erstellen. Beide Systeme verwenden das Web Pack, haben ihre eigenen Entwicklungsserver zum automatischen Laden und verf\u00fcgen \u00fcber Kompilierungs- und Build-Tools. Offensichtlich hat Angular die zus\u00e4tzliche Aufgabe, Typescript zu transpilieren. Die CLI hat daf\u00fcr ein Skript, wenn wir ng serve ausf\u00fchren. All das passierte hinter den Kulissen. Es verwendet daf\u00fcr etwas namens TSC oder Typescript Compiler und beide haben auch Testwerkzeuge.\n<\/p>\n \n Wenn es sich um eine Full-Stack-Anwendung handelt, sind diese wirklich wichtig. Sie m\u00fcssen sie nicht verwenden. Mit dem Web Pack k\u00f6nnen Sie eine React-Anwendung von Grund auf erstellen. Diese machen es viel einfacher, die Anwendung nicht nur zu erstellen, sondern sie auch f\u00fcr die Produktion zu kompilieren und zu erstellen.\n<\/p>\n \n Sie sind beide h\u00fcbsch, sogar in dieser Abteilung.\n<\/p>\n \n Gewinner: Eckig<\/strong>\n<\/p>\n \n Wie ich bereits sagte, haben diese beiden Technologien ihre eigenen \u00d6kosysteme, die sich jetzt weit \u00fcber den Webbrowser hinaus ausbreiten.\n<\/p>\n \n Ionic ist ein beliebtes Hybrid-Framework, bei dem es sich um eine Angular-Anwendung handelt, die in einem nativen Wrapper f\u00fcr mobile Apps ausgef\u00fchrt wird. Sie k\u00f6nnen mobile Apps mit Angular erstellen. Hybrid-Apps k\u00f6nnen im Vergleich zu nativen Anwendungen etwas klobig sein. Die Benutzererfahrung kann manchmal nicht so gut sein \u2013 nicht so schnell und reaktionsschnell. Unter den verschiedenen Hybrid-Frameworks ist Ionic 3 das beste. Es gibt auch NativeScript, mit dem wir echte native Apps f\u00fcr iOS und Android mit Angular und JavaScript erstellen k\u00f6nnen.\n<\/p>\n \n Dennoch scheint NativeScript zumindest an dieser Stelle nicht so gut zu sein wie Facebooks React Native. Angular hat auch eine Materialdesign-Komponentenbibliothek, wenn Sie ein Fan von Materialdesign sind. Angular Universal ist ein Seed-Projekt, mit dem Angular serverseitig gerendert werden kann. Es gibt auch den NgRx-Speicher, eine Zustandsverwaltungsbibliothek, die von Reax Redux inspiriert ist. Es basiert auf einem Zustand, der von Peer-Reduzierern mutiert wird. Es hat auch eine Integration mit Reactive-Erweiterungen.\n<\/p>\n \n Sie h\u00e4tten es bemerkt. Einmal macht einer von ihnen etwas, was die anderen auf andere Weise kopieren. React und Angular sind zu Microsoft- und Apple-JavaScript-Frameworks geworden.\n<\/p>\n \n React hat ein ziemliches \u00d6kosystem. Es hat React native, was beliebt ist. Es ist der beste Weg, mobile Apps mit Webtechnologien zu erstellen. React Native ist schnell und viele der Anwendungen, wenn sie richtig erstellt wurden, sind gleichauf mit nativen Anwendungen, die auf Swift oder Java basieren. React verf\u00fcgt \u00fcber eine Materialdesign-Bibliothek namens Material-UI, die der Materialdesign-Komponente von Angular sehr \u00e4hnlich ist, aber ausgereifter ist. JS ist ein Framework zum Rendern serverseitiger React-Anwendungen. Es zielt darauf ab, dies auf die einfachste Art und Weise zu tun, damit dies mit Angular Universal verglichen werden kann. MobX ist eine weitere M\u00f6glichkeit, den Status zu verwalten. Es funktioniert etwas anders als Redux. Es stellt eine Reihe von Dekoratoren bereit, um Observables und Beobachter zu definieren, und es f\u00fchrt reaktive Logik in Ihren Zustand ein.\n<\/p>\n \n Storybook ist eine Entwicklungsumgebung f\u00fcr React. Es erm\u00f6glicht Ihnen, eine Komponentenbibliothek zu durchsuchen, verschiedene Zust\u00e4nde jeder Komponente anzuzeigen und Komponenten interaktiv zu entwickeln und zu testen. Reactive VR bringt React in die virtuelle Realit\u00e4t. React Desktop ist eine JavaScript-Bibliothek, die auf der Reacts-Bibliothek aufbaut und angeblich ein natives Desktop-Erlebnis mit vielen macOS- und Windows 10-Komponenten ins Web bringt. Das React-\u00d6kosystem ist extrem gro\u00df und leistungsf\u00e4hig. React bahnt sich seinen Weg in jeden Aspekt der Technologie und ist ein klarer Gewinner.\n<\/p>\n \n Gewinner: Reagieren<\/strong>\n<\/p>\n \n Wenn Sie sich zwischen diesen Frameworks entscheiden, schauen Sie sich die verschiedenen Kategorien an und sehen Sie, was Sie interessiert. Probieren Sie beide aus und sehen Sie, welches Sie schneller abholen. Recherchieren Sie mehr als in diesem Blog. Sie werden nie alle Informationen, die Sie brauchen, aus einem einzigen Blog bekommen, also lesen Sie mehr.\n<\/p>\n \n Wenn Sie sich ein gr\u00f6\u00dferes \u00d6kosystem ansehen, das die Entwicklung nativer mobiler Apps umfasst, w\u00e4hlen Sie React, ohne dar\u00fcber nachzudenken. Wenn Sie nach Funktionen suchen, ist Angular riesig. Es gibt mehr Funktionen, als Sie ben\u00f6tigen.\n<\/p>\n<\/p>\n |