[Vue2#1] รู้จัก Vue.js และคุณสมบัติใหม่ใน Vue 2

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

เมื่อ Vue คือ View

Vue.js เป็นไลบรารี่ตัวหนึ่งที่ใช้จัดการกับ view ตามการออกเสียงของมันเลยครับ Vue.js นั้นในสายตาชาวโลกคือการผสมผสานกันระหว่าง Angular และ React เพื่อสร้าง Reactive Component หรือคอมโพแนนท์ที่ชาญฉลาดอัพเดทตัวเองได้ แต่ในสายตาของผู้รัก Laravel แล้วนั้น Vue เป็นดั่งศาสดาองค์ที่สองกันเลยทีเดียว

ในขณะที่เขียนบทความ Vue.js เวอร์ชัน 2 มีสถานะเป็นเบต้าที่มาพร้อมกับสารพัดความสามารถที่เจ้าของโปรเจคอวยมากจนผมนั้นหมั่นไส้ เราไปดูกันดีกว่าว่าทำไม Vue จึงเป็นอีกหนึ่งไลบรารี่ฝั่ง front-end ที่น่าสนใจ

ทำไมจึงควรใช้ Vue.js

มาดูกันซิว่าตั้งแต่ Vue 1 จนมาถึง Vue 2 นี้มีสิ่งใดที่ทำให้ Vue น่าจับต้องบ้าง

ความเร็วและขนาดไฟล์

Vue 2 นั้นมี Virtual DOM แล้วขอรับ จากที่ Vue 1 นั้นจัดการกับ DOM โดยตรง (แถมยังแอบจิกกัดว่าวิธีการของตัวเองนั้นดีกว่าการใช้ Virtual DOM ของ React) แต่เมื่อมาถึง Vue 2 กลับกลืนน้ำลายตัวเองซะงั้น ตอนนี้ Vue 2 มี Virtual DOM แล้วครับโดยใช้ของ Snabbdom ที่การันตีว่าเร็วขึ้นและลดการใช้หน่วยความจำลง 2 - 4 เท่าตัว

นอกจากเรื่องของ Virtual DOM แล้ว Vue 2 ยังมีขนาดไฟล์หลังทำ minify + gzip แล้วรวม 12kb เท่านั้น! ในเอกสารของ Vue 2 ก็ยังจิกกัดเฟรมเวิร์คอื่นอย่าง React เช่นเคยว่า React 15 ยังลดขนาดไฟล์ได้แค่เหลือ 44kb เอง (React ยังทำไม่ได้ Angular2 อย่าหวัง, นี่ Vue 2 มันทีมพี่ลูกเกดชัดๆ)

การจัดการประสิทธิภาพที่ดีกว่า

สมัย Vue 1 จิกกัด React เรื่อง Virtual DOM ไว้เยอะ พอตัวเองนำ Virtual DOM มาใช้เองอย่างเสียไม่ได้จึงต้องเริ่มแผนข่มทับต่ออีกระลอก

Vue มีการทำงานแบบ reactive แถมตรัสรู้ได้เองด้วยว่าจุดไหนของ template ควร render ใหม่หรือไม่ต้องทำอะไร ในเอกสารกล่าวว่ากระบวนการนี้ไม่จำเป็นต้องใช้ shouldComponentUpdate หรือ immutable เหมือน React แม้แต่น้อย (เห็นไหม Vue นี่มันขาจิกกัดชาวบ้านจริงๆ)

Component System

Vue มีความเหมือน React ตรงที่มีความเป็นคอมโพแนนท์ เราสามารถห่อหุ้มโค๊ดของ UI Component ที่สัมพันธ์กันไว้ใต้คอมโพแนนท์เดียวกันได้เช่นเดียวกับ React

1<!-- article.vue -->
2<style scoped>
3  // ใส่บรรดา CSS ที่เกี่ยวข้องกับคอมโพแนนท์ Article
4  // scoped เป็นการบอกว่าจะทำ Local CSS เหมือนที่ css-loader ของ Webpack + React ทำได้
5</style>
6
7<template>
8  <!-- ก้อน HTML + สารพัด syntax ของ Vue มาจมกันอยู่ในนี้ -->
9  <!-- เพื่อสร้าง UI ให้กับคอมโพแนนท์ Article ของเรา -->
10</template>
11
12<script>
13  // จัดการพฤติกรรมต่างๆของคอมโพแนนท์ได้เลยในนี้
14  export default {
15    props: {
16      // ...
17    },
18    methods: {
19      // ...
20    }
21  }
22</script>

จึงสรุปได้ว่าไฟล์ .vue ของเราในที่นี้เป็นตัวแทนของคอมโพแนนท์หนึ่งตัวที่รวมทั้ง พฤติกรรม (ภายใต้ script), การแสดงผล (ภายใต้ template) และการจัดรูปแบบ (ภายใต้ style)

สนับสนุนการใช้งานกับ JSX และ HyperScript

Vue 1 นั้นดูยังไงก็คล้าย Angular มากกว่า React เพราะ template ของ Vue นั้นเป็น HTML-centric เหมือน Angular กล่าวคือ Vue เลือกใช้หนทางในการเพิ่มไวยากรณ์ใหม่ลงไปใน template เพื่อจัดการการแสดงผลหรือเหตุการณ์ต่างๆ

1<div id="app">
2  <p>{{ message }}</p>
3  <button v-on:click="reverseMessage">Reverse Message</button>
4</div>

จากตัวอย่างข้างต้นจะพบว่ามือใหม่ต้องใช้ความพยายามพอสมควรเพื่อจะเข้าใจว่า {{ message }} คืออะไร v-on:click คืออะไร on-click เฉยๆก็ไม่ได้หรอ ทำไมต้องมี v ด้วย หรือกลัวชาวบ้านเขาไม่รู้ว่ากำลังใช้ Vue อยู่?

Vue 2 อนุญาตให้เราใช้ JSX ได้ครับ JSX ของ React นั้นง่ายเพราะคุณแทบไม่ต้องรู้อะไรนอกจาก JavaScript ลองเปรียบเทียบปุ่มกดครับ ใน JSX เราเพียงเขียนแค่ตามนี้ก็ใช้ได้แล้ว

1<button onClick="{reverseMessage}">Reverse Message</button>

Vue.js ฉันเลือกนาย

ความสัมพันธ์ของ Vue และ Laravel เริ่มจะเป็นซาโตชิกับปิกาจูแล้วครับ เมื่อทางทีม Laravel จัดการยัด Vue ให้เป็น Default JavaScript Framework ของ Laravel หลังจากที่ซุ่มเป็นสปอนเซอร์มานานแสนนาน

Streaming Server-side Rendering

Vue 1 นั้นก็เหมือนเฟรมเวิร์กตระกูลเลขหนึ่งทั้งหลาย (ยกเว้นเจ้าแห่งสามโลก, React) เช่น Angular1, Ember1 ที่ไม่สามารถทำ Server Rendering ได้ การกลับมาของ Vue 2 ครั้งนี้ก็เหมือนเฟรมเวิร์กตัวอื่นเช่นกันคือทำ Server Rendering ได้แล้ว แต่ช้าก่อน แค่ Server Rendering หนะกระจอกไป! ต้องเจอ Streaming Server-side Rendering ของพวกข้า (Vue ไม่ได้กล่าวไว้ ผมดราม่าเองล้วนๆ - -)

กระบวนการทำงานปกติของ Server Rendering เช่นใน React คือการสร้างผลลัพธ์เป็นก้อน HTML จาก JavaScript ให้เรียบร้อยซะก่อนจากนั้นจึงส่งกลับมาให้ฝั่งเบราเซอร์ การทำเช่นนี้จะทำให้ Google Bot มีความสุขมากกว่าที่ได้เห็นเนื้อหาทันทีเมื่อต้องการข้อมูล แทนที่จะเป็น HTML ที่ยังใช้งานไม่ได้ ต้องส่ง AJAX ไปโหลดเนื้อหามาใส่ก่อน นอกจากนี้ Server Rendering ยังช่วยให้เพจของเราโหลดได้ทันที ไม่ต้องรอให้ JavaScript ทำงานอีกด้วย

Server Rendering มีข้อเสียอย่างหนึ่งคือมันต้องเตรียม HTML ให้พร้อมก่อนจึงจะคืนค่ากลับได้ การทำงานของมันจึงเป็นแบบประสานจังหวะหรือ synchronous ถ้าการเตรียม HTML คือการส่ง AJAX ไปโหลดข้อมูลมาใส่ เมื่อเซิร์ฟเวอร์ปลายทางช้า ข้อมูลมาช้า การสร้าง HTML ก็ช้า อีกทั้งถ้าเรามีปริมาณคอมโพแนนท์เยอะมากยิ่งทำให้การสร้าง HTML จากคอมโพแนนท์เหล่านั้นช้าตามไปด้วย

Vue 2 มาพร้อมกับความสามารถในการทำ Streaming Server-side Rendering แทนที่เราจะสร้าง HTML ให้เสร็จก่อนค่อยส่งให้เบราเซอร์ เราค่อยๆทยอยส่งดีกว่าไหม? ถ้าส่วน head ของ HTML พร้อมแล้วก็ส่งไปก่อน ส่วน head อาจมีไฟล์ JavaScript หรือ StyleSheet ฝังอยู่จะได้ให้เว็บเราเซอร์ไปโหลดไฟล์เหล่านี้มาทำงานไปพรางๆก่อน แทนที่จะรอเวลาอันยาวนานกว่าจะได้ HTML ทั้งก้อน ต่อไปนี้คือโปรแกรมตัวอย่างของการใช้งาน Streaming Server-side Rendering ของ Vue 2 ซึ่งทำผ่าน vue-server-renderer

1const renderer = require('vue-server-renderer').createRenderer()
2
3app.get('/', (req, res) => {
4  const vm = new App({ url: req.url })
5  const stream = renderer.renderToStream(vm)
6
7  res.write(`<!DOCTYPE html><html><head><title>...</title></head><body>`)
8
9  stream.on('data', (chunk) => {
10    res.write(chunk)
11  })
12
13  stream.on('end', () => {
14    res.end('</body></html>')
15  })
16})

สารพัดเครื่องมือจากตระกูล React

Vue นั้นประพฤติตนดั่ง React นั่นคือสังคม React มีเครื่องมืออะไรพี่แกก็จะมีเครื่องมือแบบนั้นเช่นกัน ใครที่ย้ายจาก React ไปใช้ Vue จึงประหนึ่งเหมือนอยู่บ้านตนเอง ลองมาดูกันครับว่า Vue มีเครื่องมืออะไรให้ใช้งานเพื่อสร้างแอพพลิเคชันที่ยิ่งใหญ่และใหญ่ยิ่งบ้าง

• vue-cli Ember รึ Angular รึ เรา Vue ก็มีเหมือนกันตัวช่วยสร้างโปรเจคไง
• vue-router อย่าแปลกใจมันคือ react-router ผู้ช่วยจัดการ history และการเปลี่ยนไปมาระหว่างเพจนั่นเอง
• vuex ข้าคือ Flux ตามมาหลอกเจ้าถึง Vue แล้ว~
• vue-devtools มันคือ react-devtools นั่นแลฯ
• vue-loader มันคือสิ่งที่ทำให้ Vue ใช้งานร่วมกับ Webpack ได้ครับ
• vue-resource HTTP client สำหรับ Vue
• อื่นๆ

ข้อเสียของการใช้ Vue

Vue ไม่ใช่พระเจ้าครับย่อมมีข้อเสียเช่นเดียวกัน ไปดูกันซิว่าข้อเสียแต่ละข้อนั้นเรารับได้หรือไม่ได้ครับ

คำถาม-คำตอบที่น้อย

ขณะที่เขียนบทความมีคำถามเกี่ยวกับ Vue เพียงแค่ 1,500 กว่าคำถามบน Stack Overflow แค่นั้นเอง คำถามคำตอบที่น้อยย่อมแสดงถึงความช่วยเหลือที่เราจะได้รับเมื่อเกิดปัญหาอาจน้อยตามครับ

การพัฒนาบนแพลตฟอร์มมือถือ

Vue ไม่มี Mobile Framework ที่มองว่า Vue เป็นพลเมืองชั้นหนึ่งเหมือน Angular2/React ใน React เรามี React Native สำหรับ Angular2 มี NativeScript แม้จะเขียนด้วย JavaScript ธรรมดาได้ แต่ Angular2 ก็ยังเป็นชาวเมืองหมายเลขหนึ่งอยู่ดี ส่วน Vue ใช้วิธีพึ่งใบบุญชาวบ้านเอาครับ เช่นใช้ Weex ที่เบื้องหลังก็ใช้ React Native อีกทีนึง

ชุมชนนักพัฒนา

แม้ยอด start ใน Github จะสูงกว่า Ember คืออยู่ที่ราวๆ 23,000 ในขณะที่เขียนบทความ แต่ขนาดของชุมชนนักพัฒนาก็ยังไม่ใหญ่เท่า Angular หรือ React ส่วนใหญ่เอกสารหรือเนื้อหา ปัญหาถามตอบของ Vue จะได้รับการผลักดันจากชุมชนนักพัฒนา Laravel เองซะมากกว่า

ความง่ายในการใช้งาน

Vue แม้จะมองว่าง่าย แต่ถ้ามองดู API อย่างละเอียดๆแล้วจะพบว่าซับซ้อนกว่า React ครับ เช่น vm.$watch จะพิมพ์ค่าออกมาดูก็ต้อง vm.$log กับอีกสารพัด $ ทั้งหลาย (เริ่มชายตามอง Angular1 อีกครั้ง)

โชว์พาว

อันนี้เป็นความเห็นส่วนตัวล้วนๆครับ ทุกครั้งที่ผมอ่านเอกสารของ Vue มันจะรู้สึกแปลกๆยังไงชอบกลไม่ทราบ การที่เราสร้างเฟรมเวิร์กได้เจ๋ง (หรือไม่นั้น) ก็ไม่จำเป็นต้องพยายามเบ่งหรือข่มทับเฟรมเวิร์กอื่นครับ สิ่งที่ Vue ทำเป็นปกติคือการเทียบตนเองกับเฟรมเวิร์กอื่นซึ่งในบางมุมสำหรับผมแล้วมันเหมือนการจิกกัดซะมากกว่า หมั่นไส้จนต้องขีดเส้นใต้หัวข้อนี้ไว้สามเส้นฮะ

นั่นหละครับคือการแนะนำ Vue 2 อย่างคร่าวๆ ในบทความหน้าเราจะเริ่มแนะนำการใช้ vue-cli เพื่อสร้างโปรเจคกันแล้วครับ โปรดติดตามตอนต่อไป เกาะขอบจอรอรีเฟรชเลยฮะ