Durch die Migration zu React können Entwickler Funktionen schneller bereitstellen und die Wartung einer App wird einfacher. Außerdem kann das schmerzlos als einfacher, schrittweiser Prozess durchgeführt werden. Bevor sie jedoch loslegen, sollten Sie mehr über bewährte Verfahren und mögliche Probleme erfahren (+ wie Sie diese lösen können). Nur um es richtig zu machen.
A QUICK SUMMARY – FOR THE BUSY ONES
TABLE OF CONTENTS
The decision, your app or website to migration on a other technology, klingt nach einer schwierigen Entscheidung. Zweifel sind verständlich: Sie können es nicht leisten, sie für eine Weile herunterfahren, da sie sonst riskieren, ein Chaos zu verursachen. If you selected technology but is React, the migration will much easier.
React kann schrittweise auf React migriert werden. New functions can be delivered with React, sodass Developer sich voll und ganz auf den JavaScript-Teil konzentrieren können, ohne zu viel über das Server-Templating-System nachzudenken.
Aber natürlich bringt Migration sowohl Chancen als auch Risiken mit sich, und es ist gut, ein paar bewährte Methoden zu lernen, bevor sie beginnen.
<span class="colorbox1" fs-test-element="box1"><p>In diesem Artikel untersuchen wir:</p> <ul><li>die Chancen und Risiken der Migration zu React,</li> <li>die besten Praktiken für eine problemlose Migration, wie man große Apps migriert,</li> <li>wie man Python,</li> <li>PHP und AngularJS migriert hat (</li></ul>mit vielen praktischen Beispielen).</span>
Wenn Sie nach Antworten suchen oder vielleicht sogar verzweifelt nach Tipps suchen, folgen Sie uns.
Digitale Produkte entwickeln sich kontinuierlich weiter. War Krieg früher unmöglich oder zu kostspielig zu bauen und zu warten, ist heute ein typisches Merkmal.
Websites, bei denen jede kleine Änderung des Status der Anwendung zu einem vollständigen Neuladen führte (z. B. das Wechseln der Tabs in ein Menü), wurden früher sehr verbreitet. Diese Statusänderungen können heute sofort und ohne erneutes Laden angewendet werden, da sie mithilfe von JavaScript vorgenommen werden können.
Durch die Migration zu einer neuen Frontend-Technologie können Sie:
The migration of old ansätze opens new possibilities. Es ist einfacher, die App zu skalieren und zu warten, und es ist bequemer, Änderungen vorzunehmen.
React kann schrittweise eingeführt werden. Developer can create wiederverwendbare components can create the data from PHP templates. Anschließend können diese Komponenten so geändert werden, dass sie Daten von einem separaten Serveraufruf empfangen, was normalerweise in modernen Frontend-Anwendungen der Fall ist.
Das ist einer der größten Vorteile der Migration zu React. Es ist nichts Falsches daran, nur ein Teil Ihrer App ist so gut, wie möglich in React geschrieben zu haben arbeitet frei neben einer bestehenden Lösung. Sie müssen jedoch sicherstellen, dass ihre lokalen Bundesstaaten nicht direkt kommunizieren.
The migration to React offers many possibilities, but you must also be conscious any any any risk (and possibilities to management potential problems).
Die Leute sind oft besorgt über den SEO-Score von Apps, die stark auf Frontend-Code angewiesen sind.
In solchen Situationen SSR kommt ins Spiel. Es rendert React-Code zuerst auf dem Server, gibt ihn zurück zum Benutzer und verwendet ihn später wieder, wenn JavaScript abgeschlossen ist.
Sie müssen sich jedoch bewusst sein, dass einige Ihrer APIs auf dem Server überwacht werden müssen. If they also use virtual lists, with which only displayed elements are displayed on the screen (that the device of the users not used of many resources), you must simulating the height of the user visible areas, as the server know the screen height of the end users not know. The height must be defined on the server künstlich, sodass die ersten Farbdaten enthalten sind, die dann von Suchmaschinen analysiert werden können.
Sobald React the load abgeschlossen hat und das vorige Template wiederverwendet wird, ist es glücklicherweise wieder normal.
Sie müssen sich bewusst sein, dass React zwar schnell ist, Ihre App aber nicht von alleine schneller macht. Wenn React an einen vorhandenen Stapel von Frameworks und Bibliotheken angehängt wird, die langsam sind, wird es die Dinge wahrscheinlich nur noch langsamer machen.
Wenn Sie jedoch beginnen, bestehende Komponenten durch React zu ersetzen und alte Bibliotheken auslaufen zu lassen, werden Sie in den meisten Fällen eine erhebliche Leistungssteigerung feststellen.
They must prepare to the migration process.
Zuallererst Sie messen alle wirkungsvollen Metriken.
Zu den Metriken, die Sie messen sollten, gehören:
Es wird nützlich sein für einen weiteren Vergleich, nachdem Sie React eingeführt haben.
To start the migration step for step, you first how follows before:
<span class="colorbox1" fs-test-element="box1"><p>Tip:</p><p>Wie bereits erwähnt, Sie können auch einfach füge React hinzu, ohne die bestehende Codebasis neu zu schreiben wenn du es richtig hältst.</p></span> <p>Vielleicht ist nur ein Teil Ihrer Anwendung stark vom Frontend abhängig und der Rest sollte so bleiben, wie er ist.</p>
Viele Web-Apps basieren immer noch auf dynamische PHP-Vorlagen, die häufig von Drittanbietern verwendet werden, veraltete Frameworks wie Kohana.
In solchen Fällen müssen Entwickler bei der Implementierung neuer Funktionen, die stark von Frontend-Technologien abhängen (wie Geolokalisierung, Live-Messaging, Streaming oder Zeichnen), sicherstellen, dass der Status des Clients, der in Strukturen gespeichert ist, die den alten Ansatz verwenden, mit dem für React verwendet wird, sodass ein Benutzer keine UI-Störungen hat.
React wurde erstellt mit virtuelles DOM If React also must be informed about an specific value, the somewhere is saved in a html tag (also direct via the browser api as „document.getElementById“), you sure that you transfer by an abstraction level. If you make different, React reagiert nicht auf Änderungen, die im DOM sind.
Unter „Abstraktionsebene“ verstehen wir (zum Beispiel) eine React-Methode, die die externe (Nicht-React-) App ausgesetzt ist und die dann zusammen mit jedem anderen Code aufgerufen werden kann, wann immer Sie ein Update in React benötigen.
Es ermöglicht Ihnen auch, während der späteren Entwicklung einfacher zu React zu wechseln.
<span class="colorbox1" fs-test-element="box1"><p>Lass uns üben! We are research: how</p> <ul><li>man large apps to React migriert, wie</li> <li>man von Python zu React migriert, wie man von PHP zu React migriert,</li> <li>wie <li>man von AngularJS</li> zu React migriert</li></ul></span>.
The migration larger apps wirds of many consider. In this case must you consider that you must not to all app on once migrieren with React.
Sie sollten vermeiden, in kurzer Zeit zu viel zu erreichen. Der Prozess der Migration von einem alten technologischen Stack zu einem neuen sollte stattfinden schrittweise und schmerzlos.
Beginne damit, einen Teil deiner Bewerbung zu ändern.
Nehmen wir an, Sie leiten ein Reisebüro. A user can find a list potential travel on your website.
Die Liste könnte so aussehen:
Lass' uns diese Komponente in React umschreiben:
Dann fügen wir es in das DOM ein:
Und voilà: Unsere Reiseliste wird jetzt als React-Komponente angezeigt.
<span class="colorbox1" fs-test-element="box1"><p>Tip: </p><p>Es ist eine gute Praxis, in der Lage zu sein change between a old and an new solution ein in React geschrieben auf Anfrage damit sind sie in der Lage, A/B-Tests durchzuführen. This way you can monitor the converter rate or receive feedback from your tester to access</p></span>.
React wurde ursprünglich mit dem Ziel entwickelt, kleine JavaScript-Komponenten zu erstellen und sie in eine Seite einzufügen, die vom Template-System im Backend generiert wurde. Aus diesem Grund ist die Migration von diesem Ansatz einfacher als die Migration von einem anderen JavaScript-Framework.
Vielleicht möchten Sie sehr langsam beginnen mit nur eine React-Komponente auf einer Seite and added then following.
Wenn die meisten Ihrer Seiten hauptsächlich aus React-Komponenten bestehen, können Sie erwägen, sie schreiben in Form einer Einzelseitenanwendung neu.
Eine Single-Page-Anwendung (SPA) is a web application or website, that interagiert with the users, when they change the current web page dynamisch with new data from web server. On the other page the traditional method, by the a browser is all new pages.
SPAs sorgen für schnellere Übergänge, da nur Daten ohne Markup vom Server abgerufen werden müssen.
The most most solution for the build a SPA in React is React-Router.
Sie werden wahrscheinlich feststellen, dass sich die visuelle Darstellung der Elemente ändert, sobald Sie eine vorlagenbasierte Komponente in eine React-Komponente ändern.
React is an frontend-library, what means that the JavaScript-code must be installed, analyzed and last then be applied on the DOM, during the based on templates solution already generated and an the DOM is connected.
Es bedeutet einfach, dass Sie an dieser Stelle vermutlich einen Moment ohne Inhalt sehen und dann wird er angezeigt.
If they not expect or want, you should take SSR in contract.
SSR is an process, the markup your components on your server generated and directly to the DOM, sodass Ihre Benutzer visuell keinen Unterschied sehen.
Lass uns nun in den Einzelheiten eintauchen und untersuchen, wie die Migration von Python and PHP to React aussehen kann und worauf zu achten ist.
Wenn Ihr Backend in Python mit einer Template-Engine geschrieben ist, wie Gepard, Sie können langsam zu React migrieren, indem Sie small components capsules and run with React.
1. Die Komponente könnte am Anfang so aussehen:
2. Sie möchten vielleicht eine Python-Methode erstellen, die eine React-Komponente mit bestimmten Eigenschaften lädt:
And that can turn with following parts your application, they can look as „components“.
3. Wenn Ihre Seite hauptsächlich aus React-Komponenten besteht, sollten Sie alles durch nur einen Aufruf ersetzen, um die Seite mit React auf ähnliche Weise zu rendern, wie folgt:
Wenn Ihr PHP-Backend mit einer Template-Engine geschrieben ist, wie Zweig, Sie können ähnlich wie in Python beschrieben werden, migrieren Sie langsam zu React, indem Sie kleine Komponenten kapseln und sie mit React aufrufen.
1. Zunächst könnte Ihr Aufruf einer Komponente wie folgt aussehen:
Create this component in React and call you call with your PHP method to call of React-components.
2. Der Aufruf dieser Methode könnte so aussehen:
3. Oder Sie können die React-Komponente mit JavaScript verbinden:
4. Und nenne es mit Daten von PHP:
Und jetzt können wir die von PHP übergebenen Daten in React verwenden!
AngularJS war 2012 eine revolutionäre Neuheit in der Frontend-Welt.
Wir haben diesem Ansatz viel zu verdanken, aber nach den heutigen Maßstäben ist er veraltet. If also a active app is written in AngularJS, should they should be migriert on a new technology — eher früher als später.
<span class="colorbox1" fs-test-element="box1"><p>Tip:</p><p>The migration process from an javascript framework to React is complicated as the migration from an server template language. Mit etwas mehr Sorgfalt und Geduld ist es immer noch möglich.</p></span>
Wie immer sollte die Migration schrittweise erfolgen, eine Komponente nach der anderen.
Es ist eine mühsame Aufgabe als both solutions (angularJS and React) use different ansätze to rendering the including user interface.
The migration from AngularJS to React is a significant sub-fangen, da beide Frameworks unterschiedliche architektonische Ansätze und Philosophien verfolgen. Mit einer gut geplanten Strategie können Sie den Migrationsprozess jedoch reibungsloser gestalten. Here find a step guide for migration from AngularJS to React:
Denke daran, dass die Migration von AngularJS to React kein Patentrezept ist. Ihr Migrationsplan hängt von der Komplexität Ihrer Anwendung und dem Fachwissen Ihres Teams ab. Es ist wichtig, während des gesamten Prozesses ein Gleichgewicht zwischen Funktionsentwicklung und Migrationsbemühungen zu gewährleisten.
Zum Glück ist dieses Problem so häufig, dass gute Leute generische Methoden entwickelt haben, um die beiden Frameworks zu überbrücken, sodass eine schrittweise Neukomposition einfacher ist — es heißt“Angular 2 React“.
Who used it?
Lass uns einen Blick darauf werfen.
1. Save a review on the $injector
2. Create a Angular Component
3. Setzt sie es Angular aus
4. Convertiere es in eine React-Komponente
5. Use es in ihrem React-Code
Sie müssen schließlich die Geschäftslogik von AngularJS nach React portieren.
Um dies zu tun, ist es eine gute Idee Versandaktionen (Redux-Ansatz) innerhalb von AngularJS-Diensten on this way:
Sie müssen schließlich Ihren Router austauschen. This is zeitaufwändig, da die gesamte Anwendung davon abhaengt.
Stellen Sie sicher, dass Ihre Bewerbung gründlich getestet sobald sie den Übergang abgeschlossen haben.
Migrieren Sie umfangreiche Apps oder Apps, die mit Python, PHP oder AngularJS erstellt wurden, zu React kann einfach sein, wenn es richtig angegangen wird.
Wie können Sie das sicherstellen?
Wir haben eine praktische Checkliste für Sie erstellt, die Ihnen hilft, alle wichtigen Details zu berücksichtigen. Sie finden sie unten.
<span class="colorbox1" fs-test-element="box1"><h3>So migrieren Sie problemlos zu React:</h3> <ol><li>Hab ein klares Ziel vor Augen, why they want migration your application</li>. <li>Create your migration plan rational, that they not too much in to shorttime.</li> <li>Migrieren Sie jeweils einen kleinen Teil der Frontend-Codebasis.</li> <li>Create a bridge between your existing UI solution and React, they can together with.</li> <li>Fangen Sie an mit den Teilen, die sich am leichtesten portieren lassen.</li> <li>Measure important kennzahlen Your app, before they start with the migration, and measure you after.</li> <li>Richten Sie die richtigen A/B-Tests ein.</li> <li>Erwägt SSR (serverseitiges Rendern), wenn sie die Art und Weise, wie React-Komponenten koexistieren, als nicht benutzerfreundlich empfinden.</li> <li>if a whole page with React components was created, it is an good time, everything with React, and also with a call statt with several.</li> <li>If all your pages are written in React, use React Router, to create a SPA.</li></ol></span> <li>Zieh SSR in Verzug, wenn Sie sich Sorgen um SEO machen.</li>
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Full-Stack-Softwareingenieur mit 8 Jahren Berufserfahrung. Leidenschaft für React.js und React Native. Absolvent der Schlesischen Technischen Universität.
Enthusiast für Softwareentwicklung mit 8 Jahren Berufserfahrung in der Technologiebranche. Erfahrung im Outsourcing von Marktanalysen, mit besonderem Schwerpunkt auf Nearshoring. In der Zwischenzeit unser Experte darin, technische, geschäftliche und digitale Themen auf verständliche Weise zu erklären. Autor und Übersetzer nach Feierabend.
Full-Stack-Softwareingenieur mit 8 Jahren Berufserfahrung. Leidenschaft für React.js und React Native. Absolvent der Schlesischen Technischen Universität.
Enthusiast für Softwareentwicklung mit 8 Jahren Berufserfahrung in der Technologiebranche. Erfahrung im Outsourcing von Marktanalysen, mit besonderem Schwerpunkt auf Nearshoring. In der Zwischenzeit unser Experte darin, technische, geschäftliche und digitale Themen auf verständliche Weise zu erklären. Autor und Übersetzer nach Feierabend.
Read next
Popular this month
previous article in this collection
It's the first one.
