AngularJS VS reaktsiyasini 2018 yilda solishtirish

Ushbu maqolada biz oldingi qismlarni ishlab chiqish uchun eng mashhur 2 ta texnologiyani taqqoslaymiz: burchak va reaktsiya. Biz ularni loyiha arxitektori va ishlab chiquvchilar nuqtai nazaridan, shuningdek kompaniyalar nuqtai nazaridan solishtiramiz.

Angular va reaktsiyalarni taqqoslash bugungi kunda juda mashhur mavzu. React va Angular ikkalasi ham juda ilg'or, keng tarqalgan JavaScript texnologiyalari bo'lib, biz veb-ilovalarni va bitta sahifali interfaol dasturlarni yaratishda foydalanamiz. Tez bir sahifali dasturlarni (SPA) ishlab chiqish uchun JavaScript vositalarining soni doimiy ravishda o'sib bormoqda, shuning uchun veb-ishlab chiqaruvchilar uchun to'g'ri doirani tanlash yanada qiyinlashadi.

AngularJS (Framework) va React (kutubxona) o'rtasidagi asosiy farqlar - bu komponentlashtirish, ma'lumotlarni bog'lash, ishlash, bog'liqlikni hal qilish, ko'rsatmalar va andozalar. Keling, ushbu jihatlarning har birini batafsil ko'rib chiqaylik.

BurchaklarJS

2 va undan yuqori burchakli versiya Reaktsiyadan biroz kamroq vaqt oldinroq bo'lgan, ammo agar siz o'zlaridan oldingi AngularJS tarixida hisoblasangiz, rasm yanada ravshan bo'ladi. U Google tomonidan qo'llab-quvvatlanadi va Analytics, Adwords va Google Fiber-da qo'llaniladi. AdWords Google-ning asosiy loyihalaridan biri ekanligi aniq, ular bunga katta pul tikishgan va yaqin orada yo'q bo'lib ketishi dargumon.

Reaktsiya qiling

React Facebook tomonidan ishlab chiqilgan va qo'llab-quvvatlangan, shuningdek, ularning Instagram va WhatsApp kabi mahsulotlarida ishlatiladi. Taxminan to'rt yarim yil davomida u deyarli yangi emas. Bu shuningdek GitHub-dagi eng ommabop loyihalardan biri bo'lib, yozuv paytida taxminan 92000 yulduzga ega. Menga yaxshi eshitiladi.

Komponentlash

BurchaklarJS

AngularJS juda murakkab va qat'iy tuzilishga ega, chunki u bitta sahifali dasturlarga xos bo'lgan Model-View-Controller arxitekturasiga asoslangan. AngularJS-dagi $ ob'ekt ob'ekti Model qismi uchun javobgar bo'lib, u Controller tomonidan ishga tushiriladi va keyin foydalanuvchi uchun View yaratish uchun HTMLga aylanadi. AngularJS ko'plab standart xizmatlarni, fabrikalarni, kontrollerlarni, ko'rsatmalarni va boshqa qismlarni taqdim etadi.

Kodni AngularJS-da bir nechta fayllarga ajratamiz. Masalan, biz o'z direktivamiz, tekshirgichimiz va shablonimiz yordamida qayta ishlatiladigan tarkibiy qismni yaratishda har bir kod kodini alohida faylda tasvirlab berishimiz kerak. Direktivamizni tavsiflaganimizdan so'ng, biz ushbu qismlarni bog'lash uchun shablonga havolani qo'shamiz. AngularJS ko'rsatmalari sizning dasturingiz uchun shablon mantig'ini aks ettiradi. Andoza odatda AngliyaJS direktivalari bilan kengaytirilgan HTML bo'lib, odatda teglar yoki atributlar shaklida yozilgan. Shuningdek, biz o'z modellarimizni kerakli dollar yoki kontekst bilan ta'minlash uchun kontrollerlarni qo'shamiz. Kontrollerlar alohida fayllarda ham yozilgan. Ilovamizni shu tarzda modullashtirganimizda, biz shablonimiz yoki komponentimizni veb-saytning boshqa qismida qayta ishlatamiz va bu AngularJS Development Company uchun juda foydali, chunki u ko'p vaqtni tejaydi va rivojlanish jarayonini tezlashtiradi.

Reaktsiya qiling

React bilan yaratilgan dasturlar uchun "to'g'ri" tuzilma mavjud emas, bu foydalanuvchi uchun View-ni yangilashga yordam beradigan katta JavaScript kutubxonasidir. Ammo React baribir o'z-o'zidan dasturlar yaratishga imkon bermaydi. Kutubxonada model va boshqaruvchi qatlamlar yo'q. Bo'shliqni to'ldirish uchun Facebook bugungi kunda dasturlarning ish jarayonini boshqarish uchun ko'plab variantlarga ega bo'lgan Flux-ni taqdim etdi.

Reaktsiya tarkibiy daraxtlarni yaratishning juda sodda va samarali usulini ta'minlaydi. Bu funktsional dasturlash uslubiga ega, bu erda komponentlar ta'riflari deklarativ hisoblanadi. O'zingizning ilovangizni reaktsiya komponentlaridan tuzish - bu funktsiyalardan JavaScript dasturini tuzish kabi.

Ma'lumotni bog'lash

MVC naqshlarida majburiylik har qanday ma'lumotni bir yo'nalishda yoki ikki tomonlama yo'nalishda uzatish uchun eng muhim mavzudir. Ma'lumotni bog'lash bu model va ko'rish komponentlari o'rtasida ishlaydigan ma'lumotlarni sinxronizatsiya qilish jarayonlari.

BurchaklarJS

Burchaklardagi ilovalarda ma'lumotlarni bog'lab turish bu model va ko'rish komponentlari o'rtasida ma'lumotlarning avtomatik sinxronizatsiyasi. Angular ma'lumotni bog'lashni amalga oshirish usuli, ushbu modeldagi dasturda haqiqat manbaini yagona manba sifatida ko'rib chiqishga imkon beradi. Ko'rinish har doim modelning proektsiyasi. Model o'zgarganda, ko'rinish o'zgarishni aks ettiradi va aksincha.
 Bu shunchaki ma'lumotni Modeldan Viewga yoki aksincha sinxron usulda biriktirishdir, shunda har qanday model yoki ko'rinishda biron bir o'zgarish yuz berganda, boshqalar o'zgarishni ko'rsatishi kerak va bu sinxronlashdir.

Reaktsiya qiling

Reaktsiyaning eng yaxshi xususiyati bu Virtual Dom. Reaktsiya qilish, tuzilgan vaqtda, ko'rsatilgan ko'rinishga ma'lumotlarni kiritadi, bunda ildiz ko'rinishi yaratilgan yoki o'rnatilgan ko'rinish orqali amalga oshiriladi. Reaktsiya ma'lumotlarning bir tomonlama bog'lanishidan foydalanadi, ya'ni biz ma'lumotlar oqimini faqat bitta yo'nalishga yo'naltirishimiz mumkin. Sinf ichida, olingan ma'lumotlarga hozirgi kontekstning rekvizitlari orqali kirish mumkin.

Ishlash

BurchaklarJS

Angularning ishlashi haqida gaplashganda ikkita narsani hisobga olish kerak. Oldin aytib o'tganimizdek, 1.x va undan yuqori burchakli ma'lumotlar ikki tomonlama ma'lumotlarni bog'lashga asoslanadi. Ushbu kontseptsiya bizning "AngularJS" dasturini ishlab chiqarishni kechiktiradigan mexanizm "iflos tekshirish" ga asoslangan.

HTML-dagi qiymatlarni o'z modelimiz bilan bog'laganimizda, AngularJS DOM-dagi o'zgarishlarni kuzatish uchun har bir bog'lash uchun kuzatuvchini yaratadi. View yangilangandan so'ng AngularJS yangi qiymatni boshlang'ich qiymati bilan taqqoslaydi va $ digest tsiklini ishga tushiradi. Keyinchalik $ digest loop nafaqat aslida o'zgargan qiymatlarni, balki tomoshabinlar tomonidan kuzatib boriladigan boshqa barcha qiymatlarni ham tekshiradi. Shu sababli, agar sizning ilovangizda tomoshabinlar soni juda ko'p bo'lsa, unumdorlik pasayadi.

AngularJS tizimining yana bir kamchiligi bu DOM bilan ishlash usulidir. React-dan farqli o'laroq, AngularJS brauzerda haqiqiy DOM-dagi o'zgarishlarni qo'llaydi. Haqiqiy DOM yangilanganda, brauzer yangi DOMni namoyish qilish uchun ko'plab ichki qiymatlarni o'zgartirishi kerak. Bu, shuningdek, dasturlarning ishlashiga salbiy ta'sir qiladi.
 Yomon ishlash - bu Angular 2 tarafdorlari Angular dastur holatini qanday o'zgartirganining asosiy sababi. Burchak 2 va so'nggi Angular 4 ramka versiyalari, shuningdek, serverga ishlov berish va reaktsiyaga o'xshash ma'lumotlarni bir tomonlama bog'laydi. Shunday bo'lsa-da, 2 va 4-burchakli variant variant sifatida ikki tomonlama ma'lumotlarni bog'lashni taklif qiladi.

Reaktsiya qiling

React AngularJS bilan solishtirganda React-ning eng katta ustunliklaridan biri bo'lgan virtual DOM kontseptsiyasini taqdim etdi. Virtual DOM qanday ishlaydi? Bizning HTML hujjatimiz yuklanganda, React JavaScript ob'ektlaridan engil DOM daraxtini yaratadi va uni serverda saqlaydi. Foydalanuvchi brauzerda maydonga yangi ma'lumotlarni kiritganda, React yangi virtual DOM yaratadi va uni avval saqlangan DOM bilan taqqoslaydi. Kutubxona shu tarzda ikkita ob'ekt modellari o'rtasidagi farqlarni topadi va virtual DOMni yana yaratadi, lekin yangi o'zgartirilgan HTML bilan. Bularning barchasi serverda amalga oshiriladi, bu esa brauzerdagi yukni kamaytiradi.

Endi, brauzerga mutlaqo yangi HTML yuborish o'rniga, React HTML-ni faqat o'zgartirilgan element uchun yuboradi. Ushbu yondashuv AngularJS taklif qilganidan ko'ra samaraliroq.

Bog'lanishlarni hal qilish

BurchaklarJS

Bog'lanish Injection - bu dasturiy ta'minot dizayni naqshidir, bunda komponentlar tarkibiy qismlarga ularni kodlash o'rniga ularning tarkibiy qismlariga bog'liqlik beriladi. Bu komponentni qaramlikni aniqlashdan xalos qiladi va bog'liqlikni sozlanadigan qiladi. Bu tarkibiy qismlarni qayta ishlatiladigan, foydalanish mumkin bo'lgan va sinovdan o'tkaziladigan holga keltirishga yordam beradi.
 AngularJS avtomatik ravishda $ маршрутParams, $ filtri, saqlash va $ qamrov parametrlari sifatida kiritiladigan mos ob'ektlarni avtomatik ravishda topadi. AngularJS tizimida qaramlik in'ektsiyasini amalga oshiradigan ikkita funktsiya mavjud: $ inject va $ provide.

Reaktsiya qiling

Qaramlik in'ektsiyasiga nisbatan React va AngularJS o'rtasidagi farq shundaki, React qaramlikni quyish uchun o'rnatilgan idishning kontseptsiyasini taklif qilmaydi. Ammo bu bizning React loyihamizda qaramlikni kiritish usuli haqida o'ylashimiz kerak degani emas. React dasturida avtomatik ravishda qaramlikni kiritish uchun bir nechta vositalardan foydalanishingiz mumkin. Bunday vositalarga Babel, ReactJS-di va hokazolar orqali foydalanishimiz mumkin bo'lgan Browserify, RequireJS, ECMAScript 6 modullari kiradi. Yagona qiyinchilik - foydalanish uchun vositani tanlash.

Direktivalar va shablonlar

BurchaklarJS

AngularJS-dagi ko'rsatmalar bizning kodni DOM atrofida tartibga solish usulidir. Agar AngularJS bilan ishlayotgan bo'lsak, biz DOM-ga faqat ko'rsatmalar orqali kiramiz. AngularJS ng-bind yoki ng-app kabi ko'plab standart direktivalarga ega, ammo ba'zan biz ma'lumotlarni Andoza ichiga kiritish uchun AngularJS-da o'z ko'rsatmalarimizni qilamiz. Andoza atribut sifatida yozilgan direktivamiz bo'lgan elementga ega bo'lishi kerak. Bu juda oddiy. Ammo AngularJS direktivalari, agar to'liq aniqlangan bo'lsa, ular murakkabdir. Biz ko'rsatmaga qaytadigan sozlamalarga ega ob'ekt o'nga yaqin xususiyatlarni o'z ichiga oladi. TemplateUrl yoki shablon kabi xususiyatlarni tushunish oson.

Reaktsiya qiling

React shablon va ko'rsatmalarga yoki shablon mantig'iga bo'linishni taklif qilmaydi. Andoza mantiqi shablonning o'zida yozilishi kerak. Bu qanday ko'rinishini ko'rish uchun GitHub-dan misol oching. Siz React tarkibiy qismining app.TodoItem standart React.createClass () usuli bilan yaratilganligini sezasiz. Biz bu funktsiyaga xususiyatlarga ega ob'ektni o'tkazamiz. KomponentDidUpdate, mustComponentUpdate, handleKeyDown yoki handleSubmit kabi xususiyatlar mantiqni aks ettiradi - bizning shablonimiz bilan nima sodir bo'ladi. Komponent oxirida biz odatda brauzerda ko'rsatiladigan shablon bo'lgan render xususiyatini aniqlaymiz. Hammasi bir joyda joylashgan va shablondagi JSX sintaksisini, hatto JSX-da qanday yozishni bilmasangiz ham tushunish oson. Bizning shablonimiz bilan nima yuz berishi aniq, u qanday ko'rsatilishi kerak va xususiyatlar bo'yicha unga qanday ma'lumotlar taqdim etiladi.

Xulosa:

Siz munozaraning oxiriga kelib, endi ikkala tizimda ham bir nechta fikrlar aniq va veb-ilovalarni ishlab chiqish uchun yaxshiroq bo'lgan narsalar. Shunday qilib, agar siz ulardan birini tanlashga qaror qilsangiz, unda mening fikrim shu. Agar siz asosiy veb-ilovani yaratmoqchi bo'lsangiz, ikkalasidan ham foydalanish mumkin. Shunday bo'lsa-da, ReactJS SEO do'sti, real vaqtda va og'ir trafikka mos keladi. Holbuki, AngularJS ishonchlilik bilan birga muammosiz rivojlanish va sinovlarni taklif etadi.

Dastlab Angular Minds nashr etilgan.