it-swarm.com.de

Methoden zum Trennen von Front und Back-End mit Full-Stack-Javascript?

Angenommen, ich habe ein Front-End, bei dem es sich hauptsächlich um eine einseitige Anwendung handelt, die mit Winkel, Grunzen und Laube geschrieben wurde. Angenommen, ich habe ein Backend, bei dem es sich meist nur um eine REST API) handelt, die auf einem ORM sitzt und Objekte aus einer Datenbank speichert/abruft, wobei Dinge wie Grunzen, Ausdrücken und Fortsetzen verwendet werden.

Die Anwendung angular -Anwendung erledigt alle visuellen Dinge, die der Benutzer sieht, aber dies geschieht, indem sie eine GUI über die vom Back-End bereitgestellten Dienste ist.

Es wäre wünschenswert, diese in zwei verschiedene Codebasen zu unterteilen, um eine unabhängige Entwicklung, Versionierung, kontinuierliche Integration, Push-to-Entwicklung usw. zu ermöglichen.

Meine Frage ist, welche Methoden gibt es, um dies sauber zu machen? Gibt es empfohlene Best Practices für Full-Stack-Javascript?

Option 1 scheint ein Monolith zu sein, d. H. "Trenne sie nicht". Der Vorteil ist, dass die Build-Kette einfach ist und sich alles an einem Ort befindet - aber es scheint viele Nachteile zu geben. Eine kaputte Vorderseite ist schwieriger, unabhängig voneinander zu versionieren. Sie bedeutet eine nicht bereitstellbare Rückseite und so weiter.

Option 2 scheint ein Quasi-Monolith zu sein, bei dem die Front-End-Build-Kette dazu führt, dass eine Reihe von Dateien in das Back-End geschrieben werden. Das Verzeichnis dist im Front-End verweist auf ein Verzeichnis im Back-End. Wenn das Front-End also minimiert, hässlich usw. wird, wird es im Back-End veröffentlicht, in dem alles ausgeführt wird.

Option 3 scheint vollständig getrennt zu sein: Front-End und Back-End führen jeweils ihre eigenen Server an verschiedenen Ports aus und sind vollständig getrennte Projekte. Der Nachteil scheint, dass sie konfiguriert werden müssen, um die Ports des anderen zu kennen. Das Back-End muss CORS vom Front-End aus zulassen, und das Front-End muss wissen, wo sich all diese Endpunkte voraussichtlich befinden.

Option 4 könnte darin bestehen, etwas wie Docker-Compose zu verwenden, um das Ganze zusammenzubauen.

Ich bin mir sicher, dass es noch andere Möglichkeiten gibt. Was ist die empfohlene Best Practice?

32
FrobberOfBits

Es ist eine Front-End- und Back-End-Anwendung mit einer REST-Schnittstelle dazwischen. Sie haben bereits eine vollständige Trennung.

Ich stimme für Option 3. Sie scheinen sich Sorgen um die Konfiguration zu machen, aber das ist irgendwie der springende Punkt. Die Konfiguration ermöglicht eine vollständige Trennung, ohne dass eng gekoppelte Codebindungen erforderlich sind. Wenn Sie sich Sorgen um CORS machen, legen Sie alles auf eine Domain. Wenn Sie über CORS verfügen müssen, ist eine Konfiguration der beste Weg, dies zu verwalten.

Hier gibt es jedoch keine "Best Practice". Die beste Vorgehensweise ist diejenige, die Ihren spezifischen Anforderungen am besten entspricht.

19
Robert Harvey

Ja, Sie sollten die beiden trennen und die Front-End-App wie eine Drittanbieter-App behandeln. Sie können eventuell einen weiteren Client hinzufügen, beispielsweise eine mobile App. Wenn der erste Client auf diese Weise erstellt wurde, wird Ihr Leben einfacher.

Die Verwendung von Docker-Containern oder eines anderen Bereitstellungssystems bezieht sich hauptsächlich auf das Backend, da das Front-End Ihrer App nur statische Assets sind, die aufgelöst werden müssen. Sie können diese Assets entweder statisch auf Ihrem Server oder an einem anderen Ort wie einem CDN wie Cloudfront hosten.

Das Vermeiden von Cors erspart Ihnen eine kleine Konfiguration, aber wie in der obigen Antwort erwähnt, ist das irgendwie der Punkt. Durch die Verwendung von cors (und Token Auth) wird Ihr Backend auch für andere Clients besser vorbereitet.

Bearbeiten: Soweit Full Stack js Best Practices - ich würde nur sagen, seien Sie konsistent. Wenn Sie Versprechen verwenden (und sollten), tun Sie dies auf beiden Seiten. Behalten Sie den gleichen JS-Stil und die gleiche Formatierung bei, verwenden Sie die gleichen Testbibliotheken (wo möglich) usw.

7
MaxWell