เมื่อคุณซื้อผ่านลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร นี่คือวิธีการทำงาน.

ป้อนไฟล์เริ่มต้น

โซลูชันของเราคือชุดของไฟล์ HTML, CSS และ JS ที่เราใช้ในการเริ่มต้นโปรเจ็กต์ (ซึ่งก็คือ 'ไฟล์เริ่มต้น') โดยพื้นฐานแล้วมันเป็นฐานโค้ดแบบรวมที่รองรับการส่งมอบบนเว็บทั้งสี่รายการของเรา และด้วยเหตุนี้ จึงถูกจัดระเบียบตามการส่งมอบโครงการของเรา:

  • สินทรัพย์ระดับโลก (ใช้โดยการส่งมอบทั้งหมด)
  • สินทรัพย์ที่ใช้ร่วมกัน (ใช้โดยการส่งมอบมากกว่าหนึ่งรายการ)
  • สินทรัพย์เฉพาะที่สามารถส่งมอบได้ (ใช้โดยการส่งมอบเพียงรายการเดียวเท่านั้น)

ตัวอย่างเช่น Sass สำหรับภาพตัดปะองค์ประกอบของเราจะนำเข้าเนื้อหาระดับโลก แบ่งปัน และเฉพาะการส่งมอบที่จำเป็นทั้งหมด:

//บางส่วนทั่วโลก//
@import "global-partials/utils";
@import "ส่วนกลางบางส่วน/ตัวแปร";
@import "ส่วนกลางบางส่วน/มิกซ์อิน";
@import "ส่วนกลางบางส่วน/ตาราง";
@import "ส่วนกลางบางส่วน/ตัวยึดตำแหน่ง";
@import "ส่วนกลางบางส่วน/ทำให้เป็นมาตรฐาน";
// แบ่งปันบางส่วน //
@import "แชร์บางส่วน/สี";
@import "shared-partials/fonts";
@import "shared-partials/shell";
@import "shared-partials/type";


//องค์ประกอบภาพตัดปะบางส่วน//
@import "ภาพตัดปะบางส่วน/ตัวแปร";
@import "ภาพตัดปะบางส่วน/กำหนดเอง";

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

การรวมของเราเป็นตัวแทนของ HTML 'เชลล์' เช่น DOCTYPE ของเรา, และโครงสร้างหน้า การเรียกใช้แต่ละครั้งที่เชลล์เหล่านี้รวมเข้ากับ PHP พื้นฐานประกอบด้วย:

โมดูลของเรานั้นเป็นเพียงตัวอย่างโค้ดของรูปแบบ HTML (รวมถึงค่าคลาส) สำหรับเนื้อหาทั่วไป เช่น รูปภาพที่มีคำบรรยาย:


ข้อความแสดงแทนที่นี่
คำบรรยายภาพ

เมื่อการส่งมอบใดๆ ของเราต้องแสดงรูปภาพพร้อมคำบรรยาย เราก็เพียงรวมตัวอย่างข้อมูลด้วย PHP พื้นฐานดังนี้:

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

แต่จากมุมมองภายใน สิ่งเหล่านี้สร้างขึ้นจากกันและกันอย่างแท้จริง โดยอาศัยโค้ดที่ใช้ร่วมกันเพื่อสร้างการส่งมอบที่สม่ำเสมอโดยมีการทำซ้ำน้อยลง

ทำตามที่ฉันพูด ไม่ใช่อย่างที่ฉันทำ

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

เช่นเดียวกับ Sass ของเรา เนื้อหา HTML ได้รับการจัดระเบียบตามการส่งมอบ เนื้อหาเหล่านี้ถูกทำให้เป็นโมดูลเป็นส่วนย่อยที่แสดงรูปแบบ HTML ของเราสำหรับเนื้อหาทั่วไป
เช่นเดียวกับ Sass ของเรา เนื้อหา HTML ได้รับการจัดระเบียบตามการส่งมอบ เนื้อหาเหล่านี้ถูกทำให้เป็นโมดูลเป็นส่วนย่อยที่แสดงรูปแบบ HTML ของเราสำหรับเนื้อหาทั่วไป

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

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

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

แต่ก่อนอื่นการวางแผน

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

  • เราต้องการทำงานในปัจจุบันและอนาคตอย่างไร?
  • แบบแผนการตั้งชื่อของเราคืออะไร: ไม่ใช่แค่ชื่อคลาส แต่สำหรับชื่อไฟล์และไดเร็กทอรี?
  • เราต้องการจัดระเบียบไฟล์และไดเร็กทอรีอย่างไร?
  • รูปแบบของเรามีอะไรบ้าง? สำหรับ HTML และ CSS แม้แต่ JS?
  • อะไรที่สามารถแบ่งปันได้ และอะไรคือสิ่งที่เป็นเอกลักษณ์เฉพาะของสิ่งที่ส่งมอบแต่ละรายการ?

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

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

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

Starter Files รองรับการส่งมอบบนเว็บทั้งสี่รายการของเรา ทำให้เรามีระบบบูรณาการซึ่งมีการแบ่งปันโค้ดในการส่งมอบทั้งหมด
Starter Files รองรับการส่งมอบบนเว็บทั้งสี่รายการของเรา ทำให้เรามีระบบบูรณาการซึ่งมีการแบ่งปันโค้ดในการส่งมอบทั้งหมด

สุดท้ายนี้ เราปฏิบัติต่อ Starter Files เหมือนเป็นโปรเจ็กต์ไคลเอนต์ ทุกอย่างได้รับการควบคุมเวอร์ชันด้วย Git และแจกจ่ายบนพื้นที่เก็บข้อมูลส่วนกลาง Beanstalk ทุกอย่างได้รับการบันทึกไว้ใน Google Doc ที่ใช้ร่วมกัน และเอกสารนี้จะได้รับการอัปเดตทุกครั้งที่มีการอัปเดตไฟล์เริ่มต้น

เก็บเกี่ยวผลตอบแทน

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

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

คำ: เอมิลี่ ลูอิส

Emily เป็นเจ้าของและเป็นหัวหน้านักพัฒนาของ ร่มสดใส. บทความนี้เดิมปรากฏใน นิตยสารเน็ต.

แบบนี้? อ่านสิ่งเหล่านี้!

  • 11 ชุด UI ฟรีที่ยอดเยี่ยมสำหรับนักออกแบบเว็บไซต์
  • ค้นพบ แพลตฟอร์มบล็อกที่ดีที่สุด
  • ฉลาดหลักแหลม กวดวิชาเวิร์ดเพรส การเลือก