มาทำความรู้จักกับ Javascript Front-end framework ที่ชื่อว่า Vue.js กันเถอะ :) (Vue ออกเสียงว่า “วิว” เหมือนกับ View)

Vue.js

สวัสดีครับ! วันนี้เรามาทำความรู้จัก javascript front-end framework ตัวนึงที่มีแนวโน้มการใช้งานสูงขึ้นเรื่อยๆ และมีคนติดตามใน github มากกว่า 4 หมื่นคนแล้วในตอนนี้

เริ่มกันเลย!! Javascript front-end framework ตัวนี้จะเรียกได้ว่าเป็นลูกผสมระหว่าง Angularjs และ Reactjs ก็ว่าได้ เพราะว่าทางผู้พัฒนาได้หยิบข้อดีของทั้งสอง framework นั้นมารวมไว้ด้วยกันไม่ว่าจะเป็น Two-way binding ของ angular หรือความสามารถในการเขียนเชิง component base ที่แตกย่อยส่วนต่างๆ ออกมาเพื่อให้สามารถพัฒนาส่วนต่างๆ ได้ง่ายขึ้นซึ่งก็เหมือนกับ Reactjs นั่นเอง ( ! แต่การควบคุม state ของ component จะไม่เหมือนกับของ Reactjs ซะทีเดียวนะครับ ! )

อีกทั้งยังมีการพัฒนาเครื่องมือในการสร้าง scaffolding หรือนั่นก็คือเครื่องมือที่ช่วยสร้างโครงสร้างโปรเจคให้เราเลยนั้่นเองครับ ( ขอบอกว่าแจ่มมากๆ ) เครื่องมือตัวนี้มีชื่อว่า Vue-cli ซึ่งทางทีมผู้พัฒนาได้เลือกหยิบwebpack เข้ามาใส่ในโครงสร้างเพื่อการพัฒนาโปรเจคนะครับ หากใครยังไม่เคยใช้ก็สามารถเข้าไปศึกษากันได้เลยที่ https://webpack.js.org/

ข้อดีของ Javascript framework ตัวนี้คือทางทีมผู้พัฒนาได้ทำการสร้าง plugins มาให้เราได้ใช้งานเยอะมากครับสามารถเข้าไปดูได้ที่ Awesome-vue ครับ มีการรวบรวม resources ต่างๆ ไว้มากมาย และอีกอย่างที่ผมชอบมากที่สุดคือ document ของ javascript framework ตัวนี้ครับ จัดทำได้ดีทีเดียว เข้าใจได้ง่าย อ่านกันเพลินๆ เลยครับ ต่อไปเรามาทดลองใช้เจ้าตัว javascript framework ตัวนี้กันดีกว่าครับ

!!เตือนกันนิดนึงก่อนจะใช้ !! Vue.js จะไม่ support IE8 นะครับ :D

เริ่มติดตั้งเครื่องมือกันเลย !!

อย่างที่เกริ่นไปแล้วคือ Vue.js มี Command Line Interface ให้ใช้นั่นก็คือ Vue-cli การติดตั้งก็ไม่ยากครับ

เปิด terminal มาแล้วพิมพ์คำสั่ง

npm install -g vue-cli

ก็จะเป็นการติดตั้ง Vue Command Line Interface ให้เราได้ใช้กันแล้ว
จากนั้นทำการสร้างโปรเจคโดยใช้เจ้าตัว CLI ตัวนี้แหละครับ

โดยการพิมพ์คำสั่ง

vue init webpack my-project

เท่านี้เจ้า CLI ก็จะไปทำการดาวน์โหลด template มาให้เราได้ใช้งานแล้วครับ ง่ายนิดเดียว !!

อธิบายกันนิดนึงจากคำสั่งข้างบน template ของคำสั่งข้างบนคือ

vue init <template-name> [project-name]

หมายความว่าเจ้า CLI ตัวนี้มี template ให้เราเลือกใช้อีกนั่นเองครับ

Vue-cli ตัวนี้ไม่ได้ทำ template support แค่ webpack ให้เราได้ใช้นะครับยังมี browserify และยังสามารถดึงจาก repo ที่มีการทำ template ไว้ได้อีกด้วย

ถ้าอยากรู้ว่า Vue-cli มี template อะไรให้เราสามารถเลือกใช้ได้บ้าง ให้พิมพ์คำสั่ง

vue list

เท่านี้ก็จะมี list ของ template ที่เราสามารถเลือกมาใช้งานได้แสดงขึ้นมาครับ สามารถเลือกใช้กันได้ตามความถนัดเลยครับ

หลังจากที่เรา run คำสั่ง init ไปแล้ว ก็จะมีให้เราได้ทำการตั้งค่าต่างๆ ของโปรเจค ไม่ว่าจะเป็น project name, description, author มาถึงตรง Vue-build ก็ให้เราทำการเลือกอันแรกไปก่อนนะครับคือ Runtime + compiler ซึ่งเป็นตัวเลือกสำหรับ user ทั่วไปส่วนรายละเอียดขอข้ามตรงนี้ไปก่อนนะครับ หรือสามารถอ่านเพิ่มเติมเองได้ที่ Standalone-vs-Runtime-only-Build นอกจากนี้ทางผู้พัฒนาได้ใส่ Eslint, unit test, e2e test มาให้เราได้เลือกใช้ด้วยนะครับเรียกได้ว่าครบเซ็ทสำหรับการพัฒนากันเลยทีเดียว หลังจากเราได้ตั้งค่าโปรเจคเสร็จเรียบร้อย ก็มาถึงขั้นตอนการติดตั้ง package ต่างๆ กันแล้วครับ โดยการพิมพ์คำสั่ง

cd my-project && npm install

อธิบายคำสั่งข้างต้น คือการเข้าไปที่โฟลเดอร์ของโปรเจคที่เราสร้างขึ้นแล้วทำการ run คำสั่ง install package ทีนี้ก็รอ package ต่างๆ install เสร็จครับ จากนั้นเมื่อ package ต่างๆ ถูกติดตั้งเรียบร้อยแล้วเราสามารถ run คำสั่ง

npm run dev

เพื่อเริ่มพัฒนาโปรเจคกันได้เลยครับ ^^

ทางผู้พัฒนาได้เตรียม script ต่างๆ มาให้เราได้ใช้ตามนี้ครับ

• npm run dev : สำหรับการ development เราจะใช้คำสั่งนี้ในขั้นตอนการพัฒนา
• npm run build : สำหรับเวลาที่เราต้องการเอาเว็บขึ้น production ครับ script ตัวนี้จะทำการ build distribution folder มาให้เรา เราสามารถเอาไปใช้ได้เลยครับ
• npm run unit : สำหรับ run unit test
• npm run e2e : สำหรับ run e2e test
• npm run test : คำสั่งนี้จะทำการเรียกทั้ง unit test และ e2e test ครับ

เรียกได้ว่าครบครันสำหรับการพัฒนาโปรเจคกันเลยทีเดียวครับ

สำหรับบทความนี้เราก็มาทำความรู้จักกับ Javascript Framework ตัวนี้กันเท่านี้ก่อนนะครับ แล้วคราวหน้าเรามาเริ่มใช้ Vue.js ในการพัฒนาเว็บไซต์กันครับ หากต้องการศึกษาเพิ่มเติมสามารถเข้าไปอ่านกันได้ที่ Vue.js documentation

หวังว่าคงมีประโยชน์สำหรับเพื่อนๆ ที่กำลังสนใจ Javascript Framework ตัวนี้นะครับ ^^