Plain Vanilla - พัฒนาเว็บด้วยเทคโนโลยีวานิลลา

• ให้ภาพรวมของเทคนิคหลักในการสร้างเว็บไซต์และเว็บแอปพลิเคชันโดยไม่ใช้เครื่องมือ build หรือเฟรมเวิร์ก ใช้เพียงเอดิเตอร์ เบราว์เซอร์ และมาตรฐานเว็บเท่านั้น (HTML/CSS/Javascript ล้วน ๆ)
• หัวข้อที่ครอบคลุมมีดังนี้:
  • Components: ใช้ Web Components เป็นองค์ประกอบพื้นฐานสำหรับสร้าง primitive ระดับสูงด้วย HTML, JavaScript, CSS ล้วน ๆ เพื่อทดแทนแนวทางคอมโพเนนต์ของเฟรมเวิร์กอย่าง React หรือ Vue
  • Styling: ใช้ความสามารถของ CSS สมัยใหม่ให้เต็มที่เพื่อทดแทนความสะดวกของ CSS Modules, PostCSS, SASS
  • Sites: สร้างโปรเจ็กต์เว็บบนพื้นฐานของเว็บคอมโพเนนต์ และนำขึ้น production โดยไม่ต้องมีเครื่องมือ build, เฟรมเวิร์ก หรือ logic ฝั่งเซิร์ฟเวอร์
  • Applications: วิธีสร้าง single-page web application ด้วยเทคโนโลยีวานิลลา วิธีทำ routing และวิธีจัดการ state
• บทสอนนี้เหมาะสำหรับผู้ที่รู้จัก HTML, CSS, JavaScript อยู่แล้ว หากคุณยังอยู่ในขั้นเริ่มต้นของการเรียนรู้การพัฒนาเว็บ เว็บไซต์นี้ยังไม่เหมาะนัก

ทำไมต้องทำแบบนั้น?

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

[yangeok]

แม้แต่การทำแอปแผนที่ง่ายๆ ด้วยวานิลลา ไฟล์ก็ยืดยาวเกินไปจริงๆ นะ

[ahwjdekf]

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

[cosine20]

ทุกคนบอกว่าขี้เกียจกันน่ะ 555

[botplaysdice]

สมัยดึกดำบรรพ์นู้น.... เราเขียนกันแบบนี้...

int main(int argc, char *argv) {
...
char url = getenv("QUERY_STRING");
...
printf("HTTP/1.0 200 OK");
..
blahblah...
...
}

[axgux]

นึกถึงตอนก่อนที่เคยทำ SPA ด้วยวานิลลาเลย.. ตอนนั้นยังเป็นมือใหม่มาก ๆ เลยไม่รู้จัก fetch ก็เลยนั่งทำทีละอย่างด้วย xhr..

[aer0700]

ว่ากันว่าสุดทางของการปรับแต่งก็คือของเดิมจากโรงงาน...

[kandk]

สเปกการจูนอาจถูกรวมเข้าไปเป็นสเปกมาตรฐานก็ได้..

[galadbran]

John Resig มาออกรายการใน Syntax.fm ตอนที่ 800 แล้ว! ^^