Videos → Why I hate composition API

แนะนำตัว: ตั้ง วรัทธน์ และประสบการณ์การทำงาน0:00

เพื่อไม่ให้เป็นการเสียเวลาครับผม ก็ขอมอบเวทีนี้ช่วงท้ายให้กับพี่ตั้งเลยครับผม ขอบคุณมากครับ สวัสดีครับ

ก่อนอื่นเลยนะครับ เพิ่งคุยกับริฟฟี่ว่า คนที่ซื้อตั๋ว JavaScript Bangkok ได้นี่คุ้มมากนะครับ เพราะว่าบอกเลย แค่ข้าวเนี่ยนะฮะ ราคา 155 บาท

จุดเริ่มต้นความเกลียด Composition API0:17

snack box อีกกล่องละ 145 บาท 2 กล่อง แค่เนี้ยก็ 400 บาทละ แล้วก็ swag อีกประมาณอีก 400 บาท เท่ากับคุณซื้อตั๋วเนี่ย คุณแค่ไปกินข้าวกับ snack box ครบทุกมื้อ พร้อมกับเก็บ swag กลับบ้านนี่คือคุ้มเลย ตอนริฟฟี่ปล่อย หันไปหาริฟฟี่ "มึง มึง ริฟฟี่

กูเพิ่ง confirm ราคาข้าวไปเมื่อวานนะ" ใครไปขอให้กินข้าวให้อร่อยนะครับ ผมตั้งใจเลือกข้าวแล้วก็ขนมให้ทุกคนมากนะครับ โอเค แนะนำตัวก่อนครับผม ตั้งนะครับ วรัทธน์ วงศ์มณีกิจ นะครับ ปัจจุบันเป็น Chief Product Officer อยู่ที่ WISESIGHT นะครับ แล้วก็เป็น web technology Google Developer Expert นะครับ ก็ปีนี้โฟกัส talk ที่จะพูดแบบตามงาน Google

DevFest หรืออะไรก็จะเป็นเรื่องแบบ on-device AI นะครับ ก็ปีนี้รัก on-device AI มาก แต่ว่างานนี้ไม่ได้เกี่ยวกับ on-device AI ครับ

ทำไมถึงเกลียด Composition API? (เริ่มต้น)1:17

เกี่ยวกับ Composition API ที่ผมโคตรเกลียดครับ เล่าอย่างงี้ก่อน ผมไม่ได้ต้องเขียนโค้ดที่ ออฟฟิศมานานมากๆ แล้วครับ 5-6 ปีละ

ด้วยหน้าที่ที่โฟกัสแค่ดูทีม product manager นะครับ ตั้งแต่ปี 2016 ละ แต่ก็เขียนโค้ดทุกวันครับ เขียนเป็นแบบ side project เขียนนู่นเขียนนี่ไปเรื่อยๆ แต่ด้วยความที่มันเป็น side project ตลกๆ อะครับ เราทำ web เราก็มักจะซัด vanilla ธรรมดา นานๆ ทีก็จะใช้ Vue.js อะไรเงี้ยครับ ก็เห็นแล้วแหละว่ามี Composition API มาช่วง Vue 2 ปลายๆ แต่ก็ไม่ได้มีโอกาสได้ใช้แบบ real deal อะครับ จนวันนึงครับ ผมทำแอปครับ ทำแอปใช้เองครับ

ที่มาของแอป Saifah (Tesla Charger) และการใช้ Vue2:00

คือไปซื้อ Tesla มา แล้วก็กลัวว่าวันนึงเนี่ย เดี๋ยวขับไปต่างจังหวัดเนี่ย เราจะหาสถานี ชาร์จยังไง วิธีแก้ปัญหาของผมก็คือ ทำแอปยัดรถ Tesla ตอนทำเนี่ยเราก็คิดว่าใช้คนเดียว ไปๆ มาๆ มี investor ลง ตู้ม อ้าวเหี้ย ยาวเลย คราวนี้เราก็ตอนแรกเราก็เป็น web อะ เราก็คิดในใจว่า เอ้ย กูก็ทำ PWA แล้วกด add to home screen ดิ คนไม่ get เว้ย ช่วงนั้นมันมี spam ที่แบบ กดดาวน์โหลดผ่าน web เยอะ คนคิดว่าแอปกูเป็น spam

เชี่ยเอ้ย ก็ต้องยัด store ให้ได้ วิธีการเราก็คือ เรายัด Capacitor เลยครับ ใครรู้จัก Capacitor บ้าง Capacitor คือ Ionic อะเนาะ ยัด Capacitor เข้าไปเลยครับ แล้วก็เอาขึ้น store อะ ก็ผ่านไปได้ คราวนี้แอปมัน ด้วยความที่… ที่ออฟฟิศ ผมเขียน React Next.js นะครับ TypeScript ไอ้เหี้ยนี่ไม่มีสักอย่างเลย Vue ธรรมดา ไม่ Nuxt ด้วย ไม่ Nuxt ไม่พอ ไม่ type ด้วยนะครับ ก็ตอนแรกเขียนกะยัดรถใช้คนเดียวอะ แล้วก็แจกเพื่อนใช้อะไรอย่างเงี้ย สุดท้ายมันก็เลยใช้ Vue พอใช้ Vue เนี่ย ก็โดดมาช่วงเป็น Vue 3 พอดีละ

Composition API: เท่แต่โคตรน่าเกลียด3:13

แล้วก็รู้สึกว่า เออ มาเว้ย Composition API เว้ย เค้าใช้กัน เราต้องใช้หน่อย ดูเท่ ไอ้เหี้ยโคตรน่าเกลียดเลย

เดี๋ยววันนี้จะเล่าให้ฟังครับว่าทำไมผมโคตร เกลียด Composition API เลยครับ

เหตุผลจาก Official Doc: Reuse Logic3:27

เล่าก่อน ผมเปิด doc เลยถามครับ นี่คือคำตอบที่อยู่ใน official doc ว่าทำไม แม่งถึงต้องมี Composition API เค้าบอกว่า Vue ในแอปใหญ่ๆ เนี่ย แม่งมี reuse logic เยอะ Composition เนี่ยมันพอมัน composable เนี่ย มัน reuse ง่าย มัน reuse แบบ โห perfect มาก เพราะฉะนั้นเนี่ย Composition API เลยออกมา เพื่อ reuse ฟังแล้วก็ดู เออ เท่เว้ย ตอนนั้นเราฟัง concept เท่

ปัญหาของ Composition API: หลายวิธีสร้าง Component3:53

พอใช้จริงผมเจอปัญหา 2-3 อย่างครับ อย่างแรกครับ ไอ้ Composition API เนี่ย

ลำพังใน Vue เนี่ย เรารู้กันแล้วว่ามัน variety ชิบหายเลย วิธีการสร้าง component แม่งมีประมาณสัก 3-4 แบบได้ พอมี Composition API แม่งเพิ่มมาอีก 2 แบบ ไอ้เหี้ย มึงเพิ่มมาอีก 2 แบบ ลำพังมึงก็มี อยู่แล้วอีก 3-4 แบบ ใช้กันเยอะๆ คือประกาศ component เนาะ option API เนาะ ตอนแรกออกมาเป็น setup() อะ setup() สักพักนึง แม่งออก script ที่มี attribute setup ไอ้เหี้ย ลำพังทำของที่เยอะอยู่แล้วให้เยอะกว่าเดิม

ความหลากหลายของ Doc และ Ecosystem4:33

คราวนี้ search doc ตาลายเลย search doc อันนี้ อ๋อ แม่งเขียน doc เป็น option API ห่า และไปดูเลย ไอ้พวก Vue ecosystem ทั้งหลาย แม่งจะต้องมีคนเขียนเปิด issue เอาไว้ จะเป็น issue ประมาณนี้ “How to use with Options API?” “How to use with Composition API?” แม่งต้องมีอะไรสักอย่างอะ ถูกปะ เพราะ doc แม่งจะเขียนไม่ครบ How to use with setup script ก็คือ

ไม่ใช่ setup method เป็นแบบ script ที่มี setup คือ อะ ไอ้เหี้ย ทำ doc ทำ ecosystem อันนึง เขียน doc 3 อัน อะ…

แล้วฟังแล้วเริ่มแบบ โอเค

setup() vs. script setup: ความไม่เข้ากัน5:16

อย่างที่สอง อี setup() กับ script setup

ใครใช้ setup() อยู่เมื่อก่อนจะรู้สึกว่า โห มันไม่เท่อะ อยู่ดีๆ วันดีคืนดีก็ออก script setup เออ ฟังแล้วก็ดูดีเนาะ สำหรับคนที่ใช้ Composition API อยู่ก็รู้สึกว่า ดีจังเลยครับมันเขียนสั้นลง เชี่ย กูจะเรียก props แม่งเรียกไม่เหมือนกัน ตอนแรกเราก็เห็นอยู่อะ อ่าน doc อ๋อ โอเค เขียนวันนึง ตอนนั้นเขียนไปหน้าแรก สักพักเราก็ เฮ้ย setup มันออกมาใหม่ว่ะ เอาบ้างดีกว่า ใส่ setup เชี่ยแม่งเรียก props ยังไงวะ หาใน doc โคตรนาน จน… เอ้า มึงต้อง defineProps อ้าว เหี้ยนี่ไม่มี defineProps อ้าว เริ่มงงแล้วแบบ คือ 2 วิธีที่ปวดหัวมากๆ

ปัญหาการเลือกวิธีเขียน Vue สำหรับ Dev ใหม่6:06

กลายเป็นว่าตอนนี้ถ้า dev ใหม่เขียนเนี่ย ต้องคุย คือใครจะเขียน Vue อะ อย่างแรกต้องถามกันเลยว่า มึงจะเขียนยังไงนะ ต้องถามกันก่อนเลย เขียนไง มึงเลือกวิธีไหน เออ เพราะว่าแต่ละวิธีใช้ function ไม่เหมือนกัน เรียก props ก็ไม่เหมือนกัน นี่ยังไม่รวมกับ app context ไอ้ ctx มันน่ะ ก้อนเนี้ย ที่ถ้าไอ้นี่จะเรียก context ตอนนั้น หา แม่งเรียกยังไงวะ โอ้โห ต้องไปเรียก function เพื่อ get context อะไรอีกเต็มไปหมดอะ นี่คือเรื่องที่ 2 ที่โคตรปวดหัวเลยครับ ที่รู้สึกว่า เป็น…

Composition API ทำให้ Learning Curve สูง6:42

เดิมแล้ว Vue เนี่ย ข้อดีของมันคือ learning curve ต่ำเนาะ ถ้าใครจำได้สมัย 2.5 จะรู้สึกว่า โห learning curve ต่ำจังเลย เชี่ย Vue 3 Composition นี่แม่งทำ learning curve สูงมาก สูงแบบ สูงงงงแบบ… สูงปี๊ดอะ คือไม่ได้เรียนยากนะ แต่อ่าน doc อ่านยากมากเลย คือกูต้องอ่านอันไหนนะ อ่านอันไหนที่มันจะใช้งานกับของๆ กูได้นะ มันจะเป็นความรู้สึกที่แบบ เชี่ยไรวะเนี่ย อะ เสร็จปุ๊บ สิ่งนึงที่ผมเจอคือ แรกๆ ไม่รู้สึก

ปัญหา Free Form: การจัดเรียงโค้ดที่ยุ่งเหยิง7:14

คือเมื่อก่อนเป็น property เนาะ เดี๋ยวนี้ free form อันนี้คือ option ใช่มั้ยครับ data อยู่ตรงนี้ computed อยู่ตรงนี้ method อยู่ตรงนี้ mounted อยู่ตรงนี้ เขียนเรียงกันสวยงาม สักพัก แม่งวางยังไงวะ

บางคนก็บอก ก็ไม่มีอะไรนี่พี่ นี่ก็ data นี่ก็ method ไง แล้วนี่ก็ computed ไง

แล้วนี่ก็ onMount แม่งไม่เรียงอย่างงี้ไง สักพักแม่งเอา onMount ไปไว้ข้างบน เหี้ย ลำพังชีวิตเรา คือเดิมแล้วเนี่ยมันจัดระเบียบซะอย่างดี ของที่อยู่ด้วยกันอยู่ด้วยกัน สักพัก แม่งเริ่มเรียงมั่ว แล้วพอผมเขียนคนเดียวอะ บางวันน่ะ ด้วยความที่เราง่วงอะ เฮ้ย เราจำไม่ได้แบบว่าเราเอา onMount ไว้บน computed หรือว่าเอา computed เนี่ย onMount วะ หรือแบบ อะไรอย่างเงี้ย แม่งจะมีความแบบ เชี่ยกูจะวางตรงไหนดีวะ กูจะวางข้างบนข้างล่าง สักพัก ไล่ ต้องไล่กลับไปดูไฟล์ convention กูเรียงไว้ยังไงนะ เรียงผิด งง watch watchEffect

เหี้ย เรียงยังไงนะ ถูกปะ พวกเราจะ… คือเรารู้สึกว่าพอมัน free form เนี่ยมันจะมีความแบบ … ผิดอะ มันจะมีความแบบ คนเป็น OCD มันจะรู้สึกว่า เชี่ย 2 ไฟล์นี้ไม่ตรงกันว่ะ เชี่ยก๊อบไป แล้ววันๆ หมดไปกับการเรียงไอ้เนี่ย นึกออกปะว่าแม่งต้องอยู่ตรงไหน ทั้งที่เมื่อก่อนไม่เคยต้องมีปัญหานั้น เพราะอะไรแม่งก็อยู่ใน mounted อยู่ๆ เป็นที่เป็นทาง

ปัญหา Free Form: onMount หลายอัน8:38

ความแย่อีกอันนึงคืออะไร เมื่อก่อน mounted แม่งมีอันเดียว พอทำอย่างงี้ได้เป็นไง onMount มี 3 อัน

คำถามคือ เคยมีครั้งนึงเปิดไฟล์มา ซัดเลย onMount เออ เขียนเสร็จปุ๊บ เอ้ย ทำไมมันเหมือน มันมีอะไรรันอีกอันนึงวะ อ๋อ กูเคยเขียน onMount ไปอันนึงแล้ว กูลืม ต้องเอา code ไปแปะ onMount อันเก่า แล้วแม่งก็จะมีอย่างเงี้ยเต็มไปหมด เอ้ยทำไมไฟล์นี้มี onMount 2 อันวะ ทำไมไฟล์นี้แม่งมี watchEffect 2 อันวะ ไอ้เหี้ยแบบ เละเทะ

use everywhere: use ที่มากเกินไป9:09

เริ่มเห็นยังว่า อะ free form เนี่ย มันก็ reusable ไง reusable ปี๊บ

ต่อมาคือ use everywhere เมื่อก่อน Vue ไม่มีอะไร use ตามด้วยนู่นนี่ใช่มั้ย พอมีปุ๊บ เห่อ เห่อมาก ไอ้พวก ecosystem ซัดกัน use เรียงเลย a b c d e

มีแต่ use use use use use use use บางอันมึงไม่ต้อง use ก็ได้ มึง use ทำไม มึง ข้างในมึงมีแค่ ref อยู่อันเดียว มึง use ทำไม มึงเอาวางไว้ข้างนอกก็ได้ มึง… มึงจะ ref อันเดียว มึงใช้ store มั้ย? มึงมา use ทำไม เพื่อ? ทุกคนก็เห่อการใช้ use กันเต็มไปหมด

แล้ว use ก็เต็มไปหมด ตอนนี้ทุกอย่างเป็น use หมดนะครับ

ref vs. reactive: ความสับสนและซ้ำซ้อน9:57

โอเค ต่อมา ref กับ reactive วันแรกเขียน

เหมือนลืมตัว ซัดยับเลย เขียน ref ป้าบๆ โอ๊ย ก็เลยนั่งนึกในใจ กูเหมือนทำอะไรผิดวะ

มันทำอะไรผิดวะ เอ๊ะ มันมี reactive นี่หว่า ไปอ่าน เอ๊ย จำได้ว่าตอนสมัยแบบเราทำคอร์ส Skooldio เนอะ เราบอกทุกคนเลย reactive เอาไว้ใช้กับ object ไปดู Saifah วันนี้นะครับ มีแต่ ref ไอ้เหี้ยไม่มี reactive สักอัน กูลืมไง กูลืมไปว่ามันต้องใช้ เสร็จปุ๊บก็เลยไปอ่าน docs ไปอ่านบทความ เขาก็บอกว่าโอเคเราจะใช้กับพวก primitive นะ ใช้กับ object นะ แล้วก็ ref เราก็ใช้กับตัวแปรที่เป็น primitive นะ reactive ก็ใช้กับพวก object เนี่ย กูยังจำผิดเลยนะฮะ ทุกวันนี้ Saifah เป็นอย่างนี้นะครับ object แม่งอยู่ใน ref หมดเลย พอเสร็จปุ๊บไปอ่าน docs ไอ้เหี้ยทำไมมันทำงานได้วะ แม่งบอกว่า reactive จริงๆ behind the scene แม่งไป call ref อีกทีนึง เอ๊ย ref แม่งไป call reactive อีกทีนึง คำถามคือทำไมไม่มีอันเดียวไอ้เหี้ยมึง จบป่ะ

เหี้ยกูไม่เข้าใจว่าแบบทำไมไม่มีอันเดียว มึงมี 2 อันทำไม มึงบ้าป่าว ก็มึงบอกว่าอันเนี้ยมันก็ไป call อันเนี้ย แล้วมึงมี 2 อันทำไม กูไม่เข้าใจ กูไม่เข้าใจโลก เห็นยังว่าแม่งวุ่นวายชิบหาย

Ecosystem ที่ซับซ้อนขึ้น11:19

เสร็จปุ๊บ ecosystem ที่มีอยู่ ที่มันเคยแบบ search ไปอ่าน docs ง่ายๆ แม่ง complicate กว่าเดิม

ใครเคยแบบ… เออเราจะใช้ปลั๊กอินนี้ ปลั๊กอินนี้แม่งแบบ อ้อ เมื่อกี้เล่าให้ฟังแล้ว เปิด docs มันดู docs มันก็เขียนแบบ อันนี้วิธีใช้ออปชันนะ อ้าว แล้วใช้กับ composition ยังไงวะ หรือไอ้พวกใช้ composition อยู่ อ้าวใช้กับออปชันยังไง

vueUse ไม่ Support Option API11:45

มีวันนึงสงสัยว่า… ใครรู้จัก lib ที่ชื่อ vueUse บ้างมั้ย อ้า ไอ้เหี้ยที่รวมอลังการ คำถามคือแล้ว vueUse ถ้าคนเขียนออปชันทำยังไง เคยถามมั้ย? เคยสงสัยมั้ยว่าถ้าใครเขียนเป็น ออปชันจะทำยังไง จะใช้ vueUse ยังไง เมื่อเช้าเลยไปหาคำตอบครับ vueUse ไม่ support ออปชัน อีเหี้ย แล้วถ้ากูจะใช้มึงล่ะ ไม่ได้เหรอ อ้าว กลายเป็นคนชนชั้น 2 ซะงั้น ไอ้ Vue ออปชันที่บอกว่าเป็น “official support” กลายเป็นเหมือนโดน deprecate ไปทั้งนั้นน่ะ เหี้ยอะไรวะเนี่ย โลกแม่งทำไมยากจังวะ

สรุป: Composition API คือ Good Solution in the Wrong Place12:21

เพราะฉะนั้นสุดท้ายครับ มีคน

มีบทความนึงเขียนไว้ดีมากครับ บอกว่า Vue Composition API แม่งคือ

good solution in the wrong place ครับ ขอบคุณครับ

จบครับ

ความในใจเพิ่มเติมและปิดท้าย12:42

ใครรักรักไป กูเกลียดครับ แต่เสียดายครับ lib ส่วนใหญ่ที่ผมใช้อยู่ มันดันใช้ได้แต่บน composition ครับ

เค้าบอกให้มันใช้อะ แต่ผมใช้แล้วมันก็

ไม่เป็นบั๊กอะไรนะ ไม่มี .value คือประเด็นของผมง่ายมาก

ประเด็นของผมง่ายมากเลยคือ ตอนแรกผมใช้ผิด ผมก็พยายามจะแก้ แต่ผมมานั่งดู กูก็ไม่ได้มีบั๊กอะไรนี่หว่า ก็มันก็ใช้ได้ปกติ แค่มันต้อง .value แล้วกู แล้วมันทำไมต้องใช้นะ ก็เลยไปอ่านไอ้ Stack Overflow อันนั้น แล้วก็เขียนว่า อ๋อ จริงๆ แล้ว ref แม่งก็ไปเรียก reactive อีกครั้งนึงแหละ ห๊ะ แล้วอย่างงี้มึงก็เขียนอันเดียวก็ได้ ก็ต้องจบตั้งแต่แรก ก็แม่งเสียเวลากับกูจริงๆ โอเคครับ แค่นั้นครับ บ๊ายบายครับ เค้าบอกให้เวลาอีก 25 นาที แต่ว่าน่าจะพอดีครับผม

ผู้จัดงานสรุปประเด็นปัญหา Composition API และ Option API13:36

โอเค ขอบคุณพี่ตั้งมากครับ จริงๆ session นี้ต้องบอกว่าแบบเป็นเหมือนรวม topic ที่ contributor ของ Vue

เค้าก็บ่นกันอะนะ ว่าแบบทำไม อะไร เพราะว่าแบบคือปัญหาของ composition API กับ option API มันมีแบบ 2 อัน

ใช้ด้วยกันได้อย่างเงี้ย มันก็แบบเกิดปัญหา ทำให้ community develop ได้ลำบากมากครับผม

ครับ โอเค