ทำไม Gatsby และ Vercel ถึงเป็นตัวเลือกที่ยอดเยี่ยมสำหรับโปรเจกต์ต่างๆ มากมาย

มีหลากหลายวิธีการมากมายในการรังสรรค์เว็บไซต์ขึ้นมา

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

ผมรู้สึกทึ่งอยู่บ่อยๆ กับการสร้าง Apps และ Service ต่างๆ โดยไม่ต้องเขียนโค้ดเลยซักบรรทัดเดียวด้วยบริการต่างๆ เช่น Wix Weebly Zappier หรือการสร้างฟอร์มและฝากเก็บข้อมูลไว้กับ Host ของบริการนั้นๆ เป็นต้น ต้องยอมรับเลยว่าผมแทบไม่เคยใช้บริการพวกนี้เลยเพราะผมไม่ค่อยรู้รายละเอียดและวิธีการของบริการเหล่านี้มากนัก และอีกข้อคือผมรู้สึกสนุกมากกว่ากับการรังสรรค์สิ่งต่างๆ ด้วยการเขียนโค้ด

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

Gatsby ช่างมีประสิทธิภาพยอดเยี่ยม

จริงๆ แล้ว Gatsby ก็เป็นเครื่องมือที่ทำให้นักพัฒนาอย่างเราสะดวกสบายแทบไม่ต้องติดตั้งอะไรเองให้ยุ่งยากเพราะมี Plugin พร้อมสรรพมากมายให้เลือกใช้ สิ่งที่นักพัฒนาอย่างเราต้องทำก็แค่ใช้คำสั่ง npm install เพื่อติดตั้ง Plugin จากนั้นก็เพิ่ม Plugin เข้าไปใน Gatsby Config พร้อมกับใส่การตั้งค่าต่างๆ แค่นี้ทุกๆ อย่างก็พร้อมใช้งานแล้ว

แต่การใช้งาน Plugin ต่างๆ เป็นเพียงส่วนเล็กๆ ส่วนหนึ่งเท่านั้นของสุดยอดเครื่องมืออย่าง Gatsby จริงๆ แล้ว Gatsby เป็นเครื่องมือที่ไว้ใช้สร้างเว็บไซต์แบบ Static Site ซึ่งมุ่งเน้นในส่วนของการแสดงเนื้อหาโดยไม่จำเป็นต้องมี Backend จึงทำให้ประสิทธิภาพในการแสดงผลรวมถึงความเร็วนั้นดีมากๆ เมื่อทำเสร็จเราสามารถ Build และนำขึ้น Server ได้โดยพวก S3 และ Global CDN Network

สิ่งที่ Gatsby แตกต่างจากพวกเครื่องมือสร้างเว็บไซต์แบบ Static Site อื่นๆ ก็คือเทคโนโลยีที่ใช้ โดย Gatsby จะใช้ React GraphQL และ Webpack ซึ่ง Gatsby จะใช้ GraphQL ในช่วง Build ร่วมกับเหล่า Plugin ต่างๆ เพื่อดึงข้อมูลมาแสดงในหน้าเว็บไซต์ ข้อมูลจะมาจากแหล่งข้อมูลใดๆ ก็ได้ ไม่ว่าจะเป็นข้อมูลจาก MySQL ที่ฝากไว้กับ Host ใดซักที่หนึ่ง หรืออาจะเป็นไฟล์ Markdown ที่อยู่ใน Repository เดียวกับโค้ดก็ได้ หรืออาจจะมาจากเว็บไซต์ซื้อขายออนไลน์อย่าง Shopify หรือทวีตของคุณใน Twitter ก็เป็นไปได้

GraphQL queries จะช่วยนำข้อมูลมาแสดงบนเว็บไซต์โดยหลังจาก Build เสร็จ Gatsby จะสร้างเป็น HTML และ Asset ต่างๆ พร้อมนำไปเปิดแสดงเป็นหน้าเว็บที่มีข้อมูลเนื้อหาครบถ้วน จริงๆ แล้วเราอาจจะดึงข้อมูลโดย XHR Requests ก็ได้แต่มันก็อาจจะไม่ใช่วัตถุประสงค์ของ Gatsby จริงๆ ที่ไว้ใช้สำหรับสร้างเว็บไซต์แบบ Static Site

ความยืดหยุ่นของ Gatsby

จากที่เล่ากล่าวกันไปก็จะเห็นว่าการสร้างเว็บไซต์แบบ Static Site ด้วย Gatsby นี้ก็ไม่ได้หมายความว่าเราจะสร้างเว็บไซต์ที่มีเนื้อหาแบบยืดหยุ่นซึ่งเปลี่ยนแปลงตลอดเวลาไม่ได้ แต่ก็เห็นได้ชัดว่า Gatsby ก็อาจจะไม่ได้เหมาะกับเว็บไซต์ที่เนื้อหาและข้อมูลมากมายและเปลี่ยนแปลงตลอดเวลา แต่ถ้าจะสร้างเป็นแนว Landing Pages หรือเป็นเว็บไซต์บริษัท หรือเป็นเว็บไซต์ E-Commerce ที่มีสินค้าไม่ถึงพันชิ้น ก็ต้องยอมรับว่า Gatsby คือสุดยอดทางเลือกที่น่าพิจารณา

ถ้ามีบางส่วนในเว็บไซต์ที่ต้องโหลดข้อมูล เช่น หน้าตะกร้าสินค้าในเว็บไซต์ขายของ เราก็สามารถใช้ Ajax ติดต่อกับ Web server หรือ Third party ต่างๆ เพื่อโหลดข้อมูลมาได้ ซึ่งทุกวันนี้ก็มีบริการ SaaS ที่สามารถสร้าง API สำหรับจัดการกับข้อมูลได้โดยที่ไม่ต้องไปห่วงกับการสร้าง Backend เองเลย ถ้านำมาใช้งานร่วมกับ Gatsby แล้วต้องบอกเลยว่าจะช่วยให้ประหยัดเวลาการทำงานไปได้มากและการดูแลงานในระยะยาวก็ยิ่งง่ายขึ้น

Gatsby เกิดจากการทำงานร่วมกันของ React และ Webpack ซึ่งเป็นการรวมตัวกันที่ยอดเยี่ยม โดย React ก็เป็น Library สำหรับ Front-end ที่ยอดนิยมและทำงานได้รวดเร็วด้วย เมื่อไปรวมตัวกับ Webpack ซึ่งเป็นตัวสำหรับ Build ที่นิยมใช้กันจึงทำให้คุณสามารถทำงานได้ง่ายและสะดวกขึ้น

Gatsby อำนวยความสะดวกได้ดี

มาดูตัวอย่างถึงความสะดวกของ Gatsby กันดีกว่า โดยตัวอย่างนี้เราจะแสดงให้เห็นถึงการแสดงภาพบนเว็บไซต์แบบ Optimize ให้ดีที่สุด โดยการ Optimize ที่ว่าคือ

• แสดงภาพด้วยความละเอียดสูงสำหรับหน้าจอความละเอียดสูง
• แสดงภาพด้วย Format ที่เหมาะสมและรองรับสำหรับแต่ละ Browser
• แสดงภาพแบบ Lazy load ด้วยเทคนิค Blur-up effect

ขั้นตอนแรกเริ่มด้วยการเขียน GraphQL เพื่อ Query รูปภาพออกมา

query {
  file(relativePath: { eq: "images/default.jpg" }) {
    childImageSharp {
      fixed(width: 500, quality: 90) {
        ...GatsbyImageSharpFixed
      }
    }
  }
}

หลังจากนั้นเราก็นำผลลัพธ์จากการ Query ด้านบนมาใช้ใน gatsby-image ซึ่งเป็น Component ของ React

<Img fixed={data.file.childImageSharp.fixed} />

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

จะเห็นได้ว่าการแสดงภาพด้วยการ Optimize ให้ดีที่สุดกับระบบ Image processing ของ Gatsby นั้นทำได้ง่ายดายและมีประสิทธิภาพ จริงๆ แล้ว Gatsby มี Plugin ที่น่าสนใจอีกมากมาย เช่น gatsby-plugin-manifest ซึ่งเป็น Plugin สำหรับตั้งค่า Manifest ให้เว็บไซต์ และสามารถสร้างไอคอนของเว็บให้มีรองรับหลายขนาดและสร้าง Favicon ได้โดยอาจจะสร้างมาจากภาพเพียงภาพเดียว

ผมทราบดีว่าความสามารถทั้งหมดที่กล่าวมาก็คงมีใน Platform อื่นๆ ที่ทุกๆ ท่านใช้อยู่เช่นกัน แต่ก็อยากให้ทราบกันว่าใน Gatsby ก็มีสิ่งเหล่านี้พร้อมให้ใช้และหากมีปัญหาก็จะมีคนอื่นๆ มากมายคอยช่วยเหลือเป็น Community ที่ใหญ่อยู่ และเป็น Plugin แบบ Open-source ที่น่าจะพัฒนาก้าวหน้ากันต่อไปเรื่อยๆ

ความกลมเกลียวกันของ Vercel และ Gatsby

ถ้าคุณว่า Gatsby สุดยอดแล้วต้องบอกว่ามันจะยิ่งสุดยอดกว่าเมื่อได้ทำงานร่วมกันกับ Vercel โดย Vercel เคยมีชื่อว่า Zeit และสร้างโดยบริษัทเดียวกันกับที่สร้าง Next.js ซึ่ง Vercel เป็น Hosting platform สำหรับโปรเจกต์ที่สร้างด้วย JAMstack frameworks (JavaScript, APIs, Markup) คุณสามารถใช้ Front-end framework ที่นิยมต่างๆ ได้ (หรือแค่เพียง JavaScript เปล่าๆ) และเชื่อมต่อกับ Backend ด้วย API เราจะพูดถึงการสร้าง API ใน Vercel ต่อไป

เมื่อสมัครใช้งาน Vercel แล้วก็สามารถ Deploy โค้ดขึ้น Vercel ได้เพียงใช้คำสั่ง vercel init ครั้งเดียว หลังจากนั้นเมื่อเรา Push โค้ดขึ้น Git ก็จะเกิดการ Deploy ขึ้น โดย Branch หลักของเราจะถูก Deploy ขึ้นเป็น Production ส่วนโค้ดใน Branch อื่นๆ จะถูก Deploy ขึ้นในรูปแบบ URL ชั่วคราว นอกจากนี้เรายังสามารถตั้งค่าเพิ่มเติมได้สำหรับการ Deploy ว่าจะให้ Deploy เกิดขึ้นเมื่อใด เช่น ให้ Deploy เมื่อมีการเปลี่ยนแปลงของสินค้าสำหรับเว็บ E-commerce ใน Back-end

Vercel คือ CI/CD.

Vercel สามารถ Build โปรเจกต์เราได้โดยไม่ต้องใส่คำสั่งใดๆ เพราะมันทำงานเหนือ Front-end frameworks อีกที กล่าวคือมันสามารถรู้ได้ว่าโปรเจกต์เราเป็น Framework ตัวไหนและต้อง Build อย่างไร มันทำงานร่วมกับคำสั่งใน package.json ได้ดังนั้นเราจึงสามารถแก้คำสั่งต่างๆ เพิ่มเติมได้ตามต้องการ Vercel มีการเก็บ Logs จากการ Build ไว้ด้วยใน Dashboard ของ Vercel สำหรับโปรเจกต์ที่ไม่ซับซ้อนมากต้องบอกเลยว่ายิ่งใช้งานง่ายมากๆ

เราสามารถตั้งค่า Environment variables ได้ใน Dashboard ของ Vercel โดยค่าในตัวแปรจะถูกเข้ารหัสด้วยจึงไม่ต้องกังวลเรื่องความปลอดภัย เราสามารถใช้คำสั่ง vercel env เพื่อดึงค่า Environment มาใช้ได้โดยจะดาวน์โหลดมาเก็บไว้ในโปรเจกต์เราในไฟล์ .env ด้วยความสามารถนี้จึงทำให้เราไม่ต้องกังวลกับการเก็บค่าที่ควรเป็นความลับไว้ในโค้ด แต่เก็บไว้ใน Vercel แทน

Vercel นั้นสุดยอดแห่งความเร็ว

หนึ่งในคุณสมบัติอันยอดเยี่ยมของ Vercel ก็คือประสิทธิภาพในการทำงานโดย Vercel มุ่งเน้นมากๆ กับการแสดงผลถึงผู้ใช้งานอย่างมีประสิทธิภาพที่สุด Vercel ส่งผ่านไฟล์ต่างๆ ผ่าน Global edge network (หรือ CDN) ซึ่งทำงานอยู่ระดับบนสุดของ AWS region ทั้งหลาย ด้วยเหตุนี้จึงทำให้มันสามารถทำงานได้รวดเร็วด้วยการเก็บ Cache และ Optimize การทำงานต่างๆ ได้ รวมถึงดูแลเรื่อง SSL encryption, Asset compression และ Cache invalidation

Vercel เป็น Serverless.

ถ้าเราต้องการสร้าง API ด้วย Vercel ก็สามารถทำได้ง่ายๆ วิธีการก็คือให้สร้างโฟลเดอร์ชื่อว่า api ในโปรเจกต์เรา จากนั้นสร้างไฟล์ Javascript (Go, Python, Ruby) ในโฟลเดอร์ api โดยให้ export ฟังก์ชันออกมาโดยเป็นฟังก์ชัน Express ชื่อไฟล์ของเราจะเป็น URL สำหรับ API โดยฟังก์ชันต่างๆ จะทำงานภายใต้ AWS lambda

export default async function subscribeEmail(req, res) {
  subscriptionManager.subscribe(req.body.email);
  res.status(200).json({ success: true })
}

Vercel ทำให้เราสามารถใช้งาน API ใน development environment ได้เพียงเรียกคำสั่ง vercel dev จากนั้นเราก็จะเรียกใช้ API ได้แบบ local ในเครื่องเรา

สรุป

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

• ไม่ต้องติดตั้งอะไรมากใน Local development
• ใช้งานง่ายๆ ด้วย CI/CD
• ขั้นตอนการ Deployment ง่ายดายไม่ต้องติดตั้งอะไรมาก
• มี Serverless API ใช้งานง่ายดายไม่ต้องติดตั้งอะไรมากมายเช่นกัน
• มีการ Optimizations เพื่อให้ได้การแสดงผลหน้าเว็บที่มีประสิทธิภาพ
• มี Image processing
• ติดตั้ง SSL ให้อัตโนมัติ
• จัดการค่าที่เป็นความลับต่างๆ ได้อย่างสะดวก

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