สรุปเทคโนโลยีสำหรับคนทำเว็บไซต์ Frontend Developer ในปี 2018

ในช่วงหลายปีที่ผ่านมา มีคนส่งข้อความส่วนตัวมาถามแอดเยอะมากเกี่ยวกับการเลือก Library มาทำ Frontend ว่าใช้ตัวไหนดี? ค่ายสีฟ้าหรือสีแดงดีกว่ากัน? ฯลฯ วันนี้เลยขอรวบรวมมาเล่าให้ฟังกันทีเดียวเลยว่าตัวไหนเป็นอย่างไรบ้าง เพื่อให้เป็นประโยชน์กับคนที่กำลังตัดสินใจอยู่ว่าจะเลือกใช้ Library ตัวไหนในการทำ Frontend สำหรับโปรเจคใหม่ดี ในการทำเว็บไซต์หรือ Web Application ใด ๆ ก็ตาม จะมีการแบ่งออกเป็น 2 ฝั่งหลัก ๆ นั่นคือ Frontend กับ Backend (ยกเว้นใครโชคดีได้ทำงานในตำแหน่ง Fullstack Developer ก็ควบสองฝั่งเลยครับ) เราลองมาดูกันก่อนว่า 2 ฝั่งนี้มีความแตกต่างกันอย่างไรบ้างครับ

Frontend กับ Backend ต่างกันอย่างไร

Frontend อธิบายแบบง่าย ๆ คือ ข้อมูลบนเว็บที่ User มองเห็น ภาษาที่เป็น Frontend จะมีแค่ 3 ภาษาหลัก ๆ คือ HTML, CSS, และ JS (ใครยังไม่เคยเรียน HTML กับ CSS สามารถ เริ่มเรียนกับทีมงานมืออาชีพจาก Designil ได้เลยครับ)

• HTML (Hypertext Markup Language) คือ ภาษาสำหรับแสดงข้อมูลบนเว็บ
• CSS (Cascading StyleSheet) คือ ภาษาสำหรับตกแต่งข้อมูลบนเว็บให้สวยงาม
• JS (JavaScript) คือ ภาษาสำหรับเพิ่มลูกเล่นให้ข้อมูลบนเว็บ

สำหรับในส่วน Frontend นี้จะไม่มีภาษาอื่นที่เกิดขึ้นมาแทนที่ 3 ภาษาหลักได้ เพราะเราต้องใช้ Web Browser (เช่น Internet Explorer, Chrome, Firefox ฯลฯ) ในการประมวลผลครับ นักพัฒนาที่ทำภาษาใหม่ ๆ มาใช้สำหรับ Frontend ก็จะใช้วิธีสร้างภาษาใหม่ขึ้นมาแล้วแปลงกลับเป็นภาษาหลักพวกนี้ก่อนใช้งาน เช่น SCSS เป็นภาษา CSS แบบที่เพิ่มฟังก์ชั่นการเขียนโปรแกรมได้ เวลาจะใช้งานจริงเราก็ต้องแปลงโค้ด SCSS เป็น CSS ก่อน Backend คือ สิ่งที่ช่วยประมวลผลข้อมูล ซึ่ง User จะมองไม่เห็นว่าเราใช้อะไรในการประมวลผล ฝั่ง Backend นี้มีหลากหลายภาษาให้เลือกใช้ เช่น ภาษายอดนิยม (ในไทย) ก็จะเป็น PHP ที่อยู่กับเรามาช้านาน มีหนังสือสอน PHP อยู่เยอะในร้านหนังสือ ถ้าใครอยากเริ่มต้นหัด Backend แบบนั่งเรียนเอง แอดแนะนำให้ลองเริ่มจาก PHP ก่อนก็ดีเหมือนกันครับ ส่วนภาษาที่ไม่นิยมมากเท่า PHP ก็เช่น Java, .NET, Ruby ซึ่งสามารถนำมาทำ Backend ได้เช่นกันครับ แต่ละภาษาก็จะมีจุดเด่นจุดด้อยแตกต่างกันออกไป ภาษา Backend อื่น ๆ เกิดขึ้นมาเรื่อย ๆ ในหลายปีที่ผ่านมาครับ ถ้าเรียนภาษาเหล่านี้แล้วเราก็ไม่ต้องเรียน PHP เลย เพราะมันใช้แทนได้เหมือนกัน เช่น Go ภาษาโปรแกรมมิ่งของ Google ที่พัฒนามาให้สามารถรับการประมวลผลพร้อมกันได้มหาศาล, NodeJS ภาษา Backend ที่เขียนด้วย JavaScript Engine ทำให้สามารถเขียน JS ชุดเดียว ใช้ได้ทั้งหน้าบ้านและหลังบ้าน ฯลฯ ต่อไปเรามาดูกันว่าในการทำ Frontend ในปี 2018 เค้าใช้อะไรกันบ้างครับ

รวมเทคโนโลยีสำหรับพัฒนา Frontend ในปี 2018

เราคุยกันไปก่อนหน้านี้แล้วว่าภาษา Frontend ได้แก่ HTML, CSS, JS ซึ่งเวลาเราเลือกใช้เครื่องมือต่าง ๆ ในการพัฒนา Frontend เรามักจะแบ่งเครื่องมือออกเป็น 2 หมวดหลัก ๆ:

1. เครื่องมือ HTML & CSS คือ เครื่องมือสำหรับจัด Layout และเพิ่มความสวยงามบนหน้าเว็บไซต์ เช่น Bootstrap, Material UI
2. เครื่องมือ JS คือ เครื่องมือสำหรับจัดการ Flow ของข้อมูลบนเว็บไซต์ เช่น React, Angular, VueJS

เวลาใช้งานเราก็จับคู่มันแบบไหนก็ได้ตามที่ถนัดครับ เช่น Bootstrap + React, Bootstrap + VueJS อะไรแบบนี้ ในบทความนี้แอดจะมาแนะนำตัวที่เด่น ๆ ของแต่ละหมวดให้ครับ เพื่อให้เพื่อน ๆ ตัดสินใจเลือกใช้ได้ง่ายขึ้น

เครื่องมือ HTML & CSS

Bootstrap

Bootstrap ถือเป็น CSS Framework ที่ได้รับความนิยมสูงสุดในขณะนี้ครับ ก่อนหน้านี้เป็นโปรเจคของ Twitter ก็เลยเรียกว่า Twitter Bootstrap แต่ตอนนี้ทีมหลักที่พัฒนาเค้าย้ายบริษัทแล้วครับ เลยเรียกว่า Bootstrap เฉย ๆ แทน ข้อดีของ Bootstrap คือ มันสามารถใช้งานได้ง่าย, มีเว็บสอนใช้เยอะแยะมากมาย, มีของที่ต้องการใช้มาให้ครบ, และเว็บหลักของ Bootstrap เองก็เขียนวิธีใช้ออกมาได้ดี ถ้าสงสัยตรงไหนเราก็ลองก็อปปี้โค้ดจากเว็บไปวางเพื่อใช้งานได้เลยครับ ถ้าเป็นมือใหม่ที่อยากเรียนรู้เกี่ยวกับ Bootstrap แอดแนะนำให้ลองอ่านบทความที่แอดเขียนเป็นสัปดาห์ฮะ ซึ่งเกี่ยวกับ Bootstrap เวอร์ชั่นล่าสุด คู่มือการใช้ Bootstrap 4 ฉบับสมบูรณ์ ส่วนใครที่จะนำไปใช้ควบคู่กับเครื่องมือ JS ก็มีคนเอา Bootstrap ไปยัดใส่เครื่องมือเหล่านี้ให้เรียบร้อยแล้วครับ (เช่น React-Bootstrap https://react-bootstrap.github.io/) ความแตกต่างของพวกนี้กับเวอร์ชั่นปกติ ก็คือ ส่วนประกอบใน Bootstrap ต่าง ๆ จะถูกแปลงมาให้เข้ากับเครื่องมือ JS นั้น ๆ เรียบร้อยแล้ว เช่น ถ้าเป็น React เค้าก็จะแปลงส่วนประกอบเป็นภาษา JSX ให้ครับ เว็บไซต์ Bootstrap: https://getbootstrap.com/

Bulma

Bulma เป็น CSS Framework สำหรับคนทำเว็บที่เน้นใช้เทคโนโลยีใหม่ครับ ระบบ Layout ของ Bulma ใช้เทคโนโลยี Flexbox ในการเขียน ทำให้มั่นใจได้ 100% ว่าเปิดใน Browser เก่า ๆ แล้วเว็บพังแน่นอน (อ้าว) ซึ่งถ้าเรามั่นใจว่าผู้ใช้เว็บของเราใช้บราวเซอร์ใหม่ ๆ เช่น Chrome, Edge, Firefox, Opera, Safari เวอร์ชั่นล่าสุด (เวลาเราพูดถึง Browser เก่า ๆ จะหมายถึง Internet Explorer เป็นส่วนใหญ่ครับ) แอดแนะนำว่าให้ลองใช้ Bulma ดูเลยครับ เพราะหน้าตาเค้าสวยงามน่าใช้งานจริง ๆ และโค้ดสะอาดกว่า Bootstrap ในระดับหนึ่ง ถ้าเป็นมือใหม่ที่สนใจเกี่ยวกับ Bulma แอดเคยเขียนบทความสรุปการใช้ Bulma ไปแล้ว สามารถอ่านกันได้เลยที่ แนะนำ Bulma: CSS Framework ใหม่สำหรับคนเบื่อ Bootstrap สำหรับการนำไปใช้กับเครื่องมือ JS ด้วยความที่ Bulma เป็นแค่ภาษา HTML กับ CSS เท่านั้น (แตกต่างกับ Bootstrap ที่มี JS ใส่มาด้วย) เราสามารถโยนเข้าไปในโปรเจคที่ใช้เครื่องมือ JS ตัวไหนก็ได้เลยครับ แต่ถ้าใครอยากได้แบบที่ประกอบเสร็จมาแล้ว แอดเจอตัวที่ชื่อว่า BloomerJS (https://bloomer.js.org) ครับ เว็บไซต์ Bulma: https://bulma.io/

Material Design

Material Design เป็น คอนเซปต์การออกแบบของ Google ซึ่งถ้าใครใช้ Android ก็จะได้เห็น UI ชุดนี้อยู่ทุกวันครับ สำหรับคนที่ต้องการใช้ Material Design ในการทำเว็บไซต์ สามารถเริ่มได้จาก Library ต่าง ๆ ที่นำ Material มารวมกับ JS Framework / Library ให้เราแล้วครับ เช่น Material ของ Angular (https://material.angularjs.org/latest/)หรือ MaterialUI (https://material-ui.com/) ของ React

เลือกใช้ CSS Framework ตัวไหนดี

การเลือก CSS Framework ปกติแล้วแอดจะเลือกตามความเหมาะสมของทีมครับ เช่น ถ้าทำงานโปรเจคเล็ก ๆ คนเดียว เลือกใช้ตัวที่เราถนัดได้เลย ถ้าทำงานเป็นทีม ใช้ CSS Framework ที่เรียนรู้ง่ายและได้รับความนิยมอย่าง Bootstrap ก็จะทำให้ทำงานกับทีมง่ายขึ้นครับ (อยู่กับความถนัดของคนอื่นในทีมด้วย) ส่วนใครที่เพิ่งมาเรียนรู้ CSS Framework แอดแนะนำให้เริ่มจาก Bootstrap เพราะตัวอย่างโค้ดทำมาดีมาก ใช้งานได้ง่าย และนำไปใช้หางานได้สะดวกครับ

JS Framework / Library

ตัวที่ได้รับความนิยมและได้ยินกันบ่อย ๆ ที่สุดจะมี 3 ตัวครับ คือ Angular, React, VueJS มาดูกันเลยว่าแต่ละตัวแตกต่างกันอย่างไรบ้าง

Angular

Angular สร้างขึ้นมาเพื่อใช้แบบตัวเดียวจบสำหรับทั้งโปรเจค มีของมาให้ครบทั้งหมด บางคนเลยเรียก Angular ว่าเป็น JS Framework ครับ ซึ่งแตกต่างกับ React หรือ VueJS ที่เป็น JS Library คือ ใช้เป็นส่วนแสดงผลเท่านั้น สำหรับองค์ประกอบอื่น ๆ ของ Library เช่น การจัดการ flow / state ของข้อมูล อันนี้เราต้องเอา Library อื่นมาเชื่อมอีกทีครับ เช่น Redux ในการใช้ Angular เวอร์ชั่น 5 เราต้องเรียนวิธีเขียน Typescript ซึ่งเป็น JavaScript ที่มี static typing = การเช็คประเภทตัวแปรตอน compile ทำให้เราเจอบั๊กได้เร็วกว่าปกติ ประหยัดเวลาในการพัฒนาไปพอสมควร เรียกได้ว่ามีทั้งข้อดี แต่ก็มีข้อเสียที่ต้องเรียนรู้ภาษาใหม่ ทำให้มี Learning Curve สำหรับทีมสูงขึ้นครับ ด้วยความที่ Angular มีส่วนประกอบต่าง ๆ มาให้เยอะมาก เวลาที่ใช้ในการเรียนรู้ก็สูงกว่าตัวอื่น ๆ ไปด้วยเช่นกัน แต่ถ้าเทียบว่าตัวอื่นก็ต้องเรียนรู้ library เสริมด้วย แอดคิดว่าก็ใช้เวลาไม่น้อยไปกว่ากันเท่าไหร่ Angular พัฒนาโดย Google ทำให้มีความน่าเชื่อถือว่าใช้ ๆ ไปแล้วจะไม่ปิดตัวหนีไป บบดื้อ ๆ แน่นอน เพราะหลาย ๆ โปรเจคใน Google ก็ใช้อยู่เช่นกันครับ บริษัทใหญ่หลาย ๆ เจ้าใช้ Angular กันอยู่ เช่น Youtube, Paypal, Google ฯลฯ ทำให้งานด้าน Angular มักพบได้บ่อย ๆ ในทีมของบริษัทใหญ่ (หรือบริษัทเล็กที่เป็น outsource ของบริษัทใหญ่อีกที) เว็บไซต์ Angular: https://angular.io/

ReactJS

ReactJS มีข้อดีตรงที่เรียนรู้ง่าย เพราะเป็นแค่ส่วนการแสดงผล (view) และมีความยืดหยุ่นสูง สามารถเขียนด้วย JavaScript เวอร์ชั่นเก่า (ES5) หรือเวอร์ชั่นใหม่ (ES6 ES7 ...) ก็ได้ ไม่ต้องเรียน TypeScript แบบ Angular ครับ อย่างไรก็ตาม คนใช้ React ต้องเรียน JSX ซึ่งเป็นภาษา HTML + JS นั่นเอง แต่ใช้เวลาไม่เยอะมากเพราะ syntax ค่อนข้างเหมือนเดิมเลยครับ พัฒนาและใช้งานโดยเว็บไซต์ Facebook ทำให้ React มีฐานผู้ใช้เยอะมาก โดยเฉพาะในไทยเราที่คนติด FB เป็นอันดับต้น ๆ ของโลก เรามีงาน React Bangkok ที่จัดขึ้นมาหลายปีแล้วและมีผู้เข้าร่วมเยอะมาก แต่แอดได้ข่าวมาว่าปีหน้าจะกลายเป็นงาน JavaScript Bangkok แทนเพื่อรองรับ library อื่น ๆ ด้วยครับ ข้อเสียเล็กน้อยที่แอดเจอเอง คือ เว็บไซต์หลักของ React สอนใช้แบบเข้าใจยากไปหน่อย ถ้าสนใจศึกษาเอง อ่านได้ใน บทความสอนใช้ React แบบเรียนรู้เอง ได้เลยฮะ มีบริษัทใหญ่ ๆ ใช้ React เยอะเหมือนกัน เช่น Facebook, Netflix, Dropbox, Airbnb ฯลฯ และงานในสายนี้ก็หาได้ไม่ยากครับ เพราะเป็น Library ที่ได้รับความนิยมสูง เว็บไซต์ ReactJS: https://reactjs.org/

VueJS

VueJS เป็น JS Library ที่ใหม่กว่าพี่ ๆ ทั้งสองด้านบน หน้าตาการใช้งานก็จะคล้าย ๆ กับเอา Angular กับ React มารวมกัน (รวมข้อดีนะฮะ ไม่ใช่ข้อเสีย) ข้อดีของ VueJS คือ เรียนรู้ได้ง่าย และใช้งานได้สะดวก จับโยนใส่โปรเจคไหนก็ใช้งานได้เลย ไม่ต้องขึ้นโปรเจคใหม่ก็ได้ เวลาเขียน VueJs เราไม่ต้องใช้ภาษาใหม่เลย ใช้ HTML + CSS + JS ธรรมดาก็เพียงพอแล้วครับ ซึ่งน่าจะทำให้คนที่เริ่มต้นใหม่ ๆ ใช้งานได้ง่ายขึ้นด้วย ผู้พัฒนา VueJS เป็นอดีตพนักงานของ Google ซึ่งเป็นชาวจีน ทำให้บริษัทใหญ่ ๆ ในจีนใช้ VueJS กันเยอะครับ ตัวอย่างเช่น Alibaba, Baidu ส่วนในไทยเราเองก็มีงาน Vue.js Meetup ที่จัดกันอยู่บ่อย ๆ เช่นกันครับ ด้วยความที่ VueJS ไม่มีบริษัทใหญ่อยู่เบื้องหลัง อาจจะทำให้ผู้ใช้รู้สึกว่าอนาคตไม่มั่นคงอยู่บ้าง แต่ไม่ต้องกลัวเพราะ community VueJS ตอนนี้ค่อนข้างใหญ่มาก ๆ เทียบเท่า React เลยครับ ต่อให้ผู้พัฒนาหลักออกไปก็ยังมีคนช่วยดูแลแน่นอนครับ เว็บไซต์ VueJS: https://vuejs.org/

เลือกใช้ JS Framework / Library ตัวไหนดี

หลังจากเรารู้จักกับ 3 ตัวหลัก ๆ ที่คนใช้กันแล้ว มาถึงคำถามโลกแตกของยุคนี้ว่าใช้ตัวไหนดีครับ จริง ๆ คำตอบแรกจากแอดก็คงเป็น "ถนัดตัวไหนก็ใช้ตัวนั้น" ครับ เพราะถ้าเรามีความรู้ตัวไหนอยู่แล้ว นำไปต่อยอดจะง่ายกว่ามาเรียนรู้ตัวอื่นใหม่ ยกเว้นว่าเราต้องการเรียนตัวใหม่จริง ๆ หรือสถานการณ์บังคับ ทีนี้สำหรับคนที่ยังไม่เคยเรียนตัวไหนมาก่อนเลย และอยากเรียนเพื่อให้เข้าใจพื้นฐานของ JS Framework / Library เหล่านี้ - แอดแนะนำให้เริ่มจาก VueJS ก่อนเลยครับ เพราะเรียนรู้ได้ง่ายที่สุด และมีฟีเจอร์ที่คล้ายกับตัวอื่น ๆ สำหรับคนที่อยากเรียนเพื่อนำไปหางาน - แอดแนะนำ React เพราะมีบริษัทใช้เยอะ และมีความยืดหยุ่นกว่า Angular (ทำให้เราต้องเรียนเยอะขึ้นด้วย เพราะต้องไปเชื่อมกับ Library อื่นอีก) ส่วนใครที่มีเวลา และอยากเข้าใจว่าควรเลือกตัวไหนดี แนะนำให้ลองนำทั้ง 3 ตัวนี้มาสร้างแอพแบบเดียวกัน หรือลองเข้าเว็บ TodoMVC (http://todomvc.com/) เค้ามีการเอาแต่ละตัวมาทำเป็นแอพจดตารางงาน + มี source code ให้เราเปรียบเทียบกันได้ง่าย ๆ เลยครับ สำหรับท่านใดมีคำถามอื่น ๆ เพิ่มเติม หรืออยากคุยกันว่าตัวไหนดีกว่า หรือชอบบทความแนวนี้ หรืออยากให้แอดเอาเรื่องไหนมาเขียนอีก สามารถมาพูดคุยกันได้ใน Designil Facebook Page เช่นเดิมเลยครับผม

---

สุดท้ายนี้ สำหรับท่านที่ไม่อยากเลือกเองให้ปวดหัว แอดแนะนำให้ไปหาโปรแกรมเมอร์ที่มีความรู้เพื่อปรึกษาหรือจ้างให้เค้าพัฒนาได้ครับ เช่น บริการรับทำเว็บไซต์จาก fastwork Fastwork เป็นเว็บไซต์ที่ให้บริการฟรีแลนซ์ในด้านต่าง ๆ ซึ่งบริการทำเว็บไซต์ของเค้าก็มีผู้ใช้บริการมากขึ้นเรื่อย ๆ ครับ ลองดูรายละเอียดเพิ่มเติมได้ที่นี่ https://fastwork.co/web-development