เริ่มต้นใช้งานโมดูลและการพัฒนา Front-End แบบแยกส่วน

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

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

โมดูลคอลลา

เมื่อเข้าสู่ขั้นตอนการออกแบบของโปรเจ็กต์ ฉันมักจะเริ่มต้นด้วยการรวบรวมคอลลาจแรงบันดาลใจในการออกแบบและคอลลาจโมดูล เป็นกระบวนการที่เหมือนกับ Dan Mall's ซึ่งเรียกผลงานการออกแบบคอลลาจเหล่านี้ว่าเป็นผลสำเร็จในยุคหลังการแต่ง คอลลาจแรงบันดาลใจคือคอลเลกชั่นของภาพหน้าจอที่ฉันนำเสนอต่อลูกค้า เพียงเพื่อให้เข้าใจภาพรวมของทิศทางที่เรากำลังมุ่งหน้าไป ภาพเหล่านี้เป็นเพียงภาพหน้าจอของเว็บไซต์ทั้งฉันและลูกค้าที่ชอบ

เมื่อเราได้รับการยืนยันว่าเราอยู่ในหน้าเดียวกันในแง่ของสไตล์ ฉันสามารถเข้าสู่โปรแกรมแก้ไขกราฟิก (ฉันชอบ Sketch) และสร้างภาพต่อกันของโมดูล ภาพตัดปะเหล่านี้เป็นคอลเล็กชันของโมดูลที่ใช้บ่อยที่สุด - ปุ่ม แบบฟอร์ม หัวเรื่อง ย่อหน้า รายการ รูปภาพ และอื่นๆ ภาพตัดปะของโมดูลช่วยให้ฉันสร้างส่วนต่างๆ ของรูปลักษณ์ของเว็บไซต์ได้อย่างรวดเร็ว

นี่เป็นส่วนหนึ่งของภาพปะติดโมดูลล่าสุดของฉัน ตัวอย่างของปุ่มที่ฉันออกแบบใน Sketch เมื่อเริ่มโครงการ:

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

• เบราว์เซอร์เป็นสภาพแวดล้อมทางธรรมชาติสำหรับเว็บไซต์ และการยึดมั่นในแนวคิดที่ทำในโปรแกรมแก้ไขกราฟิกอาจย้อนกลับมา เป็นเรื่องปกติที่จะทดสอบและตัดสินใจออกแบบในเบราว์เซอร์ คุณเคยได้ยินมาก่อน คุณจะได้ยินมันอีกครั้ง มันไม่เกี่ยวกับรูปลักษณ์ แต่อยู่ที่วิธีการทำงาน

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

• คอมพ์แบบคงที่อาจไม่ได้รับข้อความที่ถูกต้อง รูปลักษณ์และความรู้สึกจะแตกต่างออกไปมากเมื่อคุณผสานรวมอินเทอร์แอกทีฟ เช่น สถานะโฮเวอร์ ทรานซิชัน และแอนิเมชั่น

• แทนที่จะใช้เวลาหลายชั่วโมงเป็นชั่วโมงๆ ในการออกแบบแบบจำลองสแตติกหลายๆ แบบสำหรับความละเอียดหลายๆ แบบ ฉันสามารถประหยัดเวลาได้มากโดยเริ่มเขียนโค้ดตั้งแต่เนิ่นๆ การปรับแต่ง CSS ช่วยให้ฉันสามารถแสดงการเปลี่ยนแปลงและการตอบสนองอย่างรวดเร็วต่อไคลเอนต์บนอุปกรณ์ต่างๆ — สมาร์ทโฟน แท็บเล็ต ฯลฯ

ดังนั้น ประหยัดเวลาและเปิดตัวแก้ไขโค้ดและเบราว์เซอร์ของคุณเพื่อเริ่มสร้าง UX โดยเร็วที่สุด จากประสบการณ์ของผม ลูกค้าส่วนใหญ่จะขอจำลองหน้าหนึ่งหรือสองหน้าก่อนที่เราจะสามารถดำเนินการเขียนโค้ดได้ ซึ่งถือว่าเป็นเรื่องปกติ สิ่งสำคัญสำหรับลูกค้าคือต้องมีความรู้สึกที่ดีเกี่ยวกับการออกแบบในอนาคต ฉันมักจะใช้ InVision ซึ่งเป็นเครื่องมือที่ยอดเยี่ยมในการติดตามการจำลองช่วงแรกๆ การเปลี่ยนแปลง ความคิดเห็น และอื่นๆ อย่างไรก็ตาม สิ่งสำคัญสำหรับลูกค้าคือต้องเข้าใจว่า Sketch และ InVision จะเข้าถึงได้ไม่ไกลนัก

การสร้างโมดูลสำหรับการพัฒนาส่วนหน้า

เมื่อลูกค้าพอใจกับภาพปะติดของโมดูลและแบบจำลองที่ฉันออกแบบแล้ว ฉันสามารถเริ่มเขียนโค้ดและกำหนดรูปลักษณ์ที่แท้จริงขององค์ประกอบเหล่านั้นได้

การออกแบบโมดูลาร์เชื่อมโยงกับการพัฒนาแบบแยกส่วนในกระบวนการวนซ้ำ ฉันเขียนโค้ดโมดูล จากนั้นลองใช้ในเบราว์เซอร์เพื่อดูว่ามันทำงานอย่างไร จากนั้นให้ทำซ้ำหากจำเป็น อีกครั้ง กระบวนการนี้เหมือนกับการสร้างตัวต่อเลโก้ โดยพื้นฐานแล้วคุณจะออกแบบและพัฒนาไปพร้อม ๆ กัน และลองใช้รูปแบบต่างๆ จนกว่าคุณจะรู้สึกดีกับมัน

ฉันมักจะเริ่มพัฒนาโมดูลด้วยการสร้างบางสิ่งที่เรียบง่าย เช่น ปุ่ม ลองนึกภาพว่าคุณกำลังสร้างมันขึ้นมาเอง และคุณจำเป็นต้องเขียนโค้ดปุ่มสีส้ม ซึ่งโดยทั่วไปจะใช้สำหรับแบบฟอร์มการติดต่อ นี่คือสิ่งที่คุณอาจคิดได้:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

ง่ายพอใช่มั้ย? คุณต้องใช้คลาส .submit-button กับ HTML ของคุณ ซึ่งจะช่วยแก้ปัญหาปัจจุบันของคุณได้ ทีนี้ จะเกิดอะไรขึ้นเมื่อคุณต้องสร้างปุ่มใหม่ แบบเดียวกับปุ่มนั้น แต่มีสีพื้นหลังสีน้ำเงิน คุณอาจจะคัดลอกคลาสนั้นแล้วเปลี่ยนชื่อคลาสและสีพื้นหลัง รวดเร็วและสกปรก ลองนึกภาพว่าคุณจำเป็นต้องใช้ปุ่มเดียวกัน แต่มีพื้นหลังสีส้ม คุณสามารถดูได้ว่าสิ่งนี้กำลังจะเกิดขึ้น คุณอาจจบลงด้วย CSS จำนวนมากที่ถูกทำซ้ำ ในโครงการขนาดเล็กมาก เรื่องนี้อาจไม่ใช่ปัญหาจริง แต่สำหรับโครงการที่ใหญ่กว่านี้ อาจกลายเป็นปัญหาได้ ก่อนที่คุณจะรู้ตัว CSS ของคุณจะบวมและดูแลรักษายาก

หากคุณเคยพัฒนาโครงการขนาดกลางถึงขนาดใหญ่ ไม่ต้องสงสัยเลยว่าคุณประสบปัญหาปวดหัวพอสมควร สิ่งเหล่านี้อาจเกิดจากสาเหตุใดสาเหตุหนึ่งดังต่อไปนี้:

• รหัสที่ยุ่งเหยิง ไม่สอดคล้องกัน ยากต่อการสแกนและทำความเข้าใจ
• รหัสป่องและไฟล์ XXL CSS ที่มีการทำซ้ำจำนวนมาก
• รหัสที่รักษายาก
• ขาดการแยกโครงสร้างและผิวหนัง

ไม่ต้องกังวล คุณไม่ได้อยู่คนเดียว ฉันพนันได้เลยว่านักพัฒนา front-end ทุกคนต้องเจอกับปัญหาที่เจ็บปวดเหล่านั้นเป็นครั้งคราว และอาจมากกว่านั้นอีกมากมาย ฉันสามารถพูดได้อย่างปลอดภัยว่าฉันเคยมีโครงการมากมายในอดีต ซึ่งฉันพบปัญหาทั่วไปเหล่านั้นทั้งหมด

วิธีหนึ่งในการหลีกเลี่ยงหรือลดปัญหาเหล่านั้นให้เหลือน้อยที่สุดคือการสร้างแบบโมดูลาร์

ปุ่มโมดูลาร์

จะเข้ารหัสปุ่มนั้นด้วยวิธีโมดูลาร์ได้อย่างไร? วิธีการแบบแยกส่วนคือการเขียนโค้ดซึ่งคุณสามารถใช้ซ้ำได้ จำ Legos เหล่านั้นซึ่งสามารถใช้และนำกลับมาใช้ใหม่ได้อีกครั้ง

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

สิ่งที่เราทำคือการแยกสไตล์ที่ชาญฉลาด คลาส .button มีสไตล์ที่ทุกปุ่มในโปรเจ็กต์ของคุณใช้ คุณจึงไม่ต้องทำซ้ำ คลาส .button-orange ใช้เฉพาะสไตล์ที่เกี่ยวข้องกับปุ่มสีส้มเท่านั้น คุณจะทำเช่นเดียวกันกับปุ่มอื่นๆ ทั้งหมด และกำหนดสีพื้นหลังและข้อความของปุ่มเหล่านั้น

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

สิ่งที่เกี่ยวกับสิ่งที่ซับซ้อนมากขึ้น?

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

สำหรับการอ่านเพิ่มเติมเกี่ยวกับการพัฒนา front-end แบบแยกส่วน ฉันขอแนะนำ SMACSS ซึ่งเป็นสถาปัตยกรรมที่ฉันมักจะใช้กับโปรเจ็กต์ทั้งหมดของฉัน ไม่ว่าจะเล็กหรือใหญ่

โปรดจำไว้ว่า กระบวนการแบบแยกส่วนนั้นเกี่ยวกับการสร้าง การทดสอบ และการทำซ้ำ โมดูลแรกจะถูกสร้างขึ้นในโปรแกรมแก้ไขของคุณ จากนั้นจึงทดสอบในเบราว์เซอร์ จากนั้นจึงทำซ้ำหากจำเป็น ทำซ้ำรอบนั้นเมื่อจำเป็น

เกี่ยวข้องกับลูกค้า

อย่าลืมความต้องการของลูกค้า — พวกเขาต้องการรับรู้และได้รับการยืนยันว่าพวกเขาได้รับเงินอย่างคุ้มค่า ความงามของกระบวนการพัฒนานี้คือลูกค้าสามารถเป็นสมาชิกในทีมของคุณได้ คุณสามารถแสดงโมดูลให้พวกเขาเห็นได้อย่างปลอดภัย และพวกเขามองข้ามขั้นตอนการพัฒนาและนำเสนอได้ตลอดเวลาเพื่อทำให้ผลิตภัณฑ์ดีขึ้น พวกเขาไม่ต้องรอให้คอมพ์แบบคงที่เสร็จสิ้นหรือถึงขั้นก่อนที่จะเห็นความคืบหน้าที่แท้จริง หากคุณใช้เวลาสักครู่เพื่ออธิบายวิธีการทำงานของโมดูลแก่ลูกค้าของคุณ พวกเขาจะมีความเข้าใจและความซาบซึ้งในกระบวนการออกแบบที่ดีขึ้น รวมถึงเวลาที่ใช้ในการสร้างโมดูลเหล่านั้น

วิธีที่ฉันมักจะนำเสนอโมดูลแก่ลูกค้าก็เหมือนกับที่ Bootstrap ทำ การตั้งค่าโมดูลแบบแยกพร้อมกับโค้ดเป็นวิธีที่ดีในการให้นักออกแบบ นักพัฒนา และลูกค้ามีส่วนร่วมในกระบวนการ

ใช้โมดูลที่คุณสร้างเป็นหน่วยการสร้างสำหรับเพจ สำหรับหน้าดัชนีของคุณ คุณอาจวางโมดูลการนำทางไว้ด้านบน ถัดไปโมดูลฮีโร่ ถัดจากโมดูลเนื้อหาบางส่วน จากนั้นให้ส่วนท้ายของคุณอยู่ด้านล่าง ก่อนที่คุณจะรู้ คุณมีเพจสำหรับต้นแบบ HTML อยู่แล้ว แต่ต้นแบบคืออะไรกันแน่? ฉันชอบคำจำกัดความของต้นแบบของ Leah Buley จากหนังสือที่ยอดเยี่ยมของเธอ The User Experience Team of One:

ตัวอย่างการทำงานหรือกึ่งการทำงานว่าการออกแบบควรทำงานและดำเนินการอย่างไรเมื่อนำไปใช้งาน

ด้วยการสร้างต้นแบบ นั่นคือสิ่งที่คุณจะได้รับในช่วงเริ่มต้นของโครงการ — เว็บไซต์กึ่งฟังก์ชัน ในกรณีที่การจำลองแบบคงที่และ InVision ล้มเหลว ต้นแบบ HTML นั้นยอดเยี่ยม ต้นแบบทำหน้าที่เป็นการส่งมอบที่ตอบสนองได้อย่างสมบูรณ์แบบสำหรับลูกค้าของคุณ และเมื่อลูกค้าพอใจกับรูปลักษณ์ของต้นแบบของคุณแล้ว สิ่งที่คุณต้องทำคือขัดมันจนกว่าจะทำงานตามที่ต้องการ สร้าง ทดสอบ ทำซ้ำ

นำหน่วยการสร้างกลับมาใช้ใหม่

โมดูลและต้นแบบจะช่วยให้คุณนำรหัสกลับมาใช้ใหม่สำหรับโครงการปัจจุบัน แต่สำหรับโครงการในอนาคตด้วย การปรับแต่งโมดูลจากโปรเจ็กต์ล่าสุดสามารถช่วยคุณประหยัดเวลาได้มาก — โมดูลที่คุณต้องการในแต่ละโปรเจ็กต์มักจะคล้ายกัน ฉันมีไลบรารีโมดูลขนาดใหญ่ที่ฉันมักใช้ซ้ำ: แท็บ เมนูการนำทาง ปุ่ม เบรดครัมบ์ แบบฟอร์ม ตาราง การแบ่งหน้า รายการ ฯลฯ แม้ว่าโค้ดของโมดูลเหล่านั้นจะไม่เหมือนกันในทุกโครงการ แต่ก็เป็นส่วนที่ดี สามารถนำกลับมาใช้ใหม่ได้ ช่วยประหยัดเวลาในการพัฒนาอย่างมาก คำแนะนำของฉันสำหรับคุณคือการสร้างโมดูลที่ใช้ซ้ำได้สำหรับตัวคุณเองด้วย ลองดู BASSCSS, Pure และ Refills เพื่อรับแรงบันดาลใจ

อย่าท้อแท้หากการเปลี่ยนไปใช้การออกแบบและการพัฒนาแบบแยกส่วนต้องใช้เวลา โดยธรรมชาติแล้ว หากหลักการแบบแยกส่วนนั้นใหม่สำหรับคุณ พวกเขาจะต้องปรับแต่งกระบวนการออกแบบและพัฒนาของคุณ แต่การเปลี่ยนแปลงอาจพิสูจน์ได้ว่าคุ้มค่า

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