De ce am trecut de la AngularJS la React

Publicat: 2022-03-11

În 2011, când codul meu a început să se aglomereze cu selectoare și apeluri jQuery, AngularJS a venit ca un salvator care a ajutat la o gestionare mai bună, o dezvoltare rapidă și mult mai multă funcționalitate. Legarea în două sensuri AngularJS și filosofia „modelului ca sursă unică de adevăr” m-au uluit și au redus redundanța datelor în aplicația mea.

De-a lungul timpului, însă, am descoperit că AngularJS are unele puncte de durere proprii. În cele din urmă, acestea mi-au provocat destulă frustrare încât am început să caut soluții alternative.

Puncte dure în AngularJS 1.x

  • DOM pentru execuție

    Angular se bazează în mare măsură pe DOM pentru fluxul său de execuție. În bootstrapping-ul implicit al aplicațiilor, scanează DOM-ul și îl compilează cu prioritățile directivelor, ceea ce face dificilă depanarea și testarea ordinii de execuție.

  • Propria sa injecție de dependență

    JavaScript nu are un manager de pachete și un solutor de dependențe propriu. Dar în ultimul timp, implementări precum AMD, UMD și CommonJS au rezolvat foarte bine această problemă. Din păcate, AngularJS nu este util cu niciuna dintre acestea. Mai degrabă, introduce o injecție de dependență (DI) proprie; deși există implementări AngularJS DI neoficiale care folosesc RequireJS.

  • Legarea în două sensuri este o sabie cu două tăișuri

    Este tentant să utilizați legarea în două sensuri, dar pe măsură ce complexitatea componentei dvs. crește, aceasta poate duce la un dezastru de performanță.

    Cum afectează legarea în două sensuri performanța? Ei bine, JavaScript ES5 nu are nicio implementare pentru a notifica orice modificare a variabilelor sau obiectelor sale, așa că Angular folosește ceva numit „verificare murdară” pentru a urmări modificările datelor și a le sincroniza cu interfața de utilizare. Verificarea murdară este efectuată după orice operațiune efectuată în sfera lui Angular (ciclul $digest), ceea ce duce la o performanță mai lentă pe măsură ce numărul de legături crește.

    O altă problemă cu legarea în două sensuri este că multe componente diferite de pe pagină sunt capabile să modifice datele, ceea ce duce la surse multiple de date de intrare. Dacă nu este tratat bine, poate duce la o situație ambiguă. Dar, pentru a fi corect, aceasta este pur și simplu o problemă de implementare.

  • Angular are propria sa lume

    Fiecare operațiune din Angular trebuie să treacă prin ciclul său de rezumat, altfel componentele dvs. nu se vor sincroniza cu modelele dvs. de date. Așadar, dacă utilizați o bibliotecă JavaScript existentă de la terți, trebuie să o includeți cu funcția $apply a Angular dacă implică modificări de date sau va trebui să o convertiți într-un serviciu dacă este o bibliotecă de utilitate. Este ca și cum ai reinventa fiecare modul JavaScript disponibil pentru Angular.

  • Prea multe concepte și curbă abruptă de învățare

    Învățarea Angular necesită învățarea o mulțime de concepte, inclusiv module, controlere, directive, domenii, șabloane, funcții de conectare, filtre și injecție de dependențe.

Faceți cunoștință cu React

React, noua bibliotecă JS open source de la Facebook și Instagram, este o modalitate diferită de a scrie aplicații JavaScript. Când a fost introdus la JSConf EU în mai 2013, publicul a fost șocat de unele dintre principiile sale de proiectare, cum ar fi „fluxul de date unidirecțional” și „DOM virtual”.

Site-ul web oficial React spune: „React este o bibliotecă JavaScript pentru construirea de interfețe cu utilizatorul” și da, doar interfețe și nimic altceva. Nu este un cadru precum AngularJS. Dar puteți scrie componente autonome care se compară mai mult sau mai puțin cu directivele Angular. Prezentare generală rapidă

React regândește cele mai bune practici în dezvoltarea web. Reach încurajează fluxul de date unidirecțional și crede într-o filozofie conform căreia componentele sunt mașini de stat conduse de date. În timp ce majoritatea celorlalte cadre le place să lucreze cu DOM-ul și să-l manipuleze direct, React urăște DOM-ul și lucrează pentru a-l proteja pe dezvoltator. React oferă doar API-ul de bază, care este necesar pentru a defini orice componentă a UI și nimic altceva. Reach urmează filozofia UNIX: Micul este frumos. Fă un lucru și fă-l cel mai bine.

Aceasta este o comparație foarte frumoasă între cele două de către Pete Hunt (de la echipa Instagram)

Este doar o bibliotecă. Avem nevoie de un cadru cu React?

Răspuns scurt: alegerea ta.

Folosind React, puteți construi interfețe cu utilizatorul, dar mai trebuie să gestionăm dependențele, să facem apeluri AJAX, să aplicăm filtre de date. Dacă avem nevoie de un cadru, de ce să renunțăm la AngularJS?

Framework-urile sunt un set de pachete și un set de reguli. Ce se întâmplă dacă nu am nevoie de niște pachete sau vreau să schimb cu alt pachet. Cum trebuie să fac? Avem nevoie de un manager de pachete. Cum gestionăm pachetele în AngularJS? Aceasta este alegerea ta, dar Angular are propria sa lume. Va trebui să înfășurați fiecare pachet exterior în lumea lui Angular și apoi să îl utilizați. Dar React este doar JavaScript și orice pachet scris în JavaScript nu va avea nevoie de nicio împachetare în React.

Deci, este mai bine dacă ne alegem propriile pachete dintr-un depozit de pachete precum npm și le organizăm după cum ne place. Vestea bună este că React încurajează utilizarea npm, care are o mulțime de pachete gata de utilizare. Pentru a începe cu React, vă recomandăm să utilizați unul dintre aceste kituri de pornire Full-Stack

Avantajele React

Deci de ce am trecut cu adevărat la React?

Reacția este rapidă!

React adoptă o abordare diferită față de alte cadre. Nu vă permite să lucrați direct cu DOM. Mai degrabă, introduce un strat de DOM virtual între logica JavaScript și DOM-ul real. Acest lucru ajută la îmbunătățirea drastică a vitezei. La randările succesive, React efectuează o diferență pe DOM-ul virtual și actualizează doar acea parte a DOM-ului real care trebuie actualizată.

Virtual DOM ajută, de asemenea, la rezolvarea problemelor între browsere, deoarece oferă un API unificat între browsere, care funcționează chiar și în Internet Explorer 8. (Phew!)

Totul este o componentă (widget UI)

Scrierea componentelor UI autonome vă modularizează aplicația și separă preocupările pentru fiecare dintre ele. Fiecare componentă poate fi dezvoltată și testată în mod izolat și, la rândul său, poate utiliza alte componente, crescând mentenabilitatea.

Flux de date unidirecționale pentru câștig!

Flux este o arhitectură pentru crearea de straturi de date unidirecționale în aplicațiile JavaScript. A fost proiectat pe Facebook împreună cu biblioteca de vizualizare React. Face dezvoltarea mai simplă și facilitează urmărirea și remedierea erorilor. Flux este mai mult un concept decât o implementare. Poate fi implementat și în alte cadre. Alex Rattray are o implementare foarte bună a Flux folosind Backbone Collection și Model în React.

JavaScript și nimic altceva

Aplicațiile web moderne funcționează într-un mod diferit decât web-ul tradițional. Stratul View trebuie actualizat cu interacțiunile utilizatorului fără a lovi serverul. Și, prin urmare, View și Controller trebuie să se bazeze foarte mult unul pe celălalt. Multe alte cadre utilizează motoare de șabloane precum Handlebars și Mustache pentru stratul lor de vizualizare, dar React consideră că cele două părți sunt atât de interdependente încât trebuie să locuiască într-un singur loc, fără a utiliza un motor de șabloane terță parte și fără a părăsi domeniul de aplicare al JavaScript.

JavaScript izomorf

Cel mai mare dezavantaj al aplicațiilor web JavaScript pentru o singură pagină este că are limitări atunci când sunt accesate cu crawlere de motoarele de căutare. React are o soluție pentru asta. React poate pre-rada aplicațiile pe server înainte de a le trimite la browser și, de asemenea, poate restabili aceeași stare în aplicația live din conținutul static pre-redat de pe server. Întrucât crawlerii motoarelor de căutare se bazează în mare măsură pe răspunsul serverului, mai degrabă decât pe execuția JavaScript, pre-rendarea unor astfel de aplicații ajută la optimizarea motorului de căutare.

React joacă bine cu RequireJS, Browserify și Webpack

Încărcătoarele și bundlerele sunt foarte necesare atunci când construiți o aplicație mare. Din păcate, versiunea actuală de JavaScript nu oferă un bundler sau încărcător de module, deși este propus în viitoarea versiune a EcmaScript 6 (System.import). Din fericire, avem câteva alternative precum RequireJS și Webpack, care sunt destul de decente.

React este construit cu Browserify, dar dacă doriți să injectați elemente de imagine și să compilați LESS sau CoffeeScript, atunci probabil că Webpack este o opțiune mai bună.

Am trecut la React cu ceva durere.

  • Deoarece AngularJS este un cadru, vine cu o mulțime de bunătăți, care include un wrapper AJAX în serviciul $http, $q ca serviciu de promisiune, ng-show, ng-hide, ng-class și ng-if ca instrucțiuni de control pentru șablon.

  • React nu este un cadru, ci o bibliotecă pentru a construi interfața de utilizare, așa că trebuie să vă gândiți la toate celelalte piese pe cont propriu. Lucrez la un proiect open source care poate fi folosit cu React pentru a vă ușura dezvoltarea, iar comunitatea contribuie, de asemenea, în mod activ cu componente reutilizabile similare.

    React-components.com este un site web de director neoficial unde puteți găsi astfel de componente open source.

  • Filosofia lui React nu vă încurajează să utilizați legarea în două sensuri, ceea ce aduce multă durere atunci când aveți de-a face cu elemente de formular și grile de date editabile. Cu toate acestea, pe măsură ce începeți să înțelegeți fluxul de date Flux și Stores, lucrurile devin mai clare, mai simple și mai ușoare.

React este nou și, prin urmare, va dura ceva timp pentru ca comunitatea să crească.

Angular a câștigat o popularitate uriașă în ultima vreme și are un număr relativ mare de extensii disponibile, cum ar fi AngularUI și Restangular. Comunitatea open source a React este nouă, dar crește rapid, cu extensii precum React Bootstrap. Este doar o chestiune de timp până când avem mai multe componente disponibile, iar React poate fi utilizat cu ușurință pentru dezvoltarea rapidă a aplicațiilor web.

Concluzie

Dacă ați mai folosit AngularJS, atunci este posibil să urâți React la început, în principal din cauza fluxului de date unidirecțional și a lipsei de „cadru” în care trebuie să vă ocupați de multe alte lucruri. Dar de îndată ce te simți confortabil cu modelul de design Flux și filozofia lui React, vei realiza că este frumusețea.

Ambele Facebook și Instagram folosesc React. Noul Editor Atom al Github este construit folosind React. Viitorul Yahoo Mail este reconstruit în React. Ce alte exemple ai nevoie? Încercați React astăzi.