ทดลองใช้งาน Angular, React, Vue และ Svelte ในการสร้างตารางแสดงข้อมูลที่ได้รับจาก API (ตอนที่ 1)

แนะนำเนื้อหาในบทความ

สวัสดีครับ ผม อ.เณร จาก มหาวิทยาลัยรังสิตครับ จากการเตรียมตัวเพื่อจะเลือก Framework หรือ Library มาใช้สอนวิชา Web Programming ในปีการศึกษา 2564 ประกอบกับ Framework หรือ Library ที่ใช้งานกันอยู่ในปัจจุบันได้มีการออกเวอร์ชั่นใหม่ ผมจึงอยากลองทบทวนอีกครั้งว่าจะเลือกตัวไหนเพื่อสอนนักศึกษาดี

ซึ่งก่อนหน้านี้ผมได้ใช้ Angular และ React สอนนักศึกษามาแล้ว แต่ยังไม่เคยใช้ Vue และ Svelte ในการสอน ซึ่งจากที่เคยสอน จุดที่ผมมองว่าเป็นพื้นฐานและน่าสนใจในการนำมาเปรียบเทียบ Framework หรือ Library เหล่านี้ จะเป็นส่วนของการสร้างตารางแสดงข้อมูล โดยบทความนี้จะยกตัวอย่างการสร้างตารางด้วย Bootstrap Framework และเรียกใช้ข้อมูลจาก API มาเพื่อแสดงผลในตาราง โดยจะใช้ API จาก https://www.mecallapi.com/ ของ ดร.กานต์ หรือ อ.พี่หมี Karn Yongsiriwit

ซอฟต์แวร์ที่ใช้

• Node.js Version: 14.17.0 LTS
• Visual Studio Code Version: 1.56.2
• Thunder Client (Visual Studio Code Extension)

ตรวจสอบการติดตั้งซอฟต์แวร์กันก่อน

ให้ตรวจสอบก่อนว่า Node.js ใช้งานได้ไหม โดยเปิด Command Prompt หรือ Terminal แล้วพิมพ์คำสั่ง

C:\>node -v
v14.17.0

ถ้าขึ้นเวอร์ชั่นของ Node.js แสดงว่าสามารถใช้งานได้

ในส่วนของ Thunder Client นั้นเมื่อติดตั้งแล้วใช้งานไม่ยาก หลักการเหมือนกับ Postman โดยมีหน้าตาดังภาพ

ตัวอย่างที่ 1 การสร้างตารางแสดงข้อมูลจาก API

• Angular อ่านวิธีการทำได้จาก บทความการสร้างตารางแสดงข้อมูลจาก API ด้วย Angular 12
• React อ่านวิธีการทำได้จาก บทความการสร้างตารางแสดงข้อมูลจาก API ด้วย React 17
• Vue อ่านวิธีการทำได้จาก บทความการสร้างตารางแสดงข้อมูลจาก API ด้วย Vue 3
• Svelte อ่านวิธีการทำได้จาก บทความการสร้างตารางแสดงข้อมูลจาก API ด้วย Svelte 3

จากตัวอย่างนี้ ผมได้พยายามแบ่งเป็นขั้นตอนต่างๆ เริ่มตั้งแต่การสร้าง Project ไปจนถึงการ Build ซึ่งในแต่ละขั้นตอนผมจะทำการเปรียบเทียบจากมุมมองส่วนตัวแบบไม่ได้ลงเทคนิค แต่จะมองแบบที่ตาเห็นไม่ต้องคิดอะไรมาก

1. เริ่มติดตั้งและสร้างโปรเจ็ค ประเด็นนี้คิดว่าไม่ต่างกันมาก จึงขอผ่านไปไม่อธิบายรายละเอียดครับ แต่ Svelte สร้างโปรเจ็คได้เร็วมากครับ

2. สร้างหน้าจอที่จะแสดงผลตาราง รายละเอียดเบื้องต้นแต่ละตัว มีดังนี้

Angular
- มี CLI ช่วยในการสร้าง หากต้องการให้แสดงผลต้องมีการแก้ไขไฟล์ app.module.ts และ index.html
- สำหรับในส่วนของไฟล์ที่สร้างให้จาก CLI จะแยกมาให้เลยเป็นส่วนๆ .ts .html .css ซึ่งแต่ละส่วนมีความสัมพันธ์กัน
- การเขียนส่วนต่างๆ แยกตามชนิดของไฟล์ โครงสร้างของ Project ดูมีระบบระเบียบ แต่จำนวนไฟล์ก็จะเยอะตามไปด้วย

React
- เราทำการสร้างเอง หากต้องการให้แสดงผล ต้องแก้ไขไฟล์ index.js
- ไฟล์ที่สร้างขึ้นพื้นฐานจะเป็นลักษณะของฟังก์ชัน
- การเขียนส่วนต่างๆ จะอยู่ในไฟล์เดียวกัน

Vue
- ใช้ CLI ช่วยในการสร้าง และมี vue ui ให้ ซึ่งใช้สร้างโปรเจ็คได้ด้วย หากต้องการให้แสดงผลต้องแก้ไขไฟล์ App.vue
- ไฟล์ที่สร้างขึ้นพื้นฐานจะเป็นลักษณะของ HTML อยู่ภายใต้ Tag <template>
- การเขียนส่วนต่างๆ จะอยู่ในไฟล์เดียวกัน

Svelte
- ราทำการสร้างเอง หากต้องการให้แสดงผล ต้องแก้ไขไฟล์ main.js
- ไฟล์ที่สร้างขึ้นพื้นฐานจะเป็นลักษณะของ HTML
- การเขียนส่วนต่างๆ จะอยู่ในไฟล์เดียวกัน

สรุปในประเด็นนี้คร่าวๆ Svelte กับ Vue ดูง่ายในการเริ่มสร้างหน้าจอใหม่ มากกว่า React และ Angular ซึ่งรวมไปถึงโครงสร้างของโปรเจ็คและความสัมพันธ์ของแต่ละไฟล์ด้วย

3. เรียกใช้ข้อมูลจาก API รายละเอียดเบื้องต้นแต่ละตัว มีดังนี้

Angular
- มี HttpClientModule ซึ่งต้องไป import ที่ไฟล์ app.module.ts ก่อน จึงจะนำไปใช้งานได้
- การจัดเก็บข้อมูลควรสร้าง Interface เพื่อกำหนดรูปแบบของ Object ก่อนนำไปใช้
- มีการกำหนดแนวทางให้ทำ Service สำหรับเรียกใช้งานข้อมูล โดยสร้าง Service ได้จาก CLI ซึ่งโค้ดสำหรับติดต่อกับ API จะแยกไว้พี่ไฟล์นี้ ส่วน หน้าจอไหนจะเรียกใช้ข้อมูล ให้มาอ้างถึง Service นี้

React
- มี React Hook โดย useState ใช้จัดการเกี่ยวกับข้อมูล useEffect ใช้จัดการเกี่ยวกับสถานะในการ fetch ข้อมูลจาก API

Vue
- ด้วยโครงสร้างแบ่งเป็นส่วนของข้อมูล กับส่วนของการ fetch ข้อมูลจาก API

Svelte
- ส่วนใหญ่จะเน้นที่ส่วนของการ fetch ข้อมูลจาก API

สรุปในประเด็นนี้คร่าวๆ Svelte กับ Vue ดูง่ายในการเรียกใช้ข้อมูลจาก API มากกว่า React และ Angular ซึ่งอาจรวมไปถึงการที่อ่านโค้ดแล้วเข้าใจได้ง่ายด้วย

4. การนำข้อมูลที่ได้จาก API มาแสดงผลในตาราง รายละเอียดเบื้องต้นแต่ละตัว มีดังนี้

Angular
- เนื่องจากแยกไฟล์กันทำงาน ทำให้ต้องแก้ไขไฟล์ .ts เพื่อเรียกใช้ service และแก้ไขไฟล์ .html เพื่อแสดงผลตาราง
- ในส่วนของการเรียกใช้งาน API สำหรับจุดนี้ ไม่ซับซ้อนแล้ว แต่ต้องเข้าใจการเขียนแบบ OOP
- ในส่วนของการแสดงผลตาราง โค้ดมีความเรียบง่าย และส่วนใหญ่เป็น HTML ปกติ ส่วนที่เป็นโปรแกรมจะเป็น Attribute อยู่ใน Tag HTML

React
- การแสดงผลอยู่ในไฟล์เดียวกันกับการเรียกใช้งาน API
- สามารถเขียนเงื่อนไขเพื่อกำหนดการแสดงผลเป็นส่วนๆ ได้ โดยโค้ดจะแทรกอยู่กับ HTML ซึ่ง React เรียกรูปแบบนี้ว่า JSX

Vue
- การแสดงผลอยู่ในไฟล์เดียวกันกับการเรียกใช้งาน API
- ในส่วนของการแสดงผลตาราง โค้ดมีความเรียบง่าย และส่วนใหญ่เป็น HTML ปกติ ส่วนที่เป็นโปรแกรมจะเป็น Attribute อยู่ใน Tag HTML

Svelte
- การแสดงผลอยู่ในไฟล์เดียวกันกับการเรียกใช้งาน API
- สามารถเขียนเงื่อนไขเพื่อกำหนดการแสดงผลเป็นส่วนๆ ได้ โดยโค้ดจะแทรกอยู่กับ HTML คล้ายกับ React

สรุปในประเด็นนี้คร่าวๆ Angular มีการแยกไฟล์ส่วนของการเรียกใช้งาน API กับการแสดงผลตาราง แต่ตัวอื่นๆ จะรวมกัน ในการแสดงผลตาราง Angular กับ Vue ใช้ โค้ด HTML วางลงไปได้เลย แล้วค่อยมาเติม Attribute เพื่อเป็นเงื่อนไขหรือการวนซ้ำ ซึ่ง React และ Svelte ก็ทำได้เช่นเดียวกัน แต่ใช้วิธีการแทรกโค้ดระหว่าง Tag HTML

5. การใช้งานร่วมกับ Bootstrap Framework ประเด็นนี้คิดว่าไม่ต่างกันมาก จึงขอผ่านไปไม่อธิบายรายละเอียดครับ แต่ Vue กับ Svelte น่าจะสามารถอ้างถึง bootstrap css และใช้งานเบื้องต้นได้ระดับหนึ่งเลย โดยไม่ต้องอ้างถึง Component เพิ่มเติม

6. การ Build สำหรับ Production ประเด็นนี้คิดว่าไม่ต่างกันมาก จึงขอผ่านไปไม่อธิบายรายละเอียดครับ

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

ตอนที่ 2 การเลือกข้อมูลในตารางแล้วแสดงรายละเอียด การเพิ่มลบแก้ไขข้อมูล
ตอนที่ 3 การใช้งานร่วมกับ Firebase