การเปรียบเทียบเฟรมเวิร์ก JavaScript ขั้นสูงสุด: Angular vs React

คำถามที่ฉันถามเกือบทุกวันคือฉันควรเริ่มด้วย ReactJS หรือ Angular หรือไม่ อย่างไรก็ตาม ก่อนที่ฉันจะดำเนินการใด ๆ เพิ่มเติม ให้ฉันให้ข้อจำกัดความรับผิดชอบ

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

อาร์กิวเมนต์เชิงตรรกะ

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

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

มาเริ่มกันที่ Angular ข้อจำกัดความรับผิดชอบอื่น: เมื่อฉันพูด Angular ฉันกำลังพูดถึง Angular 4 ไม่ใช่ AngularJS

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

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

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

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

คุณพบแนวทางปฏิบัติที่ดีที่สุดและปัญหาทั้งหมดหายไป แต่นั่นจะเพิ่มช่วงการเรียนรู้

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

คิดว่ามันเหมือนกับการวาง HTML ไว้ใน JavaScript โดยมีการเปลี่ยนแปลงสองสามอย่าง: คุณไม่สามารถใช้แอตทริบิวต์ class และคุณต้องใช้ชื่อคลาส

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

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

ผู้ชนะ: มันเสมอกัน

ประสิทธิภาพ

การเปรียบเทียบประสิทธิภาพของ Angular กับ React โดยตรงนั้นไม่ยุติธรรม Angular เป็นเฟรมเวิร์กแบบ front-to-back ที่สมบูรณ์ ซึ่งรวมเอา routing, form tools, HTTP library, Reactive extensions เป็นต้น คุณสมบัติทั้งหมดเหล่านี้ขยายเฟรมเวิร์กและทำให้ช้าลง อย่างไรก็ตาม ปฏิกิริยาโดยตัวมันเองเป็นเพียงไลบรารีมุมมอง ซึ่งมีขนาดเล็กกว่าและเร็วกว่ามาก

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

การเปลี่ยนแปลงจาก Angular 2 เป็น Angular 4ภายใต้ประทุนที่พวกเขาทำค่อนข้างน้อยเพื่อเพิ่มประสิทธิภาพ Angular 4 ทำได้ดีกว่า Angular 2 อย่างไรก็ตาม React ยังคงชนะในแผนก Performance

เชิงมุมเทียบกับปฏิกิริยา ที่มา: Academind.com

ผู้ชนะ: React

คุณสมบัติ

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

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

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

Angular ยังรองรับ MVC (ตัวควบคุม Model View) หรืออย่างน้อยก็ด้านที่แตกต่างจากรูปแบบการออกแบบนั้น นอกจากนี้ยังมาพร้อมกับคุณสมบัติที่ช่วยให้คุณใช้งานการทดสอบได้อย่างง่ายดาย ทั้งการทดสอบหน่วยและการทดสอบแบบ end-to-end Angular อัดแน่นไปด้วยคุณสมบัติในการสร้างแอปพลิเคชันส่วนหน้าระดับองค์กร ในทางกลับกันไม่ได้มีส่วนสำคัญมากนัก อย่างไรก็ตาม คุณสามารถเพิ่มสิ่งต่าง ๆ เพื่อให้คุณลักษณะที่ Angular รวมไว้ตั้งแต่แกะกล่องและคุณลักษณะเพิ่มเติมบางอย่าง

React ใช้ DOM เสมือนซึ่งมีประสิทธิภาพมาก มันสร้าง Dom จริงในเวอร์ชันน้ำหนักเบาและรวมและอัปเดตเฉพาะสิ่งที่จำเป็นแทนที่จะรีเฟรชทั้งรายการ Virtual DOM เป็นเหตุผลหลักที่ทำให้ React ทำงานได้รวดเร็วมาก

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

Core React นั้นยากที่จะรักษาสถานะระดับแอพ สถานะคอมโพเนนต์เป็นเรื่องง่าย แต่ถ้าคุณต้องการการจัดการสถานะระดับแอปที่แท้จริง คุณจะต้องใช้ Redux หรือ Flux ซึ่งฉันพูดไปก่อนหน้านี้ค่อนข้างสับสนในการเรียนรู้ แพ็คเกจภายนอกที่มักใช้เช่น React router เวอร์ชัน 4 ใหม่นั้นเข้าใจยาก แต่ก็มีประสิทธิภาพมากเมื่อเรียนรู้ที่จะเรียกใช้และตั้งค่า มีหลายวิธีในการใช้งานเช่นกัน React ไม่มีองค์ประกอบ HTTP หลักเหมือนที่ Angular มี แต่คุณสามารถใช้ Fetch หรือ Axios ซึ่งเป็นไคลเอนต์ HTTP ภายนอก จากนั้น Enzyme นั้นเป็นที่นิยมสำหรับการรับรอง React มีแพ็คเกจต่าง ๆ ที่มักใช้กับ React แม้ว่าจะไม่ได้เป็นส่วนหนึ่งของไลบรารีจริงก็ตาม

ในขณะที่เทคโนโลยีทั้งสองมีคุณลักษณะจำนวนมากร่วมกัน หากคุณเพียงแค่เปรียบเทียบเทคโนโลยีหลักแล้ว Angular จะเป็นผู้ชนะ

ผู้ชนะ: Angular

เครื่องมือช่าง

Angular และ React มีอินเตอร์เฟสบรรทัดคำสั่งที่ค่อนข้างดี แอป Angular CLI และ Create React นั้นยอดเยี่ยมมากและช่วยให้เราพัฒนาการพัฒนาได้อย่างคล่องตัว Angular CLI มีประสิทธิภาพมากกว่าเล็กน้อย เนื่องจากเราสามารถสร้างสิ่งต่างๆ เช่น ส่วนประกอบและบริการได้อย่างรวดเร็ว Create React ทำไม่ได้ คุณต้องสร้างทุกอย่างด้วยตัวเองจนถึงไฟล์และโครงสร้างพื้นฐาน ทั้งสองระบบใช้ web pack มีเซิร์ฟเวอร์ dev ที่โหลดอัตโนมัติและมีเครื่องมือในการคอมไพล์และสร้าง เห็นได้ชัดว่า Angular มีหน้าที่เพิ่มเติมในการ transpiling typescript CLI มีสคริปต์สำหรับสิ่งนั้นเมื่อเราเรียกใช้ ng เสิร์ฟ ทั้งหมดที่เกิดขึ้นเบื้องหลัง มันใช้สิ่งที่เรียกว่า TSC หรือ Typescript Compiler สำหรับสิ่งนั้นและทั้งคู่ก็มีเครื่องมือทดสอบเช่นกัน Create React App ใช้ Jest สำหรับการทดสอบ จากนั้นส่วนหนึ่งของเครื่องมือเหล่านี้คือความสามารถในการสร้างแอปพลิเคชันของคุณไปสู่การใช้งานจริงในสินทรัพย์แบบคงที่ ซึ่งคุณสามารถอัปโหลดไปยังเซิร์ฟเวอร์หรือวางไว้ในโฟลเดอร์ไคลเอ็นต์แบ็คเอนด์ได้

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

สวยทั้งคู่แม้อยู่ในแผนกนั้น

ผู้ชนะ: Angular

ระบบนิเวศ

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

Ionic เป็นเฟรมเวิร์กไฮบริดยอดนิยมที่เป็นแอปพลิเคชันเชิงมุมที่ทำงานภายใน wrapper ดั้งเดิมสำหรับแอปมือถือ คุณสามารถสร้างแอพมือถือโดยใช้ Angular แอพไฮบริดอาจดูเกะกะเล็กน้อยเมื่อเทียบกับแอปพลิเคชันดั้งเดิม ประสบการณ์ของผู้ใช้อาจไม่ยอดเยี่ยมในบางครั้ง ไม่รวดเร็วและตอบสนองได้ดี ในบรรดาเฟรมเวิร์กไฮบริดที่หลากหลาย Ionic 3 เป็นเฟรมเวิร์กที่ดีที่สุด นอกจากนี้ยังมี NativeScript ซึ่งช่วยให้เราสร้างแอป iOS และ Android ที่มาพร้อมเครื่องอย่างแท้จริงด้วย Angular รวมถึง JavaScript

อย่างไรก็ตาม NativeScript ดูเหมือนจะไม่ดีเท่ากับ React Native ของ Facebook อย่างน้อยก็ในตอนนี้ Angular ยังมีไลบรารีส่วนประกอบการออกแบบวัสดุหากคุณเป็นแฟนตัวยงของการออกแบบวัสดุ Angular Universal เป็นโครงการเริ่มต้นที่สามารถใช้เพื่อแสดง Angular ทางฝั่งเซิร์ฟเวอร์ นอกจากนี้ยังมีร้าน NgRx ซึ่งเป็นห้องสมุดการจัดการของรัฐที่ได้รับแรงบันดาลใจจาก Reax redux มันขึ้นอยู่กับสถานะที่กลายพันธุ์โดยเพียร์รีดิวเซอร์ นอกจากนี้ยังมีการทำงานร่วมกับส่วนขยายปฏิกิริยา

คุณจะสังเกตเห็น ครั้งหนึ่ง หนึ่งในนั้นทำบางอย่างกับอีกแบบหนึ่งทำสำเนาในลักษณะที่ต่างออกไป React และ Angular ได้กลายเป็น Microsoft และ Apple ของกรอบงาน JavaScript

React มีระบบนิเวศค่อนข้างมาก มี React native ซึ่งเป็นที่นิยม เป็นวิธีที่ดีที่สุดในการสร้างแอปบนอุปกรณ์เคลื่อนที่ด้วยเทคโนโลยีเว็บ React Native นั้นรวดเร็วและมีแอพพลิเคชั่นมากมายหากสร้างขึ้นอย่างถูกต้อง พวกมันจะอยู่ที่นั่นด้วยแอพพื้นฐานที่สร้างบน Swift หรือ Java React มีไลบรารีการออกแบบวัสดุที่เรียกว่า Material-UI ซึ่งคล้ายกับองค์ประกอบการออกแบบวัสดุของ Angular แต่มีความเป็นผู้ใหญ่มากกว่า JS เป็นเฟรมเวิร์กสำหรับแสดงแอปพลิเคชัน React ฝั่งเซิร์ฟเวอร์ มันมีจุดมุ่งหมายที่จะทำสิ่งนี้ในวิธีที่ง่ายที่สุดเท่าที่จะทำได้เพื่อเปรียบเทียบกับ Angular Universal MobX เป็นอีกวิธีหนึ่งในการจัดการสถานะ มันใช้งานได้แตกต่างจาก redux เล็กน้อย มีชุดของมัณฑนากรเพื่อกำหนดสิ่งที่สังเกตได้และผู้สังเกตการณ์ และแนะนำตรรกะเชิงปฏิกิริยาเข้าสู่สถานะของคุณ

Storybook เป็นสภาพแวดล้อมการพัฒนาสำหรับ React ช่วยให้คุณสามารถเรียกดูไลบรารีส่วนประกอบ ดูสถานะต่างๆ ของแต่ละส่วนประกอบ และพัฒนาและทดสอบส่วนประกอบแบบโต้ตอบได้ Reactive VR กำลังได้รับ React สู่ความเป็นจริงเสมือน React desktop เป็นไลบรารี JavaScript ที่สร้างขึ้นบนไลบรารี Reacts ซึ่งคาดว่าจะนำประสบการณ์เดสก์ท็อปแบบเนทีฟมาสู่เว็บ โดยมีส่วนประกอบ macOS และ Windows 10 จำนวนมาก ระบบนิเวศของ React นั้นใหญ่และทรงพลังมาก React กำลังเข้าสู่ทุกแง่มุมของเทคโนโลยีและเป็นผู้ชนะที่ชัดเจน

ผู้ชนะ: React

ผู้คนในชุดสูทและเนคไทกำลังใช้ Angular ส่วนฮิปสเตอร์ที่มีเคราสกปรกกำลังใช้ React

บรรทัดล่าง: มันเป็นเน็คไท

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

หากคุณกำลังมองหาระบบนิเวศที่ใหญ่ขึ้นซึ่งรวมถึงการพัฒนาแอพมือถือแบบเนทีฟ ให้เลือก React โดยไม่ต้องคิดซ้ำ หากคุณต้องการคุณสมบัติ Angular นั้นยิ่งใหญ่มาก มีคุณสมบัติมากกว่าที่คุณต้องการ