เมื่อต้องพัฒนาเว็บไซต์ใหม่ Front-End Framework ช่วยให้คุณสามารถเริ่มงานได้ทันที ด้วยความนิยมของ framework จึงทำให้มี Front-End Framework ให้เลือกใช้งานหลายแบบและยังมี framework ใหม่ๆ ออกมาอยู่เสมอ
เพราะการมี framework ให้เลือกใช้งานหลากหลาย การเลือก Front-End Framework ตัวหนึ่งให้เหมาะกับการงานอาจเป็นเรื่องยาก เช่นเดียวกับนักพัฒนาจำนวนมาก คุณอาจถูกดึงดูดให้ใช้ framework ยอดนิยมและเป็นที่ยอมรับ เช่น Bootstrap และ Foundation มองอีกแง่หนึ่ง framework ใหม่ๆแต่เป็นที่นิยมน้อยกว่าอาจจะเหมาะกับความต้องการของคุณก็เป็นได้ ดังนั้นมันก็คุ้มค่าที่จะเรียนรู้เกี่ยวกับตัวเลือกยอดนิยมในปัจจุบัน
สิ่งที่ควรคำนึงถึงใน Front-End Framework
ก่อนที่คุณจะเลือก Front-End Framework สำหรับโปรเจคต่อไป สิ่งสำคัญคือการหาความรู้เกี่ยวกับสิ่งที่ควรคำนึงถึงของแต่ละ framework โดยพิจารณาหัวข้อต่อไปนี้ คุณสามารถพิจารณาข้อดี-ข้อเสียของ Front-End Framework ยอดนิยมได้ง่ายขึ้น
- ระดับทักษะความรู้ – เมื่อต้องเลือก Front-End Framework ให้พิจารณาจากทักษะของคุณ หากคุณเป็นมือใหม่ framework ที่มีความเสถียรอย่าง Bootstrap อาจเป็นตัวเลือกที่ดี เนื่องจากมาพร้อมวิดเจ็ทที่เป็นประโยชน์และไม่ต้องอาศัยทักษะการเขียนโปรแกรมมากนัก หากคุณมีประสบการณ์ ควรเลือกใช้ framework ที่เรียบง่าย ซึ่งสามารถให้คุณมีพื้นที่ในการปรับแต่ง โดยทั่วไป framework เหล่านี้จะเบากว่าและไม่ใหญ่จนเกินไป ซึ่งนับว่าเป็นข้อดี
- Responsive web design – เว็บใดๆก็ตามที่คุณพัฒนาควรมีการแสดงผลได้อย่างถูกต้องในทุกอุปกรณ์ เนื่องจากมีผู้คนจำนวนมากขึ้นที่เข้าถึงอินเทอร์เน็ตผ่านอุปกรณ์มือถือ จากรายงานของ Similar Web เรื่องสถานะเว็บบนมือถือในสหรับอเมริกา ปี 2015 ประมาณร้อยละ 56 ของปริมาณการใช้ข้อมูลผู้บริโภคไปยังเว็บไซต์ชั้นนำของสหรัฐอเมริกาตอนนี้มาจากอุปกรณ์มือถือ ดังนั้นจึงควรใช้ Front-end framework ที่รองรับ Responsive web design เพื่อให้คุณมีสิ่งที่ต้องกังวลน้อยลง
- CSS-Preprocessor – หากคุณใช้ CSS-Preprocessor และต้องการใช้เฉพาะตัวใดตัวหนึ่ง โดยทั่วไปแล้วมี Sass และ LESS ตรวจดูให้แน่ใจว่า framework ที่คุณใช้รองรับมัน
- รูปลักษณ์ – เลือก framework ที่ช่วยให้คุณออกแบบรูปลักษณ์ตามที่คุณต้องการโดยใช้ความพยายามน้อยที่สุด
- Prototype - Front-end frameworkในอุดมคติจะช่วยให้คุณสร้าง wireframe และ prototype อย่างรวดเร็วเพื่อเพิ่มความเร็วในขั้นตอนการออกแบบและพัฒนา
เหนือสิ่งอื่นใด การใช้ Front-end frameworkที่เหมาะสม จะช่วยลดความซับซ้อนและเพิ่มความเร็วในขั้นตอนการออกแบบและพัฒนาเว็บไซต์ และยังคงให้ความยืดหยุ่นและคุณสมบัติที่คุณต้องการเพื่อให้ได้ผลลัพธ์ที่ยอดเยี่ยม
10 Front-End Framework มาแรงในปี 2018
เพื่อไม่ให้เป็นการเสียเวลา เรามารู้จักกับ Front-End Frameworks ยอดนิยมในปี 2018
1. Bootstrap
การจัดอันดับนี้คงจะไม่สมบูรณ์หากไม่มีชื่อของ Front-End Framework ที่เป็นที่นิยมอย่างแพร่หลายนั่นคือ Bootstrap สร้างโดยนักพัฒนา Twitter และเปิดตัวครั้งแรกในปี 2011 เป็น open-source framework ที่ใช้มากที่สุดในโลก
เหมือนกับ Front-End Framework ที่มีประสิทธิภาพตัวอื่นๆ Bootstrap ประกอบไปด้วย CSS, HTML และ JavaScript หรือ JS และองค์ประกอบอื่นๆ โดยยึดหลักมาตรฐาน Responsive web design ช่วยให้คุณพัฒนาเว็บต่างๆสอดคล้องกับความซับซ้อนและขนาดต่างๆ
Bootstrap มีการอัพเดตอย่างต่อเนื่อง ประกอบไปด้วยคุณลักษณะล่าสุดและดีที่สุด ตัวอย่างเช่น ได้มีการเพิ่มธีมเพื่อให้สอดคล้องกลับแนวทางของ Google’s material design หลังจากที่การเปิดตัวเพียงไม่นาน และยังมีการปรับปรุงเพื่อใช้ Sass เป็น CSS preprocessor
ข้อดี
- รองรับ Responsive web design (สามารถปิดการใช้งานได้หากต้องการ)
- มี documentation ที่ครอบคลุม
ข้อเสีย
- ไฟล์ที่มาพร้อมแพกเก็จขนาด 276kB เป็นสไตล์ที่ไม่มีการใช้มากนัก
- จำนวนของ HTML class และ DOM element ที่มากเกินไปสามารถทำให้เกิดความยุ่งเหยิงและสับสนได้
เหมาะกับ ผู้ใช้งานเริ่มต้นและผู้ใช้งานที่ต้องการ front-end framework ที่แข็งแรง
2. Semantic-UI
สำหรับ framework ที่ออกมาใหม่ Semantic-UI โดดเด่นทั้งในหลายๆด้านและกำลังจะกลายเป็นหนึ่งใน front-end framework ยอดนิยมที่สุดอีกหนึ่งตัว
หลักของ Framework นี้อ้างถึงการสร้างความเรียบง่าย เพราะใช้ภาษาธรรมชาติ natural language มีโค้ดที่มีคำอธิบายในตัวมันเอง แม้แต่ผู้ที่มีประสบการณ์ในการเขียนโปรแกรมยังไม่มากก็ยังรู้สึกไม่อึดอัดเมื่อต้องทำงานกับ framework นี้
อีกหนึ่งคุณลักษณะที่โดดเด่นของ Semantic-UI คือการรวมรวบ array ที่น่าปวดหัวของ library บุคคลที่สามเอาไว้ ซึ่งในความเป็นจริงคุณอาจไม่จำเป็นต้องใช้งานของคนอื่น ดังนั้นขั้นตอนการพัฒนาจะง่ายขึ้นและมีประสิทธิภาพมากขึ้น
ข้อดี
- ชื่อของ Semantic class ทำมาให้ง่ายต่อการใช้ แม้แต่มือใหม่ก็สามารถเริ่มใช้งานได้ทันที
- ไฟล์ขนาดเล็กและใช้เวลาโหลดไม่นาน เพราะคุณสามารถโหลดเพียงแค่องค์ประกอบที่คุณต้องการ แต่ละส่วนมีไฟล์ JS และ stylesheet ของตัวเอง
- องค์ประกอบที่หลากหลายง่ายต่อการปรับใช้
ข้อเสีย
- แพกเก็จมีขนาดใหญ่มากเมื่อเทียบกับ Foundation และ Bootstrap
- ผู้ที่ต้องการออกแบบและพัฒนาที่ซับซ้อนอาจไม่เหมาะกับ framework นี้
เหมาะกับ ผู้ใช้งานเริ่มต้นและผู้ใช้งานที่ต้องการ front-end framework ที่เบาและรวดเร็ว
3. Foundation
สร้างโดยบริษัทออกแบบเว็บไซต์ Zurb โดย Foundation เป็น front-end framework ระดับองค์กรขั้นสูง ซึ่งเหมาะกับพัฒนาเว็บไซต์ responsive ให้มีความรวดเร็ว ถูกนำไปใช้บนเว็บไซต์เช่น Facebook, eBay และ Mozilla ยังค่อนข้างซับซ้อนและไม่เหมาะกับมือใหม่
Framework ที่ทรงพลังนี้ยังรองรับ GPU acceleration สำหรับแอนิเมชั่นที่เบา รวดเร็ว ลื่นไหลและ Fastclick.js สำหรับการแสดงผลที่รวดเร็วในอุปกรณ์มือถือ ทั้งยังทำงานบน Sass preprocessor รวมถึงการแลกเปลี่ยนข้อมูล (Foundation-developed data interchange) ที่จะช่วยให้คุณโหลด HTML ส่วนที่เบาสำหรับอุปกรณ์มือถือและส่วนที่หนักสำหรับหน้าจอที่ใหญ่ขึ้น สำหรับการเปรียบเทียบกันระหว่าง Foundation และ Bootstrap สามารถอ่านได้ที่ Bootstrap vs Foundation
ข้อดี
- ไม่มีสไตล์กำหนดไว้ จึงมีความยืดหยุ่นอย่างมาก
- ใช้ REM แทน pixel ช่วยลดความจำเป็นในการระบุค่าที่ชัดเจนของ width height และ attribute อื่นๆของแต่ละอุปกรณ์
ข้อเสีย
- ไฟล์มีขนาดใหญ่
- ค่อนข้างซับซ้อนสำหรับมือใหม่
เหมาะกับ นักพัฒนาที่มีประสบการณ์มาก่อนและผู้ที่คำนึงถึงการพัฒนาเว็บให้มีความเร็ว สวยงามและใช้ได้ทุกอุปกรณ์
4. Materialize
Materialize ยังเป็น front-end framework ที่ทำให้เกิดข้อกำหนดต่างๆของ Google’s material design และถูกโหลดใช้กับ ปุ่มพร้อมใช้งาน ไอคอน การ์ด ฟอร์มและองค์ประกอบอื่นๆ และมีทั้งเวอร์ชั่นมาตรฐานและเวอร์ชั่นที่ทำงานบน Sass
Materialize ประกอบไปด้วยคุณลักษณะ IZ column grid ที่สะดวกสบาย ซึ่งสามารถใช้กับ website layout ได้ และยังโหลดใช้ได้กับ CSS พร้อมใช้งานกับ shadow, ข้อความ, สีและคุณลักษณะอื่นๆของ Material design
คุณลักษณะเพิ่มเติม เช่น แอนิเมชั่นแบบ ripple effect, เมนูแบบ drag-out, Sass mixins และอีกมากมาย
ข้อดี
- Selection ขนาดใหญ่ขององค์ประกอบต่างๆ
- รองรับ Responsive เพื่อให้มั่นใจว่าเว็บไซต์นั้นรองรับทุกอุปกรณ์
ข้อเสีย
- ไฟล์ขนาดใหญ่ทำให้เป็น framework ที่หน่วง
- ไม่รองรับโมเดล Flexbox
เหมาะกับ นักพัฒนาที่มีประสบการณ์ไม่มากที่ต้องการแนวทางจากข้อกำหนดของ Google’s material design
5. Material UI
หากคุณกำลังมองหา Front-end framework ที่ทำให้ง่ายต่อการดำเนินการตามแนวทางของ Google’s material design คุณไม่ควรพลาด Material UI ซึ่งเป็น framework ที่ละเอียดที่สุดตามแนวทาง Google’s material design ในขณะนี้ แต่มีข้อแม้อย่างหนึ่ง มันไม่ได้หมายความว่าจะเป็นจุดเริ่มต้นสำหรับโครงการออกแบบเว็บไซต์ใหม่
โดยเต็มไปด้วย CSS ที่พร้อมใช้งานและส่วนประกอบที่สอดคล้องกับ Material design Material UI ใช้ CSS-in-JS solution เป็นการปลดล็อคคุณลักษณะที่ยอดเยี่ยมมากมายรวมถึงการ theme nesting, dynamic styles และ self-support เป็นต้น
ข้อดี
- เป็นวิธีการที่ง่ายที่สุดที่การปฏิบัติตามแนวของ Google’s material design เมื่อใช้ framework นี้
- ปรับใช้ได้ง่าย
ข้อเสีย
- ไม่ได้ทำมาเพื่อโปรเจคการออกแบบเว็บไซต์ที่ต้องเริ่มต้นตั้งแต่ต้น
- จำเป็นต้องมีความเข้าใจเกี่ยวกับ React เพื่อใช้งานได้อย่างมีประสิทธิภาพ
เหมาะกับ นักพัฒนาที่มีความเข้าใจหรือมีประสบการณ์เกี่ยวกับ React และผู้ที่ต้องการวิธีที่ง่ายในการปฏิบัติตามแนวของ Google’s material design
6. Pure
สร้างโดยทีมพัฒนาของ Yahoo Pure มาพร้อมกับความน้ำหนักเบา CSS ซึ่งสามารถใช้ในโปรเจคใดก็ได้ การใช้ Pure คุณสามารถสร้างปุ่ม เมนู grid ตาราง หรือคุณลักษณะอื่นๆแบบ responsive ได้อย่างง่ายดาย เพราะการที่เป็น CSS เพียงอย่างเดียว จึงไม่รองรับ JavaScript หรือ JQuery plugin
Pure จะทำงานเพียง 4.5 kB เมื่อถูกทำให้เล็กลงและบีบอัดด้วย Gzip จึงทำให้มันเป็น front-end framework ที่น้ำหนักเบาและรวดเร็วที่สุด และส่งผลดีเยี่ยมต่อการพัฒนาเว็บไซต์บนอุปกรณ์มือถือ นักพัฒนาจำนวนมากใช้มันอย่างแม่นยำ
ข้อดี
- น้ำหนักเบามาก โหลดได้รวดเร็วแม้แต่บนอุปกรณ์มือถือ
- array ที่ยืดหยุ่นของโมดูล CSS สามารถใช้ได้กับโปรเจคการพัฒนาและการออกแบบเว็บใดๆก็ได้
ข้อเสีย
- เป็นเพียง CSS อย่างเดียว ไม่รองรับ JavaScript หรือ JQuery plugin
เหมาะกับ นักพัฒนาที่ต้องการมุ่งเน้นการสร้างเว็บไซต์บนอุปกรณ์มือถือที่รวดเร็วและ responsive
7. Skeleton
Skeleton เป็น framework แบบ responsive น้ำหนักเบาที่มีโค้ดเพียง 400 บรรทัด framework นี้มีไว้เพื่อรวมเฉพาะหลักเกณฑ์พื้นฐานเพื่อให้คุณเริ่มต้นในการพัฒนาโปรเจคเว็บ ไม่ได้รวมทุกอย่างดังเช่น framework อื่น ๆ ตามที่กล่าวไว้ข้างต้น
Skeleton ยังเป็น responsive ยึดหลักตามระบบ 12-coulum grid system และรวมสิ่งจำเป็นสำคัญต่างๆ เช่น button, list, table, formเป็นต้น
ข้อดี
- น้ำหนักเบามาก
- เรียบง่ายและมีประโยชน์อย่างมากสำหรับโปรเจคขนาดเล็ก
ข้อเสีย
- ไม่รวมส่วนประกอบ selection ของ utility / style อย่างเช่นที่ framework ใหญ่กว่าทำ
เหมาะกับ ผู้ที่สร้างโปรเจคขนาดเล็กและไม่ต้องการองค์ประกอบของสไตล์ทั้งหมดจาก framework
8. UIKit
UIKit เป็น front-end framework ที่โดดเด่นจาก framework ส่วนใหญ่ด้วยเหตุผลหลายประการ ความจริงคือมันได้รวมทั้ง LESS และ Sass CSS preprocessor ไว้ด้วยกัน
โดยเต็มไปด้วยองค์ประกอบที่ว่องไวและ responsive พร้อมกับรูปแบบการตั้งชื่อที่สอดคล้องกัน UIKit ได้กลายเป็นหนึ่งใน front-end framework ยอดนิยมที่สุด
และส่วนประกอบแบบแยกส่วนได้มากกว่า 30 ชิ้นสามารถรวมเข้าด้วยกันเพื่อความอเนกประสงค์ที่มากขึ้น ซึ่งประกอบด้วย องค์ประกอบ navigation เช่น side navigation bar องค์ประกอบอื่นๆเช่น ฟอร์มและตารางของ HTML องค์ประกอบ JavaScript เช่นแถบ off-canvas และ modal dialog องค์ประกอบทั่วไปเช่นองค์ประกอบของ buttons, badges, and overlays และ layout รวมถึง responsive grid system ที่สมบูรณ์
ข้อดี
- ปรับใช้ได้ง่าย
- แยกส่วนชัดเจน คุณจึงสามารถเพิ่มองค์ประกอบต่างๆบน stylesheet โดยไม่มีผลกระทบกับสไตล์ทั้งหมด
- สร้าง user interface ขั้นสูงโดยใช้องค์ประกอบอย่าง nestables
ข้อเสีย
- มีข้อมูลไม่มากเรื่องจากยังเป็น framework ที่ยังใหม่
เหมาะกับ นักพัฒนาที่ประสบการณ์พอสมควรเนื่องจากมีขาดข้อมูลที่มีอยู่ในปัจจุบัน มิเช่นนั้นแล้วจะเป็น framework ที่ยอดเยี่ยมสำหรับทั้งโปรเจคเรียบง่ายและซับซ้อน
9. Milligram
Milligram เป็นอีกหนึ่ง framework ที่เบามากคล้ายกับ Skeleton เมื่อทำการบีบอัดโดย Gzip จะมีขนาดเพียง 2kB และใช้เพื่อให้นักพัฒนาเริ่มต้นได้ง่ายและสะดวก
Grid system ของ Milligram นั้นแตกต่างจากตัวอื่นเนื่องจากการใช้มาตรฐาน CSS Flexible Box Layout Module นอกจากนี้ยังมีองค์ประกอบที่สำคัญสำหรับการเริ่มต้นนั่นคือ typography, buttons, forms, lists, tables, blockquotes เป็นต้น
ข้อดี
- เบามาก มีขนาดเพียง 2kB เมื่อทำการบีบอัดโดย Gzip
- ใช้ CSS Flexbox เป็น the grid system
ข้อเสีย
- มีข้อมูลไม่มากเรื่องจากยังเป็น framework ที่ยังใหม่
- มีองค์ประกอบของ style ยังไม่มากเมื่อเทียบกับ framework ที่ใหญ่กว่า
เหมาะกับ นักพัฒนาที่ต้องการสร้างโปรเจคเล็กๆแต่ไม่ต้องการองค์ประกอบ style มากนักและต้องการใช้ CSS Flexbox the grid system
10. Susy
บางท่านอาจโต้แย้งว่า Susy ไม่ใช่ front-end framework ตามความหมายที่แท้จริงของมัน เพราะมุ่งเน้นไปที่การแก้ปัญหาความต้องการเลย์เอาต์ที่ซับซ้อน ในความเป็นจริงหลายคนจำแนก Susy เป็น grid maker และสามารถเป็นเครื่องมือที่ขาดไม่ได้สำหรับผู้ที่มีความต้องการเลย์เอาต์แบบพิเศษ
Susy ช่วยคุณทำงานด้วย mixins ที่สามารถใช้สร้าง grid ได้ framework ทำการคำนวณทั้งหมดให้คุณประหยัดเวลาและไม่ต้องเปลืองแรง
ด้วย Susy คุณสามารถสร้าง grid layout แบบใดก็ได้ หากคุณกำลังมองหาวิธีที่จะทำเช่นนี้ Susy อาจเป็นคำตอบ
ข้อดี
- ยืดหยุ่นอย่างมาก คุณสามารถสร้าง grid layout ใดก็ได้ตามที่คุณต้องการ
- ทำการคำนวณทั้งหมดโดยอัตโนมัติ
ข้อเสีย
- ไม่ครอบคลุมทุกด้านของการออกแบบเว็บไซต์ดังนั้นคุณยังคงต้องการ framework เพื่อให้ได้ผลลัพธ์ที่ต้องการ
- ไม่มี pre-built grid
เหมาะกับ ทุกคนที่ต้องการ layout ที่มีความพิเศษและเป็นเอกลักษณ์
รางวัลชมเชยของปี 2018
CSS Framework มีการพัฒนาอยู่ตลอดเวลาและ framework ใหม่ๆ ยังคงปรากฏขึ้นอย่างต่อเนื่อง เมื่อตรวจสอบรายการนี้ในปี 2018 เราสังเกตเห็น framework บางตัวที่เราคิดว่าควรได้รับการกล่าวถึงเช่นกัน มีดังต่อไปต่อนี้:
สถิติของ front-end framework
การตัดสินว่า framework ที่ใช้งานไม่ควรขึ้นอยู่กับความนิยมของมัน แต่ควรเลือกจากความเหมาะสมกับงานพัฒนาของคุณที่สุด ต้องบอกว่ามันอาจจะควรสนใจที่จะรู้ว่าแต่ละ framework มีการจัดอันดับกันในแง่ของ star / trend รายการต่อไปนี้แสดงจำนวน star บน GitHub ที่แต่ละโปรเจคมีในขณะที่เขียนบทความนี้ (แสดงจากรายการที่ติดดาวมากที่สุดไปติดดาวน้อยที่สุด)
- Bootstrap: 101,433 Stars
- Semantic-UI: 28,170 Stars
- Foundation: 24,127 Stars
- Materialize: 21,515 Stars
- Material UI: 19,631 Stars
- Pure: 14,967 Stars
- Skeleton: 12,622 Stars
- UIKit: 7,433 Stars
- Milligram: 4,195 Stars
- Susy: 3,506 Stars
นอกจากนี้จากการเปรียบเทียบ front-end framework 5 อันดับแรกที่ติดดาวบน Google Trends เราจะเห็นได้ว่า Bootstrap ยังค่อนข้างมีคะแนนนำในแง่ของการถูกกล่าวถึง
บทสรุป
อย่างที่คุณได้เห็น front end framework ที่แตกต่างกันให้ประโยชน์ที่แตกต่างกัน สิ่งใดที่เหมาะกับนักพัฒนาหรือโปรเจคนั้นอาจไม่ได้ผลกับอีกโปรเจคหนึ่งก็เป็นได้ ดังนั้นจึงจำเป็นที่จะต้องศึกษาวิธีการแก้ปัญหาที่หลากหลายก่อนที่จะตัดสินใจทำสิ่งใดสิ่งหนึ่ง
ดังนั้นก่อนที่จะเลือก front end framework ควรพิจารณาระดับความสามารถของคุณ รวมถึงข้อกำหนดขั้นพื้นฐานของโปรเจคที่คุณกำลังแก้ปัญหา มีโอกาสที่ต้องโซลูชันอย่างน้อยหนึ่งรายการในรายการนี้จะเหมาะกับคุณได้เป็นอย่างดี
บทความแปลจากเว็บไซต์: keycdn
Frontend Boot Camp with React and React Native
เรียนรู้การสร้าง Website ด้วย React
เรียนรู้การสร้าง Mobile Application แบบ Cross Platform ด้วย React Native
รายละเอียดเพิ่มเติมและสมัครที่นี่
หลักสูตรยาว 15 ครั้ง รวมเวลากว่า 90 ชั่วโมง จบมาทำงานได้จริง
ราคาคุ้มค่าที่สุด ตอนนี้มี promotion มา 2 คนลดเพิ่ม 10% 3 คนลดเพิ่ม 15%
สามารถขอ code ส่วนลดได้ที่ page LEAN upskill