2018-ci ildə AngularJS VS React arasında müqayisə

Bu yazıda, cəbhənin inkişafı üçün ən populyar 2 texnologiyanı müqayisə edirik: Bucaqlı və Reaktiv. Bunları layihə memarı və inkişaf perspektivləri ilə yanaşı şirkətlərin perspektivləri ilə müqayisə edəcəyik.

Angular və reaksiyaların müqayisəsi bu gün çox populyar bir mövzudur. React and Angular həm cavab verən veb tətbiqləri, həm də interaktiv bir səhifəlik tətbiqlər yaratmaq üçün istifadə etdiyimiz yüksək inkişaf etmiş, geniş tətbiq olunan JavaScript texnologiyalarıdır. Sürətli bir səhifəlik tətbiqetmənin (SPA) inkişafı üçün JavaScript alətlərinin sayı daim artır, buna görə veb hazırlayıcılar üçün düzgün çərçivə seçmək daha çətindir.

AngularJS (Çərçivə) və React (kitabxana) arasındakı əsas fərqlər, komponentləşdirmə, məlumatların bağlanması, performans, asılılıq həlli, direktivlər və şablonlardır. Bu aspektlərin hər birinə ətraflı baxaq.

BucaqlıJS

2 və daha yuxarı bucaqlı versiya reaksiya göstərmədən daha az olmuşdur, ancaq əvvəlkisi AngularJS tarixində sayarsanız, şəkil daha da asanlaşır. Google tərəfindən qorunur və Analytics, Adwords və Google Fiber-də istifadə olunur. AdWords Google-un əsas layihələrindən biri olduğuna görə, bunun üstündə böyük bir bahis etdikləri və yaxın zamanlarda yox olacağı ehtimalı azdır.

Reaksiya verin

React Facebook tərəfindən hazırlanır və saxlanılır və həmçinin Instagram və WhatsApp kimi məhsullarda istifadə olunur. Təxminən dörd il yarımdır ki, tam yeni deyil. Həm də GitHub’un ən məşhur layihələrindən biridir, yazı zamanı təxminən 92.000 ulduz var. Mənə yaxşı səslənir.

Komponentləşmə

BucaqlıJS

AngularJS çox mürəkkəb və sabit bir quruluşa malikdir, çünki tək səhifəli tətbiqlərə xas olan Model-View-Controller memarlığına əsaslanır. AngularJS-dəki bir obyektin həcmi Nəzarətçi tərəfindən başlanılan və sonra istifadəçi üçün görünüş yaratmaq üçün HTML-yə çevrilən Model hissəsi üçün cavabdehdir. AngularJS bir çox standart xidmətlər, fabriklər, nəzarətçilər, direktivlər və digər komponentlər təqdim edir.

Kod AngularJS-də bir neçə fayla bölünür. Məsələn, öz direktivimiz, nəzarətçi və şablonumuzla təkrar istifadə edilə bilən bir komponent yaratdığımızda hər bir bölməni ayrı bir faylda təsvir etməliyik. Direktivimizi təsvir etdikdən sonra, bu hissələri birləşdirmək üçün direktivdə şablonumuza bir keçid əlavə edirik. AngularJS direktivləri tətbiq üçün şablon məntiqini təmsil edir. Şablon, ümumiyyətlə etiketlər və ya atributlar şəklində yazılmış AngularJS direktivləri ilə uzadılmış HTML-dir. Modellərimizi lazımi dollar həcmi və ya kontekstlə təmin etmək üçün nəzarətçiləri də əlavə edirik. Nəzarətçilər ayrıca sənədlərdə yazılır. Tətbiqimizi bu şəkildə modullaşdırdığımızda, şablonumuzu və ya komponentimizi veb saytın fərqli bir hissəsində yenidən istifadə edə bilərik və bu AngularJS İnkişaf Şirkəti üçün çox faydalıdır, çünki çox vaxta qənaət edir və inkişaf prosesini sürətləndirir.

Reaksiya verin

React ilə qurulmuş tətbiqlər üçün heç bir "düzgün" quruluş yoxdur. Bu istifadəçi üçün Görünüşü yeniləməyə kömək edən böyük bir JavaScript kitabxanasıdır. Ancaq React yenə də özümüzdə tətbiqlər yaratmağa imkan vermir. Kitabxanada model və nəzarətçi qat yoxdur. Boşluğu doldurmaq üçün, Facebook, bu gün çox sayda variantı olan Flux-i tətbiq iş prosesini idarə etmək üçün təqdim etdi.

Reaksiya, komponent ağaclarının qurulması üçün çox sadə və səmərəli bir yol təqdim edir. Komponent təriflərinin deklarativ olduğu bir funksional proqramlaşdırma tərzinə malikdir. Tətbiqinizi Reaksiya komponentlərindən tərtib etmək funksiyalardan JavaScript proqramı tərtib etmək kimidir.

Məlumatların bağlanması

MVC Nümunələrində bağlama, hər hansı bir məlumatı bir istiqamətdə və ya iki istiqamətli axınla ötürmək üçün ən vacib mövzudur.

BucaqlıJS

Bucaqlı tətbiqlərdə məlumatların bağlanması, model və görünüş komponentləri arasında məlumatların avtomatik sinxronizasiyasıdır. Anguların məlumat bağlamasını tətbiq etməsi, modelinizi tətbiqinizdə tək mənbəli-həqiqət kimi qiymətləndirməyə imkan verir. Görünüş hər zaman modelin proyeksiyasıdır. Model dəyişdikdə görünüş dəyişikliyi əks etdirir və əksinə.
 Sadəcə Modeldən görüntüyə və ya əksinə sinxron bir şəkildə məlumatların qoşulmasıdır ki, hər hansı bir model və ya görünüşdə hər hansı bir dəyişiklik baş verdikdə digəri dəyişiklik göstərməlidir və bu sinxronizasiya olunur.

Reaksiya verin

Reaksiya göstərməyin ən yaxşı xüsusiyyəti Virtual Dom. Reaksiya vermə quruluş zamanı göstərilən görüntülərə daxil edilir, belə ki, kök görünüşü yaradıldıqda və ya iç içə bir görüntü vasitəsilə yaradılır. Reaktiv məlumatların axışını yalnız bir istiqamətə yönəldə biləcəyimiz deməkdir. Sinif daxilində, ötürülən məlumatlara mövcud kontekstin rekvizit xassələri vasitəsilə daxil olur.

Performans

BucaqlıJS

Anguların performansı haqqında danışarkən nəzərə alınmalı iki şey var. Daha əvvəl qeyd etdiyimiz kimi, Angular 1.x və daha yüksək olanlar ikitərəfli məlumatların bağlanmasına əsaslanır. Bu konsepsiya "Çirkli yoxlanış", AngularJS Tətbiq İnkişafımızı laggy edə bilən bir mexanizmə əsaslanır.

HTML ilə dəyərlərimizi modelimizlə bağladığımız zaman AngularJS DOM-dakı dəyişiklikləri izləmək üçün hər bağlama üçün gözətçi yaradır. View güncəlləşdikdən sonra AngularJS yeni dəyəri ilkin dəyərlə müqayisə edir və $ digest loopunu işlədir. Bundan sonra $ digest loopu, həqiqətən dəyişmiş dəyərləri yox, izləyicilər tərəfindən izlənilən bütün digər dəyərləri də yoxlayır. Buna görə tətbiqinizdə çox sayda izləyici varsa, performans çox azalacaq.

AngularJS çərçivəsinin digər bir çatışmazlığı DOM ilə işləməyidir. React-dan fərqli olaraq, AngularJS brauzerdəki həqiqi DOM-dakı dəyişiklikləri tətbiq edir. Həqiqi DOM yeniləndikdə, brauzer yeni bir DOM təmsil etmək üçün bir çox daxili dəyər dəyişdirməlidir. Bu da tətbiq performansına mənfi təsir göstərir.
 Pis performans, Angular 2 tərəfdarının Anguların proqram vəziyyətini necə dəyişdirdiyini yenidən işləməsinin əsas səbəbidir. Bucaq 2 və ən son bucaqlı 4 çərçivə versiyasında eyni zamanda reaksiya ilə eyni şəkildə bağlanan server tərəfi göstərmə və bir tərəfli məlumatlar da mövcuddur. Yenə də Angular 2 və 4, seçim olaraq iki tərəfli məlumat bağlamasını təklif edir.

Reaksiya verin

React, AngularJS ilə müqayisədə React’ın ən böyük üstünlüklərindən biri olan virtual DOM konsepsiyasını təqdim etdi. Virtual DOM necə işləyir? HTML sənədimiz yüklənəndə React JavaScript obyektlərindən yüngül bir DOM ağacı yaradır və serverdə saxlayır. İstifadəçi, brauzerdəki sahəyə yeni məlumatlar daxil etdikdə, React yeni bir virtual DOM yaradır və daha əvvəl qeyd edilmiş DOM ilə müqayisə edir. Kitabxana bu şəkildə iki obyekt modeli arasında fikir ayrılığını tapır və virtual DOM-u bir daha bərpa edir, lakin yeni dəyişdirilmiş HTML ilə. Bütün bu işlər serverdə edilir, bu da brauzerdəki yükü azaldır.

İndi, brauzerə tamamilə yeni HTML göndərmək əvəzinə, React HTML-ni yalnız dəyişdirilmiş element üçün göndərir. Bu yanaşma AngularJS-nin təklif etdiklərindən daha səmərəlidir.

Asılılığı həll etmək

BucaqlıJS

Asılılıq Enjeksiyonu, tərkib hissəsi içərisində sərtləşdirilməyin əvəzinə komponentlərinə asılılıqları verildiyi bir proqram dizayn nümunəsidir. Bu, bir komponenti asılılığı tapmaqdan azad edir və asılılıqları konfiqurasiya edir. Bu, komponentlərin təkrar istifadə edilə bilən, istifadəyə yararlı və sınanabilən olmasına kömək edir.
 AngularJS avtomatik olaraq $ маршрутПарамс, $ filter, mağaza və $ əhatə parametrləri kimi vurulan uyğun obyektləri tapır. Asılılıq enjeksiyonunu AngularJS çərçivəsində mümkün edən iki funksiya mövcuddur: $ enjeksiyonu və $ təmin edir.

Reaksiya verin

Asılılıq enjeksiyonuna münasibətdə React və AngularJS arasındakı fərq, React-in bağlantı inyeksiyası üçün quraşdırılmış bir konteyner anlayışını təklif etməməsidir. Ancaq bu, Reaktiv layihəmizdə asılılıq yeritmək üçün bir üsul düşünməli olduğumuz anlamına gəlmir. Reaksiya tətbiqetməsində avtomatik olaraq asılılıq yeritmək üçün bir neçə alətdən istifadə edə bilərsiniz. Belə alətlərə Babel, ReactJS-di və s. Vasitəsilə istifadə edə biləcəyimiz Browserify, RequireJS, ECMAScript 6 modulları daxildir. Yeganə problem istifadə üçün bir vasitə seçməkdir.

Direktivlər və şablonlar

BucaqlıJS

AngularJS-dəki təlimatlar kodumuzu DOM ətrafında təşkil etmək üçün bir yoldur. AngularJS ilə işləyiriksə, DOM-a yalnız göstərişlər vasitəsilə daxil oluruq. AngularJS ng-bind və ya ng-app kimi bir çox standart direktivlərə malikdir, lakin bəzən məlumatları şablonlara daxil etmək üçün AngularJS-də öz göstərişlərimizi edirik. Şablonda bir atribut olaraq yazılmış direktivimiz olan bir element olmalıdır. Bu qədər sadədir. Lakin AngularJS direktivləri, tam müəyyənləşdirildiyi təqdirdə mürəkkəbdir. Direktivdə geri qaytardığımız parametrlər olan obyekt, təxminən on xüsusiyyətə malikdir. ŞablonUrl və ya şablon kimi xüsusiyyətləri başa düşmək asandır.

Reaksiya verin

Reaksiya şablonlara və təlimatlara və ya şablon məntiqinə bölünməyi təklif etmir. Şablon məntiqi şablonun özündə yazılmalıdır. Bunun necə göründüyünü görmək üçün GitHub-dan bir nümunə açın. React-in komponent app.TodoItem standart React.createClass () metodu ilə yaradıldığını görəcəksiniz. Bu funksiyaya xassələri olan bir obyekt ötürürük. KomponentDidUpdate, mustComponentUpdate, handleKeyDown və ya handleSubmit kimi xüsusiyyətlər məntiqi təmsil edir - şablonumuzla nə baş verəcək. Komponentin sonunda, ümumiyyətlə brauzerdə göstəriləcək bir şablon olan render mülkiyyətini təyin edirik. Hər şey bir yerdə yerləşir və şablondakı JSX sintaksisini JSX-də necə yazmağı bilmirsinizsə belə başa düşmək asandır. Şablonumuzla nəyin baş verəcəyi, necə göstərilməli olduğu və xüsusiyyətlərinə görə hansı məlumatın veriləcəyi aydındır.

Nəticə:

Müzakirənin sonuna gəldikdə, indi hər iki çərçivədə bir neçə məqam sizin üçün aydındır və veb tətbiqetmənin inkişafı üçün daha yaxşıdır. Beləliklə, onlardan birini seçmək qərarına gəlsəniz, onda mənim fikrim budur. Bir əsas veb tətbiqini hazırlamağa çalışırsınızsa, hər ikisi də istifadə edilə bilər. Yenə də, ReactJS SEO dostu, real vaxt rejimində və ağır trafiklə uyğun gəlir. Halbuki, AngularJS etibarlılıq ilə birlikdə hamar inkişaf və sınaq təklif edir.

Əvvəlcə Angular Minds nəşr edilmişdir.