Smashing Podcast ตอนที่ 26 กับ Natalia Tepluhina: มีอะไรใหม่ใน Vue 3.0

ในตอนของพอดแคสต์นี้ เรากำลังพูดถึง VueJS ทั้งหมด มีอะไรใหม่ในรุ่น 3.0 และการย้ายข้อมูลจะยากเพียงใด Drew McLellan พูดคุยกับสมาชิกทีมหลัก Natalia Tepluhina เพื่อหาคำตอบ

แสดงหมายเหตุ

• VueJS
• คู่มือการย้ายข้อมูล Vue 3
• Natalia บน Twitter
• เว็บไซต์ส่วนตัวของ Natalia

อัพเดทประจำสัปดาห์

• วิธีต่างๆ ในการออกแบบหน้าผลิตภัณฑ์ดิจิทัล
  เขียนโดย Suzanne Scacca
• การทดสอบหน่วยใน React Native Applications
  เขียนโดย ฟอร์จูน อิเคจิ
• 5 วิธีที่ Google Analytics ช่วยนักพัฒนาเว็บในการออกแบบ UI/UX
  เขียนโดย Clara Buenconsejo
• ทำความเข้าใจเกี่ยวกับ TypeScript Generics
  เขียนโดย Jamie Corkhill
• วิธีใช้ Face Motion เพื่อโต้ตอบกับวิชาการพิมพ์
  เขียนโดย เอโดอาร์โด คาวาซซา

การถอดเสียง

Drew McLellan: เธอเป็นนักพัฒนาเว็บที่กระตือรือร้น เป็นผู้เชี่ยวชาญของ Google Developer และเป็นวิทยากรและนักเขียนในการประชุม ปัจจุบันเธอเป็น Staff Front Engineer ที่ GitLab แต่คุณอาจรู้จักเธอดีที่สุดในฐานะสมาชิกทีม Vue JS Core เห็นได้ชัดว่าเธอรู้จักเส้นทางรอบๆ Vue ดีกว่าใครๆ แต่คุณรู้หรือไม่ว่าเธอเคยสอนจิงโจ้ให้ร้องเพลง เพื่อนยอดเยี่ยมของฉัน ยินดีต้อนรับ Natalia Tepluhina

ดรูว์: สวัสดีนาตาเลีย สบายดีไหม

Natalia Tepluhina: สวัสดี Drew นี่เป็นความพยายามที่ดีจริงๆ กับนามสกุลของฉัน ฉันต้องให้เครดิตคุณ เป็นหนึ่งในสิ่งที่ดีที่สุดที่ฉันเคยได้ยินจากผู้พูดภาษาอังกฤษเมื่อพวกเขาพยายามออกเสียงนามสกุลของฉัน ฉันเดาว่ามันเป็นไปไม่ได้ ถ้าคุณไม่ได้พูดภาษารัสเซีย การออกเสียงที่ถูกต้องคือ Tepluhina แต่ก็ประมาณว่า ฉันแค่ขอให้คนอื่นเรียกฉันว่า Natalia แล้วหยุดแค่นั้น

Drew: โอเค ฉันพยายามแล้ว แต่คำถามสำคัญคือ คุณกำลัง Smashing หรือไม่?

นาตาเลีย: แน่นอนฉันเป็น

ดริว : ก็ดี วันนี้ฉันอยากจะคุยกับคุณเกี่ยวกับข่าวที่น่าตื่นเต้นจริงๆ ที่เรามีในเดือนกันยายนด้วยการเปิดตัว Vue 3.0 มันเป็นรุ่นใหญ่ในแง่ของหมายเลขเวอร์ชัน แต่เป็นรุ่นใหญ่สำหรับ Vue และอยู่ในระหว่างดำเนินการมาระยะหนึ่งแล้ว ยังไม่ถึงเวลาใช่ไหม

นาตาเลีย: นั่นสินะ ฉันคิดว่าเราประกาศเวอร์ชัน 3 ครั้งแรกในปี 2018 ฉันคิดว่าประกาศในฤดูใบไม้ผลิ และงานจริงเริ่มต้นในนั้น ฉันหมายถึงไอเดียอยู่ในฤดูใบไม้ผลิ งานจริงเริ่มในฤดูใบไม้ร่วงปี 2018 และฉันคิดว่ามีการประกาศอย่างเป็นทางการในการประชุมลอนดอนซึ่งจัดขึ้นในเดือนตุลาคม 2018 งานที่ใช้งานใช้เวลาสองปี และเป็นจำนวนมากหากคุณคิดเกี่ยวกับเวอร์ชันก่อนหน้าเปิดตัวในปี 2016 ดังนั้นครึ่งหนึ่งของสี่ปีนี้จึงทุ่มเทให้กับงาน Vue 3 ด้วย

Drew: อะไรคือแรงจูงใจในการตัดสินใจว่าเวอร์ชันหลักใหม่ถูกเรียกมา? มันเป็นการตัดสินใจแบบมีสติหรือไม่ว่า ตกลงเราจะทำงานในเวอร์ชันหลัก เราจะทำงานกับ Vue 3 หรือเป็นเพียงการสะสมของการเปลี่ยนแปลงที่จำเป็นต้องมีการชนกันของเวอร์ชัน

นาตาเลีย: ไม่ ฉันคิดว่าการสร้างเวอร์ชันใหม่เป็นความคิดที่ดีเนื่องจากบางสิ่งที่สำคัญมาก อย่างแรกเลย มีแรงจูงใจที่จะเปลี่ยนปฏิกิริยา อันก่อนหน้านี้สร้างขึ้นบน Object.defineProperty และมีข้อแม้บางประการ ทั้งหมดได้รับการบันทึกไว้แล้ว แต่ก็ยังมี รู้ไหม แม้ว่าคุณจะบันทึกสิ่งที่คนไม่ควรทำ พวกเขาจะทำมันต่อไป และคุณจะต้องชี้ไปที่เอกสารประกอบ ไม่มีใครอ่านเอกสารเลย ด้วยเหตุผลบางอย่างมันเพิ่งเกิดขึ้น จนกว่าคุณจะชี้ให้คนอื่นเห็นว่าไม่มีอยู่ในเอกสาร แต่โอเค เราจะสอนคุณต่อไป ดังนั้นปฏิกิริยาจึงเป็นหนึ่งในสิ่ง

นาตาเลีย: การแสดงคือเป้าหมายต่อไป Vue 2 ยังคงมีอยู่และไม่ได้มีประสิทธิภาพที่แย่ที่สุด แต่เรามีแนวคิดบางประการเกี่ยวกับวิธีทำให้ Vue เร็วขึ้น และยังมีจุดปวดจุดหนึ่งสำหรับส่วนใดส่วนหนึ่งของเรา สมมติว่าผู้ฟัง ผู้ที่ใช้ Vue มันคือ TypeScript Vue 2 ภายในเขียนด้วย Flow ซึ่งยังคงพิมพ์ได้ดี แต่การพิมพ์ด้วย TypeScript เป็นฝันร้ายอย่างแท้จริง โดยเฉพาะอย่างยิ่งหากคุณกำลังทำงานกับ Vuex การจัดการสถานะของเรา นี่เป็นส่วนสำคัญอีกครั้ง และสุดท้ายคือ เราพลาดฟังก์ชันการทำงานของตรรกะนามธรรม ในแง่ของไม่ใช่ส่วนประกอบ แต่ส่วนตรรกะที่ประกอบได้ เช่นเดียวกับตัวช่วยฟังก์ชันเป็นต้น แต่ควรรวมกิจกรรมของผู้ดูด้วย ตัวอย่างที่ดีที่นี่คือ React Hooks ซึ่งช่วยให้คุณสรุปส่วนต่าง ๆ ของการทำงานได้ และสิ่งนี้หายไปอย่างชัดเจนใน Vue และฉันรู้ว่าตอนนี้ดูเหมือนว่า "คุณขโมยคุณลักษณะจาก React" ไม่ได้ในความเป็นจริง ฉันเชื่อว่าแนวคิดการผสมเกสรข้ามพันธุ์เป็นส่วนที่ดีและดีในระบบนิเวศของเรา และยังช่วยให้นักพัฒนาสลับไปมาระหว่างสิ่งที่ชอบด้วยใช่ไหม

นาตาเลีย: ดังนั้นเราจึงทำงานเกี่ยวกับคุณสมบัติหลักเหล่านี้เพื่อสร้าง Vue 3 เป็นเวอร์ชันหลัก

Drew: ตอนนี้ฉันคิดว่าสิ่งที่ยอดเยี่ยมอย่างหนึ่งที่มีอยู่ในระบบนิเวศโอเพ่นซอร์สก็คือมีแนวคิดและประสบการณ์มากมายจากโครงการต่างๆ ทุกประเภท และความสามารถในการยืมความคิดเหล่านั้นและยืมประสบการณ์จากผู้อื่น โครงการมีประโยชน์จริง ๆ และทำให้ทุกอย่างแข็งแกร่งขึ้นใช่ไหม

นาตาเลีย: นั่นสินะ ฉันคิดว่ามันทำงานเหมือนกับที่เราเรียกว่าค่าการวนซ้ำใน GitLab เมื่อคุณคิดไอเดียขึ้นมา มันไม่เคยสมบูรณ์แบบเลย ส่วนใหญ่จะเหมือนกับของดิบๆ ที่เข้ารหัสยากๆ อาจจะเปลี่ยนแปลงอะไรบางอย่าง แต่ก็เหมือนไม่สมบูรณ์แบบอย่างแน่นอน และคุณต้องทบทวนแนวคิดนี้สักสองสามข้อเพื่อให้มันดีจริง ๆ ไม่สมบูรณ์แบบด้วยซ้ำ แค่ดี และเกิดขึ้นพร้อมกับความคิดในระบบนิเวศ มีคนคิดไอเดียดีๆ ขึ้นมา และคุณก็แค่รับมันไปและทำให้ดีขึ้นเรื่อยๆ และฉันพนันได้เลยว่าจะต้องมีบางอย่างที่จะนำแนวคิดบางอย่างจาก Vue บางทีพวกเขาอาจนำแนวคิดบางอย่างจาก Vue ไปและทำให้ดีขึ้น และไม่มีอะไรเลวร้ายที่นี่

นาตาเลีย: ฉันต่อต้านอย่างมาก เช่น "คุณกำลังขโมยความคิด" นี่ไม่ใช่การขโมย นี่เป็นเพียงการผสมเกสรข้าม

ดริว : จริงด้วย คุณบอกว่าการโยกย้ายไปยัง TypeScript ดังนั้น Vue 3 จึงเขียนโดยใช้ TypeScript ในตอนนี้ ถูกต้องไหม

นาตาเลีย: ใช่ ใช่ มันเป็นอย่างนั้น และเชื่อฉันเถอะ ดรูว์ ฉันกำลังเขียนเอกสาร เอกสารเล็กๆ เกี่ยวกับวิธีใช้ Vue กับ TypeScript และฉันก็แบบ โอเค อาจจะเหมือน Vue 2 และฉันก็ทำให้เอกสารซับซ้อนเกินไป จนเหมือนกับพิมพ์ทุกอย่างให้ชัดเจน ดูดีทุกอย่างที่พิมพ์ ฉันสามารถดูประเภทได้ ดังนั้น ts-link ของฉันจึงมีความสุข จนถึงตอนนี้ดีมาก และหนึ่งในนักพัฒนาของเราที่เคยทำงานกับ TypeScript "คุณไม่จำเป็นต้องทำเช่นนี้" ยังไง ยังไง ? “คุณไม่จำเป็นต้องพิมพ์ข้อมูลที่ชัดเจน คุณเพียงแค่ให้ค่าเริ่มต้นและ ts-link รู้จำนวนของมัน พิมพ์ไว้แล้ว” เช่น มาได้ยังไง? “ฉันลบ 90% ของประเภทที่โจ่งแจ้งออกจากเอกสาร มีเพียงสองสิ่งที่คุณต้องพิมพ์จริงๆ คือ พร็อกซีของส่วนประกอบ และคุณสมบัติที่คำนวณได้จะมี พวกเขายังต้องการประเภทการส่งคืน แต่ที่เหลือก็เหมือนพิมพ์อัตโนมัติ แค่เขียน component ด้วย method ที่เราเรียกว่า define component และนั่นแหล่ะ พิมพ์แล้ว”

นาตาเลีย: มันเหมือนกับว่ามันใช้ได้ผล และสำหรับฉันและฉันกำลังทำงานกับ Angular จากประสบการณ์ที่ผ่านมา ฉันมีอาการสตอกโฮล์มสำหรับ TypeScript ควรพิมพ์ทุกอย่างให้ชัดเจน ฉันหมายความว่าถ้าคุณมีประเภทที่ซับซ้อน แน่นอนว่าคุณจะต้องเขียนอินเทอร์เฟซ แต่นี่คือวิธีการทำงานของ TypeScript ถึงกระนั้น การทำงานกับ TypeScript กับ Vue 3 นั้นง่ายกว่ามากในตอนนี้

Drew: เยี่ยมมาก ดังนั้นจึงเป็นประโยชน์ทั้งต่อ Vue Core Project และสำหรับนักพัฒนาที่กำลังสร้างแอปพลิเคชันโดยใช้ Vue เพราะพวกเขาสามารถใช้ TypeScript ในแอปพลิเคชันของตนได้อย่างดีด้วย Vue ในตอนนี้ ซึ่งพวกเขาไม่สามารถทำได้ด้วย 2.0 ทุกรุ่น 2.0 อย่างง่ายดาย บรรดาผู้ที่คุ้นเคยกับชุมชน Vue จะทราบว่า Evan You ผู้สร้าง Vue ยังคงเป็นผู้นำโครงการอย่างแข็งขัน Core Team ทำงานอย่างไร? มีโครงสร้างอย่างไรในกระบวนการพัฒนา? ไม่ใช่ทั้งหมด Evan ใช่ไหม

นาตาเลีย: นั่นเป็นคำถามที่ยอดเยี่ยมมากดรูว์ เพราะเป็นเวลาหลายปีแล้วที่ผู้คนพูดถึง Vue จริงๆ แล้วฉันพูดแบบนี้และจะฟังดูรุนแรง แต่ขอโทษนะ มันเหมือนกับว่า “กรอบของคนจีนคนเดียว ก็เหมือนกรอบของจีนด้วยซ้ำ” . และฉันหมายถึงแม้ใน Vue 1.X ก็มีทีมอยู่แล้ว และมีทีมใหญ่ที่อยู่เบื้องหลัง Vue 2 และทีมที่ใหญ่กว่าที่อยู่เบื้องหลัง Vue 3 ก็คือ เราทุกคนมีความรับผิดชอบต่างกันเมื่อเราพูดถึง Vue

Natalia: มีคนที่ทำงานเกี่ยวกับ Core อยู่หลายคน และนี่ไม่ใช่แค่ Evan คนเดียว เขาทำงานส่วนใหญ่เกี่ยวกับ Vue Core แน่นอน และเขาก็เป็นผู้นำโครงการด้วยเช่นกัน แต่มีคนที่ทำงานใน Vue Core และผลงานของพวกเขานั้นประเมินค่าไม่ได้ และมีผู้คนใหม่ๆ เข้าร่วมทีม Vue ด้วยเช่นกัน ซึ่งทำงานใน Core และยังมีทีมเล็กๆ ที่ทำงานเกี่ยวกับระบบนิเวศ มีคนที่ทำงานใน Pure Router เช่น Eduardo มีคนที่ทำงานบน Vue CLI, บน Vuex, เกี่ยวกับเอกสารด้วยเช่นกัน

นาตาเลีย: มีทั้งทีมที่ทำงานเกี่ยวกับเอกสาร เพราะเราเชื่อว่าเอกสารมีความสำคัญ และขณะนี้ในเว็บไซต์ของเรามีคนคิดว่า 21, 20 หรือ 21 คนมักจะพลาดการนับที่อยู่ในทีมหลัก แต่นี่ไม่ใช่รายการคงที่ เนื่องจากเราไม่ได้จ้างอย่างชัดเจน เราเป็นทีมโอเพ่นซอร์ส นี่ไม่ใช่งานที่ได้รับค่าจ้าง แต่เราเชื่อว่าหากมีคนมีส่วนอย่างมากต่อส่วนใดส่วนหนึ่งของระบบนิเวศของ Vue เมื่อผู้คนทำงานของสมาชิกทีม Core อยู่แล้ว ก็เพียงแค่ทำให้พวกเขาได้รับการยอมรับด้วยการเข้าถึงที่เก็บและชื่อที่เป็นทางการเท่านั้น

Drew: เยี่ยมมากเพราะเป็นกรณีที่การสนับสนุนโครงการโอเพ่นซอร์สสามารถตอบแทนบุคคลได้อย่างแท้จริง พวกเขาได้รับการยอมรับและอาจส่งผลต่ออาชีพการงานของคุณและสิ่งที่คุณมี

Drew: สำหรับผู้ฟังที่อาจไม่คุ้นเคยกับ Vue แต่บางทีพวกเขาอาจคุ้นเคยกับ Reactive framework อื่นๆ เช่น คุณรู้จัก React, Angular และอื่นๆ Vue 3 มีการเปลี่ยนแปลงพาดหัวข่าวขนาดใหญ่ประเภทใดและโดยเฉพาะปัญหาใดที่พวกเขาพยายามจะแก้ไข คุณพูดถึงการเรียบเรียงก่อนหน้านี้ว่าเป็นเรื่องหนึ่งของการเปลี่ยนแปลงครั้งใหญ่หรือไม่?

นาตาเลีย: ใช่ นี่เป็นการเปลี่ยนแปลงครั้งใหญ่ที่สุดอย่างหนึ่ง และจริงๆ แล้วเป็นหนึ่งในสิ่งที่สำคัญที่สุด อย่างให้ฉันอธิบายให้ชัดเจนในที่นี้ องค์ประกอบ API เป็นสารเติมแต่งอย่างหมดจด ไม่ใช่ว่าคุณจำเป็นต้องเขียนคอมโพเนนต์ของคุณใหม่ คุณสามารถเพิ่ม TypeScript เข้าไปได้ หรือคุณอาจต้องการใช้ไวยากรณ์ทั้งหมด ตอนนี้เราเรียกมันว่า Options API และจะไม่มีอะไรเปลี่ยนแปลงสำหรับคุณในข้อกำหนดเหล่านี้ เหมือนกับว่าเมื่อเราพูดถึง API ใหม่ นี่ไม่ใช่การเปลี่ยนแปลงที่แตกหัก ฉันแค่อยากจะเน้นเรื่องนี้จริงๆ ค่ะ มันเป็นเรื่องสำคัญมากที่จะพูดเพราะตอนที่ประกาศ Composition API เป็นครั้งแรก มันเป็นช่วงเวลาที่แย่มาก

นาตาเลีย: ฉันคิดว่าเราไม่ได้อธิบายการเปลี่ยนแปลงอย่างดีนัก และเราทำให้ดูเหมือนว่าบิลด์มาตรฐานจะเป็น Composition API มันแย่ไปหมดและตัวเลือกก็ประมาณว่า บางทีเราอาจเลิกใช้งานมันในรุ่นต่อๆ ไป ไม่ใช่ใน Vue 3 อย่างชัดเจน และถ้ามีโอกาสที่คนจะอ่านสิ่งที่คุณพูดผิด พวกเขาจะอ่านผิด

นาตาเลีย: ทันทีหลังจากคำแถลงนี้ RFC ที่เราเพิ่งเสนอการเปลี่ยนแปลงคือ Reddit ระเบิด Reddit เต็มไปด้วยคำว่า “โอ้ พระเจ้า ฉันจะต้องเขียนทุกอย่าง โอ้พระเจ้า. Vue เป็น Angular ใหม่ พวกเขาจะทำลายทุกสิ่ง” และมีผู้ชายคนหนึ่งที่สร้างบทความเกี่ยวกับ dev.to ชื่อ Vue's Darkest Day มันเป็นวันที่มืดมนที่สุดโดยสุจริต เรารู้สึกอย่างนั้น แต่ฉันก็พยายามจะต่อสู้กับสิ่งนี้บน Twitter ของตัวเอง เช่น “คนที่เราไม่ได้จริงๆ… พวกเขากำลังบอกว่าเราเริ่มเปลี่ยน RFC ฉันคิดว่า Evan เริ่มเปลี่ยน RFC โดยไม่ประกาศการเปลี่ยนแปลง เขาก็เลยแบบว่า “ผมจะรีบเขียนใหม่ มาชอบผลักดันให้เป็นอาจารย์กันเถอะ” ผู้คนคลั่งไคล้เรื่องนี้ เนื่องจากพวกเขากำลังโต้เถียงกันเกี่ยวกับประเด็นบางอย่าง คุณเพียงแค่รีเฟรชหน้าและจุดเหล่านั้นไม่มีอยู่อีกต่อไป คุณรู้สึกเหมือนฉันเป็นคนโง่หรือแค่ ... อะไรนะ? ฉันหมายความว่ามันอยู่ที่นั่น ฉันจำได้. และฉันเชื่อว่ากลยุทธ์การสื่อสารของเราน่าจะดีกว่านี้ และนี่ไม่ใช่เรา

นาตาเลีย: ตอนนี้ ทุกครั้งที่ฉันพูดถึงการจัดองค์ประกอบ นี่เป็นเพียงคุณสมบัติที่ดี คุณสามารถใช้ได้ ใช้งานไม่ได้ ไม่จำเป็น แค่… มันมีอยู่

Drew: ปัญหาประเภทใดที่บางคนอาจเข้าใจโดยที่ Composition API เป็นสิ่งใหม่ที่ช่วยให้พวกเขาหลุดพ้นจากปัญหานั้น มันแก้ปัญหาอะไร?

นาตาเลีย: ลองนึกภาพองค์ประกอบที่มีคุณลักษณะบางอย่างอยู่ภายใน สมมติว่าเป็นการค้นหาและการเรียงลำดับ สมมติว่าเราค้นหารายการบางรายการและเราพยายามจัดเรียงรายการนั้น นี่เป็นคุณสมบัติที่แตกต่างกันสองอย่าง และสิ่งที่องค์ประกอบ Vue นั้นถูกแยกออก ตามตัวเลือก ไม่ได้ขึ้นอยู่กับตรรกะ ลองนึกภาพการค้นหาของคุณอาจมีข้อความค้นหา เนื่องจากคุณต้องสร้างข้อความค้นหาเพื่อค้นหาและจัดเรียงผลลัพธ์ และนี่คือคุณสมบัติปฏิกิริยาสองอย่าง ในแง่ขององค์ประกอบ คุณใส่ลงในตัวเลือกที่เรียกว่าข้อมูล และแน่นอนว่าคุณต้องการวิธีการบางอย่างในการจัดเรียง บางทีการคลิกปุ่ม อาจเป็นอย่างอื่น บางอย่างที่ทำการค้นหา คุณสร้างวิธีการ และสำหรับการเรียงลำดับ คุณต้องสร้างบางสิ่งตามตัวเลือกการเรียงลำดับ ซึ่งเป็นคุณสมบัติปฏิกิริยาอื่น จากนั้นคุณทำการคำนวณเพื่อเรียงลำดับผลลัพธ์

Natalia: ใน Vue สำหรับสิ่งนี้ คุณมีคุณสมบัติในการคำนวณด้วย ซึ่งเป็นอีกตัวเลือกหนึ่ง ในตอนท้าย คอมโพเนนต์ของคุณมีการแยกส่วนจริงๆ และลองนึกภาพว่าผมเป็นนักพัฒนาและมีหน้าที่ค้นหาเฉพาะส่วนงานเท่านั้น ฉันไม่สามารถแยกส่วนประกอบได้ในขณะนี้ เนื่องจากคุณลักษณะทั้งสองนี้มีลักษณะที่ตรงข้ามกัน ฉันค้นหาผลลัพธ์และเรียงลำดับ และฉันต้องข้ามจากข้อมูลหนึ่งไปอีกวิธีหนึ่ง จากวิธีหนึ่งไปอีกวิธีหนึ่งสู่การคำนวณ และในตอนท้ายมันยากมากที่จะเปลี่ยนบริบท โดยเฉพาะอย่างยิ่งถ้าส่วนประกอบโตขึ้นมาก

Natalia: เรามีตัวเลือกอะไรบ้างใน Vue 2.0? ตัวเลือกแรกเรียกว่ามิกซ์อิน และมิกซ์อินเป็นเพียงอ็อบเจ็กต์ที่สามารถมีคุณสมบัติแบบเดียวกับที่คอมโพเนนต์สามารถมีได้ และเรากำลังผสมพวกมันเข้ากับส่วนประกอบ ฟังดูดี ฉันสามารถย้ายการค้นหาทั้งหมดของฉันไปที่นั่นได้ และปัญหาคืออะไร มีไม่กี่อย่าง ประการแรกสิ่งนี้ไม่ยืดหยุ่นอย่างสมบูรณ์ ถ้าฉันต้องการค้นหาจุดสิ้นสุดที่แน่นอนและย้ายไปยัง mixin นี่จะเป็นจุดสิ้นสุดเพียงจุดเดียวที่ฉันสามารถค้นหาได้ มิกซ์อินไม่ยอมรับพารามิเตอร์ ฉันสร้างมิกซ์อินขึ้นมา มันเป็นแบบคงที่โดยสมบูรณ์ ปัญหาที่สองคือการผสม mixin ซึ่งหมายความว่าคุณสมบัติบางอย่างจะเกิดขึ้นเช่นการผสาน ตัวอย่างเช่น หากคุณสร้าง hooks มันจะถูกรวมเข้าด้วยกัน ตรรกะทั้งหมดในเบ็ดวัฏจักรชีวิตจากคอมโพเนนต์มิกซ์อินถูกรวมเข้าด้วยกัน แต่ถ้าคุณมีคุณสมบัติของข้อมูล การสืบค้นแบบเย็นในมิกซ์อิน และโดยโอกาสใดก็ตามที่คุณมีคุณสมบัติเหมือนกันในองค์ประกอบ ส่วนประกอบนั้นจะมีลำดับความสำคัญ มันจะถูกแทนที่ คุณจะไม่มีคำเตือน อย่างแน่นอน. มันจะเกิดขึ้นและคุณจะไม่รู้ว่าสิ่งนี้เกิดขึ้น

Drew: ขอบเขตทั้งหมดผสมกันอย่างสมบูรณ์?

นาตาเลีย: ใช่ ครบเลย ไม่มีทางที่คุณจะเห็นและมิกซ์อินเป็นแหล่งที่ไม่ชัดเจนมาก คุณเพียงแค่นำเข้ามิกซ์อินพร้อมชื่อและใส่เพื่อดูมิกซ์อินคุณสมบัติคอมโพเนนต์ แค่นั้นเอง มันเป็นเรื่องโดยปริยายและฉันกำลังพูดถึงเรื่องนี้จากประสบการณ์ของตัวเอง เรามีตรรกะใน GitLab ที่คอมโพเนนต์ประกอบด้วยมิกซ์อินสองตัว และมิกซ์อินสองตัวนี้มีมิกซ์อินอื่น และต่อไป นี่คือคุณสมบัติที่คุณต้องตรวจสอบและไม่ได้อยู่ในองค์ประกอบ มาลงลึกกันดีกว่า มิกซ์อินระดับแรก ตัวนี้ไม่มีครับ ตัวนี้ไม่มีด้วย มันอยู่ที่ไหน? คุณกำลังดำดิ่งลึกลงไปในรูกระต่ายเพียงเพื่อค้นหาคุณสมบัตินี้และการทดสอบก็กลายเป็นฝันร้ายเช่นกัน

นาตาเลีย: มิกซ์ซินเป็นวิธีที่โง่มากในการแยกตรรกะ ธรรมดา ชัดเจน หาง่ายมาก มันนำปัญหามากมายมาให้คุณหากคุณต้องการทำงานกับสิ่งนี้ในระดับสูง วิธีถัดไปของการแยกตรรกะใน Vue 2.0 คือส่วนประกอบที่ไม่มีการแสดงผล ใน Vue คอมโพเนนต์สามารถมีสล็อตได้ โดยทั่วไปชิ้นส่วนที่คุณสามารถใส่อะไรก็ได้จากองค์ประกอบหลัก หน้าต่างเล็กๆ ช่องจริงๆ และมีแนวคิดเกี่ยวกับสล็อตที่มีขอบเขต ลองนึกภาพองค์ประกอบลูกที่สามารถเปิดเผยขอบเขตของตัวเองกลับไปที่เนื้อหาหลักและสล็อตจะสามารถเข้าถึงสิ่งนี้ได้ ลองนึกภาพว่าฉันมีส่วนประกอบที่มีสล็อตและส่วนประกอบดำเนินการตามตรรกะทั้งหมดเกี่ยวกับการค้นหา สมมติว่ากำลังค้นหาซึ่งมีจุดสิ้นสุดพร้อมพารามิเตอร์ในอดีต องค์ประกอบลูกของเรา เช่น การค้นหา จากนั้นแสดงขอบเขตส่วนนี้กลับไปยังระดับบนสุด นี่คือผลการค้นหา สนุก. ฟังดูเข้าท่า. เสียงดีกว่ามิกซ์อินแน่นอน เราสามารถทดสอบพารามิเตอร์ ตรรกะมีความชัดเจนที่นี่ เรากำลังส่งคืนบางสิ่ง ปัญหา? มีไม่กี่อย่าง

นาตาเลีย: ก่อนอื่น คุณได้สร้างอินสแตนซ์คอมโพเนนต์แล้ว นี่ไม่ใช่การดำเนินการที่ถูกที่สุดในโลก ส่วนที่สอง เป็นรันไทม์ คอมโพเนนต์ใช้งานได้เฉพาะในรันไทม์ ซึ่งหมายความว่าคุณสมบัติที่เปิดเผยจากคอมโพเนนต์นี้จะสามารถทำได้เฉพาะในช่องที่คุณเปิดเผยเป็นขอบเขตของช่อง ดังนั้นผลการค้นหาของคุณจะพร้อมใช้งานในส่วนเล็กๆ ของเทมเพลตเท่านั้น หากคุณต้องการเล่นกับส่วนประกอบที่ไม่ต่อเนื่อง คุณไม่สามารถเข้าถึงได้ มันคือรันไทม์ ไม่มีการดำเนินการตรรกะนี้หากคุณต้องการสถานะปฏิกิริยาที่อื่น แน่นอนว่ามันสามารถสร้าง Helper ได้เหมือนกับ Pure Function และให้ผลลัพธ์กลับมา แต่ถ้าฉันต้องใช้งานคุณสมบัติ Reactive ล่ะ? นั่นคือวิธีการสร้าง API ขององค์ประกอบ ด้วย Composition API คุณสามารถมีสถานะปฏิกิริยาแบบสแตนด์อโลนได้ สถานะปฏิกิริยาไม่ได้เป็นเพียงส่วนหนึ่งของส่วนประกอบอีกต่อไป คุณสามารถสร้างวัตถุใดๆ และคุณสามารถเปิดเผยให้ผู้ปกครองทราบได้ มันชัดเจนมาก

นาตาเลีย: ทรัพย์สินทั้งหมดที่คุณต้องการส่งคืนให้กับผู้ปกครองจะถูกเปิดเผย มันชัดเจน คุณสามารถคลิกที่สิ่งนี้ คุณสามารถดูว่ามันอยู่ที่ไหน มันคืออะไร และอื่นๆ และส่วนที่ดีที่สุด หากคุณรวมส่วนของ Composition API ไว้ในส่วนประกอบที่ดีแบบเก่าที่มีวิธีข้อมูล คุณสมบัติของคอมพิวเตอร์ อะไรก็ตาม มันก็ใช้ได้ดี มันทำงานได้อย่างสมบูรณ์ คุณเพียงแค่เพิ่มคุณสมบัติและเมธอดแบบรีแอกทีฟสองสามรายการให้กับส่วนประกอบของคุณ และคุณสามารถใช้กับตัวเลือก API แบบเก่าได้เช่นกัน

Drew: ดูเหมือนว่าจะช่วยให้นักพัฒนาทำความสะอาดฐานโค้ดของตนได้อย่างแท้จริง เมื่อพูดถึงส่วนประกอบที่ซับซ้อนมาก หรือแม้แต่การผสมผสานส่วนประกอบที่ซับซ้อนเพียงเล็กน้อย และคุณพูดถึงความสามารถในการทดสอบของมิกซ์อินและสิ่งของต่างๆ แล้ว Composition API ช่วยให้ทดสอบได้ดีขึ้นหรือไม่

Natalia: ใช่ แน่นอนเพราะ Composition API หากเราแยก lifecycle hook ออกจากสิ่งนี้ เพราะคุณสามารถเรียกใช้ lifecycle hook อื่นใน composeable เป็นฟังก์ชันที่บริสุทธิ์จริงๆ คุณมี S-parameters คุณกำลังทำอะไรอยู่ และนอก lifecycle hook ก็ยังมีผลข้างเคียงอยู่ และการทดสอบฟังก์ชันล้วนๆ อย่างที่คุณทราบน่าจะง่ายที่สุด มันเป็นแค่กล่องดำ คุณมีพารามิเตอร์ S คุณมีบางอย่างที่จะส่งคืน

Drew: นั่นฟังดูเป็นวิธีแก้ปัญหาที่ครอบคลุมมาก ซึ่งผมมั่นใจว่าผู้คนจำนวนมากที่สร้างแอปที่ซับซ้อนมากขึ้นด้วย Vue จะชอบใจ และแน่นอนว่าฟังดูเป็นวิธีที่ยอดเยี่ยมมากในการกำจัดแมลงประเภทต่าง ๆ ที่ฉันรู้ดีว่าสามารถเล็ดลอดเข้ามาได้ด้วยมิกซ์อิน ซึ่งมันง่ายมากที่จะแนะนำจุดบกพร่อง ดังที่คุณกล่าวไว้ ด้วยขอบเขตที่ถูกรวมเข้าด้วยกันและสิ่งต่างๆ เหล่านั้น

Drew: ฉันคิดเสมอว่าการพิจารณาครั้งใหญ่เมื่อเลือกสร้างบนเฟรมเวิร์กคือความเสถียรของ API เมื่อเวลาผ่านไป บางทีความเสถียรอาจไม่ใช่คำที่เหมาะสม แต่ฉันคิดว่าพวกเราหลายคนถูกต่อยโดยการสร้างเฟรมเวิร์ก จากนั้นจึงผ่านการทำงานใหม่ครั้งใหญ่ และปล่อยให้เรามีแอปที่ต้องใช้เงินลงทุนมหาศาลในการย้ายข้อมูล หรือถูกผูกมัด ไปเป็นเวอร์ชันเก่าของเฟรมเวิร์กที่ไม่รองรับอีกต่อไป มันเป็นสถานการณ์ที่เลวร้ายมาก ฉันจะสูญเสียการนอนเท่าไหร่ในการย้ายโครงการใหญ่จาก Vue 2 ไปยัง Vue 3?

นาตาเลีย: อย่างแรกเลย พื้นผิว API นั้นเหมือนเดิม 90% เราไม่มีสิ่งของที่เลิกใช้แล้วหรือตัวกรองที่เลิกใช้แล้วซึ่งเปลี่ยนได้ด้วยฮับเหตุการณ์ที่เลิกใช้แล้ว หากคุณต้องการใช้ EventEmitter คุณจะต้องแทนที่มุมมองด้วยไลบรารีภายนอกด้วยเช่นกัน นี่เป็นการเปลี่ยนแปลงครั้งใหญ่ แต่เมื่อพูดถึงการโยกย้าย… ให้ฉันอธิบายให้ชัดเจน ตอนนี้ฉันขาดจริงๆ เพราะในแง่หนึ่ง ฉันเป็นสมาชิกทีม Vue JS Core ในทางกลับกัน ฉันเป็น Staff Engineer ในโครงการใหญ่ที่ใช้ Vue หากคุณกำลังจะเริ่มต้นการย้ายข้อมูลในตอนนี้ ฉันไม่แนะนำให้ทำเช่นนั้น อย่างแรกเลย ระบบนิเวศน์ไม่ปล่อยออกมา ฉันหมายถึงถ้าเราพูดถึงไลบรารีหลักอย่าง Pure Router, PUX, Vue CLI สิ่งเหล่านี้อยู่ในสภาพที่ดี แต่ก็ยังปล่อยตัวผู้สมัคร ไม่ใช่ปล่อยตัว และถ้าเราพูดถึงระบบนิเวศอื่นๆ เช่น ไม่ใช่ไลบรารี่หลัก, ไลบรารีคอมโพเนนต์ UI, บางทีไลบรารีการตรวจสอบความถูกต้องของรูปแบบ, พวกมันยังไม่พร้อม, ส่วนใหญ่, สำหรับ Vue 3 และถ้าคุณมีโปรเจ็กต์ขนาดใหญ่ คุณต้องพึ่งพาอาศัยกันมากมาย ดูแล. ดังนั้นนี่จะเป็นสิ่งที่ซับซ้อน

นาตาเลีย: ตัวเลือกคืออะไร? คุณมีโปรเจ็กต์ใหญ่ คุณต้องการใช้คุณสมบัติ Composition API ทั้งหมดนี้ จะบรรลุเป้าหมายนี้ได้อย่างไร อันดับแรก เราวางแผนที่จะเผยแพร่ LTS build ของ Vue 2.0, Vue 2.7 ซึ่งจะรวมถึงคำเตือนการเลิกใช้งานจำนวนมาก ดังนั้นคุณจะสามารถดูได้ว่ามีสิ่งใดที่จะเลิกใช้ วิธีจัดองค์ประกอบใหม่เพื่อไม่ให้พังด้วย Vue 3 ดังนั้น คุณจะยังคงใช้ Vue 2 ในทางเทคนิคอยู่ แต่คุณจะต้องเตรียม Vue 3 อย่างไรก็ตามเพราะคุณมีคำเตือนทั้งหมด

Natalia: ประการที่สอง เราจะใช้เครื่องมือการโยกย้ายที่จะสามารถเรียกใช้ได้และจะทำงานเป็นโค้ด mod โดยแทนที่สิ่งที่เกี่ยวข้องกับ Vue 2 ด้วย Vue 3 ทางเลือก แน่นอนว่าไม่มี codemods ใดที่สมบูรณ์แบบ อันดับแรก เราตั้งเป้าหมายที่จะทำการเปลี่ยนทดแทนเมื่อทำได้ แต่ยังแสดงคำเตือนทุกครั้งที่ไม่สามารถจัดการการเลิกใช้งานได้อย่างง่ายดาย Codemod จะสามารถจดจำสิ่งของและแจ้งเตือนได้ แต่ไม่สามารถแทนที่ได้ด้วยตัวมันเอง นี่เป็นเหมือนแผนใหญ่ และเมื่อ Vue 2.7 ถูกปล่อยออกมา และฉันคิดว่าตอนนี้เวลาที่คาดว่าจะมาถึงคือเดือนธันวาคม ถ้าจำไม่ผิด ฉันต้องตรวจสอบแผนงาน แต่ฉันคิดว่ามันคือเดือนธันวาคม

นาตาเลีย: ระบบนิเวศก็จะพร้อมไม่มากก็น้อย หากคุณมีโปรเจ็กต์ขนาดใหญ่ที่มี Vue 2.0 ให้รออีกสักหน่อยจนกว่า Core จะเสถียรเพราะแม้ว่าคุณจะสร้างไลบรารี่ที่สมบูรณ์แบบ แต่ก็ยังต้องใช้เวลาสักพักในการทำให้เสถียรเพราะผู้คนเริ่มใช้สิ่งนี้ ผู้คนก็เริ่มรายงานจุดบกพร่อง หากคุณกำลังจะใช้สำหรับโครงการสัตว์เลี้ยงและรายงานจุดบกพร่อง โปรดดำเนินการดังกล่าว และหลังจากนี้จะมีการโยกย้ายไปยัง Vue 3 ได้อย่างราบรื่น

Drew: เครื่องมือย้ายข้อมูลที่คุณพูดถึงฟังดูน่าสนใจทีเดียว นั่นคือเครื่องมือวิเคราะห์สแตติกที่ตรวจสอบโค้ดของคุณและ...

นาตาเลีย: ใช่ ใช่ ใช่ มันคือรหัสหรือเครื่องมือ ตอนนี้มันสามารถใช้ได้ในทางที่จำกัดมาก มีให้ใช้งานเป็นปลั๊กอินของ Vue CLI หากคุณมีโปรเจ็กต์ที่ใช้ Vue CLI คุณสามารถเรียกใช้การอัปเกรด Vue และดูว่าเครื่องมือทำงานอย่างไร มันไม่อยู่ในรูปร่างที่เราอยากให้มันเป็นอยู่ ขออภัย ฉันไม่ได้ทำงานในโครงการที่สร้างบน Vue CLI ฉันต้องรอและตรวจสอบว่าเกิดอะไรขึ้น แต่ตัวอย่างเช่น GitHub เราได้ดำเนินการสองสามขั้นตอนแล้วแม้จะไม่มีเครื่องมือการย้ายข้อมูลเพื่อเตรียมพร้อม เพราะเรารู้ว่าสิ่งใดที่เลิกใช้แล้ว มีการระบุไว้จริงในเอกสาร Vue 3

Natalia: มีคู่มือการย้ายถิ่น คุณสามารถดูการเปลี่ยนแปลงที่แตกหักและสิ่งต่าง ๆ ที่เลิกใช้แล้ว และคุณสามารถทำงานบางส่วนได้ แม้กระทั่งบนฐานโค้ด Vue 2.0 ตัวอย่างเช่น ใน Vue 2.6 เราเปลี่ยนไวยากรณ์สำหรับสล็อต ไวยากรณ์สำหรับสล็อตขอบเขตเลิกใช้แล้ว แต่ไม่ถูกปฏิเสธ แต่ยังคงมีอยู่ มันให้คำเตือน แต่คุณสามารถเรียกใช้ได้ และแน่นอน ด้วย codebase ที่มีอายุเจ็ดขวบ ไม่มีใครสนใจที่จะแทนที่ไวยากรณ์ที่เลิกใช้แล้วทั้งหมดถ้ามันใช้งานได้ ไม่มีการเตือนในการผลิต สล็อตทำงาน ในการพัฒนาเช่น "โอ้ ฉันเห็นคำเตือนบางอย่างในคอนโซล อาจจะ 20 คนก็ได้นะ เหลืองไม่แดงครับ ฉันไม่สนใจ”

นาตาเลีย: คุณรู้ว่ามันเกิดขึ้นกับทุกคน เราได้สร้างมหากาพย์อันยิ่งใหญ่เพื่อดำเนินการเรื่องนี้ ค้นหาชุดปัจจุบันของไวยากรณ์เก่าทั้งหมด เราพยายามที่จะแทนที่ EventEmitters ของเราอีกครั้ง โปรเจ็กต์เจ็ดปี อย่าตัดสินเรา เรามี EventEmitters GitLab ได้ทำงานใน EventHubs เราแทนที่ความสนุกแบบ Vue ด้วยไลบรารีภายนอก ฉันอยากจะแนะนำให้ทำเช่นเดียวกัน อ่านคู่มือการย้ายถิ่นเพื่อตรวจสอบสิ่งที่สามารถแทนที่ได้แล้วและการเปลี่ยนแปลงใดที่คุณทำได้เพื่อเตรียมการและเริ่มทำงานในเรื่องนี้

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

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

นาตาเลีย: นอกจากนี้ หากคุณต้องการเล่นกับโครงนั่งร้านของโครงการ ตอนนี้ Vue CLI รองรับสองโหมด คุณสามารถสร้างโครงการ Vue 2 ได้ คุณสามารถสร้างโครงการ Vue 3 ได้ และอย่างน้อยก็ลองดู นี่เป็นวิธีที่ดีสำหรับเราเช่นกัน เพราะในขณะที่คุณเล่น คุณพบข้อบกพร่อง คุณรายงานจุดบกพร่อง เราพยายามแก้ไขข้อบกพร่องเหล่านั้น และอื่นๆ

Drew: ในเอกสารและในแผนงานการพัฒนา ฉันเห็นการกล่าวถึงบิลด์การย้ายข้อมูล นั่นคือสิ่งที่แตกต่างกับสิ่งที่เราได้พูดคุยหรือนั่นคือสิ่งที่เรากำลังพูดถึงหรือไม่

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

Drew: ใช่ ในเอกสารเป็นคู่มือการโยกย้ายที่ครอบคลุมซึ่งเป็นส่วนหนึ่งของเอกสาร Vue 3 และกล่าวถึงการเปลี่ยนแปลงจำนวนมากที่จำเป็นต้องย้าย ฉันเดาว่าบางส่วนจะไม่ส่งผลกระทบต่อทุกโครงการ ส่วนใหญ่เป็นกรณีขอบสำหรับคนจำนวนมาก ยุติธรรมไหม?

นาตาเลีย: ใช่ ส่วนที่ดีของพวกมัน เช่น ตัวกรอง แน่นอนว่าเป็น edge case เพราะแม้แต่ที่ GitLab ที่มี codebase อายุเจ็ดขวบเป็นครั้งที่สามและเป็นอันใหญ่ เรามีตัวกรองหนึ่งหรือสองครั้งและไม่ได้ใช้อีกต่อไป เป็นสิ่งที่ดีที่เราค้นหาและลบออกทั้งหมดเพราะเช่น "โอ้ รหัสที่ไม่ได้ใช้" และอีกครั้งที่ใครสนว่ามันมีอยู่จริง

นาตาเลีย: ฉันจะบอกว่าการเปลี่ยนแปลงที่แตกหักโดยสิ้นเชิงคือการเปลี่ยนแปลงรูปแบบ ลองดูที่นี้เพราะทุกโครงการเดียวที่ฉันรู้มีอย่างน้อยหนึ่งรุ่น Vue แน่นอน สิ่งนี้ควรได้รับการตรวจสอบ และอาจมีการเปลี่ยนแปลงแอตทริบิวต์ด้วย เนื่องจากขณะนี้เรากำลังรวมคลาสและสไตล์ tubulars และ ethers และถ้าคุณเคยทำงานกับ Vue ก่อนหน้านี้จะไม่รวมอยู่ด้วย ตอนนี้ วิธีที่คุณส่งผ่านชั้นเรียนและรูปแบบไปยังองค์ประกอบย่อยนั้นแตกต่างออกไปเล็กน้อย และสิ่งเหล่านี้ก็ควรค่าแก่การเอาใจใส่อย่างแน่นอน

ดริว : เป็นเรื่องดีที่รู้ รุ่น 3.0 ที่เผยแพร่พร้อมกับ Vue ฉันหมายความว่าคุณพูดถึงระบบนิเวศและทุกสิ่งรอบตัว Vuex และส่วนอื่น ๆ ของระบบนิเวศทั้งหมดที่จำเป็นเพื่อก้าวไปสู่ระดับนั้น นั่นเป็นสาเหตุว่าทำไมปัจจุบันเว็บไซต์ปุ่ม "เริ่มต้นใช้งาน" ขนาดใหญ่ยังคงไปที่ Vue 2? รู้สึกเหมือนกับว่า Vue 3 ถูกปล่อยออกมาแต่ไม่มั่นใจเต็มที่ แต่เป็นเพราะปัญหาของระบบนิเวศนั้นที่ยังคงเป็นแบบนั้นอยู่หรือเปล่า?

นาตาเลีย: ไม่ ฉันคิดว่าคุณเพิ่งพบข้อผิดพลาด ให้ฉันตรวจสอบอย่างรวดเร็ว ไม่ เริ่มต้นโดยชี้ไปที่ Vue 3 ก็ไม่เป็นไร ฉันหมายถึงถ้าคุณไปที่ vuejs.org มันจะชี้ไปที่เวอร์ชันที่สอง นี่เป็นความตั้งใจเพราะเราวางแผนที่จะแทนที่ด้วยโดเมนย่อยเช่น Vue 2 ซึ่งอยู่ในระหว่างดำเนินการ แต่จนถึงตอนนี้ เราตัดสินใจออกจาก vuejs.org ที่เดิมและสร้าง Vue 3 และนั่นเป็นสาเหตุที่ทำให้มีแบนเนอร์บน vuejs องค์กร ถ้าคุณไปที่เอกสารใด ๆ-

Drew: มีแบนเนอร์เล็ก ๆ อยู่ด้านบนสุดใช่

นาตาเลีย: ใช่ เหมือนตัวเล็ก

ดริว : ครับ

นาตาเลีย: เราควรทำให้มันใหญ่ขึ้น ฉันเดา ใหญ่ขึ้นและมีความคมชัดของสีที่ดีขึ้น ความรู้สึกในการช่วยสำหรับการเข้าถึงของฉันยังคงเป็นแบบ "โอ้ ไม่มีอะไรที่ตรงกันข้ามเลย"

ดรูว์: นั่นเป็นข่าวดี ถ้าใครกำลังเริ่ม อาจจะไม่ใช่โครงการใหญ่ แต่ถ้าใครกำลังเริ่มโครงการส่วนตัวหรือต้องการเรียนรู้ Vue แน่นอน Vue 3 คือจุดเริ่มต้น?

นาตาเลีย: ฉันจะพูดอย่างนั้น เส้นโค้งการเรียนรู้ไม่แตกต่างกันมากนัก เนื่องจากเป็นความตั้งใจของทีมเอกสารที่จะมีตัวเลือกไวยากรณ์แบบเก่า ฉันไม่ควรพูดว่าเก่า จริงๆ แล้วมันเป็นไวยากรณ์ปัจจุบัน ไวยากรณ์ที่คุ้นเคยเป็นค่าเริ่มต้น เพราะถ้าคุณอ่านเอกสาร Vue 3 คุณจะเห็นด้วย Composition API เฉพาะในหัวข้อขั้นสูง และเส้นทางการเรียนรู้ที่คุณมีกับ Vue 3 นั้นคล้ายกับที่คุณมีใน Vue 2 ไม่มีอะไรมากที่จะเริ่มต้นด้วยสิ่งใหม่ เวอร์ชั่นถ้าคุณเพิ่งเรียนรู้ Vue และทดลองกับมันและฉันเชื่อว่ามันจะเป็นการลงทุนที่ดีกว่าถ้าเราพูดถึงอาชีพ เริ่มเรียนรู้เวอร์ชันใหม่กว่าเพราะจะแซงทุกโครงการ ในที่สุด อาจจะครึ่งปี หนึ่งปี แม้แต่โครงการขนาดใหญ่ก็จะมีการอพยพ

Drew: ดูเหมือนว่าฉันจะมีอาชีพส่วนตัว มีความสามารถอย่างแท้จริงในการมาที่แพลตฟอร์ม เช่นเดียวกับที่พวกเขากำลังอยู่ในขั้นตอนการโยกย้ายครั้งใหญ่ ฉันหมายถึง ย้อนกลับไปเท่าที่ คุณจำ Macromedia Director ย้อนกลับไปได้ไกลขนาดนั้น และ Shockwave, Flash และอะไรหลายๆ อย่าง ฉันมาถึงจุดนี้ในขณะที่พวกเขากำลังเปลี่ยนไปใช้รูปแบบจุดและฉันต้องเรียนรู้ทั้งสองอย่าง และนี่คือฉัน ฉันพบว่าตัวเองเพิ่งทำโปรเจ็กต์ใน Vue เป็นครั้งแรก ซึ่งเป็นโปรเจ็กต์ Vue 2 และเรียนรู้ไปพร้อมกับการรอคอยทุกสิ่งที่จะมาใน Vue 3 นั้นคือ แน่นอนว่าเป็นช่วงเวลาที่น่าสนใจในการเรียนรู้บางสิ่งในขณะที่มันโยกย้าย แต่ดูเหมือนว่า Vue จะไม่ยากเกินไป และเมื่อระบบนิเวศได้รองรับ Core แล้ว เราก็ควรจะอยู่ในที่ที่ดี

นาตาเลีย: โอ้ ดรูว์ ฉันแค่อยากจะพูดเกี่ยวกับสิ่งที่คุณพูดเกี่ยวกับการอพยพของโครงการใหญ่ๆ คุณสามารถจินตนาการว่าฉันชอบปี 2018 และฉันกำลังเข้าร่วม GitLab ฉันไม่ใช่สมาชิก Core Team ฉันเป็นเพียงผู้มีส่วนร่วมในขณะนี้

Natalia: ในเวลาเดียวกัน Evan ก็เหมือน "โอ้ เรากำลังจะสร้าง Vue 3" ทุกคนชอบ "ใช่ เจ๋ง" ฤดูใบไม้ผลิปี 2019 คุณคือ Core Teeam ฉันหมายถึง GitLab ทั้งหมดเป็นแบบ "โอ้ น่ารัก เราทุกคนต่างมีการย้ายถิ่นฐาน และคุณรู้หรือไม่ว่าใครเป็นผู้รับผิดชอบในเรื่องนี้” และคุณสามารถจินตนาการได้ว่ามันจะเกิดขึ้นได้อย่างไรเมื่อคุณเขียนเอกสารสำหรับ Vue 3 ทุกคนจะอ่าน และบริษัทของคุณเองก็แบบว่า "โอ้ ฉันต้องการเรียนรู้บางอย่างเกี่ยวกับ Vue 3 ฉันไม่เข้าใจเอกสารของคุณ" คุณก็เลยแบบว่า "โอ้ เจ็บจริงๆ" เพราะคุณเป็นนักพัฒนาและนักเขียนด้านเทคนิคที่นั่น

นาตาเลีย: คุณอยู่ตรงกลางของสิ่งนี้ แต่ฉันต้องบอกว่ามันมีประโยชน์จริง ๆ สำหรับเฟรมเวิร์กเช่นกัน เพราะผลิตภัณฑ์ขนาดใหญ่ใดๆ ที่สร้างด้วยเฟรมเวิร์กนั้นเป็นสนามรบที่ยอดเยี่ยมและยอดเยี่ยมมากในการค้นหาจุดบกพร่องและนำมันกลับมาที่ห้องสมุดเพื่อ ระบบนิเวศ ฉันสามารถพูดได้ว่าการทดสอบและ GitLab เป็นโอเพ่นซอร์ส Vue Test Utils ซึ่งเป็นเครื่องมือทดสอบสำหรับ Vue ทีมงานใช้โค้ดการทดสอบของเราโดยอิงจากการทดสอบ ซึ่งสมเหตุสมผลมากใช่ไหม เพราะคุณสามารถหา case edge ได้ เป็นต้น แต่ถึงกระนั้น เมื่อฉันคิดถึงการย้าย GitLab ไปยัง Vue 3 ฉันรู้สึกว่าเป็นความรับผิดชอบส่วนตัวในเรื่องนี้ ฉันไม่ได้อยู่ตรงกลางของการย้ายถิ่นเท่านั้น ฉันต้องรับผิดชอบต่อข้อบกพร่องทุกประการที่เราพบเป็นการส่วนตัว

Drew: เมื่อมองย้อนกลับไปที่เฟรมเวิร์ก JavaScript รุ่นก่อน ฉันคิดว่าหนึ่งในเฟรมเวิร์กที่ประสบความสำเร็จมากที่สุดคือ jQuery ในอดีต และฉันคิดว่ามันได้รับแรงฉุดเพราะมี API ที่ออกแบบมาอย่างดี Just this concept of taking a CSS selector and using it to query the DOM in your JavaScript was something that jQuery popularized. And I think that really resonated with hardworking developers who didn't need to learn a new way to work with JavaScript. I see Vue almost being I that same sort of camp. I mentioned I was previously working with React and moved to Vue in the last few weeks, and I found that almost everything to be more intuitive in the most genuine sense, as in I can look at something unfamiliar and pretty much understand what it's doing. And if I need to do something I've not done before I can sort of guess at how it would be implemented and usually I'm right or close to it.

Drew: Is the API of Vue something that the Core Team think about very closely or has it just turned out well almost as a happy accident because of the personalities involved?

Natalia: I think, at the times of Vue 2 we had a concept. It's changed slightly but we had a concept that was called Documentation Driven Design. And it's a really great concept because if something is really hard to explain, really hard to get and really hard to write down, maybe the API is wrong there. Maybe something is not developed as it should be because non-intuitive solutions, something that is like very cryptic, and you need to put a lot of work to explain, usually is not right. The API was shaped the way that is the easiest to explain and that's why it's intuitive. If it's easy to explain, people probably will get it on themselves. That's why the older directives like v-if and v-for look very familiar for any JavaScript developer. You don't need to explain what v-if is doing because it's clear, right.

ดริว : มันเป็นอย่างนั้นจริงๆ

Natalia: It's kind of insulting and same with v-else. V-if, v-else-if, v-else and that's it. And we intuitively built v-for with syntax that looks like for loop in JavaScript and same for the biggest part of the API. I think the main intention since Vue 1.x and I think Evan also stated this in his docs was to create something that you have pleasure to work with as a tool. It's all about developer experience as well and I think this is what attracted me in Vue back in time as well. I started with Vue when it was already in beta for version 2. I didn't work that much with Vue .1. I think were not that many people familiar with Vue from the first version but I was like, “It's so nice to use”. I'm just building the same stuff and it's just been a pleasure. I don't need to think about the tool, I'm thinking about what I'm going to build. And tool is not preventing me from doing this.

Natalia: And again, I need to state this next one will be totally personal opinion, not as a Vue Core Team member. I've been working with Angular from version two to version six on a commercial project and it's a great framework. There are many different terms, it has lots of abstractions, the dependency injection is amazing, TypeScript support is absolutely incredible but I constantly had the feel I am building a wall with huge heavy bricks. And I need to just make an effort to move every single brick. I mean, the wall is amazing. Bricks are still heavy and it's just hard being a developer. And after this, working with Vue is like, “Oh, it's just like a walk in the park”.

Drew: There can be a danger with software that when it's so well designed, it makes everything feel really easy, that it sort of gets branded as a toy, as not being as powerful as the things that are really complex. Do you think that's a risk with Vue, do you think it might be regarded as less serious as some of the other reactive frameworks simply because it's better designed?

Natalia: Oh, it was. It was for this reason and for a few more reasons as well. And honestly, for a good amount of time, I think I had this question, every single conference I'd been speaking at, “Would you recommend Vue for big sized project, for enterprise project, for like serious project.” And every single time I was like, “Yes, you can use it for small project, it's easy to scaffold something, you can use it for the big size project and honestly if we speak about enterprise size project, framework is the least of the issues you need to solve.

Natalia: You can take any framework on the market, be it old one, be it Amber, be it whatever else, be it Angular One and create a good and stable architecture. You can take any of the newest framework, like latest release Vue 3, Svelte, latest React and build absolutely, incredibly awful stuff. It depends on how build it and how your team is working on this, whatever you have there, how you planned all the architectural decisions because I think, none of the framework, maybe Angular a bit, is dictating an architecture. Angular kind of does this thing rest of them are like, “You're free. Build it.” And yes, also I think the issue with Vue, not an issue, but issue in minds of people and especially in minds of company management was it's not backed by a big company.

Natalia: You have an Angular and there is Google standing behind Angular. There is React and there is Facebook supporting React. There is Vue and who is the small Chinese guy, again this is like a stigma, there is a framework of one guy, what if Evan You is hit by a bus? There was an article, “What if Evan You is hit by a bus”, I swear on dev.to. I'm like, “What are they so scared” and big companies are probably like, “What if they drop support, what if they decide, maybe even he decides, if we speak about Evan, what if he decides he does not want to work on this.” And as we can see over years it's good and stable and it's developing and it's not an issue and honestly, I think when framework is completely open sourced and built with a team of people that are not engaged, that are not subjective, that are not under one big company it's actually better for the framework.

Natalia: Last year we introduced the RFC process. It's actually just a request for comments. We have an idea, we drop it, people come there and people argue there and if we create an RFC for anything, this means that it's not decided, it's not set in stone. We just have an idea and we want to hear what community thinks. I believe it's great because Vue is shaped by developers community. This is not just loud words. No, this is not a production slogan, by the community for the community, I remember we used this but it's true. It's actually shaped by community. It's not shaped for the needs of a certain company. Even for big companies, even for companies that are sponsoring Vue. They're not shaping the framework and I believe this is great.

Drew: It's quite telling when you mentioned the list of active Core Team members is 20ish people and they're all listed on the site and next to everyone it says what thy work on in the project and also where they work professionally. And just looking down the list of where people work professionally, I mean you're at GitLab and there are other people who are just independent consultants and it's not like 18 of the 20 people work at Big Corp. Everybody is just contributing from all over the place which, as you say, is a real point of strength.

Natalia: Yeah.

Drew: That there is no one big body controlling it that could, for their own business purposes, just say, “We're changing direction, we're not going to do this anymore” and pull away all that support and leave the project in a mess. It is just lots of individuals contributing and doing their best to make something good, which I think is a really strong foundation for something as important as a framework that people are building on top of.

Drew: You know I've spent the first half of this year learning React and then changing jobs and now learning Vue. Personally it feels to me like a breath of fresh air. And I really want to commend the work that you and your colleagues are doing on that. For those who are wanting to find out more about Vue, the 3.0 release or just generally about Vue, you can go to vuejs.org currently the version three specific version as we mentioned is linked to the little banner at the top. Maybe by the time you're listening to this, the site will have changed and will just be Vue, but that's also where you find the docs and in the docs is that really good migration guide that we mentioned. I've been learning all about Vue 3.0, what have you been learning about lately, Natalia?

Natalia: I've been learning about Apollo Client version three. It's funny, because if you look at versions and I've been watching both of them, they are going completely the same way. Apollo Client was 2.6 and Vue was 2.6. And Apollo promised a release for a year and they were delaying and delaying it. It was for a long time in beta then release candidate. Same was for Vue, we announced a release and then we were delaying it again and again and moved to beta a bit late and then moved to release candidate. And they released not the same time but not with a big time difference. Apollo I think was released in Summer, beginning of Summer.

Natalia: And we use Apollo as well. I use it professionally and now I kind of try to build something with Vue 3 and Apollo 3, which is not an easy task because Apollo did a good number of changes. Again, we're adjusting them at work but, for example, removing local resolvers, is like, “What do I do now? What do I do with my local queries?” If you're curious about Apollo Client version three definitely give it a try. It's interesting to see how it's evolving.

Drew: I'm definitely going to give that a try. I've used Apollo on a couple of projects and it's really great to see that pushing ahead as well. If you as a listener would like to hear more from Natalia, you can follow her on Twitter where she is N_Tepluhina and you can find collections of her articles and videos of her public speaking events, much of which is about Vue on her website, nataliatepluhina.com

Drew: Thanks for joining us today, Natalia. Do you have any parting words for us?

Natalia: Not really, but thank you for having me, it was a lot of fun to speak there.