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 Winkeln, Grunzen und Lauben geschrieben wurde. Und nehmen wir an, ich habe ein Backend, bei dem es sich meistens nur um eine REST-API handelt, die sich auf einem ORM befindet und Objekte aus einer Datenbank speichert / abruft.

Die eckige Anwendung erledigt alle visuellen Aufgaben, die dem Benutzer angezeigt werden. Dies geschieht jedoch über eine grafische Benutzeroberfläche für die vom Back-End bereitgestellten Dienste.

Es wäre wünschenswert, diese in zwei verschiedene Codebasen zu unterteilen, um eine unabhängige Entwicklung, Versionierung, kontinuierliche Integration, Push-to-Development 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, dh "trenne sie nicht". Der Vorteil ist, dass die Build-Kette einfach ist und alles an einem Ort ist - aber es scheint viele Nachteile zu geben; Unabhängig davon ist es schwieriger, Versionen zu erstellen. Eine kaputte Vorderseite bedeutet eine nicht einsetzbare 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 an das Back-End geschrieben werden. Das distVerzeichnis im Front-End verweist auf ein Verzeichnis im Back-End. Wenn also das Front-End minimiert, hässlich macht usw., wird es im Back-End veröffentlicht, das alles ausführt.

Option 3 scheint vollständig getrennt zu sein: Front-End und Back-End führen jeweils ihre eigenen Server an unterschiedlichen Ports aus, und es handelt sich um vollständig getrennte Projekte. Der Nachteil scheint, dass sie konfiguriert werden müssen, um die gegenseitigen Ports 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 sein, etwas wie Docker-Compose zu verwenden, um das Ganze zusammenzubauen.

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

Es ist eine Front-End- und Back-End-Anwendung mit einer dazwischen liegenden REST-Schnittstelle. 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 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, ordnen Sie alles einer Domain zu. Wenn Sie über CORS verfügen müssen, ist die beste Möglichkeit, dies zu verwalten, eine Konfiguration.

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

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 einem anderen Bereitstellungssystem betrifft hauptsächlich das Back-End, da das Front-End Ihrer App nur statische Elemente 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 oben erwähnt, ist das der springende Punkt. Mit cors (und token auth) können Sie Ihr Backend auch für andere Clients besser vorbereiten.

Edit: Was die Best Practices von Full Stack J angeht, würde ich nur sagen, seien Sie konsequent. 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.