Nega biz 2-burchakdan Vue.js-ga ko'chib o'tdik (va nima uchun React-ni tanlamadik)

Luis Elizondo tomonidan

Rever-da (www.reverscore.com) biz hozirgina Vue.js-dan foydalanib veb-mijozimizning yangi versiyasini chiqazdik. 641 marta va 16 haftalik jadal rivojlanishdan so'ng, biz bu erda bir oz oldin qabul qilingan qarorimizdan juda g'ururlanamiz.

8 oy oldin bizning veb-mijozimiz Angular 2-ni ishlatgan. Aniqroq aytganda, u Angular 2 beta 9-ni ishlatgan. Bu mahsulot autsorsing kompaniyasi tomonidan yozilgan bo'lib, biz UX / UI-dan tortib to ko'p bosqichlarda unga hech qachon to'la xursand bo'lmadik. me'morchilik va qandaydir darajada, burchak 2 ning o'zi.

Davom etishdan oldin, Angular 2 beta 9-ning Angular 2.0-dan farqli bo'lgan mahsulot ekanligini tan olaman, ammo bu aniq muammolardan biri edi. Beta9 dan 2.0.0 gacha 8 beta versiyasi, 8 RC va 2.0.0 versiyasining o'zi, jami oshirish uchun 17 versiya mavjud. Biz beta 9-dan 2.0.0-ga yangilashga harakat qildik, ammo juda ko'p narsalar buzilib ketdi, bu yangilanishni arzimas narsaga aylantirmadi. Shu bilan bir qatorda, biz 2-burchakni tanlaganimiz uchun savol berayotgan edik, Angular jamoasi 4-burchakda ishlashni boshlashga qaror qilishdi, ammo ular bu juda qattiq bo'lmaydi deb va'da berishdi, shu bilan biz Angularni yangilashni yakunladik. 2.0.0 bizga yana bir yangilanishni talab qilishi kerak edi. Bu vaqtni behuda sarflash va cheklangan resurslar.

Bizga yoqmagan va bizga hali ham yoqmagan asosiy narsa bu Typcriptcript. Men bilaman, 2-burchakdan Javascript bilan foydalanish mumkin, lekin yana shuni aytmoqchimanki, Typecript-ni ishlatish to'g'risida qaror allaqachon qabul qilingan va men tushunganimdan toza Angliya-2 bilan Javascript-dan foydalanish siz Angular 2-dan foydalanishning ideal usuli emas. Qanday bo'lmasin, qutulasiz. Typecript loyihaning to'liq yozilishini anglatadi.

Men Typecript katta qiymat qo'shganini his qilmadim va bundan ham yomoni, biz kodlash tezligi pasayganini sezdik. Javascript-da bajarish juda oson bo'lgan Typecript bilan narsalar oddiygina ob'ektni belgilash kabi Typecript-da bajarishda murakkabroq edi. Sizga Typecript ni ishlatishni boshlashdan oldin quyidagi maqolalarni o'qishni maslahat beraman. Bu hamma uchun to'g'ri echim emas.

Hali ham eslayman 1-burchak bilan ishlash oson edi, uning o'z muammolari bor edi, lekin boshqa ramkalar bilan taqqoslaganda u bilan ishlash yoqimli edi, chunki yo'lda biron bir joyda yo'qolgan 2-burchak. Angular 2 haqidagi xulosam juda sodda edi, 1-burchak va 2-burchaklarning umumiy tomoni - bu ism, ular butunlay boshqa ramkalardir.

Shunday qilib, bizda sinovdan o'tmagan tizimni yangilashning 17 versiyasi borligini, yangi funktsiyalarni yozish uchun biznes tomonidan juda ko'p bosim, xatolar va yomon yozilgan kodni ishlab chiqdik, original ishlab chiqaruvchilar endi jamoada emas edilar, bittagina ishlab chiqaruvchi. (men) bir vaqtning o'zida boshqa ko'plab majburiyatlar, Typcript, beta-versiyadan foydalanganim uchun to'g'ri hujjatlarni topishda muammolar bor va Angular 2-versiya 4-versiyaga o'tgandan so'ng, salbiy narsalar ro'yxati juda tez to'plana boshladi.

Biz qaror qildik, agar yangilanish uchun ko'p vaqt sarflamoqchi bo'lsak, avval boshqa variantlar bor-yo'qligini ko'rishimiz kerak. Va qildik.

Reaktsiya qiling

Birinchi aniq tanlov bu munosabat edi, chunki hamma buni qilyapti va boshqalari bu haqda gapirishmoqda. Shunday qilib, bu bitta variant edi, albatta Facebook buning orqasida ekanligini bilib yordam beradi. Biroq, React-ning o'zi ramka emas, uni porlashi uchun qo'shimcha narsalarni qo'shish kerak.

Vue.js

Vue.js yangi pleyer edi, men bu haqda hech qachon eshitmaganman, garchi ular har xil variantlarni ko'rib chiqishni boshlaganimizda, ular 2-versiyani qaytarib berishgan. Avvaliga bu bizning e'tiborimizni tortdi, lekin bu xavfli ko'rinardi.

Qaror qabul qilish jarayoni

Biz birinchi navbatda qarorlarimizning maqsadlari nimani anglatishini aniqlashni boshladik. Biz tushlarimizning doirasi quyidagilarga ega bo'lishi kerakligini bilardik:

  1. Barqaror bo'lishi kerak
  2. Kuchli jamoa yoki ba'zi katta o'yinchilar tomonidan qo'llab-quvvatlanadi
  3. StackOverflow-da yaxshi hujjatlar yoki ko'plab savollar
  4. O'rganish oson
  5. Bootstrap bilan integratsiya
  6. Kichik o'lcham
  7. Ideal holda, bu kodni qayta ishlatishga imkon beradi
  8. Kodlash tezligini sinovdan o'tkazish kerak
  9. Reaktivlik
  10. Komponent asosida

Qarorimiz bo'yicha qarorlar qabul qilingandan so'ng, men qo'llarimni bulg'ashga majbur bo'ldim, shuning uchun Google tomonidan javob berilmaydigan har bir fikrni ko'rib chiqish uchun React va Vue.js-ga har ikki kun berdim. Men ularning hech biri haqida hech narsa bilmasligim sababli, ikki kundan so'ng, biz ko'chib o'tmoqchi bo'lgan haqiqiy loyihaning ba'zi qismlarini qayta yozishga qanchalik o'rganganimni qayta ko'rib chiqaman.

Men qayta yozishni tanlagan qismlar:

  1. Ba'zi asosiy API qo'ng'iroqlar
  2. Ikki xil sahifalar uchun ikkita tartib.
  3. Foydalanuvchi bilan bog'liq narsalar uchun reaktivlik
  4. Kirish shakllari va ba'zi tarkib shakllari
  5. Bitta yuklash chizig'i modali

Men Vue.js bilan qancha tanish bo'lganimdan hayron bo'ldim, bir necha kun ichida men jamoaning qolgan a'zolariga va mening CTOga ko'rsatadigan kontseptsiyaning isbotiga ega bo'ldim. Men Vue.js-ning asosiy tushunchalarini yaxshi tushunib etdim, yaxshi va kengaytiriladigan arxitekturani aniqladim, lekin eng muhimi, kodni yozish tajribasi menga juda yoqdi va men uni React-ga qaraganda tezroq bajarayotganimni his qildim.

Reaksiya men o'ylagandan ko'ra qiyinroq edi, Redux va MobX-ni tanlash Vue.js va Vuex singari yaxshi uyg'unlashgan bitta variantni tanlashdan ko'ra muammoli. Bu juda oson, chunki ramka bilan ishlash tajribasi bo'lmaganda, sizga biror narsa qilish uchun rasmiy kutubxonaga ega bo'lgandan ko'ra ko'proq ma'lumotga ega bo'lish imkonini beradi. Aytgancha, men Vuex-ga Reduxga qaraganda reaktivlik osonroq ekanligini his qildim, lekin bu barcha o'rganish chiziqlari singari shunchaki idrok edi.

JSX ham muammo edi, chunki biz HTML kodni qayta ishlata olmadik va Vue.js bizga ma'lum darajada buni amalga oshirishga imkon berdi. Vue fayllar bilan ishlash juda yaxshi, chunki men shablon shablonlarini yoqtirmayman. React JSX / HTML ni ikkalasini ham JS kodi bilan aralashtiradi, chunki men uni yoqtirmayman, chunki men xavotirlarni ajratishga qattiq ishonaman va bu juda yomon IMHO ko'rinadi.

Kodlash tezligi

Kodlash tezligi Vue.js tomonidan qo'lga kiritilgan maydon edi, ammo JSX-ni o'rganmasdan katta yordam berdi. Keyinchalik ushbu tezlik yana bir ishlab chiqaruvchi loyihaga qo'shilganida va taxminan 1 soatlik mashg'ulotdan so'ng bir necha soat ichida loyihaga hissa qo'shganida tasdiqlandi.

Bu biz uchun nihoyatda muhim edi va uni darhol vue faylini ochib ko'rishingiz mumkin. U HTML va teglar bilan shablon bo'limi va 1-burchakka o'xshash teglarni o'z ichiga oladi, shuning uchun agar siz ba'zi burchakli 1-ni bajargan bo'lsangiz, bu haqiqatan ham tanish bo'ladi. Vue faylida shuningdek, uslublar va toza javascript bo'limlari mavjud bo'lib, unda siz aslida javascript-dan foydalanasiz va ularni to'liq tushunish uchun Vue.js haqida faqat bir nechta narsalarni bilib olishingiz kerak. Vue.js xususiyatlarini tushunish usullar, hisoblanganlar, ma'lumotlar va yaratilgan narsalar kabi kodlashni boshlash uchun tushunishingiz kerak bo'lgan narsalarning 90% ni oladi, bu juda oson.

Hujjatlar

Tezlikni oshirish uchun bizga yaxshi hujjatlar kerak edi va Vue.js hujjatlari juda zo'r. Qo'llanmalar, misollar, savollar va API juda yaxshi hujjatlashtirilgan va rivojlanish jarayonida topilgan barcha shubhalarni qamrab oladi. Biz ko'plab savollarga xitoylik hujjatlarni topishga qo'rqardik, ammo bunday emas edi, hamma ingliz tilida mavjud edi.

Atrofda so‘rash

Bir haftadan ko'proq ko'rib chiqilgandan so'ng Vue.js juda yaxshi ko'rinishga ega edi, ammo ajablantiradigan bo'lsam, atrofni so'rash befoyda edi, chunki oldin hech kim Vue.js-ni ishlatmagan edi, mening yagona sharhim "ajoyib ko'rinishga ega, ammo menda yo'q" deb aytilgan. t ishlatilgan ”. React eng zikrlarni qabul qildi va Angular 2 uzoq ikkinchi o'rinni egalladi.

Men Vue.js tajribasi bilan mahalliy iste'dodlarni izlay boshladim va haqiqatan ham yaxshi odamlarni topdim, shuning uchun men yolg'iz emasman deb o'ylay boshladim, mening ijtimoiy texnik doiram juda kichik edi va men unga etarlicha e'tibor bermasligim kerak edi. men Vue.js bilan ishlab chiqarish bo'yicha ishlaydigan shaxslarni bilmasligim.

Mobil

Vue.js vs React haqida o'ylayotgan paytda, biz mobil ilovamizni qayta yozishni ham o'ylardik va React Native chindan ham yaxshi tanlovga o'xshardi. Reue uchun bu katta yutuq bo'ldi, chunki Vue.js-da React Native bajarishga urinadigan narsaga o'xshash uzoqdan barqaror narsa yo'q edi, shuning uchun veb va ilova mijozlari o'rtasida kodni qayta ishlatish imkoniyati juda katta plyus edi, ammo men qaror qildim. bo'lishi mumkin yoki mumkin bo'lmagan imkoniyatlarni ko'rib chiqmoqchi emas edi. Node.js-dan foydalanib, men o'z tajribamdan kelib chiqib, brauzer va server o'rtasida juda kam miqdordagi kodni qayta ishlataman.

Litsenziyalash

Men yozayotgan paytda, juda ko'p munozaralar mavjud, chunki Facebook React litsenziyasini BSD + Patentlarga o'zgartirdi. Facebook'ning ta'kidlashicha, ushbu litsenziya ularni patent nazorati ostida himoya qilish uchun mo'ljallangan. Bu bizning qarorlar qabul qilish jarayonida juda oddiy bo'lmagan, ammo biz Reaksiya yo'lidan bormaganimizdan xursandman, chunki litsenziyalar bilan bog'liq har qanday shovqin siz eshitishni xohlagan shovqin emas.

Oxir oqibat, Facebook React-ning orqasida qolishi kuch emas, balki loyiha uchun javobgarlikka aylanishi mumkin, shuning uchun muvaffaqiyatli Ochiq kodli dasturiy ta'minot loyihasi uchun mustaqil fondlar yoki tashkilotlarga ega bo'lish yaxshiroqdir. Facebook to'g'ri ish qilishi, IBMni namuna qilib olishi kerak, IBM Strongloop-ni sotib olganda, Express.js-ni Node.js-ga bunday muhim dasturiy ta'minotga asos solgan. Jamiyatning bosimi va IBM tomonidan dastur ta'minotining uzluksizligini ta'minlashga tayyorligi. Twitter yana bir yaxshi namunadir, ular BITstrap-ni MIT litsenziyasi ostida chiqardilar va hech kim Bootstrap bilan bog'liq litsenziya muammolari haqida gapirmaydi.

Yakuniy so'zlar

Qaror qabul qilishdan oldin tadqiq qilgan ko'plab veb-sahifalarimdan bitta grafika e'tiborimni jalb qildi, har yili Sacha Greif @sachagreif tomonidan o'tkaziladigan Javascript so'rovining holati haqida mamnuniyat. Qabul qilaman, muallif aytganidek, bu ilmiy tadqiqot emas, ammo u juda ko'p ma'lumotni taqdim etadi va keyinchalik biz Vue.js haqida yanada aniqroq rasmga ega bo'lganimizda, bu bizning qarorlarimiz bilan tasdiqlandi, chunki biz bu haqda hech narsa bilmas edik. tadqiqotimizning boshlanishi. Siz Javascript shtati bilan quyidagi havolada tanishishingiz mumkin.

Umuman olganda, Vue.js bizning baholashimizda g'olib bo'ldi, Stack Overflow-da ko'plab savollarga javoblar topildi, uchta variantning eng aniq rasmiy hujjatlari, eng kichik kod bazasi, Bootstrap bilan yaxshi birlashadi va uning kuchli loyihalar tomonidan qo'llab-quvvatlanganligini bilib olamiz. Laravel va Alibaba kabi katta kompaniya katta yutuq edi. React singari katta jamoaga ega bo'lish haqiqiy omil emas edi, chunki u etarlicha katta edi.

Vue.js-ga o'tish to'g'ri tanlov edi, mening CTO-ni ishontirishga ko'p vaqt kerak bo'ldi, lekin minnatdorman, u har doim to'g'ri va qiyin savollarni bergan va qarorimdan 100% amin bo'lishga majbur qilganimdan afsuslanaman. agar men xato qilsam. Menimcha, uning kichik bir qismi bor edi, u to'liq tarkibni yozmaguncha va uni juda oson topmaguncha.

Oxir oqibat, qaror qabul qilishning barcha jarayoni chindan ham foydali bo'ldi, ammo men haqiqatan ham tez o'rgana olganim juda katta farq qildi, agar xohlasangiz, bu ichak tuyg'usi deb nomlang, lekin haqiqatan ham tezkor bir narsani o'rganish menga yanada murakkab muammolarga katta ishonch bag'ishladi. Haqiqiy rivojlanish paytida men duch kelishimni bilar edim.

Reaksiya bu noto'g'ri tanlov emas, demoqchiman, jamiyat qanchalik katta ekanligi meni hayron qoldiradi va bunga yaxshi sabab bor, lekin jQuery kattaroq va bu biz xohlagan loyiha uchun yaxshi ramka / kutubxona qilmaydi. qilmoq.

Vue.js tobora kuchayib bormoqda va rivojlanish jarayonida biz to'g'ri tanlovni qabul qilganimizga ishonch hosil qildik.

Biz soddalikni qadrlaymiz va Vue.js ushbu soddaligi o'rganish chizig'ida, hujjatlarda va ayniqsa kodlash tezligida aks etadi. Agar siz hali ham adashgan bo'lsangiz yoki qo'shimcha dalillar kerak bo'lsa, quyidagi havolani o'qib chiqishingizni so'rayman:

Rever (www.reverscore.com) - bu har kuni kompaniyalarga o'z xodimlarini frontline innovatsiyalariga jalb qilish imkonini beradigan onlayn platforma. Rever innovatsiyani buzadi va uni hamma uchun odatiy holga aylantiradi. Biz doimo yollaymiz, agar siz ajoyib texnologiya jamoasi bilan ishlashni istasangiz, https://reverscore.com/careers/ saytida bizning imkoniyatlarimizni tekshirib ko'ring.

Luis Elizondo Rever-da etakchi muhandis bo'lib, u Backend va Frontend veb-dasturlarini ishlab chiqadi. Shuningdek, u avtomatlashtirish, infratuzilma, tizimlar arxitekturasi va xavfsizlikka mas'uldir. U bir nechta dasturlash tillari bilan ishlash, amaliy arxitekturalarni loyihalash, jarayonlar va operatsiyalarni avtomatlashtirish va bulutli serverlarni boshqarish bo'yicha 10 yillik tajribaga ega.