Angular vs React vs Vue 2022

มีสามเฟรมเวิร์กสำหรับการสร้างเว็บแอปพลิเคชันที่นักพัฒนาส่วนหน้าทุกคนเคยได้ยินเกี่ยวกับ: React, Vue.js และ Angular

React เป็นไลบรารี UI Angular เป็นเฟรมเวิร์กส่วนหน้าที่สมบูรณ์ ในขณะที่ Vue.js เป็นเฟรมเวิร์กที่ก้าวหน้า

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

แต่ละเฟรมเวิร์กอิงตามส่วนประกอบและช่วยให้สร้างฟีเจอร์ UI ได้อย่างรวดเร็ว

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

สถาปัตยกรรม

ปฏิกิริยา

React ไม่ได้บังคับใช้โครงสร้างโปรเจ็กต์เฉพาะ และอย่างที่คุณเห็นจากตัวอย่าง “Hello World” อย่างเป็นทางการด้านล่าง คุณสามารถเริ่มใช้ React ด้วยโค้ดเพียงไม่กี่บรรทัด

 ReactDOM.render(
  <h1>สวัสดี ชาวโลก!</h1>,
  document.getElementById('root')
);

React สามารถใช้เป็นไลบรารี UI เพื่อแสดงผลองค์ประกอบ โดยไม่ต้องบังคับใช้โครงสร้างโปรเจ็กต์เฉพาะ และนั่นเป็นสาเหตุที่ไม่ใช่เฟรมเวิร์กที่เคร่งครัด

React Elements เป็นหน่วยการสร้างที่เล็กที่สุดของแอป React มีประสิทธิภาพมากกว่าองค์ประกอบ DOM เนื่องจาก React DOM ทำให้แน่ใจว่าจะอัปเดตอย่างมีประสิทธิภาพทุกครั้งที่มีการเปลี่ยนแปลง

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

React นั้นใช้ JavaScript แต่ส่วนใหญ่จะรวมเข้ากับ JSX (JavaScript XML) ซึ่งเป็นส่วนขยายไวยากรณ์ที่ให้คุณสร้างองค์ประกอบที่มี HTML และ JavaScript ได้ในเวลาเดียวกัน

ทุกสิ่งที่คุณสร้างด้วย JSX สามารถสร้างได้ด้วย React JavaScript API ด้วยเช่นกัน แต่นักพัฒนาส่วนใหญ่ชอบ JSX มากกว่าเพราะใช้งานง่ายกว่า

วิว

ไลบรารีหลักของ Vue.js เน้นที่เลเยอร์ View เท่านั้น เรียกว่าโปรเกรสซีฟเฟรมเวิร์กเพราะคุณสามารถขยายฟังก์ชันการทำงานด้วยแพ็คเกจที่เป็นทางการและของบริษัทอื่น เช่น Vue Router หรือ Vuex เพื่อเปลี่ยนเป็นเฟรมเวิร์กจริง

แม้ว่า Vue จะไม่เกี่ยวข้องกับรูปแบบ MVVM (Model-View-ViewModel) อย่างเคร่งครัด แต่การออกแบบก็ได้รับแรงบันดาลใจส่วนหนึ่งจากรูปแบบนี้ ด้วย Vue คุณจะทำงานกับเลเยอร์ ViewModel เป็นส่วนใหญ่ เพื่อให้แน่ใจว่าข้อมูลแอปพลิเคชันได้รับการประมวลผลในลักษณะที่ช่วยให้กรอบงานแสดงมุมมองที่เป็นปัจจุบัน

ไวยากรณ์เทมเพลตของ Vue ช่วยให้คุณสร้างคอมโพเนนต์ View และรวม HTML ที่คุ้นเคยเข้ากับคำสั่งและคุณลักษณะพิเศษ ควรใช้รูปแบบเทมเพลตนี้ แม้ว่าจะรองรับ JavaScript ดิบและ JSX ก็ตาม

ส่วนประกอบใน Vue มีขนาดเล็ก มีส่วนประกอบในตัว และสามารถนำมาใช้ซ้ำได้ตลอดแอปพลิเคชัน Single File Components ( .vue ) ที่มีนามสกุล .vue ประกอบด้วย HTML, CSS และ JavaScript เพื่อให้โค้ดที่เกี่ยวข้องทั้งหมดอยู่ในไฟล์เดียว

SFC เป็นวิธีที่แนะนำในการจัดระเบียบโค้ดในโปรเจ็กต์ Vue.js โดยเฉพาะอย่างยิ่งโค้ดที่ใหญ่กว่า เครื่องมือเช่น Webpack หรือ Browserify จำเป็นต้องแปลง SFC เป็นโค้ด JavaScript ที่ใช้งานได้

เชิงมุม

ในบทความนี้ ฉันกำลังพูดถึง Angular 2 และไม่ใช่เวอร์ชันแรกของเฟรมเวิร์กที่ตอนนี้รู้จักกันในชื่อ AngularJS

AngularJS ซึ่งเป็นเฟรมเวิร์กดั้งเดิมคือเฟรมเวิร์ก MVC (Model-View-Controller)) แต่ใน Angular 2 ไม่มีความเกี่ยวข้องที่เข้มงวดกับรูปแบบ MV* เนื่องจากเป็นแบบอิงองค์ประกอบด้วย

โครงการใน Angular มีโครงสร้างเป็นโมดูล ส่วนประกอบ และบริการ แอปพลิเคชันเชิงมุมแต่ละรายการมีส่วนประกอบหลักอย่างน้อยหนึ่งรายการและโมดูลรากหนึ่งชุด

แต่ละองค์ประกอบใน Angular มีเทมเพลต คลาสที่กำหนดตรรกะของแอปพลิเคชัน และ MetaData (Decorators) ข้อมูลเมตาสำหรับส่วนประกอบจะบอก Angular ว่าจะหาหน่วยการสร้างที่ต้องการเพื่อสร้างและนำเสนอมุมมองได้จากที่ใด

เทมเพลตเชิงมุมเขียนด้วย HTML แต่ยังสามารถรวมไวยากรณ์เทมเพลตเชิงมุมพร้อมคำสั่งพิเศษเพื่อส่งออกข้อมูลเชิงโต้ตอบและแสดงองค์ประกอบหลายรายการ

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

Angular สร้างขึ้นใน TypeScript ดังนั้นจึงแนะนำให้ใช้งานเพื่อให้ได้ประสบการณ์ที่ราบรื่นที่สุด แต่ยังรองรับ JavaScript ธรรมดาอีกด้วย

ความนิยม

ปฏิกิริยา

React เป็นหนึ่งในโปรเจ็กต์ JavaScript ยอดนิยมที่มีดาว 160,000 ดวงบน GitHub ได้รับการพัฒนาและดูแลโดย Facebook และมีการใช้ภายในในหลายโครงการ นอกจากนี้ยังให้บริการเว็บไซต์มากกว่า 2 ล้านแห่งตามสถิติการใช้งานของ BuiltWith

วิว

จากสามเฟรมเวิร์ก Vue มีดาวมากที่สุดบน GitHub โดยมีดาว 176k โครงการนี้ได้รับการพัฒนาและนำโดย Evan You อดีต Googler เป็นโครงการอิสระที่แข็งแกร่งมากในชุมชนโอเพ่นซอร์สและมีการใช้งานโดยเว็บไซต์มากกว่า 1 ล้านแห่งตาม BuiltWith

เชิงมุม

Angular ได้รับการพัฒนาโดย Google แต่น่าแปลกที่มันไม่ได้ใช้ในผลิตภัณฑ์เรือธงบางตัว เช่น Search หรือ Youtube มักใช้ในโครงการระดับองค์กร และสนับสนุนเว็บไซต์กว่า 97,000 แห่งโดยอิงจากข้อมูลของ BuiltWith

มันติดดาวน้อยที่สุดในสามเฟรมเวิร์กโดยมี 68k stars บน GitHub อย่างไรก็ตาม เมื่อเปลี่ยนจาก Angular 1 เป็น Angular 2 พวกเขาสร้างที่เก็บใหม่ทั้งหมด แทนที่จะดำเนินการโครงการ AngularJS ซึ่งมีดาว 59,000 ดวงต่อไป

ระบบนิเวศ

แพ็คเกจโอเพ่นซอร์สช่วยประหยัดเวลาอันมีค่าของคุณเมื่อพัฒนาแอปพลิเคชัน ไม่เพียงแค่นั้น แต่มักจะดีกว่าส่วนประกอบและแพ็คเกจที่ทำเองเพราะผ่านการทดสอบการรบแล้ว

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

ปฏิกิริยา

แอปพลิเคชันส่วนหน้าจำนวนมากใช้การจัดการสถานะส่วนกลางเพื่อจัดเก็บข้อมูล เช่น ใครที่เข้าสู่ระบบและการตั้งค่าผู้ใช้อื่นๆ

โปรเจ็กต์ยอดนิยมสำหรับการจัดการสถานะ JavaScript คือ Redux นักพัฒนาส่วนใหญ่ใช้การผูก React อย่างเป็นทางการสำหรับ Redux ซึ่งดูแลโดยทีม Redux

เนื่องจากความนิยมของ React การค้นหาส่วนประกอบอินพุตและองค์ประกอบที่พร้อมใช้งานจึงเป็นเรื่องง่ายมาก ทั้งหมดนี้เป็นเพียงการค้นหาของ Google หรือ GitHub

ระบบนิเวศ React ยังรวมถึง React Native ที่ให้คุณสร้างแอปพลิเคชัน iOS และ Android ดั้งเดิมจากฐานโค้ดเดียวที่เขียนใน React ดังนั้น React จึงเป็นตัวเลือกที่ยอดเยี่ยมสำหรับการสร้างแอปพลิเคชันบนมือถือโดยใช้เทคโนโลยีเว็บเช่นกัน

React เป็นส่วนหนึ่งของ MERN stack ซึ่งมี MongoDB, ExpressJS, React และ NodeJS สิ่งที่ยอดเยี่ยมเกี่ยวกับชุดค่าผสมนี้คือภาษาเดียว — JavaScript — ขับเคลื่อนแอปพลิเคชันทั้งหมด

วิว

แม้ว่า Redux สามารถใช้ใน Vue ได้ แต่ก็ไม่มีการผูกมัดอย่างเป็นทางการ แต่นั่นไม่ควรทำให้คุณกังวลเพราะ Vuex เป็นไลบรารีการจัดการสถานะอย่างเป็นทางการที่สร้างขึ้นสำหรับแอปพลิเคชัน Vue โดยเฉพาะ นอกเหนือจากการผสานรวมกับ Vue ได้เป็นอย่างดีแล้ว การดีบักโดยใช้เครื่องมือสำหรับนักพัฒนาของ Vue นั้นทำได้ง่าย

ในช่วงแรก ๆ ของ Vue เป็นการยากที่จะหาส่วนประกอบที่พร้อมใช้งาน เนื่องจากชุมชนเติบโตขึ้น มีส่วนประกอบอินพุตและองค์ประกอบขั้นสูงมากมายที่คุณสามารถใช้เพื่อเร่งการพัฒนาของคุณ

สำหรับการพัฒนาแอพมือถือ มีโปรเจ็กต์ที่กำลังมาแรงชื่อว่า Weex Weex ได้รับการพัฒนาและใช้งานโดย Alibaba แต่ก็ไม่ได้เติบโตเต็มที่และทรงพลังเท่ากับ React Native ยิ่งไปกว่านั้น เนื่องจากโครงการได้รับการพัฒนาและใช้งานในประเทศจีนมากขึ้น การค้นหาเอกสารและวิธีแก้ปัญหาเป็นภาษาอังกฤษจึงยากขึ้น

Vue ทำงานร่วมกับ Laravel ได้เป็นอย่างดี และนั่นเป็นเหตุผลว่าทำไมจึงมักใช้ร่วมกัน Laravel เสนอโครงสร้างนั่งร้าน JavaScript และ CSS ที่สมบูรณ์เพื่อเปิดใช้งานการใช้ Vue ในโครงการใหม่

เชิงมุม

สำหรับการจัดการสถานะใน Angular คุณสามารถใช้โปรเจ็กต์ NgRx ได้รับแรงบันดาลใจจาก Redux แต่สร้างขึ้นเฉพาะสำหรับ Angular

ในกรณีของ Vue และ React มีส่วนประกอบพร้อมใช้งานมากมายที่คุณสามารถนำเข้าไปยังโครงการของคุณได้ สิ่งที่แตกต่างกันเล็กน้อยเกี่ยวกับ Angular คือมีส่วนประกอบที่เป็นทางการมากมายในโครงการ Angular Material นี่เป็นโครงการอย่างเป็นทางการของ Google ที่นำเสนอส่วนประกอบการออกแบบวัสดุสำหรับแอปพลิเคชันเชิงมุม

คุณสามารถสร้างแอปพลิเคชันมือถือข้ามแพลตฟอร์มใน Angular โดยใช้ NativeScript รองรับ Vue เช่นกัน แต่การรองรับ Angular นั้นมีความเป็นผู้ใหญ่มากกว่า

Angular เป็นส่วนหนึ่งของ MEAN stack ที่รู้จักกันดีซึ่งรวม Angular กับ MongoDB, ExpressJS และ NodeJS เช่นเดียวกับ MERN stack มันอาศัย JavaScript ทั้งหมดสำหรับทั้ง front-end และ back-end

เทคโนโลยีทั่วไป

สามารถใช้ Angular, React และ Vue เพื่อพัฒนา Progressive Web App หรือที่เรียกว่า PWAs

PWA ไม่ใช่แอปพลิเคชันมือถือ แต่เป็นเว็บแอปพลิเคชันที่ผู้ใช้สมาร์ทโฟนสามารถเพิ่มเป็นทางลัดไปยังหน้าจอหลักและให้รูปลักษณ์และความรู้สึกคล้ายกับแอปมือถือทั่วไป

คุณยังสามารถค้นหาเทมเพลตระดับพรีเมียมและแอปพลิเคชันที่สร้างไว้ล่วงหน้าสำหรับแต่ละเฟรมเวิร์กได้ แต่ Angular และ React มีตัวเลือกระดับพรีเมียมมากกว่า Vue

ประสิทธิภาพ

เมื่อเลือกเฟรมเวิร์กหรือไลบรารี คุณต้องคำนึงถึงประสิทธิภาพด้วย

ในหลายกรณี คุณจะไม่ต้องกังวลเรื่องประสิทธิภาพ โดยเฉพาะอย่างยิ่ง หากคุณกำลังสร้างโครงการขนาดเล็ก อย่างไรก็ตาม ยิ่งโครงการมีขอบเขตและความซับซ้อนมากขึ้นเท่าใด ประสิทธิภาพ (และจะ) กลายเป็นข้อกังวลได้

สิ่งสำคัญที่ควรทราบคือคุณภาพของการพัฒนาและการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดสำหรับประสิทธิภาพของเว็บมีความสำคัญมากกว่าการเลือกเฟรมเวิร์ก

แต่เนื่องจากมีตัวชี้วัดประสิทธิภาพและความแตกต่างอยู่บ้าง ฉันจะพิจารณาและอธิบายว่าแต่ละรายการจะส่งผลต่อความพยายามในการพัฒนาของคุณอย่างไร

เกณฑ์มาตรฐาน JS Framework: Angular vs React vs Vue

ผลลัพธ์ของเกณฑ์มาตรฐาน JS Framework แสดงให้เห็นว่าทั้งหมดทำงานได้ดีในการวัดประสิทธิภาพส่วนใหญ่ เช่น การสร้างหรือต่อท้ายแถวในตาราง

ดังที่คุณเห็นด้านบน Vue นั้นช้ากว่า Angular และ React มากในการเลือกแถว ในทางกลับกัน Angular และ React นั้นไม่ค่อยมีประสิทธิภาพในการสลับแถว

นี่เป็นข้อแตกต่างที่สำคัญเพียงอย่างเดียวในการวัดประสิทธิภาพ - และในกรณีส่วนใหญ่ จะไม่ให้ผลลัพธ์ที่เห็นได้ชัดเจน เนื่องจากการเลือกแถวเป็นฟังก์ชันที่ใช้กันทั่วไปมากกว่าการสลับแถว ฉันจึงพูดได้ว่าเกณฑ์มาตรฐานนี้ทำให้ Vue อยู่ในอันดับที่สามรองจาก Angular และ React ที่แชร์ตำแหน่งบนสุด

เมื่อพูดถึงหน่วยความจำและเวลาในการบูท React และ Vue ทำคะแนนได้ดีมาก แต่ Angular นั้นช้ากว่าเล็กน้อย Angular อาจใช้เวลา 150 มิลลิวินาทีในการบูตสคริปต์พื้นฐานและต้องใช้หน่วยความจำเพิ่มขึ้นจึงจะสามารถทำงานได้

Perf Track: Angular vs React vs Vue

Perf Track โดย Google Chrome Labs แสดงข้อมูลการผลิตจากเว็บไซต์หลายพันแห่ง สถิติเหล่านี้ได้รับผลกระทบจากสิ่งอื่น ๆ มากมาย และไม่เพียงแต่กรอบการทำงานที่เลือกเท่านั้น แต่มาดูตัวเลขกัน

First Contentful Paint

เว็บไซต์ Vue และ React มีอันดับสูงกว่าสำหรับเมตริกนี้ เมื่อเทียบกับ Angular ที่อาจใช้เวลาในการบูตและนำเสนอเนื้อหาแก่ผู้ใช้มากขึ้น

ระบายสีเนื้อหาที่ใหญ่ที่สุด

Angular ยังช้าที่สุดในสามเฟรมเวิร์กในการแสดงหน้าที่สมบูรณ์ โดยมีเพียง 27 เปอร์เซ็นต์ของเว็บไซต์ Angular ที่ให้คะแนนในช่วงที่ยอมรับได้

ความล่าช้าในการป้อนข้อมูลครั้งแรก

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

JavaScript ไบต์

แอปพลิเคชั่นที่มีน้ำหนักเบาที่สุดคือแอพพลิเคชั่นที่พัฒนาด้วย Vue โดย 68 เปอร์เซ็นต์ของแอพ Vue โหลด JavaScript น้อยกว่า 1MB ในทางกลับกัน แอปพลิเคชัน Angular และ React มักจะมีขนาดโค้ดที่ใหญ่กว่า

วิธีใช้เมตริกเหล่านี้

คุณสามารถเห็นแนวโน้มจากตัวเลขเหล่านี้ แต่คุณไม่ควรด่วนสรุป สำหรับรูปสุดท้าย คำอธิบายอาจเป็นได้ว่า Vue ถูกใช้เพื่อพัฒนาแอปพลิเคชั่นที่มีน้ำหนักเบากว่า ในขณะที่ Angular ใช้สำหรับโปรเจ็กต์ขนาดใหญ่

สถิติสามารถช่วยชี้แนะคุณในการตัดสินใจที่ดี แต่คุณไม่สามารถใช้สถิติเหล่านี้เพื่อพิสูจน์ว่าเฟรมเวิร์กหนึ่งเร็วกว่าหรือดีกว่าอีกเฟรมเวิร์กหนึ่งได้

คุณสมบัติขั้นสูง

สำหรับแอปพลิเคชันขั้นสูง เฟรมเวิร์กส่วนหน้าที่ใช้งานควรสามารถทำงานบางอย่างที่ปรับปรุงประสิทธิภาพและปรับขนาดได้ดีขึ้น

เทคโนโลยีสองอย่างที่สำคัญคือการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) และการจำลองเสมือน

ปฏิกิริยา

React รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วยแพ็คเกจ ReactDOMServer อย่างเป็นทางการ สำหรับการจำลองเสมือน คุณสามารถใช้เครื่องมือของบริษัทอื่นที่ชื่อ React Virtualized

วิว

รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ใน Vue เช่นเดียวกับแพ็คเกจ SSR อย่างเป็นทางการ นอกจากนี้ คุณยังสามารถใช้เฟรมเวิร์ก Nuxt.js ซึ่งสร้างขึ้นบน Vue และรองรับ SSR

ตัวเลือกการจำลองเสมือนใน Vue นั้นไม่แข็งแกร่งนัก ในความเห็นของฉัน Vue Virtual Scroll List เป็นทางออกที่ดีที่สุดสำหรับการเลื่อนแบบเสมือน แต่มันค่อนข้างบั๊กและไม่เสถียรเท่าตัวเลือกสำหรับ React และ Angular

เชิงมุม

Angular มีแพ็คเกจ Angular Universal อย่างเป็นทางการสำหรับ SSR และส่วนประกอบอย่างเป็นทางการสำหรับการเลื่อนแบบเสมือนและการแสดงรายการขนาดใหญ่อย่างมีประสิทธิภาพ

เส้นโค้งการเรียนรู้

การเรียนรู้แต่ละเฟรมเวิร์กเหล่านี้ง่ายเพียงใด

เพื่อตอบคำถามนี้ เราต้องดูความซับซ้อนของแต่ละเฟรมเวิร์กและแนวคิดที่พวกเขาแนะนำ

ปฏิกิริยา

ในกรณีการใช้งานพื้นฐานที่สุด React นั้นซับซ้อนน้อยที่สุดในสามเฟรมเวิร์ก นั่นเป็นเพราะคุณจะต้องนำเข้าไลบรารี่เท่านั้น จากนั้นคุณสามารถเริ่มเขียนแอปพลิเคชัน React ของคุณด้วยโค้ดไม่กี่บรรทัด

แต่นอกเหนือจากตัวอย่าง Hello World แล้ว แอปพลิเคชัน React ส่วนใหญ่จะเป็นแบบอิงส่วนประกอบ และไม่ได้แสดงองค์ประกอบบางอย่างบนหน้าเท่านั้น

สิ่งหนึ่งที่นักพัฒนาซอฟต์แวร์บางคนพบว่า React แปลกหรือยากคือการเรียนรู้ JSX เป็นถนนทางเดียว คุณสามารถใช้ JavaScript แบบดิบได้เช่นกัน แต่เนื่องจากนักพัฒนา React ส่วนใหญ่ใช้ JSX การเรียนรู้จึงเป็นสิ่งที่หลีกเลี่ยงไม่ได้

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

วิว

Vue นั้นซับซ้อนกว่าเล็กน้อยในการตั้งค่ามากกว่า React คุณสามารถใช้มันเป็นไลบรารีเพื่อกำหนดส่วนประกอบที่คุณสามารถใช้ได้ตลอดทั้ง HTML ของคุณ — แต่คล้ายกับ React นี่ไม่ใช่วิธีการสร้างโปรเจ็กต์ส่วนใหญ่

โปรเจ็กต์ Vue ส่วนใหญ่จะมีองค์ประกอบรูทชื่อ App.vue และส่วนประกอบย่อยจำนวนหนึ่งสำหรับแสดงสิ่งต่าง ๆ

เมื่อพูดถึงไวยากรณ์ สิ่งเดียวที่คุณต้องเรียนรู้คือไวยากรณ์เทมเพลตของ Vue ซึ่งเข้าใจได้ง่ายมากหากคุณรู้ HTML คำสั่งพื้นฐาน เช่น v-if และ v-for สำหรับการแสดงผลตามเงื่อนไขและการแสดงรายการ เข้าใจง่ายแม้สำหรับผู้เริ่มต้น

นอกจากนี้ คอมโพเนนต์ไฟล์เดียวของ Vue ยังเก็บโค้ดส่วนหน้าทั้งหมดไว้ในที่เดียว ทำให้ง่ายต่อการจัดระเบียบโครงการใหม่

ในความคิดของฉัน Vue เป็นวิธีที่ง่ายที่สุดในการเรียนรู้ เนื่องจากความเรียบง่ายและไวยากรณ์ที่เข้าใจง่าย

เชิงมุม

Angular มีโครงสร้างโปรเจ็กต์ที่ซับซ้อนที่สุดจากทั้งสาม และเนื่องจากเป็นเฟรมเวิร์กส่วนหน้าที่สมบูรณ์ จึงอาศัยแนวคิดมากกว่า

นอกเหนือจากส่วนประกอบแล้ว Angular ยังรองรับโมดูลและบริการอีกด้วย คาดหวังให้คุณเขียนและออกแบบ codebase ของคุณในแบบเฉพาะที่ทำให้โครงการของคุณสามารถบำรุงรักษาได้มากขึ้นเมื่อขยายใหญ่ขึ้น

สำหรับไวยากรณ์ เนื่องจาก Angular ทำงานได้ดีที่สุดกับ TypeScript คุณจึงควรรู้จัก TypeScript เมื่อสร้างโปรเจ็กต์ Angular

เช่นเดียวกับ Vue คุณต้องทำความคุ้นเคยกับไวยากรณ์ที่เหมือน HTML เพื่อให้คุณสามารถเริ่มเขียนโค้ดคุณลักษณะ UI ใหม่ด้วย Angular

ในความคิดของฉัน Angular นั้นเรียนรู้ได้ยากที่สุดสำหรับ Developer ทั่วไป เพราะมันซับซ้อนกว่าและอาศัย TypeScript

การคาดการณ์ในอนาคต

โครงการโอเพ่นซอร์สและเฟรมเวิร์กจำนวนมากหายไปจากการถูกลืมเลือนและไม่ได้รับการดูแล คุณควรกังวลเกี่ยวกับเฟรมเวิร์กใด ๆ ที่เรากำลังพูดถึงที่นี่หรือไม่?

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

ปฏิกิริยา

React v17.0 ได้รับการเผยแพร่แล้ว แต่น่าประหลาดใจที่มันไม่มีฟีเจอร์ใหม่สำหรับนักพัฒนา

การเปลี่ยนแปลงที่สำคัญคือเวอร์ชันใหม่นี้ทำให้อัปเกรด React ได้ง่ายขึ้น คุณสามารถอัปเกรดเพียงบางส่วนของ React จากเวอร์ชันเก่าไปเป็นเวอร์ชันที่ใหม่กว่า โดยไม่ต้องอัปเกรดทั้งโปรเจ็กต์

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

React เติบโตขึ้น 44 เปอร์เซ็นต์ตั้งแต่ปีที่แล้วในการดาวน์โหลด npm รายสัปดาห์ ในจำนวนที่แน่นอน ยังคงเป็นโครงการที่ดาวน์โหลดมากที่สุดในสามโครงการ

วิว

Vue 3 เปิดตัวในเดือนกันยายน 2020 และจัดการปัญหาร้ายแรงมากมายที่ Vue 2 มีในโครงการขนาดใหญ่ แนะนำ Composition API ซึ่งได้รับแรงบันดาลใจจาก React Hooks และทำให้นำตรรกะมาใช้ซ้ำในส่วนประกอบต่างๆ ได้ง่ายขึ้น

โปรเจ็กต์ทั้งหมดถูกเขียนใหม่ใน TypeScript ซึ่งช่วยปรับปรุงการรองรับ TypeScript ในโครงการ Vue ใหม่ ในขณะเดียวกันก็ทำให้โปรเจ็กต์สามารถบำรุงรักษาได้มากขึ้น

Vue 3 เป็นการอัพเกรดที่จำเป็นมากและทำให้ Vue เหมาะสมยิ่งขึ้นสำหรับโครงการขนาดใหญ่

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

เชิงมุม

Angular เพิ่งเปิดตัว Ivy Compiler ช่วยลดเวลาในการสร้าง เพิ่มประสิทธิภาพสินทรัพย์ ช่วยให้การทดสอบเร็วขึ้น และโดยทั่วไปจะปรับปรุงประสบการณ์ของนักพัฒนาซอฟต์แวร์

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

Angular เติบโตขึ้นประมาณ 50 เปอร์เซ็นต์ในการดาวน์โหลดรายสัปดาห์ตั้งแต่ปีที่แล้ว ดังนั้นจึงยังคงเป็นโครงการยอดนิยม

บทสรุป

Angular, React และ Vue ทั้งหมดอยู่ภายใต้การพัฒนาอย่างแข็งขัน พวกเขาออกเวอร์ชันใหม่อย่างสม่ำเสมอและดูแลรักษาเวอร์ชันที่มีอยู่ เนื่องจากระดับการสนับสนุนในปัจจุบันสูงในแต่ละกรณี คุณจึงสามารถใช้เฟรมเวิร์กใดๆ เหล่านี้ได้อย่างปลอดภัย

สิ่งสำคัญที่ควรทราบคือ Angular ไม่ได้เติบโตเร็วเหมือนเมื่อก่อน ในขณะที่ Vue - แม้ว่าจะเพิ่งเริ่มต้นขึ้นเมื่อเร็วๆ นี้ - ดูเหมือนว่าจะเติบโตอย่างมาก

ตามที่กล่าวไว้ก่อนหน้านี้ เราไม่สามารถคาดการณ์ได้ว่ากรอบงานใดจะยังคงมีความเกี่ยวข้องในระยะยาว แต่แต่ละโครงการมีชุมชนที่ยอดเยี่ยมอยู่เบื้องหลังและมีการพัฒนาอย่างต่อเนื่อง

เป้าหมายของฉันในบทความนี้คือการอธิบายความแตกต่างทางสถาปัตยกรรม ทำลายจุดแข็งและจุดอ่อนของแต่ละเฟรมเวิร์ก และเปรียบเทียบแต่ละเฟรมเวิร์กที่เกี่ยวข้อง

ก่อนที่จะเข้าสู่กรอบการทำงานใหม่ มีบางสิ่งที่ควรพิจารณา

ประการแรก ประสบการณ์ของทีมอาจเป็นปัจจัยในการตัดสินใจเลือกเทคโนโลยีใหม่

ในทำนองเดียวกัน คุณต้องพิจารณาถึงความสามารถที่มีอยู่ในพื้นที่ของคุณ เพื่อที่คุณจะสามารถจ้างนักพัฒนาสำหรับโครงการของคุณได้

สุดท้าย เมื่อพูดถึงตัวโปรเจ็กต์เอง ความซับซ้อนและขอบเขตก็อาจส่งผลต่อการเลือกเฟรมเวิร์กของคุณได้เช่นกัน

เมื่อพิจารณาถึงความแตกต่างที่สำคัญทั้งหมดแล้ว ฉันหวังว่าคุณจะสามารถตัดสินใจได้ว่ากรอบงานส่วนหน้าใดดีที่สุดสำหรับเป้าหมายและความต้องการของคุณ