เป็นอีกครั้งแล้วนะครับ ที่ผมเลือก Vue.js มาเล่าให้ทุกคนฟัง แต่ครั้งนี้ ไม่ได้มีแค่เรื่องเดียว ผมจะพาทุกคนไปเปรียบเทียบการใช้งานระหว่างVue.js กับ React กัน เพราะในช่วงหลายปีที่ผ่านมา Front-End Freamwork ที่ได้รับความนิยมในการใช้งานเป็นอย่างมากก็คือ Vue.js และ React นี่แหละ วันนี้ผมจะพาไปรู้จักกับทั้งสองตัวและความแตกต่างในการใช้งานของมันกัน

เริ่มต้นที่ React ก่อน มันเป็นอย่างไร?

React เป็น Front-End Framework ที่ Facebook เป็นผู้พัฒนา เปิดให้นักพัฒนาทั้งหลายใช้งานฟรี การเขียน Component เหมือนกับการเขียน HTML และใช้ JSX ในการแสดงผลเว็บไซต์ ดังนั้นหากไม่เคยใช้ JSX อาจต้องมีการเรียนรู้เพิ่มนิดหน่อย แต่ไม่ยากครับ เพราะ Syntax คล้าย ๆ กัน หนึ่งในเครื่องมือของ React ที่น่าสนใจมาก ๆ ก็คือ React Native ที่สามารถเขียน Javascript แล้วมาแปลงเป็นแอปได้ทั้ง Android และ iOS

รูปแบบของงานที่เหมาะกับการใช้ React

• จำเป็นต้องมีการเปลี่ยนแปลงข้อมูลบ่อย ๆ
• ทีมที่พร้อมสำหรับการใช้ React อย่างน้อยก็ต้องรู้ Javascript บ้างเล็กน้อย
• งานที่ไม่ต้อง Support IE8 เพราะเจ้าตัวนี้ไม่รองรับ IE8 ไปแล้ว
• ต้องการจัดการโค้ดให้ง่ายและเป็นระเบียบที่สุด โดยเฉพาะมีการแชร์ Component หลาย ๆ จุด จำเป็นต้องใช้งาน
• อยากขยายจากเว็บไซต์ไปบนแอปพลิเคชัน

เนื่องด้วยReactพัฒนาโดย Facebook ทำให้มีผู้ใช้งานเป็นจำนวนมากและบริษัทใหญ่หลายต่อหลายเจ้าเลือกใช้กันทั้งนั้น ไม่ว่าจะเป็น Facebook, Pinterest, Twitter, Airbnb หรือแม้แต่ Netflix ก็พัฒนาด้วยReactกันทั้งนั้น

ต่อกันที่ Vue.js กันเลย

ก่อนหน้านี้ ผมเคยพูดถึงเจ้าตัวนี้ไว้แล้วในบทความ Vue.js คืออะไร มีดีอย่างไร ทำไมถึงต้องใช้ แต่ผมจะขอเสริมเพิ่มเติมละกันครับ Vue.js เป็น Front-End Freamwork ที่ใหม่กว่าตัวอื่น ๆ เป็นเหมือนกับการนำ Angular และ React มารวมกันไว้ในตัวเดียว สามารถเขียน Javascript ได้ง่ายขึ้น แถมโค้ดยังสั้นลง ประหยัดเวลาในการทำงานไปเยอะและจัดการกับ Element ที่นำมา Render บนหน้าเว็บไซต์ได้อย่างง่ายดาย

ด้วยความที่ใช้งานง่ายนี่แหละ ที่ต่อให้ไม่เคยเขียนโปรแกรมด้วยภาษานี้มาก่อน ก็สามารถเรียนรู้ได้ไม่ยาก เพียงแค่มีความรู้ Javascript สามารถนำไปใช้กับโปรเจกต์ไหนก็ได้ทันที ไม่จำเป็นต้องสร้างโปรเจกต์ใหม่เลย Vueมีขนาดเพียงแค่ 21KB เมื่อเทียบกับตัวอื่น ๆ ถือว่าน้อยมาก และปัจจุบันยังถูกใช้เป็นส่วน Built-in บน Laravel อีกด้วย

รูปแบบของงานที่เหมาะกับการใช้ Vue.js

• ผู้ที่ต้องการสร้าง WebApps
• งานที่ต้องการโหลด Library บนหน้าเว็บไซต์ให้น้อยที่สุดและไวที่สุด

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

แม้การทำงานของทั้ง 2 ตัวนี้จะคล้าย ๆ กัน แต่ถ้าต้องเลือกใช้งานตัวใดตัวหนึ่งกับงานของคุณ ผมว่าอยู่ที่ความเหมาะสมและความถนัดมากกว่า เพราะทั้ง 2 ตัวนี้ ต่างมีข้อดีในตัวมันเอง ถ้าเลือกใช้งานอย่างเหมาะสม เว็บไซต์ของคุณก็ออกมามีประสิทธิภาพตามที่ต้องการได้เองครับ

Vue.js คืออะไร

Vue อ่านว่า view นะครับ ไม่ใช่ วู

ซึ่ง Vue.js เนี่ย เป็น open-source ที่สามารถโหลดมาใช้งานได้ฟรี ๆ โดยไม่ต้องเสียเงิน

Vue.jsถูกพัฒนาโดยนาย Evan You เป็นอดีตพนักงาน Google นะครับ

Vue.jsเป็น Front-End Framework ที่ช่วยให้สามารถเขียน Javascript ได้ง่ายขึ้น เขียนสั้นลง ทำให้ลดระยะเวลาในการ dev โปรเจคนึงไปได้พอสมควร

หน้าที่หลักๆของVue.js ก็คือ เอาไว้สำหรับทำ User Interface หรือส่วนที่โต้ตอบกับผู้ใช้ เช่น การคลิก เพื่อแสดงหรือซ่อน Element ต่าง ๆ ได้ หรือ การผูกข้อมูล เวลาเรากรอกฟอร์ม แล้วให้ค่าที่พิมพ์ไป แสดงผลขึ้นมาทันทีแบบ Realtime อย่างเมื่อก่อน เราจะใช้ ajax หรือ jQuery มาจัดการ Event ในส่วนนี้ใช่มั้ยครับ แต่ตอนนี้เราสามารถใช้ในVue.js ได้หมด เรียกว่า เรียนรู้ง่าย ใช้งานง่าย จบงานได้ไว ทำได้ทุกอย่างในตัวเดียวเลย

ทำไมถึงใช้ Vue.js

• เหตุผลหลักที่จะไม่พูดถึงไม่ได้เลย ก็คือ เรื่องการใช้งานครับ
  ถ้าพูดถึงเรื่องการใช้งาน ถือว่าใช้งานง่ายมาก ๆ แค่เรามีความรู้ JavaScript ระดับกลาง ๆ เรียนรู้ไม่เกิน 3 ชม. เราก็สามารถใช้งาน Vue.js ได้แล้ว ถ้าให้เรียงลำดับกับ Front-End Framework ตัวอื่น ๆ ผมให้ Vue.jsเป็นอันดับหนึ่งเลย Vue.jsเนี่ย มัน based on HTML, CSS และก็ Javascript ซึ่งจะง่ายมาก ๆ สำหรับผู้เริ่มต้นครับ
• เอกสาร หรือคู่มือที่ทำออกมาครอบคลุมมาก ๆ มีรายละเอียดครบ เข้าใจง่าย และมีตัวอย่างโค้ดที่หลากหลาย
• มี Community ที่เติบโตไวมาก ซึ่งสามารถให้ความช่วยเหลือเมื่อจำเป็นได้
• Vue.js สามารถ render หรือแสดงผลได้ไวมาก เพราะ Vue.js มีขนาดเพียง 30 KB เท่านั้น และดึงเอาข้อดีของทั้ง React และ Angular มารวมไว้ใน Vue เรียกได้ว่าครบเลย

SPA หรือ Single Page Application คือ เว็บที่ไม่ต้องโหลดเมื่อเปลี่ยนหน้า

เวลา Client เข้าเว็บครั้งแรก จะโหลด HTML มา เช่น รูปหรือข้อความทั้งหมด พอจะเปลี่ยนหน้า ส่ง request ไปอีกรอบ จะต่างกันครับ แบบเก่าจะต้องรอเซร์ฟเวอร์ reder html ใหม่ส่งกลับมา แล้วก็ต้อง refresh หน้าใหม่อีก แต่แบบ spa จะส่งกลับมาแค่ข้อมูล มาเปลี่ยนใน Component ให้เราโดยที่ไม่ต้อง Refresh เลยครับ

Framework ที่ได้รับความนิยมสำหรับทำ Single Page web app ก็จะมีหลาย Framework เช่น React, VueJS, Angular เป็นต้น ยกตัวอย่างเว็บที่เป็น SPA อย่างเช่น Facebook นะครับ คือเวลาเราเปลี่ยนหน้าโดยกดที่เมนู content ในส่วน body จะเปลี่ยน โดยที่เมนูยังอยู่เหมือนเดิม หรือไม่มีการรีเฟรชนั่นเองครับ ถ้า facebook ต้อง refresh หน้าใหม่ทุกครั้ง เซิร์ฟเวอร์จะทำงานหนักมาก อาจจะรับปริมาณ User ที่ใช้งานในแต่ละวินาทีไม่ไหว

หลัก ๆ แล้วเหตุผลที่ทำ Single page application กันก็คือ

• ความลื่นไหลต่อเนื่องของการแสดงผล
• ลดโหลดของ Server

สำหรับผมแล้ว Vue.js ใช้งานง่ายและประหยัดเวลาในการเขียนโค้ดไปได้เยอะเลยครับ ท่านใดที่อยากเรียนรู้เกี่ยวกับ Vue.js เพิ่มเติม ผมมีหลักสูตรออนไลน์ฝึก Vue.js สำหรับผู้เริ่มต้น พร้อมส่วนลดพิเศษ! มาให้ทุกท่าน เรียนจบหลักสูตรนี้ปุ๊บ สามารถเขียน Vue.js ได้เลยแน่นอนครับ

อ่านบทความเกี่ยวกับเว็บไซต์เพิ่มเติมได้ที่ คลิก