วิธีการแยกส่วนหน้าและส่วนหลังด้วยจาวาสคริปต์แบบเต็ม?


31

สมมติว่าฉันมีส่วนหน้าซึ่งส่วนใหญ่เป็นแอปพลิเคชันหน้าเดียวที่เขียนโดยใช้เชิงมุมเสียงฮึดฮัดและความโกลาหล และสมมติว่าฉันมีแบ็กเอนด์ซึ่งส่วนใหญ่เป็นเพียง REST API นั่งอยู่ด้านบนของ ORM ซึ่งเก็บ / ดึงวัตถุจากฐานข้อมูลโดยใช้สิ่งต่าง ๆ เช่นเสียงฮึดฮัดแสดงและต่อเนื่อง

แอปพลิเคชันเชิงมุมทำสิ่งที่เป็นภาพทั้งหมดที่ผู้ใช้เห็น แต่ทำได้ด้วยการเป็น GUI เหนือบริการที่จัดทำโดยแบ็คเอนด์

มันจะเป็นที่พึงปรารถนาที่จะแยกสิ่งเหล่านี้ออกเป็นสอง codebases ที่แตกต่างกันเพื่อให้เกิดการพัฒนาที่เป็นอิสระการกำหนดเวอร์ชันการรวมอย่างต่อเนื่องการผลักดันการพัฒนาเป็นต้น

คำถามของฉันคือมีวิธีการอะไรบ้างสำหรับการทำสิ่งนี้อย่างหมดจด? มีแนวทางปฏิบัติที่ดีที่สุดสำหรับจาวาสคริปต์แบบเต็มสแต็คหรือไม่?

ตัวเลือก # 1 ดูเหมือนจะเป็นหินใหญ่ก้อนเดียวเช่น "อย่าแยกพวกมันออก" โปรคือห่วงโซ่การสร้างนั้นง่ายและทุกอย่างอยู่ในที่แห่งเดียว - แต่ดูเหมือนจะมีข้อเสียมากมาย เวอร์ชันที่ยากขึ้นไปอีกส่วนด้านหน้าที่หักหมายถึงส่วนที่ไม่สามารถปรับใช้ได้และอื่น ๆ

ตัวเลือก # 2 ดูเหมือนจะเป็นแบบโมโนลิ ธ ที่ซึ่งฟลูเอ็นด์บิลด์ส่วนหน้ามีผลในการเขียนไฟล์จำนวนมากไปยังแบ็คเอนด์ distไดเรกทอรีบน front-end จะอ้างถึงไดเรกทอรีบางอย่างเกี่ยวกับ back-end เพื่อเป็นหลักเมื่อ minifies ปลายด้านหน้า uglifies ฯลฯ ก็ลงท้ายเผยแพร่ไปยัง back-end ซึ่งจะทำงานทุกอย่าง

ตัวเลือก # 3 ดูเหมือนว่าจะมีการแยกเต็มรูปแบบ: front-end และ back-end แต่ละตัวใช้เซิร์ฟเวอร์ของตัวเองในพอร์ตที่แตกต่างกันและพวกเขาเป็นโครงการที่แยกจากกันอย่างสมบูรณ์ ข้อเสียเปรียบดูเหมือนว่าพวกเขาจำเป็นต้องกำหนดค่าให้รู้เกี่ยวกับพอร์ตของกันและกัน ส่วนแบ็คเอนด์จะต้องอนุญาตให้ CORS จากส่วนหน้าและส่วนหน้าจำเป็นต้องทราบว่าจุดปลายเหล่านั้นจะต้องอยู่ที่ไหน

ตัวเลือก # 4 อาจใช้บางสิ่งบางอย่างเช่นนักเทียบท่าเพื่อประกอบเข้าด้วยกัน

ฉันแน่ใจว่ามีตัวเลือกอื่น ๆ แนวปฏิบัติที่ดีที่สุดที่แนะนำคืออะไร

คำตอบ:


18

มันเป็นแอพพลิเคชั่นส่วนหน้าและส่วนหลังพร้อมส่วนต่อประสาน REST คุณแยกกันแล้ว

การลงคะแนนของฉันสำหรับตัวเลือก # 3 ดูเหมือนว่าคุณกังวลเกี่ยวกับการกำหนดค่า แต่นั่นเป็นจุดรวม การกำหนดค่าช่วยให้คุณมีการแยกเต็มรูปแบบโดยไม่ต้องใช้การผูกโค้ดอย่างแน่นหนา หากคุณกังวลเกี่ยวกับ CORS ให้ใส่ทุกอย่างไว้ในโดเมนเดียว หากคุณต้องมี CORS วิธีที่ดีที่สุดในการจัดการนั่นคือการกำหนดค่า

แต่ไม่มี "แนวปฏิบัติที่ดีที่สุด" ที่นี่ แนวทางปฏิบัติที่ดีที่สุดคือแนวทางที่จะสนองความต้องการเฉพาะของคุณได้ดีที่สุด


2
คุณจะวางทุกอย่างลงในโดเมนเดียวได้อย่างไรหากพวกเขาแยกเซิร์ฟเวอร์สองเครื่อง แม้ว่าพวกเขาจะวิ่งบนโฮสต์เดียวกันพวกเขาจะต้องอยู่ในพอร์ตที่แตกต่างกันทำให้พวกเขากำเนิดที่แตกต่างกัน
FrobberOfBits

1
หากไม่มีแนวปฏิบัติที่ดีที่สุดมีตัวอย่างที่พร้อมใช้งานเกี่ยวกับวิธีการกำหนดค่านี้หรือไม่?
FrobberOfBits

7
คุณสามารถใส่ reverse proxy (nginx) ไว้ข้างหน้าแอปพลิเคชันของคุณและ/ตำแหน่งเมานต์ไปที่localhost:3000(เซิร์ฟเวอร์ส่วนหน้า) และ/api/ไปยังlocalhost:3001(เซิร์ฟเวอร์ api) nginx จะฟังพอร์ต http เริ่มต้นแล้ว
nvartolomei

@nvartolomei ฉันเห็นด้วยกับการใช้ reverse proxy มีวิธีแบ่งปันข้อมูลระหว่างแบ็กเอนด์ส่วนหน้าเช่นข้อมูลเส้นทางได้อย่างหมดจดหรือไม่? นอกจากนี้การชี้ย้อนกลับพร็อกซีของคุณไปที่ CDN ทำได้ง่ายหรือไม่
Andrew Allbright

6

ใช่คุณควรแยกทั้งสองและปฏิบัติต่อแอพพลิเคชั่นส่วนหน้าเช่นแอปของบุคคลที่สาม - ในที่สุดคุณอาจเพิ่มลูกค้ารายอื่นแอพมือถือและหากลูกค้ารายแรกถูกสร้างขึ้นด้วยวิธีนี้ชีวิตของคุณจะง่ายขึ้น

การใช้คอนเทนเนอร์นักเทียบท่าหรือระบบการปรับใช้อื่นส่วนใหญ่เกี่ยวข้องกับแบ็กเอนด์เนื่องจากส่วนหน้าของแอพของคุณเป็นเพียงสินทรัพย์คงที่ที่ต้องได้รับการแก้ไข คุณสามารถโฮสต์สินทรัพย์เหล่านั้นแบบคงที่ในเซิร์ฟเวอร์ของคุณหรือที่อื่นเช่น CDN เช่น cloudfront

การหลีกเลี่ยง cors จะช่วยให้คุณประหยัดค่าเล็กน้อย แต่ตามคำตอบข้างต้นนั่นเป็นการเรียงลำดับของประเด็น การใช้ cors (และ token auth) จะช่วยให้คุณเตรียมแบ็กเอนด์สำหรับลูกค้ารายอื่นได้ดีขึ้น

แก้ไข: เท่าที่ปฏิบัติเต็มรูปแบบที่ดีที่สุด js กอง - ฉันจะพูดแบบนี้ให้สอดคล้อง หากคุณใช้สัญญา (และคุณควร) ให้ทำทั้งสองด้าน ใช้สไตล์และการจัดรูปแบบ js เดิมใช้ libs การทดสอบเดียวกัน (เท่าที่ทำได้) และอื่น ๆ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.