ทำไมพวกเราถึงเลือก Vue.js

Somchoke Kittisithipong
IT@KMUTNB
Published in
2 min readFeb 16, 2017

แปลจาก https://about.gitlab.com/2016/10/20/why-we-chose-vue/

เมื่ออาทิตย์ก่อนผมได้มีโอกาสสนทนากับผู้ให้สัมภาษณ์เกี่ยวกับการเลือก JavaScript framework นั้นควรเลือกอย่างไร

เขาชี้ให้เห็นว่าเมื่อไรที่บริษัทซอฟท์แวร์ขนาดใหญ่ปล่อยแหล่งข้อมูลลับออกมา นั่นก็คือจะเป็นการกล่าวเกินจริง Devs คิดว่า “บริษัทนั้นเขียน Js ต่างจากผม และเขาก็โดดเด่น ประสบความสำเร็จ วิธีเขียน Js เขาดีกว่าผม? ผมจึงต้องนำมาใช้?”

แหล่งข้อมูลลับของพวกเขาอาจจะดี แต่อย่าเพิ่งตัดสินว่าดีแค่เพราะทุกคนตื่นเต้นกับมัน คุณจะไม่ก็อปวางจาก StackOverflow โดยปราศจากความเข้าใจ ดังนั้นทำไมจะต้องก็อปและวาง framework ทั้งหมดล่ะ

นี่คือสิ่งที่นำผมมาสู่การตัดสินใจของพวกเราที่จะใช้ Vue.js ที่ GitLab

ง่ายและสะดวกในการใช้

สิ่งแรกที่ดึงดูดพวกเราในการใช้ Vue.js คือ ช่วยให้ทีมพวกเราเขียน JavaScript ได้ง่าย เริ่มจาก Vue.js ที่ง่ายที่สุด codeของมันอ่านง่าย ข้อมูลก็แค่การสอนที่คุณเคยต้องการ คุณไม่จำเป็นต้องใช้ external libraries คุณสามารถใช้พร้อม jQuery หรือไม่ก็ได้ คุณไม่จำเป็นต้อง install plugins ใดๆ โดยส่วนตัวผมชอบ vanilla Vue.js อย่างไรก็ตามผมสามารถเข้าถึง vue-resource เมื่อผมต้องการมัน การดึง Vue.js ไปยัง code เดิมที่มีอยู่มันไม่ซับซ้อนเลย มันไม่มีสิ่งที่เรียกว่าเวทมนตร์ใน Vue.js มีเพียงสื่งที่เรียกว่า object เท่านั้นที่คงอยู่

ผมได้คุยเกี่ยวกับ Javascript เป็นจำนวนมาก ผมกับ Devs ได้พบจุดที่น่าสนใจคือคนที่ใช้เวลาส่วนใหญ่ใน Angular มีแนวโน้มที่จะไม่รู้เกี่ยวกับ Jvascript ดี ผมไม่อยากให้หนึ่งในนั้นเป็นผมและ Devs ทำไมพวกเราควรเขียน “not Javascript”

ผมนึกได้เมื่อตอนที่ผมใช้ Backbone ทำให้ผมมีพลังในตัวผมเองให้ยึดมั่น DRY เพราะมันเป็น canvas ที่ว่างมาก Vue.js ไม่ได้สร้างสมมติฐานที่กว้างมากเกี่ยวกับทุกสิ่งอย่าง มันสมมติแค่ข้อมูลของคุณเปลี่ยน

แต่ Vue.js นั้นมาพร้อมกับความสมดุลที่สมบูรณ์แบบ ด้วยอะไรที่มันจะทำเพื่อคุณ และอะไรที่คุณต้องการทำด้วยตัวเอง ถ้า Backbone เป็นอนาธิปไตย ส่วน Angular เป็นเผด็จการ ผมจะบอกว่า Vue.js เหมือนกับสังคมนิยม แต่ Vue.js มักจะมีความมั่นคงไปถึงภายใน แต่จะยืดหยุ่นอย่างปลอดภัย พร้อมที่จะช่วยคุณเขียนโปรแกรมได้มีประสิทธิภาพอย่างต่อเนื่อง ทำให้ DOM-inflicted ของคุณรับภาระให้น้อยที่สุด

เพื่อให้แนวคิดว่าผมหมายถึงอะไร นี่คือตัวอย่าง Codepen:

ถ้าคุณเคยเห็นใน Javascript libraries มันก็ไม่ยากที่จะเข้าใจทุกอย่างในตัวอย่างนี้โดยปราศจากเอกสารอ้างอิงใดๆ และเป็นเรื่องปกติใน framework อื่นๆ นี่คือจุดที่ความง่ายนั้นหยุดลง คุณจะได้ตัวอย่างที่ง่ายๆเมื่อคุณ “Getting Started” แต่สิ่งที่เป็นจริงมันซับซ้อนทันทีที่พยายามที่จะได้รับเงินให้คุ้มค่าจาก framework ไม่ใช่กับ Vue.js อย่างไรก็ตามการใช้ในชีวิตจริงที่ดูเหมือนว่าจะง่ายพอๆกับเอกสาร

และนั่นก็คือสิ่งที่พวกเรารัก Vue.js มันคือ โครงสร้างและความง่ายที่รวมกันอย่างสละสลวย ข้อมูลที่สำรวจไปที่จุดหมายเรียกว่า data แต่ data สามารถไปถึงได้และมองดูแม้ว่าคุณต้องการ functions ต่างๆที่คุณเขียน callbacks สำหรับเข้าไปที่ methods แต่พวกมันสามารถทำและย้อนกลับได้ตามที่คุณต้องการ Vue.js แค่รู้ว่าเมื่อไรข้อความจะเปลี่ยนและ update มุมมองของคุณ และคุณจะเขียน code น้อยลง

Vue.js + GitLab === Less code

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

ที่ง่ายๆเลย แต่ตัวอย่างที่ปฏิบัติจริงที่พวกเรากำลังใช้นี้ใน Production: ปัญหาของ GitLab ปัญหาในจุดนี้จะเปิดเผยทั้ง closed หรือ open โดยปกติตัวแปล(value)สามารถเปลี่ยนได้บ่อย และต้องมีการแสดงในหลายๆ view โดย JQuery มี code ราวๆ 30 บรรทัดที่จะถ่ายทอดการเปลี่ยนแปลงเหล่านั้น และบรรทัดเหล่านั้นมีผลต่อหลายๆ class และหากบรรทัดเหล่านั้นจะถาม DOM เราจะต้องเขียนเอง

ใน Vue.js ในตอนนี้ให้พวกเราเขียน Javascript ใน 1 บรรทัด ก็มีแค่ code ที่เราเพิ่มใน HTML และนั่นก็คือ attributes นิดหน่อยเท่านั้น

สิ่งที่ Evan You รู้คือ creating a kick ass framework ไม่ใช่แค่เขียนcodeให้ดี คุณต้องการข้อมูลที่ยอดเยี่ยม การรวมตัวกันที่มั่นคงจะช่วยกันเรียนรู้ Supporting cast โดย libraries และ plugins จะช่วยผู้ใช้แก้ปัญหาที่ยากได้ feedback loopsสั้นๆ จะขึ้นอยู่กับfeedbackของผู้ใช้ที่จะให้frameworkนั้นเกี่ยวข้องกันไป Vue.js ก็คือทั้งหมดที่กล่าวมานี้ plus code ที่ดี มันคือเหตุผลที่พวกเราใช้ Vue.js แล้วคุณล่ะ?

ดูว่าทำไมเราถึงเลือก Vue.js webcast

--

--