มาหาพี่ Evan You ที่งาน CityJS Singapore 2023

พี่ Evan ตัวจริงหล่อมาก

เมื่อปีที่แล้วเราได้มีโอกาสไปงาน CityJS Singapore 2023 กับ ODDS เป็นช่วงเวลาที่สนุกมาก นอกจากการได้เจอชาว JavaScript มากมายในงานนี้แล้ว การได้เจอพี่ Evan You ตัวจริงเป็นความฝันที่ยิ่งใหญ่มากสำหรับชาว Vue อย่างเรา ซึ่งตัวจริงแกค่อนข้าง nice และเท่มากด้วย

วันนี้เราจะมาเล่าสิ่งที่ได้เรียนรู้จาก session ของพี่ Evan You นั่นก็คือ Reinventing vue: Lessons Learned ซึ่งเป็น session ที่สนุกมาก ด้วยความที่ session นี้มันตั้งแต่ปีที่แล้ว และความเคลื่อนไวของ Vue ตอนนี้ไปไกลมาก เราจะเล่าพร้อมแทรกกับสิ่งที่ update ในปัจจุบันนี้เท่าที่เรารู้ควบคู่ไปด้วย

Vue.js นั้นนับตั้งแต่ first commit จนมาถึงวันนี้ก็ประมาณ 11 ปี เรียกได้ว่ามีการพัฒนาที่ยาวนานมาก สิ่งที่เห็นได้จาก timeline คือ Vue 3 ใช้เวลา 4 ปี ในการพัฒนามาเป็น stable version หรือ version ที่เราได้ใช้อยู่ ณ ตอนนี้ ซึ่งค่อนข้างยาวนาน แต่สิ่งที่เกิดขึ้นคือมีการเลื่อนกำหนดการหลายครั้ง

หนึ่งในปัญหาของ Vue 2 คือ ไม่ได้รองรับ TypeScript โดยสมบูรณ์ พี่ Evan You เลยอยากพัฒนา Vue 3 ขึ้นมาโดยมีแผนที่จะเขียน Vue ใหม่โดยใช้ TypeScript ทั้งหมด แน่นอนว่านี่ไม่ใช่งานที่ง่ายเลย

ซึ่งหนทางมันไม่ได้โรยด้วยกลีบกุหลาบ ทุกอย่างไม่ได้เป็นแบบที่หวังเพราะมัน bug เยอะมาก และหลายคนยังคงใช้ Vue 2 อยู่ด้วยเหตุผล migration ที่ยาก ถึงขั้นลำบาก, Legacy Browser ไม่รองรับ และ dependency บางตัวไม่รองรับ Vue 3 ซึ่งบางตัวที่ว่ามันรวมถึง Vuetify

Vuetify ที่เป็น UI Library ที่โด่งดังมากสำหรับชาว Vue 2 แต่บังเอิญว่า ณ เวลานั้น Vuetify ยังไม่รองรับ Vue 3 และจากที่เราได้คุยกับคนที่ใช้ Vue หลายคนก็บอกเสียงเดียวกันว่า ที่เขาย้ายไป Vue 3 เพราะโปรเจคเขายังต้องใช้ Vuetify ซึ่งเอาเข้าจริงก็ยังมีหลาย library ที่ยังไม่รองรับ Vue 3

ด้วยเหตุการณ์เหล่านี้ที่พี่ Evan You และเหล่า core team ได้ฝ่าฟันกันมาก็ได้รวบรวมบทเรียนที่น่าสนใจมาเล่าให้กับพวกเราฟังกันด้วย

Mistake #1: Breaking Changes ที่มากเกินไป

Breaking Changes คือสิ่งที่ทำให้หลายคนถอดใจในการ migration โดยเฉพาะตอนที่เราเขียนข่าวเกี่ยวกับ Vue 3 แทบทุกครั้งจะมี Breaking Changes มาเสมอ

สิ่งที่ได้เรียนรู้จากเหตุการณ์นี้คือ

• ไม่แก้ทุกอย่างใน release เดียว
• รักษาให้ code ทุกอย่างทำงานได้เหมือนเดิม หรือยังคง default
• ใช้การประกาศ deprecate → opt-in → remove cycle
• พยายามประกาศเกี่ยวกับ patch note ในแต่ละ release

Mistake #2: ประเมินความเสียหาย Libraries ใน Ecosystem ต่ำเกินไป

ย้อนกลับไปในเหตุการณ์ Vuetify ก็คือหนึ่งในตัวอย่างของ library ที่ตาม Vue 3 ไม่ทัน และด้วย breaking changes ที่เยอะ แม้ว่าจะ upgrade มาเป็น Vue 3 แล้วก็ยังคงต้องแก้ตามกัน

สิ่งที่ได้เรียนรู้จากเหตุการณ์นี้คือ

• ตระหนักถึง breaking changes ที่จะเกิดต่อ library เพราะถ้า library ไม่สามารถ upgrade ได้ users ก็ใช้งานต่อไม่ได้เช่นกัน
• พยายามเข้าใจว่า library ใช้ Internal API อะไรของเราบ้าง ก่อนที่จะทำการแก้ไขหรือพัฒนา

Mistake #3: ไม่ Release ทุกอย่างไปด้วยกัน

ตอนช่วงที่ release Vue 3 ออกมาในแต่ละ version นั้นแม้ในส่วนของ core จะใช้งานได้แล้ว แต่มี feature หลายอย่างที่ตกขบวนมาไม่ทัน เช่น Composition API, Router, Devtools, script setup และที่สำคัญที่เป็นหัวใจหลักของ Vue เลยคือ Docs ยังไม่เสร็จ

สิ่งที่ได้เรียนรู้จากเหตุการณ์นี้คือ

• First impression ของ major release สำคัญมาก
• release ช้าหน่อย ดีกว่า release ของที่ไม่เสร็จ
• หาวิธีในการรับ feeedback และทำงานร่วมกับผู้พัฒนา library ก่อนจะทำการ release version ใหม่

แต่นอกจากความผิดพลาด ก็มีสิ่งที่พี่ Evan You และ core team มาถูกทางเช่นกันนะ

What Went Right #1: การรองรับ TypeScript

ในปัจจุบันนี้ไม่ต้องลงรายละเอียดการเยอะว่า TypeScript นั้นช่วยให้ชีวิต Developer นั้นดีมากแค่ไหน ใครที่อ่านมาถึงตอนนี้แล้วยังไม่ได้ใช้ ก็ใช้เถอะครับ

What Went Right #2: การรองรับ Composition

ณ ตอนนี้ Composition API และ script setup เป็น default practice ของ Vue 3 ด้วยความที่เขียนง่ายดูเป็นธรรมชาติ และ reuse ง่าย เลยเป็นจุดขายหลักที่มาแทน Option API และยังมี VueUse เป็น community ที่รวบรวม Composition API ไว้เยอะมาก

เหมือนกับข้อด้านบน ใครที่ยังไม่ได้ใช้ Composition API ก็ใช้เถอะครับ เขียนสนุกมาก

What Went Right #3: ลงทุนกับ Developer Experience

Vue นั้นต้องพูดว่าตั้งแต่เริ่มต้น จนถึงตอนพัฒนา Vue 3 และจนถึง ณ เวลานี้ ก็ยังคงพัฒนาในเรื่อง DX ให้ชาว developer อย่างเรามีชีวิตการทำงานที่สนุกและง่ายขึ้น ไม่ว่าจะเป็น Docs ที่อ่านเข้าใจง่าย, การปรับปรุงของ Volar ที่รองรับ TypeScript, Vite ผู้เป็น build tool หนึ่งเดียวที่ทรงพลัง ใช้งานง่าย ใช้การแทบทุก frameworks

Everything is not Next.js is on Vite.
— Evan You

ทุกคนก็ปรบมือทั้งฮอลล์โดยไม่ได้นัดหมาย

What Went Right #4: Vue 3 ยังคงดีขึ้น และยังคงเติบโตในทางที่ดี

ด้วยยอด download ที่มากขึ้นกว่า 2 เท่า หลังจากที่ Vue 3 ได้ release stable version และความยอดนิยมที่พูดถึงการในปัจจุบัน ก็พิสูจน์ได้แล้วว่าชาว developer ทั่วโลกยอมรับ Vue 3 กันมากแค่ไหน

ซึ่ง ณ เวลาที่เราคุยกันอยู่นี้มีการพูดถึง Vue 4 กันบ้างแล้วนะ

Looking Forward

• ความเสถียรคือหัวใจหลัก
• ไม่ทำลายการเขียน Vue 2 และ Vue 3
• Vapor mode: แนวทางการทำ Compilation แบบ Solid.js ซึ่ง ณ​ ปัจจุบันมี Github Repository ให้ได้ชมกันแล้ว

GitHub - vuejs/core-vapor: Vue Vapor is a variant of Vue that offers rendering without the Virtual…

• พัฒนา Reactivity System และ Parser Optimization ซึ่งในส่วนนี้มีการพัฒนาขึ้นใน Vue v3.4 ที่เราได้ใช้ในปัจจุบัน สามารถอ่านรายละเอียดเพิ่มได้จากข่าวที่เราเคยเขียนครับ

https://www.facebook.com/photo/?fbid=819124656684625&set=a.546343947296032

• Rolldown: bundler ตัวใหม่ที่ได้รับแรงบันดาลใจจาก Rollup แต่เขียนด้วย Rust ซึ่งปัจจุบันมี Github Repo และ Docs ออกมาให้เราได้ชมกันแล้วครับ

Rolldown | Rust bundler for JavaScript

ด้วยความที่พี่ Evan You และ Vue core team พัฒนาเครื่องมือทุกอย่างเพื่อ Developer Experience เพื่อชีวิตการทำงานของ Developer ที่ดีขึ้น ควบคู่กับ Performance ที่หลายคนยอมรับ เลยไม่แปลกใจที่ทำไม Developer ทั้งโลกถึงรักพี่ Evan You คุ้มค่ามากในการเดินทางมาเจอท่านศาสดาตัวจริง และแน่นอนว่าปี 2024 นี้เราไปหาพี่เขาอีกแน่นอน

จนถึงวันนี้ ก็ยังไม่ได้แกะออกมาประกอบ