เลือกใช้ Gatsby เพราะจะได้เอาเวลามาพัฒนาเว็บ ไม่ใช่มานั่งเซ็ตอัพ webpack, Babel, React Router, ฯลฯ

เขียนโดย: Thai Pangsakulyanont

ด้วยว่าเรามีเวลาทำเว็บ ELECT Live! กันแค่ 8 วัน (อย่างกับทำเว็บ Prototype) แต่เนื่องจากไหน ไม่ได้เลือกตั้งมา 8 ปีแล้ว โปรเจกต์แบบนี้นาน ที ก็เลยอยากจัดเต็ม และทำให้เป็นเว็บแบบ Production-grade ไปเลย

หนึ่งใน Goal ส่วนตัวของผมคือผมอยากทำให้เว็บนี้โหลดเร็วที่สุดในบรรดาเว็บแสดงผลการเลือกตั้ง ซึ่งจะทำแบบนี้ การมานั่ง Optimize มือ ก็อาจจะไม่ทันเวลาที่ค่อนข้างน้อย

การจะทำเว็บด้วย React ให้โหลดเร็วและพัฒนาสะดวก ต้องคำนึงถึงหลาย ปัจจัย:

  • เซ็ตอัพ Build tooling ให้มี Development server เพื่อการพัฒนาและทดสอบอย่างรวดเร็ว
  • Minification ย่อขนาดโค้ดเพื่อให้โค้ดที่ผู้ใช้ต้องโหลดมีขนาดเล็ก
  • Caching การตั้งชื่อไฟล์ แล้วตั้งค่า HTTP Header เพื่อให้สามารถ cache โค้ดและข้อมูลได้อย่างมีประสิทธิภาพสูงสุด
  • Code splitting แยกโค้ดของแต่ละส่วนออกเป็นไฟล์ย่อย ตอนที่ผู้ใช้เข้ามา จะได้โหลดแค่โค้ดเท่าที่ต้องใช้ ไม่ต้องรอให้โค้ด JavaScript ทั้งหมดโหลดเสร็จก่อนถึงใช้งานได้
  • Critical CSS inlining ยัดโค้ด CSS ที่ถูกใช้ในหน้าเว็บไว้ในไฟล์ .html ไปเลย จะได้ไม่ต้องรอโหลดไฟล์ .css
  • Pre-rendering แสดงเนื้อหาสำคัญในหน้าเว็บโดยไม่ต้องรอให้โหลดไฟล์ .js
  • Preloading and prefetching บอกเว็บเบราว์เซอร์ตั้งแต่เริ่มโหลดหน้าเว็บว่าเดี๋ยวจะต้องการใช้ไฟล์อะไรอีกบ้าง

ซึ่งถ้าต้องมาเซ็ตอัพทั้งหมดนี่เอง คงใช้เวลาหลายวัน

สุดท้ายผมเลือกใช้ Gatsby สำหรับโปรเจกต์นี้ เพราะว่า…

ลงปุ๊ปใช้ได้เลย

ทันทีที่เซ็ตอัพโปรเจกต์ด้วย Gatsby เราสามารถสั่ง yarn start แล้วเริ่มเขียนโค้ดได้เลย โดยสามารถใช้ ES2018+, JSX, CSS (ทั้งแบบธรรมดาและ CSS modules) ได้ทันทีโดยไม่ต้องตั้งค่าอะไรเพิ่ม นอกจากนี้ยังมีการตั้งค่าระบบ Hot Reload ทำให้พอกด Save แล้วสามารถดูผลได้ทันทีโดยไม่ต้อง Refresh เบราว์เซอร์

สำหรับการ Build สามารถสั่ง yarn build เพื่อให้ Gatsby สร้างเป็นไฟล์หน้าเว็บที่พร้อมอัพโหลดขึ้นเซิร์ฟเวอร์ โดย Gatsby จะทำการ Minify โค้ด, Inline critical CSS, ใส่แท็ก Preload/Prefetch ต่าง, เอา Hash ของไฟล์มาใส่ในชื่อไฟล์เพื่อเพิ่มประสิทธิภาพการ Caching โดยไม่ต้องตั้งค่าอะไรเพิ่ม

ตัว Gatsby รวม Tools หลาย ตัวเข้าด้วยกัน โดยที่เราไม่ต้องยุ่งกับไฟล์ Config ของแต่ละตัว (เช่น webpack.config.js, .babelrc) เลย

เพิ่มเพจเพียงสร้างไฟล์ใน src/pages

ปกติเวลาทำเว็บด้วย React ถ้าต้องการทำให้เว็บมีหลาย หน้า ก็ต้องไปหา Router มาใช้อีก แต่สำหรับ Gatsby แค่เพิ่มไฟล์ใหม่ในโฟลเดอร์​ src/pages ก็จะได้หน้าใหม่มาเลย

นอกจากนี้เรายังสามารถ Generate หน้าเว็บหลาย หน้า จากไฟล์ข้อมูลได้อีกด้วย ทำให้แทบทุกหน้าในเว็บ ELECT Live! มี URL ของมันเอง

มีคู่มือครบครัน

หนึ่งในจุดแข็งสุด ของ Gatsby คือ Documentation ของมันรวมหลากหลายหัวข้อไว้ และมี Recipe หรือสูตรสำเร็จสำหรับการทำสิ่งต่าง ใน Gatsby เช่น

มีปลั๊กอินให้ใช้หลากหลาย

เราสามารถเพิ่มความสามารถให้ Gatsby หลาย อย่าง ผ่านการติดตั้งปลั๊กอิน เมื่อติดตั้งแล้ว ก็สามารถเรียกใช้ โดยการแก้ไฟล์​ gatsby-config.js เพียงไฟล์เดียว โดยตัวปลั๊กอินสามารถตั้งค่าเครื่องมือเบื้องหลัง เช่น webpack, Babel และการทำงานอื่น ของตัว Gatsby โดยที่เราไม่ต้องไปแก้แต่ละส่วนเองเลย

ปลั๊กอินที่เราใช้ในเว็บ ELECT Live!:

  • gatsby-plugin-emotion ช่วยให้เราแต่งหน้าเว็บได้ง่ายขึ้น ด้วย Emotion
  • gatsby-plugin-react-helmet เอาไว้เพิ่มพวก Meta Tag ต่าง เพื่อ Optimize SEO
  • gatsby-plugin-web-font-loader เอาไว้โหลดฟอนต์จาก Google Fonts โดยที่ไม่บล็อกการ Render หน้าเว็บ
  • gatsby-plugin-layout เอาไว้กำหนด Component สำหรับใช้เป็น Layout เพื่อให้ไม่ถูก Unmount ทุกครั้งที่เปลี่ยนหน้า
  • gatsby-plugin-google-analytics เอาไว้ใส่โค้ด Google Analytics พร้อมกับ Track Page View ในแต่ละหน้า โดยมีการ Integrate เข้ากับตัว Router ให้เลย
  • gatsby-plugin-facebook-pixel เอาไว้ใส่โค้ด Facebook Pixel
  • gatsby-plugin-manifest เอาไว้สร้าง Progressive Web App Manifest File เพื่อให้สามารถ Add เข้า Home Screen ได้
  • gatsby-plugin-htaccess เอาไว้สร้างไฟล์ .htaccess สำหรับ Apache Web Server เพื่อให้มีการกำหนด Cache-Control header ตรงตามที่คู่มือแนะนำ
  • gatsby-plugin-netlify เอาไว้สร้างไฟล์ Config สำหรับ Netlify ที่เราใช้เพื่อดูตัวอย่างของเว็บ ก่อนที่จะปล่อยขึ้น Production ให้ทุกคนใช้

สรุปแล้ว การใช้ Gatsby ช่วยประหยัดเวลาในการพัฒนาเว็บไซต์ได้เยอะมาก เพราะเราสามารถเอาเวลาไปโฟกัสกับการพัฒนาตัวเว็บได้ แทนที่จะต้องมาคิดเรื่องการ Set up เครื่องมือต่าง และการ Optimize เว็บแบบเบื้องต้น