ทำไมผมถึงเลือก Vue.js ทั้งที่คนอื่นๆใช้ React กัน

นี่เป็นคำถามที่ผมจะโดนถามบ่อยมากๆๆๆๆ ก็เลยเขียนบล็อกตอบง่ายกว่า

ลึกๆแล้วผมเป็น คนที่ชอบอะไรง่ายๆครับ ยิ่งกับเว็บแล้วด้วย เราอยากที่จะได้อะไรที่สามารถสร้าง idea ของเราให้ออกมาเป็นชิ้นได้ง่ายๆ

เมื่อก่อนเลยผมเคยใช้ Angular 1 มาก่อนครับ แต่ก็เจอปัญหาเรื่องช้า ก็เลยไม่ค่อยได้ใช้กับ Project จริง มากนัก พอ React ออกมา ผมก็พยายามไปใช้ React ซึ่ง ณ เวลานั้นผมรู้สึกเลยว่านี่ไม่ใช่ของง่ายๆเลย และ สุดท้ายผมได้แค่เรียนครับ แต่ก็ไม่ได้มีงานที่ขึ้น Production จริงๆ จนวันนึงที่ไปงาน Google Devloper Experts summit ก็มีคน Google คนนึงที่ชื่อ Addy Osmani มาพูว่า “Vue.js เนี่ยก็น่าสนใจนะง่ายด้วย” กลับมาบ้าน ผมก็เลยลองดูว่ามันง่ายจริงๆมั้ย ซึ่ง มันจริงครับมันง่ายมากๆ ยิ่งสำหรับคนที่เคยเขียน Angular มาก่อนมันง่ายมากๆ นอกจากง่ายแล้วมันยังมีสาเหตุหลายๆอย่างที่ทำให้ผมเลือก Vue.js มาลองดูครับว่ามีอะไรบ้าง

1. Document อ่านง่าย

ข้อนี้ต้องบอกว่าเป็นความสบายใจของผมมากๆครับ เพราะว่า Document ของ Vue.js ขึ้นชื่อว่าอ่านง่ายมากๆ มี Example ไว้ดีมากๆ และไม่ใช่แค่ Vue.js แต่ VueRouter และ Vuex ก็อ่านง่ายมากๆเหมือนกัน

2. ไม่ต้องแลก Performance กับ ความง่าย

หลายๆครั้งเวลาเราพูดถึงการเขียนที่ง่าย เราอาจจะต้องแลกมากับ ประสิทธิภาพที่ลดลง หรือ Resource ที่กินเยอะขึ้น แต่กับ Vue.js เองเราไม่ต้องแลกกับสิ่งๆนั้นครับ ผมเองลองเปรียบเทียบเรื่องความเร็วของ Vue.js กับ React แล้วก็ไม่ได้เห็นความแตกต่างอะไร และถ้าดูกันดีๆแล้ว ตัว framework size ของ Vue.js ก็ค่อนข้างเล็กถ้าเทียบกับ Framework อื่นๆ แต่นี่อาจจะไม่ใช่สาเหตุที่ผมเลือกใช้ในตอนแรกซะทีเดียวแต่มันคือเหตุผลที่ผมไม่อยากเปลี่ยน เพราะถ้ามันเร็ว และง่าย มันก็ยังไม่ค่อยมีเหตุผลที่จะต้องเปลี่ยนไป เป็นของที่เร็วและยากกว่า

3. ระบบ Template ของ Vue น่าใช้

จริงๆต้องบอกว่านี่แทบจะเป็น จุดที่ทำให้เลือกใช้และไม่ใช้เลยก็ว่าได้ เพราะถ้าใครจะชอบ Vue.js ก็จะชอบที่ Vue.js มี template แยกออกมาและเอา logic เอาไปใส่ ใน template ตรงๆ เหมือนกับ Angular 1 และหลายๆคนที่ชอบ React มากกว่า ก็เพราะว่า React ใช้ JSX ที่เป็น Pure Javascript

แต่ถ้าถามว่าทำไมผมถึงชอบแบบนี้มากกว่า ก็คงเป็นเพราะเหตุผลตามนี้ครับ

1. แยกออกชัดว่าอันไหนเป็นส่วน HTML และส่วนไหนเป็น JS และ CSS ทำให้จัดการค่อนข้างง่าย
2. Logic ใน Template ที่ใช้ค่อนข้างครอบคลุม แต่ก็ไม่ได้รกเกินไปจนน่ารำคาญ
3. Designer ที่มาจากสาย traditional HTML, CSS ทำงานง่าย เพราะตัว syntax เองก็ยังเป็น HTML, CSS ธรรมดา (พิสูจน์มาแล้วในข้อนี้)
4. ทำ scoped CSS ที่ให้ style มีผลเฉพาะใน component ได้ง่าย ( เติมแค่คำว่า scoped เข้าไปจบเลย)

4. มีท่าง่ายๆไปจนถึงท่ายากๆ

Vue.js มีข้อดีอีกอันนึงคือ ตัว framework เองมีทั้งท่าเขียนแบบง่ายๆ ไปจนถึงท่าเขียนแบบยากๆ ให้เลือกใช้ ในบางครั้งแราไม่ได้พัฒนาระบบขนาดใหญ่ การเขียน handle เยอะๆ ตลอดเวลาก็เป็นเรื่อง ที่ วุ่นวาย ตัว vue.js เองก็เลยเผื่อทางไว้ให้ว่า ถ้าไม่ได้จะทำยุ่งยากให้ เลือกวิธี A แต่ถ้าต้องการใช้งานแบบยากๆก็ไปใน B แทน ในมุมนึงก็ทำให้เราไม่ต้องเปลือง Effort ในการทำงานเหมือนกัน

5. DevTools ของ Vue.js ดีมากๆ

ตัว Devtools ของ Vue.js เป็นจุดที่คนชมเยอะมากๆ เพราะง่าย สามารถดูได้ทั้งหมดว่าตอนนี้ Component มี Data เป็นยังไง และสั่งเพิ่มลด Data ได้จาก Devtools เลย และสามารถทำงานทั้งหมดได้บน tools เดียวไม่ต้องลงหลายๆ tools แยก

6. Vue.js ใช้ของที่คนอื่นใช้เหมือนกันไม่จำเป็นต้องเรียนรู้ใหม่หมด

หลายๆคนกลัวที่จะมาใช้ Vue.js เพราะคิดว่าถ้าเรียน React มา หรือ ใช้ Framework อื่นๆมาต้องเปลี่ยน Tooling ทั้งหมดเลย อันนี้ต้องบอกว่าไม่จริงครับ เพราะ

• Vue.js ก็ใช้ Webpack, Babel เหมือนกับที่ทุกคนใช้
• Vue.js ใช้ Storybook test ได้ และก็ใช้ Jest กับ Mocha ทำ test เหมือนกับคนอื่นๆ
• Vue.js ก็ใช้ Lib Javascript ที่มีอยู่แล้วได้แทบทุกตัว โดยไม่ต้องรอให้เค้า Support Vue.js
• Vue.js ก็ใช้ npm ปกติไม่ได้มี tools ของตัวเองแยกออกมา
• Vue.js ใช้วิธีการคิดแบบ Component เหมือนกับ Framework อื่น จะ Switch มาจากอันอื่นก็ไม่ยาก

7. Ecosystem ก็ครบไม่มีอะไรที่คนอื่นไม่มี

ตอนนี้ Vue.js มี Ecosystem ค่อนข้างครบ ไม่มี อะไรที่ไม่มีอีกต่อไปแล้ว มีคนทำ Component ออกมาเยอะมากๆ จนไม่ค่อยมีความรู้สึกว่า Vue.js ด้อยหรือตามคนอื่นเท่าไหร่ เพราะก็มีของพร้อมใช้งานเหมือนกัน ณ วันที่ผมเขียนบทความนี้ Vue.js มี star ใน Github อยู่ 96,xxx ซึ่งน้อยกว่า React อยู่แค่ 1000 นิดๆ นี่คงเป็นตัวเลขที่พอบอกได้ว่า Ecosystem ของ Vue.js เองก็ไม่ได้เล็กอย่างที่ใครๆกลัว ถ้าอยากรู้ว่า Vue.js มีอะไรให้เล่นบ้าง ลองเข้าไปดูได้ที่ https://github.com/vuejs/awesome-vue ครับ นอกจากจะมีครบแล้ว ด้วยความที่ ทุกคนต้องการให้ Vue.js ออกมาง่าย ทั้ง Ecosystem ของ Vue.js เลยใช้ง่ายกันไปหมดเลย

8. เอาไปใช้ผสมกับคนอื่นได้เลย

ตัว Vue.js เอง ออกแบบมาใช้เราสามารถเอา component ที่สร้างไปใช้กับ Framework อื่นหรือ HTML JS ธรรมดาๆได้เลยโดยไม่ต้องแก้ไขอะไรเลย นั้นใครที่ยังไม่พร้อมจะรื้อทั้งหมดก็สามารถเอาเฉพาะบางส่วนไปใช้ใน Project ของตัวเองได้ ครั้งนึงผมเคยได้คุยกับคนที่ทำงานอยู่ที่ GitLab ซึ่งที่นี่เค้าใช้ Vue.js เป็นหลัก สาเหตุที่เค้าใช้ Vue.js เลยคือตอนที่เค้าเปลี่ยนเว็บจาก Jquery เค้าไม่สามารถจะรื้อทั้งหมดได้ในทีเดียว Gitlab เลยหา solution ที่ดีที่สุดในตอนนั้นก็คือ Vue.js เพราะโดย concept แล้วเราสามารถแยกบาง component มาทำเป็น Vue.js ได้ และที่เหลือก็ใช้ของเก่าไปก่อนได้และค่อยๆทยอยเปลี่ยนมา และหลังจาก GitLab เปลี่ยนมาใช้ Vue.js แล้ว เค้าก็รู้สึกว่ามันก็โอเคดีนะ สุดท้ายเค้าก็เลือกที่จะไม่เปลี่ยนและอยู่กับ Vue.js ต่อ

สรุป

ถึงแม้เหตุผลที่ผมเลือก Vue.js เพราะความง่าย แต่จริงๆแล้วที่ผมไม่อยากเปลี่ยนไปใช้อย่างอื่นเพราะว่า ผมไม่ต้องเสียอะไรเลย Vue.js มีทุกอย่างที่คนทำเว็บอยากได้อยู่แล้ว ถ้าใครกำลังคิดว่าอยากเปลี่ยนจากการทำเว็บแบบเก่าๆมาใช้ framework ใหม่ๆ แต่ติดว่ามันยากไปเลยไม่อยากเรียน มาลอง Vue.js กันครับ ปัญหานั้นจะหมดไป

พื้นที่โฆษณา

ใครอยากเรียน Vue.js ตอนนี้ผมกำลังมี course กับ Skooldio บอกเลยว่าจัดเต็มจัดหนัก สอนเทคนิคทั้งหมดที่เคยใช้มาแบบไม่มีกั๊ก ลงทะเบียนได้ที่นี่เลยครับ https://www.skooldio.com/courses/vue-js-workshop-2