HTML First

แนะนำหลักการ HTML First

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

เป้าหมายของ HTML First

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

เป้าหมายข้อที่สองของ HTML First

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

วิธีทำให้ HTML First เกิดขึ้นจริง

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

หลักการ: ให้ความสำคัญกับแนวทาง Vanilla

• ใช้แอตทริบิวต์ HTML ในการกำหนดสไตล์และพฤติกรรม
• ใช้ไลบรารีที่อาศัยแอตทริบิวต์ HTML
• หลีกเลี่ยงขั้นตอน build
• นิยมใช้ HTML แบบ "Naked"
• ใช้แนวทางที่เป็นมิตรกับ View-Source

ใช้ความสามารถที่เบราว์เซอร์รองรับมาแต่เดิม

• บรรลุฟังก์ชันต่าง ๆ ด้วยแนวทาง "vanilla" มากกว่าการพึ่งเฟรมเวิร์กภายนอก
• ก่อนเพิ่มไลบรารีหรือเฟรมเวิร์ก ให้ตรวจสอบก่อนว่าสามารถทำได้ด้วย HTML/CSS ล้วนหรือไม่

กำหนดสไตล์และพฤติกรรมด้วยแอตทริบิวต์ HTML

• การจัดสไตล์สามารถทำได้ด้วยไลบรารี SPC เช่น Tailwind หรือ Tachyons
• พฤติกรรมสามารถใช้ไลบรารีอย่าง hyperscript, Alpine เป็นต้น
• HTML อาจดูซับซ้อนขึ้น แต่ทำให้นักพัฒนาคนอื่นเข้าใจและแก้ไขได้ง่าย

ใช้ไลบรารีที่อาศัยแอตทริบิวต์ HTML

• แนะนำให้ใช้ไลบรารีที่อาศัยแอตทริบิวต์ HTML มากกว่าไลบรารีที่ยึด JavaScript หรือไวยากรณ์แบบกำหนดเองเป็นศูนย์กลาง

หลีกเลี่ยงขั้นตอน build

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

นิยมใช้ HTML แบบ "Naked"

• เป็นหลักการที่นำไปใช้ได้มากที่สุดกับการพัฒนาแบ็กเอนด์
• นักพัฒนาที่คุ้นเคยกับ HTML สามารถเข้าใจไฟล์ view ได้ แม้ไม่รู้จักเฟรมเวิร์กฝั่งแบ็กเอนด์ก็ตาม

รักษาความสามารถ View-Source

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

สรุป

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

ความเห็นของ GN⁺

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

[GN⁺]

ความคิดเห็นจาก Hacker News

• ในทางทฤษฎีหรือในตัวอย่างง่าย ๆ มันก็น่าสนใจ แต่จำเป็นต้องมีกรณีศึกษาที่แสดงให้เห็นว่าหลักการเหล่านี้ถูกนำไปใช้กับโปรเจกต์ขนาดใหญ่และสร้างความแตกต่างได้อย่างไร
• เห็นด้วยกับการใช้ประโยชน์จากเว็บแพลตฟอร์มให้มากที่สุดและลดความซับซ้อนลง แต่ก็ยังสงสัยว่าหลักการที่นำเสนอมาจะช่วยลดความซับซ้อนในทางปฏิบัติได้จริงหรือไม่
• การใช้ความสามารถพื้นฐานของ HTML เป็นเรื่องที่ดี แต่ทั้งเมื่อ 10 ปีก่อนและตอนนี้ก็ยังไม่ค่อยใช้งานได้จริง และไม่ได้รู้สึกว่า htmx จะดีกว่าโซลูชันหนัก ๆ อย่าง React
• เมื่อต้องทำฟังก์ชันอย่างดรอปดาวน์ มัลติซีเล็กต์ และตัวเลือกวันที่ ความสม่ำเสมอระหว่างเบราว์เซอร์ไม่มีและการปรับแต่งสไตล์ก็มีข้อจำกัด ดังนั้นองค์ประกอบ HTML แบบฝังตัวเพียงอย่างเดียวจึงไม่เพียงพอ
• ตัวอย่างยังอ่อน และการกำหนดสไตล์กับพฤติกรรมผ่านแอตทริบิวต์ HTML แบบอินไลน์อาจทำให้ซับซ้อนขึ้นได้
• เมื่อจำเป็นต้องใช้ไลบรารี ก็เห็นด้วยกับการใช้ไลบรารีที่อาศัยแอตทริบิวต์ HTML แทน JavaScript หรือไวยากรณ์แบบกำหนดเอง
• ปรัชญานี้เข้ากันได้ดีกับการพัฒนาแพลตฟอร์ม SaaS ที่ประกอบขึ้นจากมาร์กอัป HTML ล้วน
• ดูเป็นแอนติแพตเทิร์นและคำแนะนำที่ไม่ดีจากคนที่ไม่เคยผ่านกระบวนการสร้างเว็บไซต์ที่ซับซ้อนมาก่อน
• เห็นด้วยกับข้ออ้างที่ว่าผู้ใช้ควรจะเข้าใจได้ผ่านการดูซอร์ส แต่สำหรับเว็บแอป การใช้ภาษาที่มีระบบชนิดข้อมูลน่าจะเหมาะสมกว่า
• "ความเป็นท้องถิ่นของพฤติกรรม" เป็นกฎที่นิยามอย่างคลุมเครือซึ่งขัดกับการแยก concerns และการเรียก CSS ว่าเป็น "การกระทำชวนขนลุกจากระยะไกล" ก็เป็นการพูดเกินจริง