react atomic design
1.0.0
นี่เป็นตัวอย่างต้นแบบที่มีระเบียบวิธี Atomic Design โดยใช้สิ่งดีๆ บางอย่าง เช่น Storybook, Flow และ CSS Modules ทดสอบ ปรับเปลี่ยน ปรับเปลี่ยน ทุกอย่างได้ตามใจชอบ
อ่านบทความฉบับเต็ม
Atomic Design ซึ่งเป็นที่รู้จักอย่างแพร่หลายในโลกแห่งการออกแบบช่วยสร้างระบบการออกแบบที่สม่ำเสมอ แข็งแกร่ง และนำกลับมาใช้ใหม่ได้ นอกจากนี้ ในโลกของ React, Vue และเฟรมเวิร์กที่กระตุ้นการจัดองค์ประกอบนั้น Atomic Design ยังถูกใช้โดยไม่รู้ตัว แต่เมื่อใช้อย่างถูกวิธีก็กลายเป็นพันธมิตรที่ทรงพลังสำหรับนักพัฒนา
ชื่อ Atomic Design มาจากแนวคิดในการแยกส่วนประกอบออกเป็นอะตอม โมเลกุล สิ่งมีชีวิต เทมเพลต และหน้าต่างๆ ดังในภาพด้านบน แต่แต่ละส่วนที่แยกจากกันมีหน้าที่รับผิดชอบอะไรบ้าง?
อะตอมเป็นส่วนประกอบที่เล็กที่สุดเท่าที่จะเป็นไปได้ เช่น ปุ่ม ชื่อ ข้อมูลอินพุตหรือพาเลทสี ภาพเคลื่อนไหว และแบบอักษร สามารถนำไปใช้กับบริบทใดๆ ทั่วโลกหรือภายในส่วนประกอบและเทมเพลตอื่นๆ นอกเหนือจากการมีหลายสถานะ เช่น ตัวอย่างของปุ่ม: ปิดใช้งาน โฮเวอร์ ขนาดที่แตกต่างกัน เป็นต้น
เป็นองค์ประกอบของอะตอมตั้งแต่หนึ่งองค์ประกอบขึ้นไป ที่นี่เราเริ่มเขียนส่วนประกอบที่ซับซ้อนและนำส่วนประกอบเหล่านั้นบางส่วนกลับมาใช้ใหม่ โมเลกุลสามารถมีคุณสมบัติของตัวเองและสร้างฟังก์ชันการทำงานได้โดยใช้อะตอมซึ่งไม่มีฟังก์ชันหรือการกระทำใดๆ ในตัวเอง
สิ่งมีชีวิตคือการรวมกันของโมเลกุลที่ทำงานร่วมกันหรือแม้กระทั่งกับอะตอมที่ประกอบเป็นส่วนต่อประสานที่ซับซ้อนมากขึ้น ในระดับนี้ ส่วนประกอบต่างๆ เริ่มมีรูปร่างขั้นสุดท้าย แต่ยังคงมั่นใจได้ว่าส่วนประกอบต่างๆ เป็นอิสระ พกพาได้ และนำกลับมาใช้ใหม่ได้มากพอที่จะนำกลับมาใช้ใหม่ได้ในเนื้อหาใดๆ
ในสถานะนี้ เราหยุดการเขียนส่วนประกอบและเริ่มกำหนดบริบท นอกจากนี้ เทมเพลตยังสร้างความสัมพันธ์ระหว่างสิ่งมีชีวิตและส่วนประกอบอื่นๆ ผ่านตำแหน่ง ตำแหน่ง และรูปแบบของหน้าเว็บ แต่ไม่มีการแสดงผลสไตล์ สี หรือส่วนประกอบใดๆ นั่นเป็นเหตุผลว่าทำไมมันจึงดูเหมือนโครงลวด
หน้าเป็นส่วนการนำทางของแอปพลิเคชันและเป็นตำแหน่งที่ส่วนประกอบต่างๆ ถูกกระจายในเทมเพลตเฉพาะรายการเดียว ส่วนประกอบต่างๆ ได้รับเนื้อหาจริงและเชื่อมต่อกับแอปพลิเคชันทั้งหมด ในขั้นตอนนี้ เราสามารถทดสอบประสิทธิภาพของระบบการออกแบบเพื่อวิเคราะห์ว่าส่วนประกอบทั้งหมดมีความเป็นอิสระเพียงพอ หรือว่าเราจำเป็นต้องแยกพวกมันออกเป็นส่วนเล็กๆ หรือไม่
เมื่อเราเริ่มใช้ Atomic Design ภายใน React เราต้องปรับกฎบางอย่างของวิธีการเพื่อให้แน่ใจว่าส่วนประกอบต่างๆ ถูกนำมาใช้ซ้ำให้มากที่สุดเท่าที่จะเป็นไปได้ ส่วนประกอบเหล่านั้นไม่มีสถานะ ไม่มีรูปแบบของตำแหน่งและระยะขอบที่เฉพาะเจาะจงมาก เพื่อหลีกเลี่ยงผลข้างเคียงใดๆ ใน หน้าการสมัคร
ดังนั้นในแต่ละองค์ประกอบใหม่ เราจึงถามตัวเองว่า: “ส่วนประกอบเหล่านี้มีความทั่วไปเพียงพอที่จะหลีกเลี่ยงความเฉพาะเจาะจงและ/หรือโค้ดที่ซ้ำกันไม่ว่าจะใช้บริบทใดก็ตาม”
ดังนั้นเราจึงสามารถเขียนกฎสองสามข้อ:
| สคริปต์ | คำอธิบาย |
|---|---|
$ yarn start | เริ่มต้นเซิร์ฟเวอร์ webpack แบบง่าย |
$ yarn dev | สร้างเซิร์ฟเวอร์เพื่อการพัฒนาที่พอร์ต 5000 |
$ yarn storybook | เริ่ม Storybook ด้วยเรื่องราวที่นำเข้า |
$ yarn flow | ตรวจสอบประเภทโฟลว์ |
@danilowoz
@dleitee
เอ็มไอที
