Videos → Astro JS - เฟรมเวิร์กน้องใหม่ เขียนง่าย โหลดไวมาก!

แนะนำตัวและทักทาย0:00

ฮัลโหล 1 2 โอเค สวัสดีทุกท่านนะครับ สวัสดีครับ มีหลายคนคุ้นหน้าคุ้นตานะครับ

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

โอเค ก็เลยตั้งชื่อนะครับ framework น้องใหม่ครับ คำว่าน้องใหม่ตอนนี้มันก็หลายปีแล้วนะครับ หลายๆ ที่เขาให้เป็น production แบบใช้งานได้ได้นะครับ ผมเอง production มา 2 ปีด้วย ด้วยโหลดที่แบบว่าวันละสักล้าน visit อย่างเงี้ย ก็สบายๆ นะครับ เพราะฉะนั้นผมรู้สึกว่ามันเขียนว่าน้องใหม่ แต่ว่ามันมัน stable มากๆ นะครับ

โทษที พอดีรีบมานิดนึงอ่ะ โอเค งั้นเดี๋ยวเราเริ่มกันเลยนะครับ แนะนำตัวนะครับ ผมชื่อเม่นนะครับ จักรกฤษณ์ ตาฬวัฒน์ นะครับ ก็ก่อนหน้านี้ก็ทำ digital agency นะครับ

อยู่ในกรุงเทพ แล้วก็สัก 10 กว่าปีที่แล้วก็ย้ายไปปายนะครับ แล้วก็ไปทำโปรเจคทำนู่นทำนี่ สอนเด็กสอนอะไรนะครับ แล้วก็มีทำเป็น Muse foundation ที่เป็น coworking space กับพี่ฮั้นท์ น้องฮั้นท์นะครับ แล้วก็มีทำธุรกิจที่เป็น Seed Webs ที่เป็น เหมือนกับเป็นอะไรอ่ะ เราขายธีม ขาย solution ให้กับเว็บที่เป็น WordPress นะครับ แล้วก็มีทีมเล็กๆ ที่เป็นเด็กที่เคยสอนที่ปาย เมื่อสัก 10 กว่าปีที่แล้วนะครับ เขาก็จบมหาวิทยาลัยกันมา ก็เลย โอเค งั้นเราก็ set ทีมด้วยกันนะ

แนะนำ Astro Framework2:02

ทีนี้หัวข้อวันนี้เราพูดถึงเรื่อง Astro นะครับ ผมรู้สึกว่า Astro เนี่ยสื่อสารดี เขาไม่ได้บอกว่าเขาทำได้ทุกอย่างนะครับ เขาบอกเขาเป็น web framework ไม่ได้พยายามเน้นว่า JavaScript ด้วยนะ เพราะว่าจริงๆแล้วเนี่ย พอมัน build เป็น static มันก็ไม่ได้ feel ว่าต้องเป็น JavaScript ขนาดนั้น แต่ว่าเราใช้ JavaScript ในการเขียนนะครับ เขาบอกว่าเป็น web framework สำหรับ content driven นะครับ ก็คือเว็บที่เป็น content ทั้งหลายนะครับ มันจะเหมาะกับ Astro เขาไม่ได้ไปสู้กับ web application ไม่ได้ไปสู้กับระบบที่มันซับซ้อนนะครับ แต่ตัวมันน่ะซับซ้อนนะครับ แล้วก็ตัวมันก็มีเบื้องหลังที่ขยายได้หลายแบบนะครับ เดี๋ยวเรามาดูกัน

ผมก็สะดุดใจคำว่า content driven นะครับ ในฐานะที่เราก็ทำพวก CMS มาก่อนนะครับ อย่างเช่น WordPress ข้างล่างเนี่ยนะครับ เราก็จะรู้สึกว่าเราจะต้องทำระบบ ถ้าทำเว็บที่เกี่ยวกับ content เราก็คิดถึง WordPress ก่อนแน่นอนนะครับ

เปรียบเทียบ Astro กับ WordPress และ Static Site Generators3:01

ซึ่งมันอิงกับ server ใช่ไหม มันก็จะเป็น อันนี้ผมยังไม่เจอฝรั่งเขียนนะ แต่ผมอาจจะเขียนผิดก็ได้นะครับ ผมแค่คิดเองว่า เออเนี่ย เวลาผมตัดสินใจว่าเรามาใช้ตัวนี้เหอะเนี่ย เพราะเรารู้สึกแบบนี้ เรารู้สึกว่า WordPress เนี่ย มันจมอยู่กับ server นะครับ ไม่ใช่ไม่ดีนะ มันดีในแง่ว่ามันครบวงจร สำหรับเว็บขนาดเล็กนะครับ แต่เมื่อไหร่ก็ตามที่เราต้องการ scale นะครับ เราต้องการการไม่พึ่งพา server นะครับ ก็คือเรียกว่า serverless นะครับ ก็คือมี server แหละ แต่ว่ามันไป scale ได้ มันไป ทำ cache มันไป run ที่ device นะครับ

ตรงนี้มันก็ขึ้นมาข้างบน แล้วผมก็ต้องไปลองเล่นตามสูตรเลยนะครับ Jekyll Hugo Gatsby นะครับ ซึ่งหลายๆ ตัวพวกนี้มันเป็น static คือพอมันเจนออกมาปุ๊บ มันกลายเป็น HTML ข้อดีคืออะไร ไม่มีทางล่ม ไม่มีทางโดนเจาะ ไม่มีใครทำอะไรกับมันได้แน่นอน ถูกมั้ย เพราะมันเป็น HTML นะครับ แต่ว่า Gatsby เนี่ย เห็นหลังๆ เค้าพยายามจะมี SSR ก็คือ server-side rendering ละ นะครับ ก็เลยให้อยู่ตรงกลางก่อนนะครับ ในฐานะที่เรามา ตกหลุมรัก Astro มากกว่า แต่จริงๆ มันอาจจะดีก็ได้นะ แต่เดี๋ยวขอสาวกมา defend หน่อย นะครับ ทีนี้ ในกราฟนี้ ผมก็เลยมองว่า ถ้าไป dynamic จ๋าๆ เลยนะครับ ไปทางพวก React ไปทางพวก Vue นะครับ เป็น Nuxt เป็น Next เนี่ย อันนี้ดีนะครับ แต่ในส่วนตัวจะรู้สึกมันใช้ยากนิดนึง มันก็เลยมาจบที่ว่า Astro เนี่ย ตอบโจทย์ทั้งเป็น serverless ก็คือ scale ไม่มีปัญหา แล้วก็ยัง dynamic ก็คือสามารถที่จะ ไปดึง database ไปเอา content มา

ไปทำ login อะไรหลายๆ อย่างได้นะครับ

อธิบายคำศัพท์ SSG และ SSR4:39

ศัพท์เทคนิคที่เราใช้กันก็ SSG นะครับ ใครรู้จักคำนี้อยู่แล้วเนาะ ยกมือ นะครับ หลายๆ คน คุ้นมั้ย ไม่คุ้นกันเหรอ แต่ว่าพอเฉลยก็คือ static site generator ก็คือตัวที่สร้างไฟล์ static นะครับ กับ SSR อันนี้คุ้นกันมั้ย นะครับ คุ้นกันมั้ย ก็คือ หลังๆ เนี่ย static มันไม่ได้ครบวงจร

ก็เลยมาเป็นต้องขอข้อมูลจาก server ด้วย นะครับ เราก็เลยเรียกว่า server-side rendering นะครับ เนี่ย ทั้งหมดเท่าที่ทำมา ผมก็เลยส่วนตัวนะ ผมประทับใจ Next ในแง่ความ dynamic ความ ทำเว็บแล้ว เว็บ content ด้วยนะ ติด Google ได้ดี แต่เวลาเขียนเนี่ย มันก็ยังมีจุดที่รู้สึกว่า Astro เนี่ย เขียนสนุกกว่า นะครับ แล้ว Astro เนี่ย

ข้อดีของ Astro ในด้านความเร็วและประสิทธิภาพ5:26

ก็รีบขิงก่อนเลยเพราะมันมาทีหลังนะครับ ว่า ถ้าทำด้วย Astro เนี่ย เร็วแน่นอนนะครับ ก็แหงสิ มันเกิดมาในยุคนี้ best practice มันมีหมดแล้ว มันสร้าง WebP ให้อัตโนมัติ มัน minify มันทำทุกอย่าง แล้วกลายเป็น static ไม่รอให้เค้าโหลด JavaScript ที่เป็น framework นึกออกมั้ย ถ้าเราใช้ React ต้องโหลด React มา ก้อนนึงก่อนนะครับ แล้วก็ก้อนนี้ ต้องไป process ดึงนู่นดึงนี่มา นะครับ แต่ Astro ไม่ใช่ Astro เจนมาเป็น HTML สำหรับหน้านั้น เร็วที่สุดแล้ว นะครับ เพราะฉะนั้นเค้าก็เลยมาขิง ด้วยกันว่า ในเว็บปัจจุบันนะครับ เพราะว่า เว็บที่เพิ่งใช้ Astro ยังไงก็มา best practice ไปแล้วนะครับ

การติดตั้งและเริ่มต้นใช้งาน Astro6:08

ถ้าเราเริ่มนะครับ เราเริ่มต้น ผมคิดว่าตรงนี้คงไม่ได้ลงเดโมนะครับ เดี๋ยวดูเวลาอาจจะไม่ทัน คร่าวๆ เลยนะครับ npm create แล้วก็ npm run dev นะครับ ใน doc ของ Astro เนี่ย จะใช้ npm ก็ได้ yarn ก็ได้นะครับ หรือว่า pnpm ก็ได้นะครับ แต่ว่าผมเคยใช้พวกตัวใหม่ๆ นะครับ ตัว pnpm

แล้วพอไป build บนระบบนะครับ บน GitHub หรือว่าบน Cloudflare Page นะครับ บางทีมันเจอปัญหาเหมือนกันว่าบางโมดูลมันไม่มาอย่างที่คิด ใช่มั้ย เจอเหมือนกันเนาะ ก็เลยกลับมาตายรัง npm นะครับ แล้วเราก็ host พอรันเสร็จปุ๊บเราก็จะได้ URL ซึ่งน่ารักมากเลย ทีมเค้าทำ marketing ดีเนาะ เค้าสื่อสารดี ก็คือ Astro คือการแบบออกไปนอกอวกาศ และเร็วใช่มั้ย ก็ 4 3 2 1 นะ พอร์ต ก็น่ารักดีนะครับ ก็ใช้ localhost แล้วก็พอร์ตนี้เลยนะครับ

โครงสร้างไฟล์และโฟลเดอร์ของ Astro7:02

ทีนี้ถ้าเราเปิดนะครับ เมื่อกี้ผมใช้คำสั่ง run นะครับ คำสั่ง setup นะครับ มันก็จะได้แบบ ไฟล์มานิดเดียวเลย ไม่ได้เยอะเลยนะครับ ถ้าลองแกะดูก็แทบจะเข้าใจเลยนะครับ

หลักๆ ถ้าเกิดใครไม่เคยมาจาก ถ้าใครมาจากฝั่งพวก WordPress PHP พวกอะไรอย่างเงี้ยนะครับ ก็คงต้องมาทำความคุ้นชินกับว่า ทุกอย่างที่จะเอาขึ้นเว็บมันอยู่ในโฟลเดอร์ public นะ นะครับ อันนี้ผมคิดว่า น่าจะดูแววตาน่าจะเข้าใจหมดละนะครับ โอเค ก็ถ้าอะไรไว้ใน public ก็ไปอยู่ใน root แล้วมันก็จะบอกว่าวิธีการเนี้ย มันจะไม่ทำการ optimize ไม่ทำการแบบลดขนาด ไม่ทำอะไรทั้งสิ้นนะ เพราะว่า คุณเลือกที่จะไว้ใน public อยู่แล้วนะครับ ไม่เหมือนบาง framework บางทีมันแอบไปทำเหมือนกันนะครับ แต่ถ้าเกิดอยู่ใน Astro public ก็คือ public เลยนะครับ ทีนี้ใน source file นะครับ ก็คือ folder ที่ เอาไว้เก็บ source ของเรานะครับ มีอะไรบ้างนะครับ ก็มาถึงก็เป็น pages นะครับ

ซึ่งอันเนี้ยใครเคยใช้ next อยู่แล้วบ้าง ใครเคยใช้บ้างยกมือนิดนึงนะครับ โอเคน่าจะครึ่งห้องเลยนะครับ ก็คงสร้างเหมือนกับ next ที่เป็น pages ในยุคแรกๆ จนถึง เวอร์ชันซัก 12 13 เนาะ หรือตอนนี้ก็ยังทำได้ ก็คือเราสร้าง folder ชื่อ pages แล้วก็เขียนไปเลยว่าอยากได้ URL อะไรนะครับ ก็ใช้ about.astro อะไรอย่างเงี้ยนะครับ ก็เป็นหน้า about นะครับ ถ้าใช้ index ก็จะกลายเป็นหน้าหลักหน้า root นะครับ แล้วก็อีก folder นึงก็คือ layout นะครับ folder layout เนี่ยถ้าเราไม่มีเลยก็ได้นะครับ คือถ้าเกิดเราสร้างมาแค่ file เดียว เราก็ไม่จำเป็นต้องใช้ layout นะครับ แต่ว่าใน best practice ที่เราทำกันเนาะ เราก็คงจะต้องมีตัวที่เป็นครอบ HTML จนถึงเปิดปิดนะครับ แล้วก็ไอ้ตัวครอบเนี้ย เราก็อาจจะมีหลายๆ template ได้ด้วยนะครับ เพราะฉะนั้นถ้าเราทำ layout เอาไว้หลายแบบ มันก็อาจจะเหมาะกับ landing page หลายๆ แบบนะครับ ก็อันนี้ก็ตั้งขึ้นมาได้เลยนะครับ

ส่วนอันสุดท้ายก็คือ component component ก็เหมือนกับตัว module ที่เราจะเติมเข้าไปนะครับ ถ้ามาจากฝั่ง JavaScript ก็ component อยู่แล้วนะครับ ถ้ามาจากฝั่งพวก PHP WordPress ก็เหมือน include file เข้ามานะครับ

ทีนี้ถ้าเกิดเราเจนนะครับ อันนี้อาจจะไม่ต้องดูโค้ดออกก็ได้นะครับ

การเขียนโค้ดและการใช้งาน Components ใน Astro9:14

ไม่ต้องซีเรียสนะครับ ถ้าเราได้ลองทำสักรอบนึงเนี่ยนะครับ หลักการของมันจะง่ายมากเลยคือมันแบ่งข้างบนด้วยขีด 3 ขีดนะครับ แล้วก็ใส่ฟังก์ชันที่ตามที่เราต้องการนะครับ เช่นจะ JavaScript จะทำนู่นทำนี่ทำอะไรก็ไป process ให้เรียบร้อย ใครที่เคยใช้ React มาก็จะคุ้นเลยนะครับ ก็คือเราทำ process ให้เรียบร้อยก่อน แล้วค่อยมาพ่นก็คือ export ออกมานะครับ แต่ทีนี้สิ่งที่มันพ่นเนี่ย มันออกมาทาง Vue ทาง Nuxt มากกว่า ก็คือไม่ได้ใช้ class name นะครับ มันก็ตรงไปตรงมามากเลย HTML ก็เป็น HTML class ก็เป็น class นะครับ พ่นออกมาตรงๆ เลย ซึ่งตรงเนี้ยเราเรียกว่า template นะครับ แล้วก็บวกกับ component ก็ได้ถ้าเราจะไป include component มานะครับ feeling เหมือน PHP ไป include ไฟล์มานะครับ แล้วก็ JS expression ก็คือ ถ้าเราเป็น PHP เราก็ต้องวนลูป ถ้าเราเป็น JavaScript เราก็ใช้คำสั่งในการที่จะดึงค่าออกมา

จะ map ก็ได้หรือจะ for each อะไรเงี้ยก็ไป process ใน template เอานะครับ และตัวสุดท้ายนะครับ ที่มันทำให้รู้สึกใช้ง่ายดีมากเลยก็คือ มันเอาสไตล์ไว้ข้างล่างนะครับ มันเหมาะกับเว็บยุคนี้เพราะอะไร เว็บยุคเนี้ยเราไม่ควรที่จะเอาสไตล์ทั้งก้อนเนี่ยมาอยู่ในไฟล์ๆ เดียว แล้วก็เล่นโหลดทีเดียวหนักๆ หนักๆ นี่คือ 100K นะ 100K นี่นิดเดียวนะแต่ว่า ไอ้ page speed มันก็จะถือว่าหนักมากละนะครับ เพราะฉะนั้นถ้าเราเอาสไตล์มาผูกไว้ข้างล่างตรงนี้นะครับ ก็จะกลายเป็นว่ามันก็จะเป็นสไตล์สำหรับหน้านั้นโดยเฉพาะ โดยที่อาจจะมีหน้า global ด้วยก็ได้นะครับ เพราะฉะนั้นเราก็จะมีไฟล์สไตล์ชีทที่อาจจะเป็น global อยู่ หรือเป็น Tailwind อยู่นะครับ

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

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

การใช้งาน Layouts ใน Astro11:28

ก็คงสร้างก็ง่ายมากเลยนะครับ แล้ววิธีการก็ยังเหมือนเดิมอีก ก็คือ ข้างบนเอาไว้ process นะครับ ทีนี้การ process ของมันเนี่ย มันมีการรับค่าส่งค่าได้ นะครับ ใน Astro เนี่ยใช้คำว่า Astro.props ตัวนี้ก็คือ property นั่นแหละนะครับ ก็สามารถส่งค่าเข้ามา อย่างเช่น เราอยากจะให้เว็บนี้มี title ชื่ออะไร ก็ส่งค่า title เข้ามา แล้วก็เอา title ที่เป็นตัวแปรเนี่ยนะครับ มาพ่นข้างล่าง พ่นก็คือ อยู่ในปีกกาข้างล่างที่มีคำว่า title นะครับ อันนี้คือการส่งค่าตัวแปรมา กับนอกจากส่งค่าตัวแปร สิ่งที่เป็น layout เนี่ย ถ้ามันไปครอบอะไรนะครับ อย่างเช่นเราเปิด layout แล้วก็ปิด layout ของที่อยู่ข้างในเนี่ย เราจะเรียกว่า slot นะครับ ก็คือเอาของเนี่ยมากองไว้ในนี้เลยนะครับ เพราะฉะนั้นมันก็เหมือนตัวที่เอาไว้ครอบนะ พอเราเห็นโครงสร้างแบบเนี่ย ผมว่ามันเข้าใจง่าย นะครับ แล้วเราก็อยากจะหยิบอะไรก็วาง และ slot ไม่ได้มีที่เดียวด้วยนะครับ ถ้าเราจะทำให้มันเพิ่มขึ้นก็ บางคนอยากจะแก้พวกอะไรนะ OG image

แก้พวก header แล้วก็เอา slot อีกก้อนนึงไว้ อะไรอย่างเงี้ยนะครับ หรือ page template บางก้อน เราอยากจะเจาะ เจาะพื้นที่ที่แต่ละที่ แล้วก็ slot หลาย slot นะครับ

อีกอันนึงคือ component ถ้าเกิดเราใช้ demo นะครับก็คือ npm แล้วก็ตัวที่ติดตั้งของ Astro ถ้าเป็น demo เนี่ย มันจะให้ตัวอย่าง component มาตัวนึง ก็เป็น card card ก็ง่ายๆเลย ก็คือ li ที่ครอบนะครับ ใส่ title ใส่อะไรเงี้ย body แค่นี้เอง ซึ่งถามว่า เอามาจากไหน ก็เอามาจาก props เหมือนกันนะครับก็คือ ส่งค่ามานะครับ สมมุติว่า ตอนที่เราจะเรียกมันน่ะ เมื่อกี้จำได้มั้ยเราเรียก layout ครอบ แล้วก็ layout แล้วก็ส่ง ค่าอะไรบางอย่าง อันนี้ก็เรียก เหมือนกันเลย component เลย เหมือน component ที่ชื่อว่า card เลย นะครับว่า href คืออะไร title คืออะไร body คืออะไร นะครับ เพราะฉะนั้นมันก็เหมือนแบบ ถ้าเป็น function ก็คือ ใส่ parameter เข้าไปด้วยนะครับ

แต่อันนี้มันเป็น component ก็ อยากได้ค่าอะไรก็ใส่เข้าไปนะครับ เพราะฉะนั้นพอเราเข้าใจโครงสร้างเงี้ย มันก็จะแบบหยิบนู่นหยิบนี่ มาผสมได้ง่ายมากเลยนะครับ

สิ่งที่ทำให้ Astro เนี่ย เหนือกว่า static site generator ตัวอื่นๆนะครับ ก็คือ มันไม่ใช่ทุกอย่าง ต้องเป็น static Astro เนี่ยบอกว่าเรามี Island ได้ Island คือเกาะเนาะ ก็เหมือนกับว่า วางแผนไว้ปุ๊บ โหลดข้อมูลเสร็จเรียบร้อย แต่เจาะช่องตรงนี้ไว้นะฮะ เจาะกล่องตรงนี้ไว้ แล้วกล่องตรงเนี้ย ค่อยไปโหลด ในตอนที่ โหลดหน้าเว็บเสร็จแล้วนะครับ ถ้าเกิดนิยามแบบสั้นๆก็เลย ผมเลยคิดว่านะก็คือ มันก็คือ component แหละ ที่โหลด ตอนที่

ไปอยู่ใน client ไป โหลด ไปตอนที่ไปอยู่ใน เงื่อนไขต่างๆ คือตอนที่ เว็บมันว่างๆนะครับ หรือ เมื่อมันมองเห็น หรือเมื่อมัน เป็น media query อะไรเงี้ยนะครับ พูดง่ายๆคือ เราตั้งเงื่อนไข ของการโหลด ทุก component ได้ แปลว่าอะไร ถ้าเกิดในทางปฏิบัติ สมมุติว่าผมโหลดหน้าข่าวมาเสร็จละ อยากได้ยอดวิว ที่เป็นวิวแบบ real time จริงๆเลย ก็แอบโหลดวิวมา นะครับ สมมุติว่าโหลดข่าวหน้าเนี้ยเสร็จ ข้างล่าง มีแบบ suggest ใช่มั้ย suggest ข่าวที่เกี่ยวข้อง หรือ ข่าวที่คุณเคยอ่านแล้ว เพิ่งอ่านเมื่อกี้ เค้าอ่าน อะไรกันอีก ใช่มั้ยก็เหมือนพวก e-commerce ที่เราเห็นๆกัน เพราะฉะนั้นทุกอย่างมัน จะ real time โดยที่หน้าเนี้ย มันโหลดเสร็จไปแล้ว แล้วมันก็ เร็วมากด้วยนะครับ เพราะฉะนั้น การที่ใช้ Island เนี่ย

ผมว่านี่คือจุดขายที่ทำให้ Astro เนี่ย แตกต่างจาก static site นะครับ แล้วก็ เป็นถือว่าเป็นพวกฝั่ง frontend ที่ใช้ง่าย นะครับ มันก็เลยกลายเป็นว่า ผมว่ามันเป็นจุดกึ่งกลางที่เหมาะเลย นะครับ

แหล่งข้อมูลและการดึงข้อมูลใน Astro14:58

ทีนี้แล้วเอาข้อมูลที่ไหนล่ะครับ การที่เราพ่นค่าเมื่อกี้ มันคือพ่นดีไซน์เนาะ แต่ตัวคอนเทนต์เนี่ย เราต้องดึงมาจากที่ต่างๆ นะครับ จุดแข็งของ Astro ก็คือ Markdown ซัพพอร์ตตั้งแต่แรกครับ พอมาถึงปุ๊บ เราเติม md สังเกต อันนี้เป็นตัวอย่างของใน docs เค้าเลยนะครับ week 1 week 2 เนี่ย ดอท md ดื้อๆ เลยนะครับ ดอท md ก็แอบมีใส่ข้างบนได้ด้วยนะครับ เดี๋ยวอธิบายต่อว่าคืออะไรนะครับ ก็คือเนี่ย เลเอาท์อะไร ไตเติ้ลอะไรนะครับ ข้างล่าง ก็เป็นเท็กธรรมดาเลย ที่เป็น Markdown นะครับ เพราะฉะนั้น มันการว่า ถ้าเราอยากได้เว็บแบบขนาดเล็ก 5 หน้า 10 หน้า ทุกอย่าง manage ด้วย Markdown จบเลยนะครับ โดยที่ไม่ต้องไปทำอะไรก็ได้นะครับ ไม่ต้องไปใช้

ไม่ต้องไปต่อ API ไม่ต้องทำอะไรเลยนะครับ ถ้าเป็นพวก Next พวก React ก็ยังจะต้องลงตัวเสริมนะครับ เพื่อทำให้อ่านได้ แต่ถ้าเกิดเป็น Astro เนี่ย มันซัพพอร์ตตั้งแต่แรกนะครับ ก็เลยรู้สึกว่า เอ้ย มันลงตัวดี ทำเว็บขนาดเล็กนี่เหมาะมากๆ เลยนะครับ ทีนี้ แล้วไอ้ Markdown เมื่อกี้ ข้างบนที่ผมครอบไว้เนี่ย มันคืออะไร มันเหมือน Custom Field นะครับ จริงๆ เนี่ย มันมีคนที่ชื่อ อีลิโอ เนี่ย เค้าบอกว่า เค้าจะย้ายจาก WordPress ไป Hugo นะครับ แล้วก็มี Custom Field อยู่จำนวนมาก ที่ไม่รู้จะจัดการยังไงกับมัน เค้าก็เลยบอกว่า งั้น เติมแล้วกัน แล้วเค้าตั้งชื่อมาตรฐานนี้ว่า Front Matter นะครับ ที่ทำให้ Markdown แอบใส่ตัวแปร ที่เป็น Custom Field ต่างๆ ได้นะครับ แล้วนิยามเองได้เลยนะครับ นิยามเป็นอะไรก็ได้นะครับ หรือว่าจะใช้เทมเพลตมาตรฐานที่เค้ามี พวกแบบว่า ชื่อ description อะไรเงี้ย วันที่ อะไรเงี้ยนะครับ เพื่อมันจะได้ทำให้ Markdown ตัวเนี่ย

มันมี Custom Field เพิ่มนะครับ แล้วเราก็พร้อมใช้งานเลยครับ

การใช้งาน CMS และฐานข้อมูลกับ Astro16:41

ต่อไปนะครับ ถ้าคอนเทนต์ไม่ได้มาจาก Markdown คอนเทนต์มาจาก CMS เจ้าอื่นๆ นะครับ ก็ได้หมดเลย แม้กระทั่ง WordPress ที่ทำตัวเป็น Headless CMS Headless คือตัดหัวทิ้ง ก็คือตัด Front ทิ้ง ตัดหน้าทิ้ง แล้วก็เก็บแค่ Database นะครับ ได้หมดเลยนะครับ จริงๆ พอมันเป็น JSON มันอะไรก็ได้อยู่แล้วนะครับ แต่ว่าส่วนตัวผม แอบเชียร์ Directus เลย ไฮไลต์มานะครับ อันนี้ก็ว้าวมากเหมือนกันนะครับ ก็ย้ายลูกค้าหลายคนจาก WordPress ไป Directus ได้เวิร์คดีนะครับ

แล้วก็ในเดโมนะครับ ผมก็มีเดโมที่ทำเป็น เอาไทยโทน ไทยโทนมันก็คือชื่อสีของไทยนะ แดงชาด หงชาด อะไรเงี้ย คืออาจารย์ที่ศิลปากรเค้าทำไว้ให้นะครับ เราก็เอาตรงเนี้ยนะครับ ใส่ Google Sheet นะครับ พอเราใส่ Google Sheet มีตัวที่แปลงเป็น JSON ให้ได้อยู่แล้วนะครับ แต่ว่าคงไม่ได้ลงในวันนี้นะครับ แต่ว่ามีตัวอย่างโค้ด มีอะไร ก็เอา JSON มาแปลงให้กลายเป็น HTML แค่นั้นเองนะครับ เพราะฉะนั้นมันกลายเป็นว่า Data เราไม่ได้ต้องเป็นไฟล์ ที่เราหรือเป็นระบบที่เราต้องมี มันเป็นอะไรก็ได้เลยนะ มาจาก Notion ก็มีคนทำนะครับ มาจาก Google Sheet ก็มีคนทำนะครับ แอบดูโค้ดนิดนึงก็คือมันใช้วิธี fetch นะครับ เราต้องทำให้ Google Sheet ก้อนเนี้ยกลายเป็น JSON ให้ได้ก่อน ไป fetch มานะครับ พอ fetch มาปุ๊บ .json ก็แปลงก้อนนี้เป็น JSON นะครับ เสร็จแล้วก็ง่ายมากเลยคือ map แล้วก็วนลูปเนาะ วนลูป color มา ก็คือวนลูปมันทีละฟิลด์ทีละฟิลด์ แล้วก็เรามีแค่ 2 คอลัมน์ มันก็เลยเป็น .code กับ .name อันนี้ง่ายๆ นะครับ เพราะฉะนั้นเนี่ย จะเห็นว่าโครงสร้างของมันเนี่ย ข้างบน process ข้างล่าง output โดยไม่ต้องใช้คำว่า class name อะไรเงี้ย มันก็เป็น feeling ของคนที่ งงๆ มาจาก React รู้สึกว่าเอ้ยอันนี้เราเข้าใจง่ายนะครับ และสุดท้ายนะครับ คอนเทนต์ที่มาจากที่อื่นเนี่ย ถ้ามันจะต้องแบบทำซับซ้อนแล้วมีระบบอื่นมันยุ่งยาก Astro ก็ออกเองเลยว่าเฮ้ยผมก็มี DB นะ มี Database ให้เป็น Managed SQL นะครับ SQL ก็คือสามารถทำเอา table มาลิงก์กันได้ และเป็น Managed ก็แปลว่าถ้ามีคนถล่ม เดี๋ยวเค้า scale ให้เอง มันไม่ล่มหรอก แล้วเค้าก็คิดตังค์ถูกมาก Free Tier เนี่ย ผมว่าเว็บทั่วๆ ไป ไม่ได้คนเข้าเป็นแสนเป็นล้านเนี่ย Free Tier น่าจะเหลือเฟือมากเลยนะครับ ก็เลยเชียร์อีกอันนึงว่าถ้าอยากใช้ก็ลองดูก็ได้ เค้าก็ให้ use case มานะครับ เนื่องจาก Astro บอกอยู่แล้วตัวเองเป็น content-driven นะครับ เค้าเลยไม่ได้ให้ในสิ่งที่จะต้องทำระบบซับซ้อน ไม่ได้ทำระบบแบบ backend ซับซ้อนอะไร ทำเนี่ยระบบ comment ระบบ blog ระบบ form ระบบ feedback ระบบ auth อะไรเงี้ย คือเป็นระบบสมาชิกง่ายๆ feedback ง่ายๆ หรือว่าลงทะเบียนง่ายๆ ที่ไม่ล่มแล้วก็ฟรีอะไรเงี้ยนะครับ ผมคิดว่ามันเป็นตัวที่น่าสนใจดีนะครับ ก็คิดว่าเดี๋ยวคงได้ทำเดโมสิ่งที่เป็นพวกระบบลงทะเบียนง่ายๆ แจกฟรีอะไรเงี้ยที่มันไม่ล่มนะครับ จะได้เอาลองมาลองเผยแพร่กันดูนะครับ แล้วก็สุดท้ายนะครับ

โอเค แล้วก็สุดท้ายก็ เมื่อเราทำเสร็จ

การ Deploy เว็บไซต์ Astro19:55

ในยุคนี้เราก็ push ขึ้น Git แล้ว push ขึ้น Git เสร็จก็ deploy นะครับ เพราะฉะนั้น เวลาที่ผมรู้สึกว่ามันว้าวมากก็คือ สิ่งที่เราทำ เราไปขึ้น Cloudflare Page ได้นะครับ พอขึ้น Cloudflare Page ก็ฟรีด้วย จะสังเกตผมไปลองใช้ PNPM แล้วไม่รอดนะครับ

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

พอดีว่ามัน มันก็มีหลายตัวที่ดังๆ อยู่แล้ว Vercel เนาะ Netlify นะครับ ซึ่งพวกนี้มันก็จะมี Free Tier ที่เยอะนะครับ คนทั่วไปที่ไม่ใช่ อะไรอ่ะ ไม่ใช่แบบว่าเว็บที่โหลดเยอะนะครับ ผมว่าเหลือเฟือ แต่ว่า Cloudflare Page เนี่ย เนื่องจากผมเอาไปใช้กับโปรเจคที่ อย่างที่บอกคนเข้าวันละล้านอะไรเงี้ย แล้วมันไม่ล่มนะ ใช้มาเป็นปีละ เราก็แฮปปี้อยู่นะครับ ดังนั้นก็คิดว่าน่าจะเวิร์กสุดละนะครับ

แล้วก็สุดท้ายนะครับ ก็คือ

แนะนำ ThaiUI และการสร้าง UI Components สำหรับภาษาไทย21:11

ไอ้ยูไอบรรดาเนี้ย ก็คุยกับน้องภูมิครับว่า เฮ้ย เราน่าจะทำแบบ UI Component แจกดีมั้ย ที่เป็นรองรับภาษาไทยดีๆ หน่อย แล้วก็พร้อมใช้หน่อยนะครับ ผมเอง เหมือนตอนแรกไม่ได้แนะนำ เป็นนายกสมาคมศึกษาพัฒนา Open Source นะครับ ต่อจากพี่บัง ก็ยังไม่ได้ทำอะไรเป็นชิ้นเป็นอันนะครับ ก็เลยรู้สึกว่าเดี๋ยวจะได้ทำ UI แจกนะครับ แต่คำว่าเดี๋ยวเนี่ย

พอผมทำจริงๆ เนี่ย เวอร์ชันแรกนะครับ อันนี้เดี๋ยว ใกล้ละเนาะ โอเค ก็ พอดีนะครับ ปี

เวอร์ชั่นแรกเนี่ย มีลิงก์ให้นะครับ

แล้วพรีเซนต์นี้เดี๋ยวส่งลิงก์ให้อีกทีนึง คือตอนแรกเราก็พยายามจะทำแบบลองเว็บราชการที่มันไม่ล่มอ่ะ ทำไงดีอะไรอย่างเงี้ย นะครับ เราก็เลยพยายามจะทำแบบ UI ง่ายๆ แล้วก็พยายามแจก นะครับ ก็มีแบบเฮดเดอร์แบบนู้นแบบนี้ ตัวอย่างแหล่งข้อมูลไปดึงมาจาก WordPress ก็ได้นะ ไปดึงมาจาก Google Sheets แบบเมื่อกี๊ก็ได้นะ อะไรอย่างเงี้ย นะครับ แต่พอทำไปทำมา เอ๊ะ การที่เราจะต้อง maintain ทุกอย่างรู้สึกมัน เหนื่อยไปหน่อย นะครับ ผมก็เลยไปทำ thaiui.org นะครับ

ซึ่งใช้วิธีง่ายที่สุดเลยว่า ผมขอฟันธงแล้วว่า ผมจะดูแลแค่ Astro ขี้เกียจดูแลทุกๆ อย่าง ทุกๆ HTML ไฟล์ ทุกๆ อะไรอย่างเงี้ย ไม่อยากดูแล แล้วก็ CSS ก็ขี้เกียจดูแลอยู่เหมือนกัน ก็ใช้ Tailwind ไปเลยละกัน แล้วเทมเพลตละ มีสวยๆ เยอะมั้ย เอ้าคนอื่นเค้าทำไว้เยอะอยู่แล้วนี่ ผมแค่เติมภาษาไทยก็จบแล้วนี่นา ก็เลยบอกว่าโอเค งั้นอันนี้มันเป็น framework ที่คนอื่นเค้าทำอยู่แล้วนะครับ ของ Astro เนี่ยเค้าแจกกันเพียบเลย ผมก็บอกว่าเอาตัวนี้มาแล้วใส่ภาษาไทยให้ดู แค่นั้นเอง นะครับ ส่วนตัวนี้ก็เหมือนกันก็ใส่ภาษาไทยให้ดู นะครับ ตัวพวกนี้มันดียังไง นะครับ เนี่ย อันนี่ผมเขียนอย่างงี้ก็จริง แต่ว่าจริงๆ มันก็แค่เอาโค้ดมาใส่ฟอนต์ไทยนะ พี่ มันดีเพราะว่าเขาก็มีแบบคิดมาให้แล้ว แล้วไลเซนส์มันก็คือเป็น open source หมดนะครับ อยากได้หน้าแรกเป็น SaaS อยากได้หน้าแรกเป็น startup น่าจะทำประมาณนี้นะครับ ซึ่งพวกนี้ก็คือ tailwind component หมดเลยนะครับ อยากได้แบบนี้ เพราะฉะนั้นถ้าเราหยิบตัวนี้ไป แปลงเป็นภาษาไทยก็จบแล้วนะครับ แล้วที่ผมแปลงผมก็แปลงแค่หน้าแรกหน้าเดียวด้วย ก็เอาแค่นี้แค่ให้รู้ว่า ใส่ฟอนต์ไทยแล้วมันได้นะ แล้วก็ dark mode ก็มาพร้อมแล้วนะครับ ถ้ากดดาวน์โหลดก็ไปที่ GitHub ก็ fork ไปได้เลยนะครับ อันนี้ก็จะอยู่ใน GitHub ของ ThaiUI นะครับ แล้วก็เดี๋ยวพยายามจะทำพวกนี้มาแจก มากขึ้นเพื่อให้เห็น best practice ว่า เราใช้ของฝรั่งแล้วเราก็แปลงฟอนต์ไทยมา ก็นิดเดียวนะครับ แต่ว่าถ้ามีเกินเพิ่มขึ้นก็คือ นอกจากฟอนต์ไทยเนี่ย สิ่งที่เราต้องเจอก็คือบางทีฝรั่งเนี่ยมันจะมีเขาเรียกว่า line height ระยะระหว่างบรรทัด ที่ไม่ค่อยเหมาะกับภาษาไทยนะครับ ภาษาไทยมีไม้เอกไม้โทนึกออกไหมมีสระอูอะไรอย่างเงี้ย line height ที่เหมาะมันควรจะซัก 1.6 จนถึงอาจจะ 1.8 เลย แต่ของฝรั่ง 1.1 1.2 อะไรอย่างเงี้ยมันก็ฟอนต์ก็จะบีบ

กับ เขาเรียกว่า letter spacing นะครับ ฝรั่งเนี่ยทำ letter spacing แล้วสวย ฟอนต์ไทยพอทำ letter spacing แล้วมันพังนะครับ ผมรู้สึกว่ามันมีนิดเดียวเองที่จะต้องระวัง นอกนั้นเนี่ยพอเราเอามาจัดปุ๊บมันก็จบแล้วนะครับ ก็เลยพยายามจะเอาตัวนี้ออกมาว่า เดี๋ยวคงได้ทำอย่างอื่นเพิ่มมาอีกนะครับว่า มีอะไรที่มันเหมาะกับ แปลงเป็น UI ภาษาไทยนะครับ

สุดท้ายนะครับ

สรุปข้อดีของ Astro และแหล่งข้อมูลเพิ่มเติม24:25

หลังจากนี้ถ้าอยากดูมากขึ้นนะครับ Astro เนี่ยผมว่าเขาทำเว็บได้ดีสุดๆ เลยนะครับ ครบวงจรมาก แล้วก็ใน resource นะครับ เขาเรียกว่าธีมนะครับ ก็คือ เราเอาธีมพวกนี้ไปโหลด แล้วก็แปลงฟรีเนี่ย อย่าง AstroWind เนี่ย เมื่อกี้ที่ผมทำก็เอาตัวนี้มา แล้วก็ฟรีด้วยนะครับ เขามีทั้งฟรีทั้งเสียอยู่ในนี้นะครับ ลองไปดูได้ แล้วเขาก็แบ่งเป็น category ไว้ พอสมควรนะครับ เนี่ยเป็น blog เป็น e-commerce อะไรอย่างเงี้ยนะครับ แต่ว่าอย่างที่บอกว่า มันเหมาะกับเว็บ content นะครับ มันไม่ได้เหมาะกับเว็บที่มันมีระบบ เบื้องหลังซับซ้อนนะครับ เพราะว่า สุดท้ายเนี่ย ผมคิดว่า

มันยังมีความหน่วงบางอย่าง ถ้าเราอยากได้ application ลื่นๆ นะครับ ไปทาง React ไปทาง Next เนี่ย ผมรู้สึกว่ามันลื่นกว่า แต่ถ้าเกิดอยากได้เว็บ content ที่ไม่ต้องดูแล แล้วก็ไม่ล่มนะครับ แล้วก็บริหารงานง่ายอะไรอย่างเงี้ยนะครับ ผมว่า Astro ก็ ดีที่สุดเท่าที่ลองมานะครับ

โอเคนะครับ คิดว่าน่าจะประมาณนี้นะครับ หมดเวลาพอดีนะครับ ไม่แน่ใจใครมีคำถามอะไรเพิ่มเติมก่อนมั้ย

มีมั้ยครับ ส่วนสไลด์เดี๋ยวคงได้ฝาก ทางน้องภูมิเนาะ เดี๋ยวคงได้เอามาให้โหลดอีกทีนึงนะครับ ตัวนี้ ครับ

ใครเคยใช้บ้างแล้ว ใครเคยลองใช้กับ Astro บ้างแล้ว โอ้ เยอะเหมือนกัน โอเค

นะครับ ก็ดูแล้วน่าจะโอเคแล้วนะครับ งั้นก็ขอบคุณทุกคนมากเลยนะครับ มีอะไรก็สอบถามกันได้ ขอบคุณครับ