รีวิวการเขียน Vue 3 จากคนที่ไม่เคยเขียน JS framework มาก่อน

โดยปกติแล้วผมจะใช้งาน jinja2 ซึ่งเป็น template engine ร่วมกับ vanilla javascript ในการพัฒนา frontend พอมาเจอ Vue แล้วพอรู้สึกว่ามันง่าย และมีความคล้ายกัน ซึ่งแตกต่างจาก React ที่ผมไม่ค่อยเป็นแฟน JSX สักเท่าไหร่ หรืออาจจะเป็นเพราะผมยังเปิดใจให้มันไม่มากพอก็ได้ 😅

อีกอย่างที่ทำให้ชอบ Vue มากๆ ก็คือ doc ที่อ่านค่อนข้างง่าย เข้าใจได้ง่าย โดยเฉพาะ WIP document ตัวใหมที่ทำออกมาได้ดีทำให้เห็นภาพของ Composition API กับ Options API มากขึ้น

Template syntax

Vue ใช้งาน HTML CSS และ JS มาตรฐานได้เลย ทำให้แทบไม่ต้องเรียนรู้อะไรใหม่วิธีการ render data ก็ทำเหมือนกับใน jinja2 คือใช้ bracket 2 อันครอบ variable ที่เราต้องการจะ render

การทำ conditional rendering และ loop ทำได้โดยใช้ directive เช่น v-if v-else v-if-else สำหรับ condition และ v-for สำหรับ loop เพื่อ render ข้อมูลประเภท object และ array การ bind data แค่ใช้ v-bind ตามด้วย attribute ที่ต้องการ bind โดยรวม template syntax ของ Vue ค่อนข้างเข้าใจง่ายเป็นแค่ HTML ธรรมดาๆ

Progressive Framework

ความน่าสนใจของ Vue อีกอย่างก็คือการที่เราสามารถใช้ร่วมกับ static HTML ธรรมดาได้ ไม่จำเป็นต้องใช้ร่วมกับ build tools ต่างๆ ทำให้มีความยืดหยุ่นในการเอาไปใส่ในงานที่อาจจะเคย implement ไปแล้วแต่ต้องการเพิ่ม reactive บางอย่างในหน้าเว็บบางหน้า เอาไปใช้แทน jquery ได้แบบสบายๆ

Community & Ecosystem

โดยรวม Vue มี community ที่ใหญ่พอสมควร อาจจะไม่เท่ากับของ React แต่ก็ถือว่าง่ายในการ google ข้อมูลต่างๆ วิธีการแก้ไขปัญหา แต่พวกตัวอย่าง tutorial อาจจะไม่ได้เยอะเท่า React หรือคนสร้าง content ใน youtube อาจจะไม่ variaty เท่าฝั่ง React developer แต่จากเท่าที่ไปอ่านตาม reddit คนส่วนใหญ่บอกว่างานฝั่ง React จะเยอะมากกว่างานของ Vue ทำให้คนเลือกที่จะไปลงทุนกับ React มากกว่า แต่สิ่งสำคัญที่ทำให้ community Vue แข็งแรงพอก็คือคน Vue ที่ผลิต lib ที่น่าสนใจและเป็นประโยชน์ให้เราเอาไปใช้ได้ฟรีๆ ค่อนข้างเยอะ แค่ Anthony Fu คนเดียวก็เยอะมากพอละ

Ecosystem ของ Vue ค่อนข้างครบเครื่องอยากทำ SSG มี Gridsome อยากทำ SSR มี NUXT อยากเขียน blog มี vitepress อยากหา component ก็เข้าไปดูที่ awesome-vue ได้ อยากใช้ state management ก็มี pinia แต่จริงๆ โดยรวมแล้ว composition API ก็ครอบคลุม use case พื้นฐานอยู่แล้ว

DevTools

เป็นอีกหนึ่งจุดแข็งของ Vue ที่ React ไม่มีก็คือ DevTools ที่ดูได้ทุกอย่าง component state data แล้วก็กดเพิ่ม data ได้ แก้ไข data ผ่าน GUI DevTools ได้ทันที ทำให้เรา debug code ของเราได้ง่ายขึ้น

Composition API & Options API

ผมค่อนข้างชอบ composition API ที่ทำให้ code มันอ่านเข้าใจง่ายขึ้นเป็นสัดส่วนมากขึ้น และทำให้สามารถ reuse logic ต่างๆ ได้ เหมือนกับที่ React hooks ทำได้ นอกจากนี้ถ้าเกิดอยากได้ composable อะไรก็สามารถลองหาดูได้ใน Vueuse ที่เป็นแหล่งรวม composable function ต่างๆ เอาไว้ ในส่วนของบาง component ที่ไม่ได้ซับซ้อนมากเราก็ใช้ options API แบบเดิมๆ ที่คุ้นเคยได้ อย่างเดียวที่น่าเสียดายคือเราไม่สามารถใช้ composition API ในกรณีที่เราไม่ได้ใช้ build tools ช่วยเหลือ

สรุป

โดยรวม Vue เป็นจุดเริ่มต้นที่ดีในการทำความเข้าใจ JS Framework เพราะ concept ส่วนใหญ่ใน Vue เอาไปใช้กับ React หรือ Angular ได้เช่นกัน การลองหัดเล่น Vue ก็ค่อนข้างประทับใจมากกว่าตอนลองเขียน React เพราะว่าตัว document ของ Vue มันอ่านง่ายมากๆ