clean architecture front end
1.0.0
สวัสดีนี่คือที่เก็บข้อมูลเพื่อส่งวิสัยทัศน์ของฉันเกี่ยวกับสถาปัตยกรรมที่สะอาด (ประการแรกที่ด้านหน้าจากนั้นในภายหลัง) ในรุ่นที่แตกต่างกัน
ฉันเขียนบทความเพื่อสนับสนุนตัวอย่างของโครงการนี้: https://www.hexa-web.fr/blog/hexagonal-architecture-front-end เพื่อทำความเข้าใจสถาปัตยกรรมที่สะอาด
สำหรับตัวอย่างเหล่านี้ฉันเลือกที่จะใช้ next.js ตาม React แต่จุดรวมของสถาปัตยกรรมนี้คือการใช้งานได้อย่างอิสระจากกรอบและห้องสมุดที่ใช้ (การพึ่งพาภายนอก)
เพื่อให้มีตัวอย่างง่ายๆฉันเลือกเรื่องง่าย ๆ : รายการสิ่งที่ต้องทำ!
หากต้องการดูงานที่ยังคงต้องทำในโครงการไปที่ไฟล์ /docs/todo.md
หากคุณมีคำถามคำแนะนำหรือสิ่งอื่นใดอย่าลังเลที่จะติดต่อฉัน! และถ้าที่เก็บนี้ช่วยคุณให้พิจารณาแบ่งปันกับคนรู้จักของคุณ
ขั้นแรกให้ติดตั้งการพึ่งพา:
npm install
# or
yarn install-
จากนั้นเรียกใช้เซิร์ฟเวอร์การพัฒนา:
npm run dev
# or
yarn devเปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์
-
เพื่อเริ่มการทดสอบหน่วย:
jest-
ในการทดสอบแอพออนไลน์: https://front-end-lean-chean-architecture.netlify.app/
สถาปัตยกรรมหกเหลี่ยมหรือสถาปัตยกรรมที่ใช้พอร์ตและอะแดปเตอร์เป็นรูปแบบสถาปัตยกรรมที่ใช้ในด้านการออกแบบซอฟต์แวร์ มันมีจุดมุ่งหมายเพื่อสร้างระบบตามส่วนประกอบแอปพลิเคชันซึ่งมีการเชื่อมโยงกันอย่างหลวมและสามารถเชื่อมต่อกับสภาพแวดล้อมซอฟต์แวร์ได้อย่างง่ายดายโดยใช้พอร์ตและอะแดปเตอร์ ส่วนประกอบเหล่านี้เป็นแบบแยกส่วนและใช้แทนกันได้ซึ่งตอกย้ำความสอดคล้องของการประมวลผลและอำนวยความสะดวกในการทดสอบอัตโนมัติ
มีสามส่วนในสถาปัตยกรรมที่สะอาด: ส่วนแอปพลิเคชัน (พอร์ตหลักและอะแดปเตอร์), โดเมน (กรณีการใช้, โมเดลโดเมน ฯลฯ ) และส่วนโครงสร้างพื้นฐาน (พอร์ตรองและอะแดปเตอร์)
สถาปัตยกรรมนี้ขึ้นอยู่กับรูปแบบพอร์ต / อะแดปเตอร์และหลักการผกผันของการพึ่งพา
โดยการบันทึกคุณเกี่ยวกับสถาปัตยกรรมที่สะอาด (หรือสถาปัตยกรรมหกเหลี่ยม) คุณจะพบชื่อที่แตกต่างกันสำหรับชิ้นส่วนเหล่านี้ ชื่อที่เลือกที่นี่เป็นเรื่องส่วนตัวเป้าหมายคือพวกเขาเข้าใจได้
กรณีการใช้งานกำหนดการกระทำของผู้ใช้ของคุณ เป้าหมายคือไม่ใช้เฟรมเวิร์กหรือไลบรารีใด ๆ ในองค์ประกอบเหล่านี้ (เพื่อรักษาตรรกะที่ไม่เข้ากับเครื่องมือเหล่านี้)
ด้านหน้าพวกเขาสามารถแสดงด้วยฟังก์ชั่นโดยชั้นเรียนที่เขียนใน JS หรือ TS ด้วย React มันเป็นไปได้ที่จะใช้ Redux สำหรับส่วนนี้
ในกรณีที่ใช้ Redux การกระทำคือกรณีการใช้งานสถานะเป็นหนึ่งในโมเดลและตัวเลือกจะใช้ในการทำแผนที่
พอร์ตหลักใช้เพื่อสร้างสัญญาระหว่างอะแดปเตอร์หลักและกรณีการใช้งาน สำหรับสิ่งนี้สามารถสร้างอินเทอร์เฟซได้ ในทางปฏิบัติกรณีการใช้งานถือเป็นพอร์ตหลัก
จากนั้นการใช้งานอินเทอร์เฟซเหล่านี้จะใช้ในการสนทนากับโดเมน: สิ่งแรกคือสิ่งที่เราเรียกว่าอะแดปเตอร์หลัก เป้าหมายของพวกเขาคือการกระตุ้นการดำเนินการของกรณีการใช้งาน ตัวอย่างเช่นด้านหน้าอะแดปเตอร์เหล่านี้สามารถเป็นส่วนประกอบของปฏิกิริยาที่ดำเนินการทริกเกอร์การกระทำ (redux หรือไม่)
พอร์ตรองถูกใช้เพื่อสร้างสัญญาระหว่างอะแดปเตอร์รองและกรณีการใช้งาน สำหรับสิ่งนี้เรามักจะสร้างอินเทอร์เฟซ อินเทอร์เฟซนี้ใช้โดยตรงในกรณีการใช้งาน
เคล็ดลับ: คุณสามารถใช้การฉีดพึ่งพาได้สำหรับสิ่งนั้นห้องสมุดการจัดการรัฐบางแห่งอนุญาตให้คุณทำเช่นนั้น ตัวอย่างเช่นด้วย redux-thunk และ redux-opservable เป็นไปได้ที่จะผ่าน "extraarguments" ซึ่งจะพร้อมใช้งานโดยตรงในการดำเนินการ Redux ใน "วานิลลา" นอกจากนี้ยังมี inversifyjs
การใช้งานครั้งที่สองของอินเตอร์เฟส (พอร์ต) เรียกว่าอะแดปเตอร์รอง พวกเขาถูกเรียกโดยกรณีการใช้งาน ตัวอย่างเช่นด้านหน้าอะแดปเตอร์เหล่านี้สามารถเป็นคำขอ HTTP การเข้าถึงข้อมูลที่มีอยู่ในการจัดเก็บท้องถิ่น ฯลฯ
เป็นภาษาอังกฤษ:
เป็นภาษาฝรั่งเศส:
