ทำไมฉันเปลี่ยนจาก AngularJS เป็น React

ในปี 2011 เมื่อโค้ดของฉันเริ่มยุ่งเหยิงด้วยตัวเลือก jQuery และการเรียกกลับ AngularJS เข้ามาเป็นตัวช่วยชีวิตซึ่งช่วยในการจัดการที่ดีขึ้น การพัฒนาอย่างรวดเร็ว และฟังก์ชันการทำงานอื่น ๆ อีกมากมายที่พร้อมใช้งานทันที การรวมสองทางของ AngularJS และปรัชญาของ "แบบจำลองในฐานะแหล่งข้อมูลเดียวของความจริง" ทำให้ฉันผิดหวังและลดความซ้ำซ้อนของข้อมูลตลอดแอปพลิเคชันของฉัน

อย่างไรก็ตาม เมื่อเวลาผ่านไป ฉันพบว่า AngularJS มีจุดปวดของตัวเอง ในที่สุดสิ่งเหล่านี้ทำให้ฉันหงุดหงิดมากจนฉันเริ่มมองหาวิธีแก้ปัญหาอื่น

จุดปวดใน AngularJS 1.x

• DOM สำหรับการดำเนินการ

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

• การฉีดพึ่งพาของตัวเอง

  JavaScript ไม่มีตัวจัดการแพ็คเกจและตัวแก้ไขการพึ่งพาของตัวเอง แต่ช่วงหลังๆ นี้ การนำไปใช้งานอย่าง AMD, UMD และ CommonJS ได้แก้ปัญหานี้ได้เป็นอย่างดี น่าเศร้าที่ AngularJS ไม่มีประโยชน์กับสิ่งเหล่านี้ ค่อนข้างจะแนะนำการฉีดพึ่งพา (DI) ของตัวเอง แม้ว่าจะมีการใช้งาน AngularJS DI ที่ไม่เป็นทางการโดยใช้ RequireJS

• การผูกสองทางเป็นดาบสองคม

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

  การเชื่อมแบบสองทางส่งผลต่อประสิทธิภาพการทำงานอย่างไร JavaScript ES5 ไม่มีการใช้งานเพื่อแจ้งเตือนการเปลี่ยนแปลงใดๆ กับตัวแปรหรือวัตถุ ดังนั้น Angular จึงใช้สิ่งที่เรียกว่า "การตรวจสอบสกปรก" เพื่อติดตามการเปลี่ยนแปลงข้อมูลและซิงค์กับ UI การตรวจสอบสกปรกจะดำเนินการหลังจากการดำเนินการใดๆ ที่ดำเนินการภายในขอบเขตของ Angular (รอบย่อย (รอบย่อยย่อย) ซึ่งทำให้ประสิทธิภาพการทำงานช้าลงเมื่อจำนวนการผูกเพิ่มขึ้น

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

• Angular มีโลกของตัวเอง

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

• แนวคิดมากเกินไปและเส้นโค้งการเรียนรู้ที่สูงชัน

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

พบกับ React

React ซึ่งเป็นไลบรารี JS แบบโอเพ่นซอร์สใหม่จาก Facebook และ Instagram เป็นอีกวิธีหนึ่งในการเขียนแอป JavaScript เมื่อเปิดตัวที่ JSConf EU ในเดือนพฤษภาคม 2013 ผู้ชมต่างตกใจกับหลักการออกแบบบางอย่าง เช่น "การไหลของข้อมูลทางเดียว" และ "Virtual DOM"

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

React คิดใหม่ถึงแนวทางปฏิบัติที่ดีที่สุดในการพัฒนาเว็บ Reach สนับสนุนการไหลของข้อมูลแบบทางเดียวและเชื่อในปรัชญาที่ว่าส่วนประกอบต่างๆ เป็นเครื่องจักรของรัฐที่ขับเคลื่อนด้วยข้อมูล ในขณะที่เฟรมเวิร์กอื่นๆ ส่วนใหญ่ชอบทำงานกับ DOM และจัดการโดยตรง React เกลียด DOM และทำงานเพื่อปกป้องนักพัฒนาจากมัน React ให้เฉพาะ API พื้นฐานที่จำเป็นสำหรับการกำหนดองค์ประกอบ UI ใด ๆ และไม่มีอะไรอื่น การเข้าถึงเป็นไปตามปรัชญาของ UNIX: Small is beautiful. ทำสิ่งหนึ่งและทำให้ดีที่สุด

นี่เป็นการเปรียบเทียบที่ดีมากระหว่างทั้งสองโดย Pete Hunt (จากทีม Instagram)

มันเป็นแค่ห้องสมุด เราต้องการกรอบงานด้วย React หรือไม่?

คำตอบสั้น ๆ : ทางเลือกของคุณ

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

กรอบงานคือชุดของแพ็คเกจและชุดของกฎ จะเป็นอย่างไรหากฉันไม่ต้องการแพ็คเกจบางอย่าง หรือต้องการสลับกับแพ็คเกจอื่น ฉันต้องทำอย่างไร? เราต้องการผู้จัดการแพ็คเกจ เราจะจัดการแพ็คเกจใน AngularJS ได้อย่างไร นั่นเป็นทางเลือกของคุณ แต่ Angular มีโลกของตัวเอง คุณจะต้องห่อแพ็คเกจภายนอกทั้งหมดในโลกของ Angular แล้วใช้งาน แต่ React เป็นเพียง JavaScript และแพ็คเกจใดๆ ที่เขียนด้วย JavaScript ไม่จำเป็นต้องมีการตัดคำใน React

ดังนั้น จะดีกว่าถ้าเราเลือกแพ็คเกจของเราเองจากที่เก็บแพ็คเกจ เช่น npm และจัดระเบียบตามที่เราต้องการ ข่าวดีก็คือ React สนับสนุนการใช้ npm ซึ่งมีแพ็คเกจพร้อมใช้งานมากมาย ในการเริ่มต้นใช้งาน React คุณอาจต้องการใช้ Full-Stack Starter Kits

ข้อดีของ React

เหตุใดฉันจึงเปลี่ยนไปใช้ React จริงๆ?

ตอบสนองรวดเร็ว!

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

Virtual DOM ยังช่วยในการแก้ปัญหาข้ามเบราว์เซอร์ เนื่องจากมี API ข้ามเบราว์เซอร์แบบรวมซึ่งใช้งานได้ใน Internet Explorer 8 (วุ้ย!)

ทุกอย่างเป็นส่วนประกอบ (วิดเจ็ต UI)

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

การไหลของข้อมูลทางเดียวสำหรับผู้ชนะ!

Flux เป็นสถาปัตยกรรมสำหรับสร้างชั้นข้อมูลทางเดียวในแอปพลิเคชัน JavaScript ได้รับการออกแบบที่ Facebook พร้อมกับไลบรารี React view ทำให้การพัฒนาง่ายขึ้นและติดตามและแก้ไขจุดบกพร่องได้ง่ายขึ้น Flux เป็นแนวคิดมากกว่าการนำไปปฏิบัติ สามารถนำไปใช้ในกรอบงานอื่นได้เช่นกัน Alex Rattray มีการใช้งาน Flux ที่ดีมากโดยใช้ Backbone Collection และ Model ใน React

JavaScript และไม่มีอะไรอื่น

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

Isomorphic JavaScript

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

React เล่นได้ดีกับ RequireJS, Browserify และ Webpack

รถตักและมัดรวมมีความจำเป็นอย่างยิ่งเมื่อคุณสร้างแอปพลิเคชันขนาดใหญ่ น่าเสียดายที่ JavaScript เวอร์ชันปัจจุบันไม่มีโมดูลบันเดิลหรือตัวโหลด แม้ว่าจะเสนอใน EcmaScript 6 เวอร์ชันถัดไป (System.import) โชคดีที่เรามีทางเลือกอื่น เช่น RequireJS และ Webpack ซึ่งค่อนข้างดี

React สร้างขึ้นด้วย Browserify แต่ถ้าคุณกำลังมองหาที่จะแทรกเนื้อหารูปภาพและคอมไพล์ LESS หรือ CoffeeScript แสดงว่า Webpack เป็นตัวเลือกที่ดีกว่า

ฉันเปลี่ยนไปใช้ React ด้วยความเจ็บปวด

• เนื่องจาก AngularJS เป็นเฟรมเวิร์ก มันจึงมาพร้อมกับสิ่งดีๆ มากมาย ซึ่งรวมถึงแรปเปอร์ AJAX ในบริการ $http, $q เป็นบริการตามสัญญา, ng-show, ng-hide, ng-class และ ng-if เป็นคำสั่งควบคุม สำหรับแม่แบบ

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

  React-components.com เป็นเว็บไซต์ไดเร็กทอรีที่ไม่เป็นทางการซึ่งคุณสามารถหาส่วนประกอบโอเพ่นซอร์สดังกล่าวได้

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

React เป็นเรื่องใหม่และต้องใช้เวลาสักพักกว่าที่ชุมชนจะเติบโต

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

บทสรุป

หากคุณเคยใช้ AngularJS มาก่อน คุณอาจเกลียด React ในตอนแรก สาเหตุหลักมาจากมันคือการไหลของข้อมูลทางเดียวและขาด "กรอบงาน" ที่คุณต้องดูแลเรื่องอื่นๆ ด้วยตัวเอง แต่ทันทีที่คุณคุ้นเคยกับรูปแบบการออกแบบ Flux และหลักปรัชญาของ React คุณจะรู้ว่ามันคือความงาม

ทั้ง Facebook และ Instagram ใช้ React Atom Editor ใหม่ของ Github สร้างขึ้นโดยใช้ React Yahoo Mail ที่กำลังจะมีขึ้นกำลังถูกสร้างขึ้นใหม่ใน React คุณต้องการตัวอย่างอะไรอีก ให้ React ลองวันนี้