🎞️ Videos → Bangkok: Svelte in every codebase

แนะนำตัวและเกริ่นนำ: Svelte ในทุก Code Base0:00

โอเคเดี๋ยวทอล์คต่อไปจะเริ่มแล้วครับ Svelte in Every Code Base ครับ ขอเสียงตบมือหน่อยครับ

โอเคๆ ก็สวัสดีทุกคนในงาน ไม่ได้พูดมานานมาก

โอเคก็วันนี้มาพูดเรื่อง Svelte in Every Code Base เนาะ

Software ทั่วไปมักมี Web View ซ่อนอยู่0:44

ไมค์ไม่ดังไปเนาะ ก็ก่อนพูดก็เดี๋ยวแนะนำตัวนิดนึงเนาะ ผมชื่อออมนะครับ ทำงานอยู่ที่ Brikl เป็น part-time platform engineer แล้วก็มีโปรเจคงานเล็กๆ เป็น open source ในเวลาว่างเนาะ จริงๆ แล้วไม่คิดเหมือนกันว่าจะมาในสภาพนี้ เพราะว่าจริงๆ แล้วปกติถ้าผมมางานปกติ มันก็จะเป็นแบบนี้มากกว่า

แต่ว่าที่มาในสภาพนี้ก็เพราะว่า มันมีคน มี organizer คนนึงเอาภาพนี้มาขึ้นนะฮะ

แล้วรู้มั้ยตอนที่ผมจะเปลี่ยน ตอนที่ผมยังไม่ได้ลงข้อมูลอะไรเลย ตอนที่กำลังจะลงข้อมูลใช่มั้ย มี messenger นึง inbox มา แท็กผมแล้วก็บอกว่า อ่าไม่ต้องส่งรูปภาพนะ ไม่เปลี่ยนให้ ก็โอเค ก็เลยมาในสภาพนี้ก็ได้ฮะ อะไรประมาณนี้

ก็โอเค ก่อนเริ่มก็เดี๋ยวเราพูดถึงเรื่อง software กันก่อนเนาะ ปกติแล้วเนี่ย ในนี้เราคิดว่าทุกคนน่าจะเป็นโปรแกรมเมอร์เนาะ ก็น่าจะเคยเขียน software กัน บางคนอาจจะเขียน server บางคนอาจจะทำ hardware แต่ว่าส่วนใหญ่ก็ในนี้ก็น่าจะทำ software เนาะ เพราะงานก็ธีม software

Web อยู่ทุกที่: ตั้งแต่ Mac, Windows, App ต่างๆ จนถึงตู้เต่าบิน2:00

เรารู้จักอันนี้มั้ยฮะ เผื่อใครไม่รู้จักเนาะ ใครไม่ได้ใช้ Mac อันนี้คือตัว setting ของ Mac นะฮะ คือหน้าตาเป็นแบบนี้เลย ปกติแล้วเนี่ย ใน Windows ใน Mac เนี่ย มันก็จะใช้ภาษาแบบ native ใช่มั้ย อย่าง Windows ก็อาจจะใช้ C# ในการเขียน หรือว่าใน Mac เนี่ย ก็จะใช้ Swift ในการเขียน ตัว interface ของตัว system เนาะ ยิ่งอันนี้มันเขียนโดย Apple เองแล้ว มันก็คงจะต้องเขียนด้วย Swift แหละ แต่ว่ารู้อะไรมั้ยว่า จริงๆ แล้วเนี่ย ที่คนเห็นแบบนี้เนี่ย มันไม่ได้เขียนด้วย Swift เพียวๆ แต่ว่าเราสามารถทำอย่างงี้ได้ เรากดคลิกขวาแล้ว inspect element แล้วมันก็จะมี Home Depot ขึ้นมา

เนี่ยที่ตรงนี้มันทำได้เนี่ย เพราะว่าจริงๆ แล้วเนี่ย ตัวนี้มันเขียนด้วย Swift แหละ แต่ว่ามีบางส่วนเนี่ย มันถูกเขียนด้วย web view อย่างเช่นตัวตรง title ตรงนี้ มันถูก fetch data แล้วก็เอา web เข้ามาเลย มันก็คือแบบตรงๆ ไม่ต้องทำอะไรมาก เพราะฉะนั้นเนี่ย บางส่วนเนี่ย ต่อให้มันเป็น native software เนี่ย เราอาจจะใช้มานานแล้วไม่ได้สังเกตเลย แต่ว่าจริงๆ แล้วเนี่ย มันเร็วเหมือนกับว่า native software เลย เพราะฉะนั้นเนี่ย จริงๆ แล้ว web เนี่ย มันไม่ได้แบบว่าช้าขนาดนั้น คือแบบว่าในขนาดแบบ มันอยู่ตรงนี้มานานแล้ว ยังไม่มีใครรู้เลยว่ามันเป็น web จนกระทั่งแบบว่า Mac macOS เวอร์ชันแบบต้นปีที่ผ่านมาเนี่ย เพราะฉะนั้นเนี่ย จริงๆ แล้ว ตัว web เนี่ย มันอยู่เกือบทุกที่เลย ไม่ว่าจะเป็นแบบว่าใน Windows ใน Mac แม้แต่ขนาดแบบว่า ตัว native system ของ Mac เอง ก็ยังใช้ web view อยู่เลย ซึ่งถ้าเราไม่รู้ว่าตัว web เนี่ยมันมีอะไรบ้าง ก็ตรงหน้าเนี่ย ทั้งหมดเนี่ยถูกเขียนด้วย web หมดเลย ตัว Discord ถูกเขียนด้วย Electron browser ก็ใช้ JavaScript อยู่แล้ว Slack ก็เขียนด้วย Electron

Postman ก็เขียนด้วย Electron แล้วก็ล่าสุดก็คือ VS Code ก็เขียนด้วย Electron เหมือนกัน ซึ่งมันเยอะมากเลย มันมีตั้งแต่แบบ mobile desktop เลย สามารถใช้ web ได้เนี่ย ซึ่งเราก็เดี๋ยวนี้เราสามารถใช้ Electron ในการสร้าง desktop app ได้ แล้วก็นอกจาก Electron แล้วเนี่ย บน desktop app เดี๋ยวนี้ก็มี Tauri ที่เพิ่งประกาศเป็นเวอร์ชัน stable เมื่อสัปดาห์ที่แล้ว ก็ Tauri คือ มันคือ Electron แต่เร็วกว่า แทนที่จะเอา Chromium เนี่ย เราใช้เป็น native web view ตัวเลย อย่างเช่นของ Windows ก็จะใช้เป็นตัว Microsoft Edge ของ Mac ก็จะใช้เป็น Safari ก็คือแบบเราไม่ต้อง ship browser อะไรทั้งนั้น เพราะฉะนั้นมันจะขนาดเล็กมาก ตัวนี้เนี่ย เป็นตัว software ที่ผมเขียนขึ้นเองชื่อ Lagrange มันคือแบบอารมณ์ประมาณว่า Postman แต่ว่าเร็วกว่า เดี๋ยวมาเอาให้ดูเนาะ

Lagrange ปึ๊บ ไม่รู้ว่าจะมองเห็นป่ะนะ ปึ๊บ

ตัวนี้เป็น ถ้าไม่ชัวร์ก็คือ โห หน้าตามันเล็กมากเลยอ่ะ หลักๆ คือมันคือ Postman แต่ว่ามันคือ แบบว่าเขียนด้วยตัว Tauri มากกว่า ถ้าเราลองกด send ดู ปึ๊บ ได้ๆๆ

โอเค thank you ก็ถ้าเราลองกด send ดูตรงนี้

เห็นมั้ย ตรงนี้เป็น web เนาะ เป็น API endpoint ส่วนตรงนี้เป็นตัว GraphQL ถ้าเรากดส่งมันก็จะได้ข้อมูลแบบเหมือนตัว Postman เลย เดี๋ยวเราลองเปลี่ยน variable ดูแล้วกัน เป็น page 2 แล้วกันเนาะ โอเค enter มันก็จะ fetch ข้อมูลมาจากตัว API ตรงนี้ด้วย GraphQL ซึ่งตรงนี้เป็น Postman แบบย่อมๆ ซึ่งขนาดเนี่ยมันแค่ 7 MB ตัว bundle size ทั้งหมด แค่ 7 MB แล้วมันเปิดเร็วมาก เดี๋ยวผมเปิดให้ดูเลยแล้วกันเนาะ ดูนะ ไม่น่าถึง 0.1 วินาที ก็น่าจะเปิดเสร็จแล้ว เรียบร้อย เร็วมาก ถ้าเราลองเทียบกับ Postman นะ ที่เขียนด้วย Electron อันนี้ Postman เป็น M1 Native แล้ว

ประมาณเกือบ 8 วินาทีมั้ง น่าจะประมาณเนาะ

ทำไมต้อง Svelte?5:45

เพราะฉะนั้นเดี๋ยวนี้มันมีอะไรใหม่มาเยอะมาก โดยเฉพาะในโลกของ web เดี๋ยวนี้เราก็ไม่ต้องมานั่งรอ Electron ที่แบบว่าช้าขนาดนั้นอีกแล้ว ก็โอเค มาต่อเลย ก็เดี๋ยวนี้มันก็มี Tauri เนาะ แล้วก็ตัว mobile ก็มีตัว Ionic Capacitor ที่แบบว่าเราเอามาเขียน mobile ได้ แล้วก็รู้มั้ยว่าตู้เต่าบินเนี่ย จริงๆ แล้วเนี่ย

มันไม่ใช่ embedded มันเป็น Android แล้วก็ตัวของมันจริงๆ เนี่ย มันเขียนด้วย Ionic ถ้าถามว่ารู้ได้ไง จริงๆ แล้วมันมี endpoint expose ออกมา เราสามารถเข้าไปเช็กได้เลย มันเป็น Ionic แท้ๆ เลย แต่ว่า fix UI แล้วก็เราสามารถใช้ Svelte ในการนั่นแหละ

จริงๆ แล้วเนี่ย เดี๋ยวนี้มันมี web เยอะมากเลย เห็นมั้ยว่ามันมีทุกที่เลย ไม่ว่าจะในตู้เต่าบิน ในตัวแบบ ใน TV system เนี่ย เดี๋ยวนี้มันก็มี web เต็มไปหมดเลย แต่คำถามก็คือ สมมติว่าเราเขียนโปรเจคนึงเสร็จแล้วเนี่ย แล้วในโปรเจคใหม่เราต้องการใช้ component ตัวเดิม หรือต้องการ reuse เนี่ย คำถามคือเราจะจัดการยังไง เดี๋ยวนี้เนี่ย หลักๆ เราก็จะเขียนด้วย 3 framework เนาะ ใน web ก็จะมี Angular, React แล้วก็จะมี Vue อีกตัวนึงที่อยู่ในนี้เนาะ มีใครเขียน web แล้วไม่เคยใช้ 3 ตัวนี้บ้างมั้ยฮะ เป็นหลัก

ไม่มีนะ โอเค

ขนาด Bundle Size สำคัญ: Svelte เล็กกว่าเยอะ7:05

ก็คำถามก็คือ เห็นมั้ยว่าเนี่ยเดี๋ยวนี้มันแบบว่า

80% ใช้ React 54% ใช้ Angular แล้วก็ 51% ใช้ Vue ใน 2021 ใช่ อันนี้มาจาก State of JS เนาะ

คำถามก็คือ ในเมื่อเรามี framework ที่คนใช้เยอะขนาดนี้แล้ว แล้วทำไมเราถึงยังต้องสร้าง framework อะไรใหม่ๆ หรือ library อะไรใหม่ๆ อีก ก็อันนี้ตอบง่ายมากฮะ มีใครเคยใช้ตัวนี้มั้ยฮะ เนี่ย มีใครยังใช้อันนี้อยู่มั้ย ไม่มีเนาะ

โอเค นั่นคือ เพราะฉะนั้นเนี่ย ผมไม่จำเป็นต้อง ที่จะอธิบายอะไรมาก คือพอมันมีของที่ดีกว่าเนี่ย เราไม่จำเป็นที่จะต้องทนใช้ของเดิม เพราะว่าในอนาคตเนี่ยมันจะมีเครื่องมือที่ดีกว่า มาแทนที่เสมอ เมื่อก่อนเราอาจจะใช้ webpack กับ browserify Grunt หรือว่า Rollup ซึ่ง 2 ตัวนี้ก็ยังมีใช้อยู่เนาะ เดี๋ยวนี้ก็ยังมีใช้อยู่ เช่น Next.js ก็ยังใช้อยู่ แต่ว่า Next.js ก็เริ่มที่จะย้ายมาเป็น SWC แล้วเดี๋ยวนี้ก็ Vite ก็ใช้ esbuild แล้วก็จะมีอีกตัวนึงที่เรียกว่า Bun.js ซึ่งยังเป็น closed source อยู่ ซึ่งมันเร็วกว่า SWC ประมาณเกือบ 10 เท่าได้

ทั้งๆ ที่มันยังเขียนด้วย Rust อยู่ แต่ว่า โอเค ถ้าเราลองมาดูกราฟตัวนี้เนาะ

ตัวนี้เนี่ยมันคือ satisfaction ก็คือเราใช้ library อะไรแล้วแบบพอใจขนาดไหน จะสังเกตว่าตัว 3 framework เนี่ย 3 framework เมื่อกี้อ่ะ ไม่ใช่อันดับ 1 อันดับ 2 อันดับ 3 อีกแล้ว เดี๋ยวนี้ ตัวจากปีที่แล้วเนี่ย ตัวที่คนพอใจในการเขียนมากสุดคือ Solid รองลงมาคือ Svelte แล้วก็อันดับ 3 เนี่ยคือ React เห็นมั้ยว่ามันไม่ได้แบบว่าคงอยู่คงที่เสมอ เพราะฉะนั้นเนี่ย ไม่ว่าเราจะชอบ library อะไรก็ตามเนี่ย สุดท้าย library ที่เราชอบมันจะตายอยู่ดี jQuery ก็ตาย ไม่ว่าจะอะไรก็ตามเนี่ย คนอาจจะเห็นว่า React เนี่ย คนเรียนตอนนี้ คนอาจจะได้ใช้แบบ 5 ปี อาจจะ 10 ปี แต่ว่าในอีก 20 ปีก็อาจจะไม่อยู่แล้วก็ได้ เพราะฉะนั้นเนี่ย แต่ว่าในการที่แต่ละอย่างเนี่ยมันเกิดขึ้น

อย่างย้ายจาก jQuery มาเป็น React เนี่ย เราใช้เวลาก็ใช้เวลาเยอะมาก อย่างเช่นแบบอาจจะ 10 ปี หลัก 10 ปีขึ้นไป อะไรประมาณนี้ แล้วก็รู้มั้ยครับว่าตอนนี้ jQuery เนี่ย

บนเว็บไซต์ทั่วโลก จากสถานะตอนนี้ jQuery ยังมีคนใช้อยู่ 80% จากเว็บไซต์ทั้งหมดที่ยัง hot อยู่ตอนนี้ แต่ว่าเห็นมั้ยว่าเดี๋ยวนี้ก็ไม่มีใครเขียน jQuery แล้ว เพราะฉะนั้นเนี่ย ไม่ว่าจะเกิดอะไรขึ้นเนี่ย มันใช้เวลาเสมอในการที่จะ transition จากสิ่งนึงไปสิ่งนึงเนาะ แต่ว่า เวลาที่เราเขียนอะไรเนี่ย บางทีเนี่ย

เราธุรกิจเนี่ยมันไม่สามารถที่จะรอได้ เราจะแบบว่า framework ใหม่ เราเขียนขึ้นมาเลย แล้วก็แบบในอีก 2 ปี แล้วก็ธุรกิจไม่สามารถรอแบบนั้นได้ เราไม่สามารถ migrate จาก whole React ทั้งหมด ไปเป็น Svelte ในวันพรุ่งนี้ได้ หรือว่าในสัปดาห์นี้ได้ อะไรประมาณนั้น

ค่อยๆ Migrate เป็น Svelte ทีละส่วน9:40

แต่ว่าสิ่งที่เราทำได้เนี่ย คือเราสามารถค่อยๆ ขยับมันขึ้นมาได้ทีละส่วนๆ

แล้วก็ถ้าจะให้พูดวิธีเนี่ย เราอาจจะแบบ โอเค

เราไม่เขียนใหม่ละ เราจะค่อยๆ เขียนใหม่ทีละส่วนเนาะ วิธีการเขียนใหม่ทีละส่วนเนี่ย มันมีหลายวิธีมากเลย อย่างเช่น ทำ proxy ทำ micro architecture ทำ monorepo micro frontend หรือว่าจะสร้าง project ใหม่ทั้งหมดเลยก็ได้เหมือนกัน

วิธี Migrate Code เป็น Svelte10:05

แต่ว่า คำถามก็คือ ตอนนี้เนี่ย มี 3 framework ละ

แล้วทำไมเราถึงมาในงานที่ชื่อว่า SvelteJS ทำไมเราถึงควรที่จะใช้ Svelte เนาะ

โอเค อย่างแรกที่ผมจะพูดมาก่อนเลย นี่คือสิ่งที่ทุกคนน่าจะเห็นด้วยก็คือ เดี๋ยวนี้เนี่ย ขนาด bundle size ของ web เนี่ย average ในปี 2021 อยู่ที่ประมาณ 2 MB ซึ่งถ้าเราดูจากตรงนี้แล้วเนี่ย ตัว framework ที่เราใช้เนี่ย โอเค ตอนนี้มันอาจจะดูไม่เยอะหรอก แต่ว่า ใครจะไปรู้ว่า สมมติผมใช้ React เป็นหลักเนาะ ใน React เนี่ย เรามีใครแบบลง React เพียวๆ ไหม ก็ไม่มีใช่ไหม ทุกคนต้องแบบว่าลง library เพิ่ม อย่างเช่น state management ก็ใช้ Redux, Recoil หรือว่า Jotai หรือว่าแล้วแต่คนชอบเนาะ บางทีก็มีอยาก fetch GraphQL ก็ลง GraphQL แล้วก็ลง React Query หรือ useSWR มาอีก

ไม่ว่าเราจะเห็นแบบแค่เนี้ย แต่ว่าจริงๆ แล้วเนี่ย ใน codebase ของเราเนี่ย มันไม่ได้ใช้แค่นี้หรอก มันจะต้องใช้แบบว่า library ที่แบบช่วยพวกนี้เอง ซึ่งผมว่าอย่างน้อยเนี่ย แต่ละ node module ของแต่ละคนเนี่ย ก็คงแบบว่าเกินหลัก GB ละ ถ้าอยู่ในบริษัทเนาะ

ทีนี้เนี่ย สมมติว่าเราจะย้ายจาก React ไป Angular

หรือว่าย้ายจาก Angular ไป React เนี่ย มันเท่ากับว่า สมมติเรามีทั้ง 2 อันเนี่ย ใน project เดียวกันเนี่ย ก็เท่ากับว่าเราจะต้องเอา bundle size อย่างน้อยที่สุดก็คือ 60 KB กับ 40 KB มารวมกัน ซึ่งมันก็แบบว่ามีขนาดแบบ 106 KB ละ แล้วก็ถ้าเราไป run มัน page speed เนี่ย ก็คงแบบไม่ได้ถึง 100 แน่นอน เพราะแค่เอา framework เข้ามามันก็แบบ 100 กว่า KB แล้ว ถ้า bundle size จริงรวมจริงก็คงแบบว่า ทำแบบ web dashboard หรือว่า web back office เนี่ย อย่างนั้นก็คงแบบ 300 GB ขึ้นไปแล้วขนาดนี้ แต่ว่า คุณรู้ไหมครับว่า Svelte เนี่ย มันมีขนาดแค่ 1.7 KB แค่นั้นเอง ถ้าเราลองใช้ Svelte เนี่ย รวมกับ React เราค่อยๆ migrate ตัว React ไปเป็น Svelte เนี่ย จะเห็นว่าเนี่ย bundle size ของ React ทั้งหมดมีแค่ 44 แต่ว่าพอเอามารวมกับ Svelte แล้วมีแค่ 46 แค่นั้นเอง เราสามารถใช้ Svelte ได้เหมือนกับว่า มันไม่ได้มีอะไรอยู่ตรงนั้นเลย เพราะว่า ขนาด bundle size มันเล็กมากๆ อันนี้คือ 1 footprint ที่มันจะไม่มาแน่นอน ในเวลาที่เรา migrate ทุกอย่างเป็น Svelte เนาะ แล้วก็ลองคิดดูว่าสมมติว่าเราค่อยๆ migrate จนเสร็จ

แล้วเนี่ย เท่ากับว่าเราจะสามารถ reduce ออกตัว 44 KB ตรงนี้หายไปได้เลย ยิ่งถ้าใช้ NextJS ด้วยแล้วมันจะมี bundle size อยู่ประมาณอย่างน้อย 60-70 KB ในการสร้าง web ใหม่เนาะ ซึ่งมันก็แบบว่าหายไป เราก็จะได้คะแนน performance มาฟรีๆ เลย เพราะฉะนั้นเนี่ย เดี๋ยววันนี้จะลองพูดถึง วิธีการ migrate ตัว Svelte

Web Component คืออะไร?12:48

แบบว่า 4 วิธีในการที่ migrate code เป็น Svelte เนาะ อย่างแรกก็ทุกคนน่าจะรู้จัก web component อยู่ละ web component เนี่ย เผื่อใครไม่รู้จักเนาะ web component มันคือ เราสามารถเอา JavaScript bundle ไปเป็น HTML element ได้ 1 อันเลย เหมือนกับว่า เราเขียน code มาแล้วปุ๊บ แล้วเราก็เอา code ทั้งหมดเนี่ย ไปรวมเป็น HTML tag 1 อัน ซึ่งในสมัยนี้เนี่ย ตัว library ที่เรานิยมใช้ หลักๆ มีอยู่ 2 ตัวคือ Stencil แล้วก็ LitElement แต่ว่า โอเค ในเมื่อเรามี 2 อันนี้อยู่แล้ว แล้วก็คนใช้เยอะมากสำหรับในการทำ web component อยู่แล้ว ทำไมเราถึงยังต้องใช้ Svelte อยู่

ทำไมต้องใช้ Svelte สร้าง Web Component?13:29

คำตอบแรกก็คือ ตัว library 2 ตัวนี้เนี่ย

มัน limit อยู่ที่ web component เท่านั้น เราไม่สามารถ compile เป็นแบบว่า แบบไม่มี web component ได้ อย่างเช่นสมมติเราสร้าง React เนาะ เราก็สามารถ compile ทั้งหมด เป็นแบบว่า DOM ปกติได้เลย แต่ว่า React เนี่ยก็สามารถ compile เป็น web component ได้เหมือนกัน แต่ถ้าเราใช้ library 2 ตัวเนี้ย มันไม่มีวิธีที่ง่ายซักเท่าไหร่ในการที่แบบเปลี่ยนทุกอย่าง ให้กลายเป็น native HTML เนาะ

นี่คือเหตุผลที่เราควรใช้ Svelte เหตุผลที่ 2 ก็คือเราลองดู performance graph ตรงนี้แล้วกัน ตรงนี้เนี่ย performance graph ของอันเนี้ยเนี่ย มันคือเอามาจากตัว jsPerf เนาะเผื่อใครไม่เคยเห็น หลักๆ มันคือ เปรียบเทียบระหว่าง LitElement Svelte แล้วก็ Stencil ตัว Svelte อยู่อันที่ 2 เนาะสีส้มเนาะ จะเห็นว่าตรงนี้เนี่ย Svelte เนี่ยมันเร็วเป็นอันดับ 2 เลย ปึ๊บ ถ้าเทียบกับ Stencil พอเทียบกับ LitElement เนี่ย Svelte เนี่ยใกล้เคียงกับตัว LitElement มาก มันเร็วแบบเกือบจะเท่ากันเลย ทีนี้เนี่ยเผื่อใครไม่รู้ เผื่อใครไม่ get ว่ามันเร็วแค่ไหนเนาะ

Svelte เร็วกว่า Framework อื่นๆ14:32

เดี๋ยวเราลอง compare เราลองเอาไปเทียบกับตัว Angular React แล้วก็ Vue ดูแล้วกัน โอเค อันนี้คือ graph ในการเทียบเนาะ

อันแรกคือ Svelte ลองลงมาเป็น Vue อันที่ 3 เป็น Angular แล้วก็อันที่ 4 เป็น React อันนี้เป็นเวอร์ชั่นล่าสุดเนาะ ทั้งหมดเลย Svelte 3.4 Vue 3.2 3.2 เป็นล่าสุดรึเปล่าไม่แน่ใจ แล้วก็ Angular 13 ล่าสุดละ

แล้วก็ React เป็น React 18 แต่ถ้าเราลองมาเทียบแล้วเนี่ยจะเห็นว่า ไม่ว่าจะ graph ไหนเนี่ย Svelte เร็วสุดเกือบจะเสมอ อย่างเช่น graph ตัวนี้แล้วกัน ตัวอันนี้

เราสร้าง 10,000 row จะเห็นว่าตัว React เนี่ย ใช้เวลา 1,400 ms มัน millisec เนาะ ก็คือ 1.4 วินาที

ในการแบบว่าสร้างขนาด 10,000 แถวโดยที่เป็น HTML เปล่าๆ

โอเค ทีนี้เนี่ย มันมีข้อเสียอยู่อย่างนึงของ virtual DOM ก็คือ virtual DOM เนี่ยมันเป็น runtime ก็เท่ากับว่า เราลองคิดภาพ สมมติเราจะใช้ตัว Node.js แล้วกันเนาะ เวลาจะใช้ Node.js เนี่ยสมมติเราเขียน script ง่ายๆ เลยแบบประมาณ 3-4 บรรทัด ก่อนที่เราจะใช้ได้เนี่ย เราจะต้องลงตัว Node.js ก่อนแล้วค่อยเอามา run เนาะ เพราะ Node.js เป็น runtime แต่ถ้าเราเขียนด้วย C หรือ Go หรือว่าเป็น Rust แล้วกัน ภาษาพวกเนี้ยเป็นภาษา compile เพราะฉะนั้นเนี่ยพวกเนี้ยมันสามารถที่จะแบบว่า build ออกมาแล้วก็ไม่จำเป็นต้องใช้ตัวภาษามันในการจัดการให้แล้ว เพราะว่ามันแบบ compile ทุกอย่างเป็น source code ที่สามารถเอาไป run ได้เลย ไม่จำเป็นต้องลงอะไรเพิ่ม

Svelte ไม่มี Runtime: เหมาะกับ Component เล็กๆ16:04

เพราะฉะนั้น ทีนี้เนี่ย virtual DOM เนี่ยมันมีปัญหาอย่างนึงก็คือในการที่จะใช้ component ที่เขียนด้วย virtual DOM ได้เนี่ย มันจะต้องลงตัว library ของมันก่อน อย่างเช่นใน React เนาะ แล้วก็ อย่างที่เราเอามาเทียบแล้วกันว่าเรามี React

component ตัวนึง แล้วเราจะใช้ React เนี่ยเขียน component อันนึงแล้วกัน สมมติเอาเป็น stateless card อันนึงแล้วกัน เป็นแบบ card material component ปกติเลย แบบว่าแบบใส่ภาพใส่ title อะไรได้ ทีนี้เนี่ยเราลองดู bundle size ของ React แล้วกัน มันอยู่ประมาณที่ 64 KB แล้วถ้าสมมติว่าเราเอาตรงนี้เนี่ย เอา graph ตรงนี้เนี่ยไป run ใน codebase อื่นที่ไม่ได้ใช้ React เนี่ย เท่ากับว่าเราจะต้อง ship 64 KB บวกกับ bundle size ของ stateless card ที่เราเขียนเพิ่มขึ้นมา ซึ่งคำถามก็คือเราจะเอา virtual DOM

ไปทำไมในเมื่อเราต้องการใช้แค่ component เดียว

ตัว virtual DOM เนี่ยมันไม่ใช่ว่าไม่ดีนะ แต่ว่ามันมี อันนี้คือ graph อุปสงค์อุปทานนะ มันคือ มันจะมีปัญหาอยู่อย่างนึงก็คือ ยิ่งเราใช้ React เยอะเท่าไหร่เนี่ย มันจะยิ่งคุ้มค่ามากขึ้นเท่านั้น เพราะว่าถ้าเราเขียนแค่แบบว่า Hello World ธรรมดา 1 หน้าเนี่ย มันจะ ship bundle size มา 64 แต่ว่าถ้าเราเขียนมากขึ้นๆ เนี่ย ตัว bundle size ตรงเนี้ยมันจะหาย มันจะแบบว่าแทบจะน้อยกว่า code ที่เราเขียนด้วยซ้ำ ทำให้แบบว่ามันได้ graph ที่แบบว่ามันมีความน่าคุ้ม

ที่จะแบบว่าใช้มากกว่า ทีนี้เนี่ย แต่ปัญหาก็คือ ตัว Svelte เนี่ย มันไม่ได้มี runtime เพราะฉะนั้นเนี่ยไม่ว่าเราจะเขียนน้อยเขียนเยอะเนี่ย มันก็ตัว effort มันไม่ต่างกัน ตัว performance ไม่ต่างกันเลย มันมีปัญหาอีกอย่างนึงก็คือในการที่เรา ship runtime

ทั้งหมดเนี่ย มันขนาดมันใหญ่มาก แล้วบางอย่างเราไม่จำเป็นต้องใช้ อย่างเช่น เราเขียน Node.js นึงแบบว่า CLI ปกติ แค่แบบ fetch ของปกติเลย แล้วเราต้องแบบ install Node.js มันก็ไม่ใช่เรื่อง ทำไมเราไม่แค่แบบว่าใช้แบบภาษา compile หรือใช้ shell script ก็ได้ เขียนอะไรง่ายๆ แต่ว่าตัว Svelte เนี่ยมันไม่มี runtime เลย คำถามก็คือ แป๊บนึงนะ โอเค ทำไม Svelte

มันถึงไม่มี runtime ใช่มั้ย

Svelte ทำงานอย่างไร? (ไม่มี Virtual DOM)18:05

ตัว Svelte เนี่ยมันไม่มี runtime เนาะ เพราะฉะนั้น ขอแป๊บนึงนะ เหมือนว่าสไลด์จะหลุดแป๊บเดียว โอเค ตัว Svelte เนี่ยมันไม่มี runtime เพราะว่าเหมือนที่พี่ speaker เมื่อกี้พูดมาก่อนเนาะ ก็คือตัว Svelte เนี่ย มันไม่ได้ใช้ virtual DOM แต่ว่ามันใช้ compiler ในการเช็กว่า ในการ mutate DOM 1 รอบเนี่ย

ในการ update DOM เนี่ย มันจะต้องใช้อะไรบ้าง แล้วมันจะใช้ compiler ในการตัดสินใจว่า มันค่อยๆ mutate DOM ไปเรื่อยๆ เพราะฉะนั้นเนี่ย ยิ่งสมมติว่าเราใช้ stateless เนี่ย เรามันก็จะไม่มีการ mutate DOM เลย ตัว compiler มันก็จะรู้ว่าโอเค เราไม่จำเป็นต้อง mutate อะไร ตัว Svelte เนี่ยมันจะ compile ทุกอย่างไปเป็นแบบว่า document.getElementById แล้วก็แบบว่า text node แล้วก็แบบ move insert insert child อะไรพวกนั้น ถ้าเราเขียน vanilla JS ตัว Svelte จะ compile เป็นอย่างงั้นเลย มันจะมี runtime เล็กๆ น้อยๆ ก็คือในการแบบว่า

ย่อขนาดของตัว function อย่างเช่นแบบมี function ที่ยาวเช่น document.getElementById แล้วก็แบบย่อเป็น function แบบ d อะไรประมาณนี้ ทำให้มันเหมือนว่าจะมี runtime แต่จริงๆ มันคือไม่มี runtime มันแค่แบบว่าทำให้ syntax มันสั้นลงในการใช้มากขึ้น

เพราะฉะนั้นเนี่ย พอมันเป็นอย่างงี้เนี่ย ตัว Svelte เนี่ยมันเหมาะกับการที่จะเขียน อะไรที่มันเล็กๆ มาก อย่างเช่น component ที่จะใช้ในบางที่

Web Component: Encapsulation ของ Component19:23

เพราะฉะนั้นเนี่ย ตัว component เนี่ย พอเราลองคิดถึงแล้วเนี่ย 1 ทางเลือกที่จะใช้ component ใน web เนี่ยมันก็คือการใช้ web component ซึ่งตัว web component เนี่ยหลักๆ มันคือการทำ encapsulation มันคือจะเอา logic ทั้งหมด style ทั้งหมด ไป compile ไปเป็น HTML 1 tag ปกติเลย

ถ้าคิดไม่ออกมันจะหน้าตาเป็นประมาณนี้ อันนี้คือตัว Polymer ซึ่งก็ตายไปแล้วแหละ แต่ว่ามันเอามาเป็น example ที่ได้ดี เนี่ยเห็นมั้ยว่าตัวเนี้ย ตัว HTML เนี่ยมันมีอยู่แค่นี้เอง มีแค่แบบ paper-dropdown paper-listbox แล้วก็ paper-item มันใช้แค่นี้ในการสร้างพวก list item ออกมาแบบนี้ ซึ่งจริงๆ แล้วเนี่ยถ้าเราไม่ได้ใช้ web component เนี่ย เราก็ต้องแบบว่าเขียน JavaScript ในการ addEventListener แล้วก็แบบ animate ตัวมันเนาะ แล้วก็แบบ จะเห็นว่ามันมี CSS ด้วย ทั้งๆ ที่ในนี้แบบว่ามันแบบไม่ได้ใช้อะไรเลย มันเหมือนกับว่าใช้แค่ HTML เปล่าๆ ปกติเลย อันนี้คือ web component ซึ่งข้อดีของ web component ก็คือมัน support

กับเกือบทุก library ก็ถ้าที่เรากังวลก็คงเป็นแบบว่า

Angular React แล้วก็ Vue แต่ว่าจริงๆ แล้วเนี่ย web component มันแทบจะเท่ากับตัว HTML ปกติเลย ถ้าแค่มัน run HTML ได้แล้วก็ run JavaScript ได้มันก็เอาไปใช้ได้แล้ว เพราะฉะนั้นเนี่ย เดี๋ยวเราลอง proof concept ตรงนี้แล้วกัน ด้วยการเราลองมาสร้างมันเลยแล้วกันเนาะ สักอันนึง

Demo: สร้าง Web Component ด้วย Svelte20:40

ตัว Svelte เนี่ย ถ้ากลัวว่ามันจะเขียนยากอะไรขนาดนั้น ตัว Svelte เนี่ยของ compiler มันมี flag อันนึง ที่ชื่อว่า customElement แล้วปรับเป็น true แล้วพอเรา build ออกมา มันก็จะได้เป็น web component เลย ไม่ต้องทำอะไรมาก มันทำแค่นี้เลย แล้วก็เดี๋ยวเราลอง Svelte component สั้นๆ สักอันขึ้นมาดูแล้วกันเนาะ อันนี้เป็น counter ปกติ 1 อัน เป็นแบบว่า counter เลย แบบว่าเหมือนแบบว่า view counter แบบกดเพิ่มค่า กดลดค่า ปกติเลยมีแค่ button เนาะ แล้วก็แบบมีแสดงค่า กดอันนึงเพิ่ม กดอันนึงออก วิธีการทำ web component ใน Svelte เนี่ย เราไม่จำเป็นต้องไปแต่งอะไรเลย มันมี built-in อยู่ในตัว Svelte แล้ว เราแค่เพิ่ม tag พิเศษอันนึงที่ชื่อว่า Svelte:options ปึ๊บ แล้วเราก็ตั้งชื่อ เราเอาเนี่ย ตัว tag เนี่ย ไปใส่ในตัว web component เมื่อกี้ แล้วก็ตั้งชื่อ tag ก็คือแบบเราอยากให้เป็น HTML tag อะไร ก็ตั้งไป ปึ๊บ เพราะฉะนั้นเนี่ย สุดท้ายแล้วจะได้ออกมาเป็นแบบนี้ แล้วเดี๋ยวเราลองเพิ่ม CSS สักหน่อยแล้วกัน ตัว web component เนี่ยมันมี selector พิเศษที่ชื่อว่า :host คือถ้าสังเกตเนี่ย ตัวเนี้ยเห็นมั้ยว่ามันไม่ได้มีอะไรครอบเลย แต่ว่าตัว layout เนี่ยเราสามารถจัดการ ปกติแล้วเนี่ยเราจะจัดการ layout ด้วยกันแบบว่า

เอา children ไปใส่ใน div แล้วก็แบบตั้ง div เป็น flex ตั้งเป็น grid หรืออะไรก็ตาม ซึ่งตัว web component เนี่ยมันสามารถจัดการ

ด้วยความที่แบบมันเป็น HTML tag อยู่แล้วเนี่ย เราสามารถเอา tag ตัวมันเองเนี่ย ไปเป็นตัว layout มันได้ ด้วยการที่แบบเราเลือกแค่แบบว่า เลือกคำว่า :host แล้วก็ตั้งไปว่าเราอยากได้อะไร อันนี้ผมก็ตั้งเป็น flex แล้วก็แบบตั้งเป็น row ปกติเลย เหมือนกับ flex ปกติ แล้วเราก็หยิบเอาไปใช้ก็แค่แบบว่า paper-counter แล้วเราก็จะได้ component แบบหน้าตาแบบนี้ออกมา กดได้ปกติเลย เหมือนกับตัว component ปกติ แต่ว่า สิ่งที่เราต้องการในการเรียกใช้ก็แค่เรียก tag แค่นี้เอง

ทีนี้เนี่ย เดี๋ยวเราลองเอาที่มันยากขึ้นมาหน่อยแล้วกัน ตัว component เนี่ย ปกติเราเขียน Svelte เนาะ เราก็จะสามารถรับ props ผ่าน props เข้าไปใน component ได้ ตัววิธีในการแบบว่าผ่าน props เข้าไปใน web component เนี่ย ก็ทำเหมือน Svelte เลย คือแบบว่า เราแค่ export แล้วมันก็จะรับค่าเข้ามา ปึ๊บ แล้วก็จะได้เอาค่าเข้าไปใส่ในแบบนี้ อันนี้เป็น web component เนาะ ถ้าเป็น Vue ถ้าเป็น Svelte ปกติแล้วแค่แบบว่า เขียนแบบ tag Svelte ปกติเลย เห็นมั้ยว่ามันแทบไม่ต่างกันเลย แล้วก็จะได้หน้าตา component แบบนี้ออกมา เห็นมั้ยว่ามันเขียนไม่ต่างจากตัว Svelte เลย แต่ว่ามันสามารถเอาไปแบบว่า compile ไปเป็นแบบ web component แล้วเราสามารถเอาตัว build ตรงนี้เนี่ยไปใช้ในที่อื่นได้ อ่า มีอีกพิเศษอีกอันนึงก็คือตัว slot เนาะ ถ้าใครเคยเขียน Svelte มาก่อน อ่า ใน React จะไม่มีเนาะ ตัวนี้ถ้าเคย ใครเคยเขียน Vue มาก่อนเนี่ย เราสามารถผ่าน children เข้าไปแล้วบอกว่า เออ ให้มันไปโผล่ตรงนี้ด้วยการตั้งชื่อมันได้ ซึ่งใน Svelte เนี่ยมันก็มีของที่เหมือนกับตัว Vue เลย ก็คือใช้ slot แล้วก็ตั้งชื่อมา ทีนี้เวลาเราจะเอา สมมุติอันนี้ผมมี component อันนึง layout เนาะ แล้วก็มี divider ตรงกลาง ถ้าผมต้องการแบบว่า เออ ผ่านอันนึงไปแบบว่า ให้มันอยู่ข้างบนตัว divider อันนึงอยู่ด้านล่าง ผมก็ตั้งชื่อ name="up" name="down" เข้ามา แล้วก็เอา component เข้าไปใส่ ก็จะเป็นประมาณนี้ อันนี้ก็คือส่วน up อันนี้เป็นส่วน down ข้างบนจะเป็น card ข้างล่างเป็นตัว counter พอหน้าตาออกมาก็จะหน้าตาแบบนี้ จะเห็นว่ามันมี divider อยู่ตรงกลาง แล้วก็แบบว่ามันเหมือนกับที่เราเขียนไว้เมื่อกี้เลย ซึ่งตัวนี้เนี่ย จริงๆ แล้วเนี่ย concept ตัว slot เนี่ย มันไม่ได้มาจากไหนเลย มันมาจากตัว web component web component เป็นที่แรกที่เอา propose ตัว syntax ตรงนี้เข้ามา แล้วตัว framework อย่างเช่น Vue เนี่ย ค่อยเอาไปใส่ในอีกทีนึง เพราะว่ามัน built-in มาในตัว web component เรียบร้อยแล้ว เราก็สามารถไปใช้ตรงๆ ได้เลย

ขนาด Bundle Size ของ Web Component ที่สร้างด้วย Svelte24:13

ทีนี้เนี่ยเผื่อเราไม่รู้ว่าขนาดมันอยู่ประมาณเท่าไหร่เนาะ

เดี๋ยวเราเอาให้ดูแล้วกัน อันนี้คือ run ผ่าน rollup-bundle-analyzer ซึ่งถ้าเราลองดูแล้วเนี่ย bundle size ทั้งหมดเนี่ย เมื่อกี้ผมเขียน 3 component เนาะ ก็มี counter paper แล้วก็ตัว compound เนาะ ก็คือตัว layout ตรงนี้ ปึ๊บ จะเห็นว่าขนาดเนี่ยมันอยู่ประมาณเท่านี้ แต่ถ้าไม่เก็ตว่ามันประมาณเท่าไหร่ก็ จะอธิบายให้ฟังนิดนึงก็คือ ตัว Svelte เนี่ยเหมือนที่ผมบอกก็คือ มันจะต้องมี shorthand syntax นิดนึง ก็คือแบบว่าเป็น document.getElementById แล้วก็แบบย่อเป็นตัว function d หรือว่าอะไรประมาณนี้ ซึ่งมันจะเอาเวลาที่แบบเราเรียกพวกนั้นเนี่ย มันจะ ตัว component ที่เราเรียกใช้เนี่ย มันจะเอาตัวมัน runtime เล็กๆ ของมันเข้ามา ซึ่งจริงๆ ก็ไม่ใช่ runtime หรอก แต่ถ้าเราลองเอาไปเทียบแล้วเนี่ย มันก็จะได้ประมาณอยู่ที่ประมาณ 3 kb แล้วก็ที่เหลือก็เป็นขนาดที่เราเขียนขึ้นมา อย่าลืมว่าตรงด้าน ด้านขวาเนี่ย component ด้านขวาเนี่ย มันคือ element ที่แบบ compile เสร็จแล้ว มันกลายเป็นแบบว่า deleteNode insertNode หรือว่าแบบ vanilla JavaScript เลย มันแค่แบบ เอา function เล็กๆ เข้ามาแบบว่า insertChild แล้วก็แบบย่อเป็น function แบบชื่อตัวเดียว อะไรประมาณนี้ ที่เราเห็นใน พวก terser ปกติเนาะ ทีนี้เนี่ยสมมุติว่าเราจะเอา component อันนึงไปใช้เนี่ย เราจะได้ bundle size ประมาณเท่าไหร่ เราจะได้ bundle size ประมาณเท่านี้ สมมุติผมเลือกใช้ paper-card เราก็จะได้ bundle size ประมาณ 4.11 kb แต่ว่าถ้าเราสมมุติเราใช้เป็น 2 อันเนี่ย มันก็ไม่ได้เพิ่มขึ้นมาเป็นคูณ 2 เนาะ เพราะว่าเราเลือกแค่ component อันนึงเข้ามา มันโหลด runtime เรียบร้อยแล้ว อะไรเรียบร้อยหมดแล้ว เพราะฉะนั้นเนี่ย ไม่ว่าเรา ขนาดเนี้ยเราใช้ bundle size 2 อันเนาะ

ถ้าเราลองคิดเป็น React เนี่ย มันก็จะได้ bundle size อย่างน้อย 40 kb Angular ก็ได้อย่างน้อยแบบว่า 60 หรือมากกว่านั้นแน่ๆ แต่ว่า โอเค ทีนี้เราได้ตัว bundle ออกมาแล้ว

Demo: ใช้ Web Component ใน React26:00

แล้วเราจะใช้ยังไงใช่มั้ย โอเค ปกติเนี่ยเราก็ ทำเหมือนกับ ผมจะลองแบบว่าทำเป็นแบบ publish ขึ้นตัว npm แล้วกันเนาะ ปกติที่เราทำเนี่ยเราก็แค่ตั้ง package name แล้วก็ตั้งว่า พอ import เนี่ยให้ไป import ตรงไหนเนาะ ผมก็ไป import จากตัว build ออกมาเนาะ ก็ได้เป็น main.js ออกมา ส่วนวิธีเรียกใช้เนี่ยก็แค่ลง component แบบปกติเลย แล้วก็เรียก import ปึ๊บ พอเรา import เสร็จแล้วเนี่ย ตัว HTML เนี่ยมันจะ register ตัวมันเองตอนที่เราใช้ เพราะฉะนั้นเนี่ยเดี๋ยวเราลองเอาเป็น เอาไปใส่ใน React แล้วกันเนาะ web component ตัวนี้ไปใส่ใน React ปึ๊บ อ่า อันนี้เผื่อไม่ เผื่ออันนี้ไม่เก็ต อันนี้มาจากตัว React component ที่เป็น jsx แต่ว่ามันจะเขียนเหมือน JavaScript เพราะฉะนั้นมันทำให้เหมือนแบบว่าเหมือนกับตัว HTML ปกติมาก แต่จะสังเกตได้ว่ามันมี export default ตรงนี้อยู่ ที่ run เป็น function อ่า พอเราเรียกปกติ ปึ๊บ

แล้วก็เอามา run เป็น ตัวหน้าเว็บเนาะ มันจะได้หน้าเป็นแบบประมาณนี้ เผื่อใครไม่เชื่อว่ามันคือ React จริงรึเปล่า เดี๋ยว run ให้ดูเลย

จะเห็นว่าตรงนี้เนี่ยเป็น อ่า ใช้ Vite ในการเขียนเนาะ dependency มันเป็น React ปกติ source อ่า App.tsx ปึ๊บ อันนี้ อ่า ตัวหน้าเว็บเนาะ เห็นว่าเรา import ตัว Svelte component มา ปึ๊บ แล้วก็เรียก เอ๊า เดี๋ยวนะ อันนี้เป็น native หรือว่า อ้อ แป๊บนึงนะ อันนี้น่าจะผิด ผิดอ่านแป๊บเดียว อ่า

โอเค จะเห็นว่าเราลง react ปกติเลย เป็น dependency

เป็น react แล้วก็ใช้ vite ในการ run เนาะ vite.js ทีนี้ถ้าเราลองเข้าไปดูใน source App.tsx เนี่ย เอาเป็นเต็มแล้วกันเนาะ เห็นว่าเรามีฟังก์ชัน App อันนึง ซึ่งเป็นแบบว่า react ปกติ เรามี useState มีอะไรปกติ อันนี้น่าจะลบออกไปละ แล้วเราก็เรียก import ตรงนี้ import ตรงนี้เข้ามา แล้วก็จะใช้ web component ได้ปกติเลย เห็นว่ามันมี typescript support อะไรด้วย source alternate เดี๋ยวผมลองลบแล้วให้มันเดา type แล้วกันเนาะ

เห็นได้ว่ามันมีตัวตรงเนี้ย เราสามารถเพิ่มตัว typescript declaration เข้าไปเองได้ด้วยกัน อย่างเช่นนี้ เราสามารถเพิ่มเข้าไปในตัว environment.d.ts ได้ อย่างเช่นผมใช้เป็น main.tsx แล้วก็ declare global แล้วสามารถเอา typescript ยัดใส่เข้าไปได้ปกติเลย ปึ๊บ แล้วจากนั้นเราก็ลอง run ดู

เดี๋ยวเราลองเปิดตัว web visualizer แล้วกัน จะเห็นว่านี่มันไม่อัพเดท น่าจะติดแคช แต่ว่าเรามีเรียก dev tools มั้ยในนี้ ไม่มีฮะ แต่หลักๆ ก็คือถ้าเราลองไปดูตรง App.tsx เนาะ เอา main main แล้วกัน main.tsx เรา import ตัว component เมื่อกี้ ก็คือ App แล้วก็เอา react-dom createRoot เข้ามา แล้วจับ App เข้าไป มันก็จะ render react มา แล้วทีนี้เราลองไปดูตรงตัว browser เพิ่มๆ

จะเห็นว่าตัว div root ตรงเนี้ย มัน run ตัว web component ได้ปกติเลย ก็คือเราเอา card เข้าไปใส่ ถ้าเราลองเปลี่ยน ตรงนี้เราจะเห็นได้ว่า shadow root มันคือตัว HTML

ที่อยู่ด้านในเนาะ ทีเนี้ย เราจะเห็นได้ว่ามัน run เราแค่ใส่แค่ตรงเนี้ย มันก็จะได้แบบตัว component เมื่อกี้ออกมาเลย เราลองเปลี่ยนอันนี้แล้วกัน เปลี่ยนตัวอะไรดี ชายแล้วกันเนาะ เป็นอะไรก็ได้

ก็จะเห็นว่ามันก็ไปอัพเดทตรงนี้ปกติเลย run ได้ปกติเลย ถ้าเราลองไปดูใน HTML ก็จะได้แบบว่าเห็นว่าเรา เอาใหม่ ต้องไป run ใน main เนาะ ก็อันนี้ก็คือตัวโค้ดที่ run ออกมาเนาะ ก็คือ web component ปกติเลย โอเค ทีนี้เราก็กลับไปที่ตัว keynote แล้วก็ run ต่อ

เพิ่ม TypeScript Support ให้ Web Component30:17

ติดมั้ย โอเค ติด เราสามารถเอาตัว typescript

ใส่เข้าไปได้แบบนี้ปกติเลย แป๊บนึงนะ ขอเดี๋ยว ชุดมันเยอะ ชุดมันชอบหลุดบ่อย

โอเค ถ้าเราไม่แน่ใจว่าขนาดมันอยู่เท่าไหร่เนี่ย เดี๋ยวเราเอา bundle size ให้ดูแล้วกัน อันนี้คือ bundle size ของ react-dom อย่างเดียว อยู่ที่ 78 กิโลไบต์ แต่ถ้าเราลองเทียบกับ component เมื่อกี้ที่เรา import เข้ามา 3 อันเนี่ย bundle size รวมทั้งหมดแค่ 8% จาก 100% เราลองคิดดูนะ เรามี react component เขียนมา

ใช้แบบ bundle size 78 ละ ยังไม่รวมตัว react ปกติ แล้วก็ตัว component ที่เขียนด้วย react อีกทีนึง แต่นี้เนี่ย เราเอา component ใส่เข้ามาใน component ใส่เข้ามา 3 อันแล้วเนี่ย มันก็ยังมีขนาดแค่นิดเดียวอยู่

แค่นี้เนี่ยเราก็สามารถเอาตัว web component มาใส่ใน React ได้แล้ว เราสามารถเอาตัว web component ที่เขียนด้วย Svelte เนี่ย เอาไป reuse ที่ไหนก็ได้ ซึ่งมันก็ run ได้ในทั้ง Angular, React แล้วก็ Vue แล้วก็ปกติเลย เหมือนที่เราต้องการจะทำ HTML เปล่าๆ ก็ run ได้เหมือนกัน

วิธีอื่นๆ ในการ Migrate (Mitosis, Astro, SvelteHost)31:23

ทีนี้เนี่ยจะมีอีกประมาณที่เหลือเนี่ย ที่มันไม่ค่อย practical เท่าไหร่ แต่ว่าจะเอามาให้ดูแล้วกันเนาะ หลักๆ เนี่ย มีอีก 3 อันก็คือ อย่างแรกที่อยากให้แนะนำก็คือ mitosis เผื่อใครไม่รู้จัก mitosis ก็คือ mitosis เป็น library นึงที่ออกแบบมาให้เราเขียนโค้ดที่เดียว แล้ว compile เป็นภาษาอื่น compile เป็น library อื่นได้ ถ้าใครรู้จักตัว ไม่แน่ใจมันชื่อโปรเจกต์อะไร

แต่ว่ามันคือเราสามารถเขียนโค้ดเป็นภาษานึง แล้ว compile เป็นอีกภาษานึงได้ ซึ่งตัว mitosis เนี่ยมันพยายามทำเหมือนกัน แต่ว่าเป็น web framework หรือ web library ซึ่งเราสามารถเขียนตัว Svelte เนี่ย compile ให้กลายเป็นอะไรก็ได้ แต่ว่าหลักๆ เนี่ยก็คือจะมีตัว Angular, React แล้วก็ Vue ที่มันสามารถ compile ได้ ในอนาคตเนี่ยตัว library ตัวนี้จะสามารถ compile เป็น SwiftUI กับตัว React Native ได้ด้วย

แต่ว่า SwiftUI น่าจะยากกว่าเลย โอเค ถ้าเผื่อไม่แน่ใจว่ามันเป็นยังไง เราสามารถไปที่เว็บ mitosis แล้วมันจะมีตัว preview แบบนี้ออกมาได้ ตัว mitosis เนี่ยมันเขียนเหมือนกับตัว React เป๊ะๆ เลย คือมี useState แล้วแค่แบบเปลี่ยนจากคำว่า React เป็น builder.io/mitosis จะสังเกตว่ามันเป็น JSX ปกติ มี useState ปกติ เขียนแบบว่าทุกอย่างปกติเหมือนตัว React เป๊ะๆ เลย แล้ว compile เป็นภาษาอื่นได้ ซึ่งในนี้เนี่ยจะมีตัว Vue, React, Angular, Svelte, React Native, Swift โอเค ก็หลักๆ ก็ประมาณนี้

แต่ว่าข้อเสียของมันก็คือมันไม่ค่อย practical สักเท่าไหร่ เพราะว่าอย่างแรกเนี่ย มี issue ในหน้า GitHub เยอะมาก ซึ่ง issue บางอย่างเนี่ยมันก็ค่อนข้างที่จะ basic มาก อย่างเช่น เราไม่ได้ใส่ฟังก์ชันใน Svelte

ไม่ได้แบบเป็น stateless Svelte มันก็ compile ไม่ผ่าน หรือว่าเป็น compile แล้วแบบ type ก็ import ไม่ขึ้น

ประมาณนี้ มันทำให้มันยังไม่ค่อย practical เท่าไหร่ แต่ว่ามันเป็นอะไรที่ค่อนข้างน่าสนใจมาก ซึ่งในอนาคตก็คงคิดว่ามันน่าจะดีขึ้น แล้วก็น่าจะช่วยหลายๆ ที่ได้เยอะ เวลาใช้ใน monorepo หรือเอาแบบว่าต้องการแบบ เอาเขียนที่นึงไป run ทุกที่เลย อย่างที่ 3 ก็คือเหมือนที่ Astro.js

Mitosis: เขียนครั้งเดียว ใช้ได้หลาย Framework33:28

ก็เหมือนที่ speaker คนแรกพูดก็คือ ตัวตอนที่เขาเขียนเนี่ย เขาไม่ได้เขียนด้วย Svelte แต่เขาใช้ Astro Astro เนี่ยเป็น library นึงที่ทำให้เราสามารถ เอา library ประมาณ 4-5 library เข้ามา run เป็นที่เดียวกันได้ แล้ว compile เป็น DOM แล้วก็ทำ run JavaScript ปกติได้เลย ซึ่งตัว Astro เนี่ยเราสามารถ import Svelte, import React แล้วก็ import Vue แล้วก็เอามาใช้ปกติได้เลย เหมือนกับไม่มีอะไรเกิดขึ้น แต่ว่ามันแค่แบบเรา import เข้ามาแล้วใช้ได้ตรงๆ เลย แต่ว่าในตอนนี้เนี่ยมันยังไม่ค่อย practical เท่าไหร่

จากประสบการณ์ที่ตัวเองเคยใช้มา ก็มันจะมีปัญหาอีกอย่างนึงก็คือ Astro เนี่ยปัญหา

อย่างแรกก็คือ goal ของ Astro เนี่ย เขาไม่ได้ต้องการที่จะ run lib ทั้งหมดบนนั้น แต่ว่าจุดประสงค์ Astro เนี่ยคือ เขาต้องการที่จะเอา import component เข้ามา ตัด JavaScript ทุกอย่างออก เป็น HTML เพียวๆ แล้วก็ run อยู่บนนั้น ซึ่งมันทำให้แบบว่ามัน ความ complex ของ Astro เนี่ย

มันไม่ได้แบบว่าสร้างมาเพื่อให้แบบ run ทุกที่ run แบบว่าตัว component ได้ แต่แค่แบบว่าตัด component แล้วก็เอา HTML เข้ามาใส่ได้ แต่ว่าตอนนี้เนี่ยมันก็สามารถ run JavaScript ได้ ซึ่งมันก็มีปัญหานิดหน่อยก็คือมัน run ไม่ตรงบ้าง เพราะฉะนั้นเนี่ยเวลาเราใช้ Astro เนี่ย มันจะมีข้อเสียตามมาก็คือ เราใช้ client-side routing ไม่ได้ อย่างเช่นแบบใน React ก็แบบใช้ React Router, Vue ก็ Vue Router พวกนี้เราไม่สามารถใช้ได้ state management ก็ใช้ไม่ได้ เพราะว่าทุกอย่างถูก treat เป็น HTML ปกติ SSR ก็ตอนนี้ยังไม่ support แต่ว่ามี plan ว่าจะ support อีก version 2 version แล้วก็เราไม่สามารถใช้ dev tools ตรงๆ ได้ อย่างเช่นเราใช้ React dev tools ใช้ไม่ได้ ใช้ Vue dev tools ใช้ไม่ได้

Astro: ใช้หลาย Framework ใน Project เดียวกันได้35:08

Svelte dev tools ก็ไม่ได้ แล้วก็บางทีเนี่ยมันมีปัญหานิดนึงก็คือมัน render ไม่ถูก

ซึ่งไอ้ตรงนี้เนี่ยมาจากปัญหาส่วนตัว ที่ตัวเองเคยเอา Astro แล้วก็ไปเขียนเป็น Astro แล้วก็มัน render HTML ไม่ถูก

แล้วมันแบบพังไปเลยบางทีในบางเคส อันนี้เป็นเว็บที่เคยเขียนด้วย Astro มันคือ documentation ที่ผมเคยเขียนสำหรับ library ตัวนึงใน Flutter แต่ว่า migrate จาก Astro มาเป็น VuePress เรียบร้อยแล้ว เพราะว่า Astro มันปัญหาเยอะมาก ถึงแม้มันจะใช้ตัว component ได้หลายอันก็จริง แต่ว่าตอนนี้ปัญหามันยังเยอะอยู่ แล้วก็ HTML ยัง render ไม่ถูก อันที่ 4 ค่อนข้างน่าสนใจก็คือ แทนที่เราจะใช้ library ตัวอื่นเนี่ย ทำไมเราไม่ใช้ Svelte ปกติไปเลยล่ะ ปกติเนี่ยเราใช้ Svelte เนี่ยเราทำยังไงถึงจะ เราถึงจะใช้ Svelte ได้

ปึ๊บ โอเค เดี๋ยวๆ เหมือนสไลด์จะพังนิดหน่อย โอเค ไม่เป็นไร โอเค เอาเป็นว่าสมมติว่าเรา ถ้าเราลองคิดภาพดูนะ ถ้าเรา search ใน web component เนี่ย ใน Google เนี่ย result อันแรกที่เราเห็นก็คือ is web component dead ก็คือ web component เนี่ยตายไปรึยัง คำถามก็คือทำไมมันถึงขึ้นอย่างงี้เนาะ เพราะ web component เนี่ยมันเริ่มมาจากประมาณปี 2014 มั้ง 2015 สร้างโดย Google กับ browser ทั้งหลาย เนี่ยพยายามที่จะผลักดัน web component ให้เป็น mainstream เนาะ แต่ว่าเห็นว่าตอนนี้เรา 2022 แล้วก็แทบไม่มีใครใช้ web component อีกเลย นอกจากเอามาทำให้มัน reusable ทำให้แบบว่าเราลอง search เนี่ย จะเห็นว่า web component มันตายแล้วแหละ เพราะฉะนั้นเราจะไปใช้ทำไมล่ะ

เอาเป็นว่าเราสมมติว่า เราลองสมมติสถานการณ์ที่เราบอกว่า เราเกลียด web component ไม่ว่ายังไงเราก็จะไม่ใช้ web component แบบว่ายังไงก็ไม่ใช้เด็ดขาด

แต่ว่าถ้าผมบอกว่าจริงๆ แล้วเนี่ยเราสามารถที่จะไม่ใช้ web component แล้วเรายังสามารถใช้ Svelte ในที่อื่นได้

SvelteHost: ใช้ Svelte ใน React โดยไม่ใช้ Web Component37:12

ซึ่งคำถามก็คือเราทำยังไงถึงจะทำแบบนั้นได้เนาะ เราลองคิดภาพนะ ปกติเนี่ยเราสร้าง Svelte เนาะ component นึงเนี่ย เราก็ทำอย่างงี้เนาะ เป็น root เหมือน Vue ปกติเลย Vue ก็คงแบบหน้าตาประมาณนี้ แล้วก็แบบว่าเพิ่ม tag เข้าไปแล้วก็ new app ถ้าเป็น React ก็ createRoot หรือว่า ReactDOM.render ปกติ ซึ่งคำถามก็คือในเมื่อเราสามารถเอา HTML tag เนี่ยแล้วเราก็ render มันนั้น ทำไมเราไม่แค่แบบทำเหมือน jQuery ที่แบบ select ตัว stateless บน library ที่เราใช้อย่างเช่นแบบ React เนาะ มีใครเคยใช้ React กับ React กับตัว jQuery มั้ย ถ้าไม่เคยมีก็คือมันจริงๆ มันใช้ได้นะ แต่ว่ามันไม่ควรใช้เท่าไหร่ เพราะว่าแล้วก็แบบ HTML select element แล้วก็แบบ run jQuery ปกติ แต่อย่างน้อยน่าจะมีคนเคยใช้ D3.js หรือว่า library อะไรแปลกๆ ที่ยังไม่เคยเขียนใน React หรือว่า Vue เมื่อก่อนได้ ซึ่งเราสามารถทำเหมือนกันได้โดยการใช้ Svelte แล้วก็แค่แบบว่า import Svelte app แล้วก็ run บน HTML อันนึงบน React อันนี้เราจะสาธิตเป็น React แล้วกันเนาะ เพราะว่าปกติผมเขียน React มากกว่าเนาะ ถนัด React เนาะ

งั้นเดี๋ยวเราลองเอา component อันนึงแล้วกัน อันนี้คือ component ตัว React ตัวนึงที่ผมเขียนขึ้นมา เพื่อ run ตัว Svelte component เมื่อกี้ คือเราสร้าง component ตัวนึงชื่อ SvelteHost แล้วเราก็ render ตัว div ออกมา 1 อัน แล้วเราก็บอกว่าเรารับ component เข้ามา แล้วก็ให้มัน render บนนี้ ซึ่งเราก็แค่ เราจะมั่นใจได้ไงว่าตัว div เนี่ยมันจะไม่เปลี่ยน เราก็แค่มั่นใจว่าเอา memo ไปใส่ หรือว่าให้มันเป็น stateless ไปเลย เพราะฉะนั้นเนี่ย ไม่ว่าทำยังไงตรงนี้เนี่ยมันก็จะไม่เปลี่ยน ในเมื่อมันไม่เปลี่ยนแล้วเนี่ยเราก็สามารถเอา Svelte ไป run ปกติได้เลย ซึ่งก็เท่ากับว่าเราสามารถ run ได้ละ ทีนี้เนี่ยเราก็อาจจะเพิ่ม TypeScript เข้าไปหน่อย

ก็เพิ่ม TypeScript support ให้มันเนี่ย มันแบบมี type auto infer type ได้ แล้วก็ให้ TypeScript มันไม่ฟ้องเป็น any เนาะ ทีนี้เนี่ยเราก็ลองเอาไป run ดู ปึ๊บ เราก็จะได้หน้าเว็บแบบนี้ออกมา สมมติเราอยากได้หน้าเว็บแบบนี้เนาะ ตัว tag เนี่ยมันก็จะหน้าตาเป็นประมาณนี้ เรา import paper-counter เมื่อกี้ที่เราเขียนใน web component แต่ว่าอันนี้เราเปลี่ยนนิดหน่อยเนาะ เป็น native เนาะ อันนี้มันจะไม่เหมือนกับตัว web component ที่เราใช้แบบว่าเป็น tag paper-counter แล้ว อันนี้มันแบบว่า compile เป็น native เป็น native Svelte ปกติ แล้วเราก็เอา component Svelte เนี่ยยัดเข้าไปในนี้ ถ้าไม่แน่ใจว่ามันเป็นยังไงเนาะ ก็จะเห็นว่าตัว code ตรงนี้เนี่ยมันบอกว่า มัน new component ก็คือตรงเนี้ยเป็น syntax ของ Svelte ในการสร้าง root 1 อัน ซึ่งแน่นอนมันไม่ใช่ web component ละ เพราะว่ามัน web component มันไม่สามารถสร้าง root แบบ Svelte ปกติได้ ปึ๊บ มันก็จะได้หน้าตาออกมาเป็นประมาณนี้

ก็จะได้ counter ออกมา 1 อันเนาะ เมื่อกี้ผม import paper-counter เนาะ ก็ได้หน้าตาประมาณเป็นประมาณนี้ ทีนี้เนี่ยมันมีปัญหานิดนึงก็คือในเมื่อเราทำแบบเมื่อกี้แล้วเนี่ย เราผ่าน props เข้าไปแล้วมันดัน props มันดันไม่แสดง คำถามก็คือทำไมล่ะ เราลองมาดู code ตรงนี้เนาะ จะเห็นว่าถ้าเราย้อนกลับไปเมื่อกี้ ปึ๊บ อ่า ตรงนี้เนาะ เห็นว่าเรา import มาแค่ component

อย่างเดียวแต่เราไม่ได้รับ props เข้ามา สิ่งที่เราต้องทำก็คือผ่าน props เข้าไป ปึ๊บ ผ่าน props เข้าไปเนาะ ปึ๊บ แล้วก็รับ props เข้ามา

แล้วเอา props ทั้งหมดยัดเข้าไปใน props ของตัว Svelte อีกทีนึง ก็จะได้ props ผ่านเข้ามา ทีนี้เนี่ยมันจะมีปัญหานิดนึงก็คือ TypeScript เนี่ยมันจะฟ้องว่ามันไม่รู้จัก type นี้ ซึ่งเราสามารถแก้ตรงนี้ได้ด้วยการเพิ่ม TypeScript

import เข้ามา ปึ๊บ แล้วก็สร้าง type ขึ้นเพิ่มขึ้นมา แล้วก็บอกว่าเรารับ children เรารับ slot แล้วก็ที่น่าสนใจตรงนึงคือเราเพิ่ม generic เข้ามา เผื่อใครไม่คุ้นว่า generic คืออะไร generic มันเหมือนกับตัวแปรที่เราใส่เข้าไปในตัวฟังก์ชัน แล้วมันจะรับ type เข้ามา อะไรประมาณนั้น ก็เท่ากับว่าเวลาเราเรียกฟังก์ชันเนี่ย เราสามารถกำหนด type ให้มันได้ว่า เราจะเพิ่ม type อะไรเข้าไปบ้าง ทีนี้เนี่ยเราก็แค่เพิ่มตัว generic เข้ามา

ปึ๊บ ยัดใส่ props generic ทียัดใส่ props

ปึ๊บ TypeScript ก็จะไม่ฟ้องละ แต่ว่ามันจะ cursed นิดนึง คือในนี้มีใครรู้มั้ยว่าตัว React

แก้ปัญหา Props ไม่อัพเดทใน SvelteHost41:20

เนี่ยเราสามารถทำอย่างงี้ได้ เราสามารถเอา component แล้วก็ยัด generic ใส่เข้าไปใน component ได้ ซึ่งผมเขียน React มา 3 ปีแล้วเนี่ย

ผมก็ยังไม่เคยเห็นใครทำท่านี้มาก่อน เพราะผมก็เพิ่งรู้ว่ามันทำอย่างงี้ได้ด้วย โอเค เราก็จะรันเคาน์เตอร์ออกมา ก็จะได้หน้าตาปกติเลย ทีนี้นี่มันมีปัญหานิดนึง ก็คือ props เนี่ย

เวลาเราเปลี่ยนเนี่ย สมมุติเราใช้ state ใน React ผ่านเป็น props มันไม่อัพเดตอะ ผมลองเอาเคาน์เตอร์ขึ้นมา 1 อัน แล้วก็ผมสร้างเคาน์เตอร์ใน React ขึ้นมา แล้วก็สร้าง paper รับ prop ออกมาเนาะ หน้าตาก็จะเป็นประมาณนี้ เรามีเคาน์เตอร์ 1 อัน reducer พอกดฟังก์ชัน increase ก็จะเพิ่มค่าเคาน์เตอร์ แล้วก็เอา button เข้ามาใส่เป็น local counter เนาะ เพราะฉะนั้นเนี่ย เวลาเรากด button ตัวนี้เนี่ย ตัวเคาน์เตอร์ก็จะค่อยๆ เพิ่ม 0 เป็น 1 เป็น 2 เป็น 3 แล้วก็เพิ่มเคาน์เตอร์ตัวเดียวกันเนี่ย ใส่เข้าไปในตัว props ของตัว Svelte host เนาะ ปัญหาก็คือ สังเกตว่าตัว local counter ตรงนี้เนี่ย มันเป็น 4 แต่ว่า props ที่ผ่านเข้าไปตรงเนี้ย มันยังเป็น 0 อยู่ คำถามก็คือมันเกิดอะไรขึ้น ทำไม props มันไม่อัพเดตหล่ะ

มันเป็นเพราะว่า ถ้าเราลองกลับไปดูที่ code ของเราอีกทีนึงเนี่ย เราจะเห็นว่าเรารับ props เข้ามา แต่ว่าบน useEffect เนี่ย useEffect ก็คือ on mount มันคือบอกว่า useEffect เนี่ยคือบอกว่า พอเรารับ props มันรับ props เข้ามา แล้วมันจะรันใหม่อีก 1 รอบเมื่อไหร่ก็ได้ เราสามารถผ่านเข้าไปที่ parameter ที่ 2 คือตัว dependency ของมันได้ จะสังเกตว่าเราใส่เป็น empty array ก็คือบอกว่าอันนี้เนี่ยจะรันแค่เฉพาะตอน on mount อย่างเดียว จะสังเกตว่า เราก็ผ่าน props เข้าไปแล้ว แต่พอ props มันอัพเดตใหม่เนี่ย ตัวอันนี้ก็ไม่รันใหม่ ทำให้ตัว component มันไม่อัพเดต เราก็แค่เอา props เข้าไปใส่ในตัว useEffect เมื่อกี้เนาะ

แต่ความพิเศษของ Svelte อย่างนึงก็คือ ในตัว new component เมื่อกี้เนี่ย เราสามารถ set props จากด้านนอกได้ คือเราไม่จำเป็นจะต้อง access เข้าไปในตัว Svelte component แล้วก็บอกว่า อัพเดตใช้แบบ reactivity อัพเดตให้หน่อย เราสามารถที่จะใช้ฟังก์ชันที่ชื่อว่า .$size set ได้

ซึ่งพอเราเรียกฟังก์ชันนี้ในตัว Svelte เนี่ย มันจะอัพเดต props ให้เองอัตโนมัติ

เราก็แค่เก็บตัว component นึงที่เราสร้างเมื่อกี้เนาะ กลับเข้าไปใน variable ที่ชื่อ state ref แล้วก็บอกว่า พอมันสร้าง Svelte ขึ้นมาอันนึงปึ๊บ

สร้าง Svelte component ในตอนแรกเนี่ยที่มันรันอันเนี้ย ตัว state ref จะเป็น null เพราะฉะนั้นก็คือมันก็จะมาตกที่ case ด้านล่าง ก็คือบอกว่า โอเค สร้าง component แต่ทีนี้นี่พอ props มันอัพเดตเนี่ย มันก็จะเช็คว่า ตัว state ref เนี่ยมันไม่ null แล้ว เพราะว่ามันมี component ของมันอยู่ มันก็คือจำค่าตัว component ตรงนี้ไว้ แล้วก็บอกว่า state ref แล้วก็อัพเดตไป เราก็จะได้หน้าตาเป็นประมาณนี้ เราเห็นสังเกตว่าเรา local counter 5 แล้วก็ component 5 เรียบร้อย

สรุป: Web Component ดีที่สุดสำหรับการ Reuse Component44:19

แต่ทีนี้นี่ ปัญหาก็คือทั้งหมดเมื่อกี้เนี่ย ที่เราพูดเนี่ย

คือเราสามารถแค่แบบว่า ตั้ง custom component เป็น true แล้วก็เอาไปรันได้เลย ไม่จำเป็นต้องสร้าง Svelte host ไม่จำเป็นต้องทำอะไรแปลกๆ ไม่จำเป็นต้องผ่าน generic เข้า React เราก็แค่ใช้ web component ก็ทำได้เรียบร้อยแล้ว ไม่ต้องทำอะไรยุ่งยากด้วย แถมรันได้ทุกที่ด้วย ปัญหาก็คือมันเทียบกันแล้ว performance ก็เท่าเดิม bundle size เท่าเดิม แต่ว่าพอเราทำแบบเมื่อกี้เนี่ย มันไม่มี encapsulation เราต้อง manual setup ทุกอย่างเอง แล้วก็ feature ก็หายไปเยอะด้วย อย่างเช่นตัว CSS เมื่อกี้ก็หายไป

ตัว CSS host ก็หายไป encapsulation ไม่มี CSS ไม่มีอะไรแล้ว

เพราะฉะนั้นเราก็ไม่สามารถทำท่าแบบนี้ได้ เราต้องมั่นใจเองว่า class name เนี่ย มันจะไม่ไป conflict กับตัว code base ที่เราใช้อยู่ แล้วก็ปัญหาต่อมาก็คือมันใช้ name slot ใน React ไม่ได้

เพราะว่าใน React เนี่ยมันไม่มี name slot

ส่วนใน Vue เนี่ย ปัญหาก็คือใน Vue เนี่ย slot ใน Vue มันพอใช้กับตัวท่าเมื่อกี้เนี่ย มันไม่สามารถที่จะ render ตัว slot ได้ เพราะว่า props ที่รับเข้ามาเนี่ย มันเป็นตัวแปรที่ specific กับ Vue ซึ่งมันต้องใช้ Vue runtime ในการแปลเป็น HTML อีกทีนึง

ถ้าเราลองดู code ตรงนี้เนี่ย อันนี้คือ code ที่เขียนด้วย Vue ตรงนี้มันเล็กไปนิดนึงเนาะ แต่ว่าจะสรุปให้ฟังง่ายๆ ก็คือ เราผ่าน component แบบเมื่อกี้แล้วเนี่ย ยัดเข้าไปใน Vue เนี่ย ไม่ว่าจะยัดอะไรเข้าไปเนี่ย ก็ children มันก็ไม่ออก ถ้าไม่แน่ใจว่ามันใช้อะไรจริงๆ เราก็แค่เปิด Wappalyzer ดูก็เห็นว่าใช้ Vue กับ Svelte อยู่ เดี๋ยวมี demo ให้ดูนิดนึงด้วย เพราะฉะนั้นเนี่ยทุกอย่างมันอยู่ที่ความเมตตาของ lib เราแล้ว ว่า lib เรามันจะ support มากแค่ไหน สุดท้ายแล้วเนี่ยมันก็แค่

เราไม่อยากให้มีปัญหามากวนใจ เราก็แค่ใช้ web component ถึงแม้ว่ามันจะเกิดอะไรขึ้นก็ตาม เราก็แค่แบบใช้เครื่องมือที่มันใช้ได้ ไม่ว่าคนจะบอกว่าตายแล้ว เดี๋ยวยังไม่ตายก็มันไม่ใช่ปัญหา