Top 7 เหตุผลที่จะลอง Vue.js ในปี2016

Kitisak Sukma
IT@KMUTNB
Published in
3 min readFeb 18, 2017

เป็นบทความที่แปลมาจาก

แปลผิดพลาดยังไงก็ขออภัยด้วยนะครับ :)

ในสัปดาห์ที่ผ่านมา ผมได้มีโอกาสทำโปรเจคแรกโดยใช้ framework ที่ Evan You สร้างขึ้น นั่นคือ Vue.js มันเป็น reactive component ซึงเป็นรากฐานของ MVVM เป็นJavaScript library สำหรับ modern web interfaces Vue.js เป็น library ขนาดเล็ก ซึ่งช่วยลดความยากในการสร้างการเชื่อมต่อแบบการโต้ตอบกับผู้ใช้ โดยไม่ต้องกังวลเกี่ยวกับการจัดการ DOM และ event listening

# 1 ง่ายในการเริ่มต้น

จริงๆแล้วสิ่งที่ดึงดูดผมไปหา Vue.js คือ วิธีการเริ่มต้นที่ง่าย เพียงแค่วาง Vue.js library ก่อนที่คุณจะปิด tag <body> และคุณพร้อมที่จะเริ่มใช้งาน ไม่จำเป็นต้องมีการติดตั้ง Gulp, Grunt หรือ Webpack เพื่อใช้งาน transpire JSX templates ไม่จำเป็นต้องเรียนรู้ JavaScript ใหม่ ทุกๆสิ่งสามารถทำงานได้เพียงแค่วาง JS library เดียว ความง่ายนี้ไม่ได้เป็นข้อจำกัดในการทำโปรเจคใหญ่ๆ คุณยังคงควรใช้เครื่องมือดีๆเพิ่มในภายหลัง

ความสะดวกไม่ใช่สิ่งเดียวที่มีในVue.js การออกแบบ API ให้เข้าใจได้ง่าย ผมรู้สึกประหลาดใจอย่างมากในการทำงานของมัน เพียงแค่เขียนโค้ดเพียงเล็กน้อยเท่านั้น Vue.js ใช้ JavaScript objects ที่เรียบง่าย นำมาเพิ่มคุณสมบัติเข้าไป กลายเป็นว่าคุณไม่ต้องสนใจ DOM หรือ event ใน code ของคุณ เหลือเพียงแค่แนวทางธุรกิจของคุณเท่านั้น

# 2 Component คือรากฐาน

หลักการที่สำคัญของ Vue.js คือ Component ที่เป็นส่วนที่แยกกันอยู่ในตัวของมันเอง และ สามารถนำกลับมาใช้งานใหม่ได้ ผมรู้ว่า Components กำลัง Hot อยู่ในตอนนี้ วิธีของ Vue’s component คือ กำหนดและ ใช้การถ่ายข้อมูลแบบจำเพาะของ W3c เป็นองค์ประกอบที่กำหนดเอง ซึ่งมันเป็นส่วนหนึ่งที่ใหม่ของ Web Components Spec ซึ่งมันหมายความว่า การใช้ Vue.js และ Component จะเป็นคล้ายกับ การทำงานของเบราว์เซอร์ในอนาคต ในความเป็นจริง คุณจะได้กำหนด Component ของคุณเอง ผมคิดว่ามันเหมาะอย่างน่าทึ่งกับ HTML markup paradigm มันทำให้ง่ายที่จะให้เหตุผลเกี่ยวกับตำแหน่งและองค์ประกอบของ Components ใน Application ของคุณ

คุณสมบัติที่สูงขึ้นเล็กน้อยแต่ไม่มีคุณสมบัติไหนที่น่ากลัวไปกว่า Vue.js Components ของมันคือ Single File Components การใช้เครื่องมือ เช่น Vueify ช่วยให้คุณสามารถกำหนดแม่แบบ และสามารถจัดแต่ง Components ของคุณในไฟล์เดียว

# 3 การแก้ปัญหาที่เหมาะสม

ในระดับทฤษฎี ผมรู้สึกว่า Vue.js แก้ปัญหาที่เหมาะสมได้ สำหรับผมมันไม่ได้แทนที่ทั้งหมดด้วย SPA คุณสามารถใช้ Vue ตามความจำเป็นในส่วนของหน้าเว็บไซต์ของคุณ ซึ่งมัน makes sense สำหรับงานที่ผมกำลังทำอยู่

<hand-wavy-statement> ยอมรับเถอะว่า ส่วนใหญ่การพัฒนา front-end มันไม่ได้ให้ทำงานขนาดเท่ากับ google หรือ facebook ที่มีการใช้งานขนาดหลายร้อย </hand-wavy-statment>

Vue.js ไม่ได้บังคับให้คุณเข้าไปในส่วนของการตั้งค่าที่ซับซ้อนในการกำหนดโครงสร้างและ Data store มันจะช่วยให้คุณเริ่มต้นได้อย่างรวดเร็วและเพิ่มคุณสมบัติตามที่คุณต้องการ

# 4 Good Resources

วิธีที่ทำให้ผมได้เรียนรู้เทคโนโลยีใหม่ๆ มักจะออกมาในรูปแบบของ วีดีโอ การอ่านหนังสือ และ การพยายามออก Project ขนาดเล็ก

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

อย่างหนึ่งที่สำคัญในการพัฒนาของ Vue.js คือ ข้อความ error ถ้าคุณใช้ non-minified ของ Vue library คุณจะได้รับข้อความอธิบายที่ดีใน Console ของคุณ

สามารถหา resources ที่มากกว่านี้ได้จาก awesome-vue repository.

# 5 เครื่องมือที่น่ากลัว

Tool fatigue เป็นสิ่งที่จริงใน JavaScript ecosystem แต่มันมีประสิทธิภาพมากกว่าถ้าคุณมีเครื่องมือที่จะทำให้งานของคุณสำเร็จ มันเซอร์ไพร์สำหรับผมมาก Vue.js มีชุดของ Tool ที่สมบูรณ์ ที่จะช่วยคุณ มันน่าประหลาดใจที่มันถูกสร้างขึ้นจาก Evan you และ กลุ่มนักพัฒนาเล็กๆ โดยปราศจากการสนับสนุนขององค์กร

บางส่วนของเครื่องมือ ที่ได้รับความสนใจจากผมคือ vue-cli สำหรับ scaffolding ที่รวดเร็ว Vue-router สำหรับการทำ Http และ Ajax requsts vue-validator สำหรับการตรวจสอบข้อมูล vuexสำหรับโครงสร้างของ flux-inspired

แต่เครื่องมือที่ผมใช้มากที่สุดในวันนี้ของ Vue คือ vue-devtool
เป็น extention ของ Chome ที่ช่วยในการตรวจสอบ และ ตอบโต้การเขียน Vue

# 6 Minimal Overhead

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

นอกจากนี้ Vue.js ทำงานได้ โดยปราศจาก libraly ตัวอื่นๆ หรือหากจำเป็นต้องนำมาใช้กับ JQuery และ Bootstrap ก็ไม่มีปัญหาสำหรับ Vueที่ จะทำร่วมกับ libraly เหล่านี้

#7 Future Facing

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

มีหลายสิ่งที่ดีในการพัฒนา Vue สำหรับ Vue 2.0 ที่เป็นเวอร์ชั่นใหม่ ขณะนี้ใน RC sate และ มันมีการปรับปรุงประสิทธิภาพจำนวนมากที่ทำงานกับ Virtual DOM. การเปลี่ยนแปลงนี้จะทำให้ประสิทธิภาพของ Vue ดีขึ้น 4 เท่า

--

--