Tarkib
- 01. burchakli
- 02. Javob bering
- 03. Vue
- Kadrlar sintaksisini qanday taqqoslash mumkin?
- Ommaboplik va bozor
- Mobil ilovalarni ishlab chiqish
- 2020 yilda e'tiborga olinadigan boshqa ramkalar
- Xulosa
2020 yilda veb-ishlab chiqishda bizga yordam beradigan bir qator ramkalar va kutubxonalar bizga nasib etdi. Ammo har doim ham bunday xilma-xillik mavjud emas edi. 2005 yilda Brendan Eich ismli yigit tomonidan Mocha deb nomlangan yangi skript tili yaratildi. LiveScript-ga o'zgartirilgandan bir necha oy o'tgach, ism yana JavaScript-ga o'zgartirildi. O'shandan beri JavaScript uzoq yo'lni bosib o'tdi.
2010 yilda biz "Backbone" va "Angular" ning birinchi JavaScript-ni ramkalari sifatida kiritilganligini ko'rdik va 2016 yilga kelib barcha veb-saytlarning 92 foizi JavaScript-ni ishlatdi. Ushbu maqolada biz uchta asosiy JavaScript ramkalarini (Angular, React va Vue) ko'rib chiqamiz va ularning keyingi o'n yillikdagi holatini ko'rib chiqamiz. O'z saytingizni yaratmoqchimisiz? Ushbu veb-sayt ishlab chiqaruvchilar ro'yxatini sinab ko'ring.
Ba'zi ajoyib manbalar uchun veb-dizaynning eng yaxshi vositalari ro'yxati, veb-xosting xizmatlari va ushbu mukammal foydalanuvchi sinov dasturlari ro'yxati bilan tanishib chiqing.
01. burchakli
AngularJS 2010 yilda chiqarilgan edi, ammo 2016 yilga kelib u butunlay qayta yozildi va burchakli 2 sifatida chiqdi. Angular - bu Google tomonidan ishlab chiqilgan, Wix, Upwork, The Guardian, HBO va boshqalar tomonidan qo'llaniladigan to'liq veb-ramka.
Taroziga soling:
- TypeScript uchun ajoyib yordam
- MVVM ishlab chiquvchilarga bir xil ma'lumotlar to'plamidan foydalangan holda bir xil dastur bo'limida ishlashni ajratish imkoniyatini beradi
- Zo'r hujjatlar
Kamchiliklari:
- Bir oz o'rganish egri chizig'iga ega
- Eski versiyadan ko'chish qiyin bo'lishi mumkin.
- Yangilanishlar muntazam ravishda taqdim etiladi, chunki ishlab chiquvchilar ularga moslashishlari kerak
Keyingisi nima?
Burchak 9-da Ivy standart kompilyator hisoblanadi. Bu ishlash va fayl hajmi atrofida ko'plab muammolarni hal qilish uchun o'rnatildi. U dasturlarni kichikroq, tezroq va soddalashtirishi kerak.
Burchakning oldingi versiyalarini React va Vue bilan taqqoslaganingizda, the
oxirgi burchak o'lchamlari burchakli foydalanishda juda katta edi. Ayvi shuningdek Progressive Hydration-ni amalga oshiradi, bu Angular jamoasi I / O 2019-da namoyish qildi. Progressive Hydration Ivy-ni serverga va mijozga tobora yuklash uchun ishlatadi. Masalan, foydalanuvchi sahifa bilan aloqa qila boshlagach, tarkibiy qismlarning kodlari va har qanday ish vaqti parcha-parcha olinadi.
Ayvi Angular uchun katta e'tiborni qaratmoqda va umid qilamanki, uni barcha ilovalar uchun taqdim etish. Burchak 10 ga qadar 9-versiyada bekor qilish imkoniyati bo'ladi.
02. Javob bering
React dastlab 2013 yilda Facebook tomonidan chiqarilgan va interaktiv veb-interfeyslarni yaratish uchun ishlatiladi. Ulardan bir nechtasini nomlash uchun Netflix, Dropbox, PayPal va Uber foydalanadi.
Taroziga soling:
- Reakt ishlashga ijobiy ta'sir ko'rsatadigan virtual DOMdan foydalanadi
- JSX yozish oson
- Yangilanishlar barqarorlikni buzmaydi
Kamchiliklari:
- Asosiy muvaffaqiyatsizliklardan biri murakkab dasturlarni yaratish uchun uchinchi tomon kutubxonalariga ehtiyoj
- Ishlab chiquvchilar rivojlanishning eng yaxshi yo'lida zulmatda qoladilar
Keyingisi nima?
React Conf 2019-da React jamoasi ular ustida ishlagan bir qator narsalarga to'xtalib o'tdilar. Birinchisi, Selective Hydration, bu erda React foydalanuvchi o'zaro ta'sir o'tkazadigan tarkibiy qismlarga ustuvor ahamiyat berish uchun ishlayotgan har bir narsani to'xtatadi. Foydalanuvchi ma'lum bir bo'lim bilan o'zaro aloqada bo'lganda, bu maydon namlanadi. Jamoa Suspense-da ishlagan, bu React-ning tizimi, kodlar, ma'lumotlar va rasmlarni yuklashni tashkil qilish uchun tizimdir. Bu komponentlar ko'rsatilishidan oldin biron bir narsani kutishini ta'minlaydi.
Ikkala tanlangan hidratsiya va to'xtatilish ham bir vaqtning o'zida rejim yordamida amalga oshiriladi, bu esa React-ga foydalanuvchi ma'lumotlariga javob berish kabi ustuvor ahamiyatga ega bo'lgan narsaga e'tiborni qaratish uchun pastroq ustuvor ishlarning katta bloklariga kirish qobiliyatini berish orqali ilovalarni yanada sezgir bo'lishiga imkon beradi. Jamoa shuningdek, ikkita alohida mavzuga e'tiborni qaratgan holda, kirish imkoniyatlarini ular ko'rib chiqqan yana bir yo'nalish sifatida eslatib o'tdilar - fokus va kirish interfeyslarini boshqarish.
03. Vue
Vue 2014 yilda Google kompaniyasining sobiq xodimi Evan You tomonidan ishlab chiqilgan. Undan Xiaomi, Alibaba va GitLab foydalanadi. Vue qisqa vaqt ichida va yirik brendning qo'llab-quvvatlovisiz ishlab chiquvchilar tomonidan mashhurlik va qo'llab-quvvatlashga erishdi.
Taroziga soling:
- Hajmi juda engil
- Yangi boshlanuvchilar uchun qulay - o'rganish oson
- Katta jamoat
Kamchiliklari:
- React with Facebook va Angular with Google kabi ulkan kompaniya tomonidan qo'llab-quvvatlanmaydi
- Haqiqiy tuzilish yo'q
Keyingisi nima?
Vue o'zining oldiga tezroq, kichikroq, ko'proq saqlanadigan va ishlab chiquvchilarga mahalliy maqsadni yo'naltirishni osonlashtiradigan maqsad qilib qo'ydi (agar sizda muammo bo'lsa, veb-xosting xizmatini ko'rib chiqing). Keyingi versiyasi (3.0) 2020 yil 1-choragida bo'lishi kerak, unda yaxshilangan TypeScript-ni qo'llab-quvvatlash bilan birga yanada yaxshi ishlash uchun virtual DOMni qayta yozish kerak. Kompozitsiya API-sining qo'shilishi ham mavjud, bu ishlab chiquvchilarga operatsion o'rniga komponentlarni yaratish va ularni xususiyatlar bo'yicha tartibga solishning yangi usulini taqdim etadi.
Vue-ni ishlab chiquvchilar Suspense-da ishlashadi, bu sizning komponentingizning ishlashini to'xtatadi va shart bajarilmaguncha qo'shimcha komponentni taqdim etadi.
Vue-ning yangilanishlari bilan bog'liq bo'lgan eng yaxshi narsalardan biri bu orqaga qarab muvofiqlikni ta'minlashdir. Ular sizning eski Vue loyihalaringizni buzishingizni xohlamaydilar. Biz buni 1.0 dan 2.0 gacha bo'lgan migratsiyada ko'rdik, bu erda API ning 90 foizi bir xil edi.
Kadrlar sintaksisini qanday taqqoslash mumkin?
Uchala ramka ham chiqqandan beri o'zgarishlarga duch keldi, ammo tushunish uchun juda muhim bo'lgan narsa sintaksis va uning farqi. Keling, oddiy voqealarni bog'lash haqida gap ketganda sintaksisni qanday taqqoslashini ko'rib chiqaylik:
Vue: The v-on direktivasi Vue instansiyalarida usullarni chaqiradigan voqea tinglovchilarini biriktirish uchun ishlatiladi. Direktivalar prefiks bilan qo'shiladi v- ular Vue tomonidan taqdim etilgan maxsus atributlar ekanligini ko'rsatish va ko'rsatilgan DOMga maxsus reaktiv xatti-harakatlarni qo'llash uchun. Voqealar ishlovchilari qatorda yoki usul nomi bilan ta'minlanishi mumkin.
Andoza> v-on tugmasi: click = "clickHandler"> Meni bosing / tugma> / shablon> skript> eksport sukuti {nomi: "HelloWorld", usullari: {clickHandler: function () {console.log ("Men bosilganman! ”); }}}; / skript>
Reaksiya: React JavaScript-ga sintaksis kengaytmasi bo'lgan JS va JSX-ga belgi va mantiq qo'yadi. JSX bilan funktsiya voqea ishlovchisi sifatida uzatiladi. Hodisalarni React elementlari bilan ishlash DOM elementlaridagi hodisalarga ishlov berishga juda o'xshaydi. Ammo ba'zi sintaktik farqlar mavjud; Masalan, React hodisalari kichik harflar o'rniga CamelCase yordamida nomlanadi.
function Button () {function clickHandler (e) {console.log ("Men bosilganman"); } qaytish tugmasi onClick = {clickHandler}> Meni bosing! / tugma>; }
Burchak: Hodisalarni majburiy sintaksis teng belgining chap tomonidagi qavs ichida maqsadli voqea nomidan va o'ng tomonda keltirilgan shablon bayonotidan iborat. Shu bilan bir qatorda, dan foydalanishingiz mumkin kuni kanonik shakl sifatida tanilgan prefiks.
@Component ({selektor: "app-click-me", shablon: `button (click) =" onClickMe () "> Meni bosing! / Tugma>`})) eksport sinfi ClickMeComponent {onClickMe () {console.log (" Siz meni chertdingiz! ”); }}
Ommaboplik va bozor
Keling, W3Techs-ning statistikasini o'rganish orqali veb-saytning qolgan qismiga oid uchta ramkaning umumiy rasmini ko'rib chiqishni boshlaymiz. Hozirda burchakdan barcha veb-saytlarning 0,4 foizi foydalanadi, JavaScript kutubxonasining bozordagi ulushi 0,5 foizni tashkil qiladi. Reakt barcha veb-saytlarning 0,3 foizida va JavaScript-ning kutubxonada bozor ulushining 0,4 foizida, Vue-ning ikkalasida ham 0,3 foizida foydalaniladi. Bu juda teng bo'lib tuyuladi va siz raqamlar ko'payishini kutasiz.
Google trendlari: So'nggi 12 oy ichida React qidiruv so'zlari bo'yicha eng ommabop bo'lib, Angular tomonidan ta'qib qilinadi. Vue.js juda orqada; ammo, bir narsani yodda tutish kerakki, Vue qolgan ikkisiga nisbatan hali ham yosh.
Ish izlash: Yozish paytida React va Angular haqiqatan ham Vue-da ish ro'yxatlari jihatidan juda mos keladi. Ammo, LinkedIn-da, Vue dasturchilariga ko'proq talab mavjud.
Stack overflow: Agar siz 2019 yil uchun Stack Overflow Developer So'rov natijalarini ko'rib chiqsangiz, React va Vue.js ikkalasi ham eng sevilgan va kerakli veb-ramkalardir. Burchakli eng sevimli, ammo uchinchi o'ringa ega bo'lganlar uchun to'qqizinchi o'ringa o'tiradi.
GitHub: Vue-da eng ko'p yulduzlar soni 153 k ga teng, ammo u eng kam ishtirokchilarga ega (283). Boshqa tomondan reaktsiya 140k yulduz va 1341 ta hissa qo'shuvchiga ega. Burchakda faqat 59,6 ming yulduz bor, ammo 1579 bilan uchta ishtirokchi orasida eng ko'p hissa qo'shganlar soni bor.
NPM tendentsiyalari: Yuqoridagi rasmda so'nggi 12 oylik statistik ma'lumotlar keltirilgan bo'lib, u erda React oylik va Vue bilan taqqoslaganda oyiga ko'proq yuklab olinganligini ko'rishingiz mumkin.
Mobil ilovalarni ishlab chiqish
Katta uchlikning asosiy yo'nalishlaridan biri bu mobil aloqa. React-da React Native mavjud bo'lib, u nafaqat React foydalanuvchilari uchun, balki keng dastur ishlab chiquvchilar hamjamiyati uchun iOS va Android dasturlarini yaratish uchun mashhur tanlovga aylandi. Burchakli dasturchilar mahalliy dasturlar uchun NativeScript-ni yoki gibrid mobil ilovalar uchun Ionic-dan foydalanishlari mumkin, Vue-da ishlab chiquvchilar NativeScript yoki Vue Native-ni tanlashlari mumkin. Mobil ilovalar mashhurligi sababli, bu investitsiyalarning asosiy yo'nalishi bo'lib qolmoqda.
2020 yilda e'tiborga olinadigan boshqa ramkalar
Agar siz 2020 yilda yangi narsani sinab ko'rishni istasangiz, ushbu JavaScript-ni ko'rib chiqing.
Amber: MVVM namunasi asosida ishlaydigan veb-dasturlarni yaratish uchun ochiq manbali ramka. Undan Microsoft, Netflix va LinkedIn kabi bir nechta yirik kompaniyalar foydalanadi.
Meteor: Zamonaviy veb va mobil dasturlarni ishlab chiqish uchun to'liq to'plamli JavaScript platformasi. O'rganish oson va juda qo'llab-quvvatlovchi hamjamiyatga ega.
Xulosa
Uchala ramka ham doimiy ravishda takomillashib boradi, bu rag'batlantiruvchi belgidir. Har kimning qaysi biri ishlatilishi kerakligi haqida o'z nuqtai nazari va afzal ko'rgan echimi bor, lekin bu haqiqatan ham loyihaning hajmiga to'g'ri keladi va bu sizni yanada qulay his qiladi.
Eng muhim jihat - bu o'z jamoalarining doimiy qo'llab-quvvatlashidir, shuning uchun agar siz yangi loyihani boshlashni rejalashtirmoqchi bo'lsangiz va uchtasidan hech birini ishlatmagan bo'lsangiz, demak, ularning barchasi bilan ishonchli qo'lingizda ekanligingizga ishonaman. Agar sizda hali uchta ramkadan birini o'rganish imkoniyati bo'lmagan bo'lsa, unda men sizning yangi yil qaroringizni o'rganishni boshlashingizni tavsiya qilaman. Kelajak shu uchtasi atrofida bo'ladi.
Ushbu tarkib dastlab net jurnalida paydo bo'ldi.
