Juda katta (JavaScript) dasturlarni loyihalash

Bu mening Avstraliyadagi nutqimning engil tahrirlangan stsenariyidir. Butun nutqni YouTube orqali tomosha qiling.

Slayd matni: Salom, men juda katta JavaScript dasturlarini qurishda foydalanardim.

Assalomu alaykum, men juda katta JavaScript dasturlarini qurardim. Men endi bunday qilmayman, shuning uchun men bir oz retrospektivani aytib berish va bilib olganlarimni baham ko'rish uchun yaxshi vaqt deb o'yladim. Kecha men konferentsiyada pivo ichdim va mendan: "Hey Malte, mavzu haqida gapirishga sizga nima huquq, vakolat bor?" Deb so'rashdi va men bu savolga javob berish aslida ushbu suhbat uchun mavzudir, deb o'ylayman. Men odatda o'zim haqimda gaplashish g'alati tuyaman. Shunday qilib, men ushbu JavaScript doirasini Google-da yarataman. U fotosuratlar, saytlar, plyus, disk, pleer, qidiruv tizimi va ushbu saytlarning barchasida qo'llaniladi. Ulardan ba'zilari juda katta, siz ulardan bir nechtasini ishlatgan bo'lishingiz mumkin.

Slayd matni: Men React yaxshi deb o'yladim.

Ushbu Javascript doirasi ochiq manba emas. Ochiq manba emasligining sababi shundaki, u reaktsiya paytida bir vaqtning o'zida paydo bo'ldi va men "dunyo haqiqatdan ham tanlash uchun boshqa JS tizimiga muhtojmi?" Kabi edi. Google allaqachon burchakli va polimerlarga ega va boshqasi odamlarni chalkashtirib yuboradiganga o'xshaydi, shuning uchun men buni o'zimiz uchun saqlaymiz deb o'yladim. Ammo ochiq manba bo'lmaslikdan tashqari, men undan ko'p narsalarni o'rganishimiz kerak va biz yo'l davomida o'rgangan narsalarimizni baham ko'rishga arziydi.

Ko'p odamlarning rasmi.

Shunday qilib, keling, juda katta dasturlar va ularning umumiy narsalari haqida gaplashaylik. Albatta, ishlab chiquvchilar ko'p bo'lishi mumkin. Bu bir necha o'nlab yoki undan ham ko'proq bo'lishi mumkin - va bu odamlar hissiyotlari va shaxslararo muammolari bo'lgan odamlardir va bunga siz ham e'tibor berishingiz kerak.

Juda eski binoning rasmi.

Va sizning jamoangiz unchalik katta bo'lmasa ham, ehtimol siz bir muncha vaqt ishlaganmisiz va ehtimol siz uni saqlaydigan birinchi odam bo'lmasangiz ham, butun kontekstga ega bo'lmasligingiz mumkin, sizda bu narsalar bo'lishi mumkin. chindan ham tushunmayapman, sizning jamoangizda ilova haqida hamma narsani tushunmaydigan boshqa odamlar ham bo'lishi mumkin. Bu juda katta dasturlarni yaratishda o'ylashimiz kerak bo'lgan narsalar.

Tweet so'zlari: Yosh muhandislarsiz katta muhandislar jamoasi - muhandislar jamoasi.

Men bu erda qilishni istagan yana bir narsa, bu bizning martaba nuqtai nazaridan biroz tushuncha berishdir. O'ylaymanki, ko'pchiligimiz o'zlarini katta muhandis deb bilamiz. Yoki biz hali unday emasmiz, lekin biz bo'lishni xohlaymiz. Katta bo'lish degani, men kimdir menga tashlab qo'yadigan deyarli har qanday muammoni hal qila olaman. Men vositalarimni bilaman, o'z domenimni bilaman. Bu ishning yana bir muhim tomoni shundaki, men yosh muhandislarni pirovardida katta muhandislikka aylantiraman.

Slayd matni: Kichik -> Katta ->?

Ammo nima bo'ladi, bir muncha vaqt biz "keyingi qadam qanday bo'lishi mumkin?" Degan savol tug'ilishi mumkin. Katta yoshlik bosqichiga etganimizda, keyingi safar nima qilishimiz kerak? Ba'zilarimiz uchun javob boshqaruv bo'lishi mumkin, ammo men hamma uchun javob bo'lishi kerak deb o'ylamayman, chunki hamma ham menejer bo'lmasligi kerak, shunday emasmi? Ba'zilarimiz chindan ham buyuk muhandislar va nima uchun biz umr bo'yi bunday qilmasligimiz kerak?

Slayd matni:

Men bu yuqori darajadan yuqoriga ko'tarilishni taklif qilmoqchiman. Men o'zimning katta muhandis sifatida o'zim haqida gapirishimning usuli shundan iboratki, men "muammoni qanday hal qilishimni bilaman" deb aytaman va uni qanday hal qilishimni bilganim sababli, boshqa kishiga ham buni o'rgatishim mumkin edi.

Slayd matni:

Mening nazariyam shundan iboratki, keyingi bosqich men o'zim haqimda "boshqalar muammoni qanday hal qilishlarini bilaman" deb ayta olaman.

Slayd matni:

Buni biroz aniqroq qilaylik. Siz bu jumlani shunday tuzasiz: "Men qanday API qilayotganimni yoki loyihaga kiritayotgan mavhumliklarim, ular boshqa odamlarning muammoni hal qilishlariga qanday ta'sir qilishini oldindan ko'ra olaman." Menimcha, bu kuchli tushuncha Bu mening qarorlarim ilovaga qanday ta'sir qilishi to'g'risida fikr yuritishga imkon beradi.

Slayd matni: Hamdardlik bildirish.

Men buni hamdardlik deb atardim. Siz boshqa dastur muhandislari bilan fikrlashyapsiz va nima qilayotganingizni va ularga berilgan API-larni, ular dasturlarni yozishga qanday ta'sir qilishini o'ylayapsiz.

Slayd matni: oson rejimda hamdardlik.

Yaxshiyamki, bu oson rejimdagi hamdardlik. Hamdardlik odatda qiyin va bu hali ham juda qiyin. Ammo hech bo'lmaganda siz hamdard bo'lgan odamlar, ular boshqa dastur muhandislari. Va shuning uchun ular sizdan juda farq qilishi mumkin bo'lsa-da, ular hech bo'lmaganda dasturiy ta'minotni yaratishda umumiyliklarga ega. Ushbu turdagi hamdardlik, siz ko'proq tajriba orttirganingizda juda yaxshi narsaga erishishingiz mumkin.

Slayd matni: Dasturlash modeli

Ushbu mavzular haqida o'ylasam, men aytmoqchi bo'lgan muhim bir atama bor - bu dasturiy model - bu men juda ko'p foydalanmoqchi bo'lgan so'z. Bu "berilgan API yoki kutubxonalar, yoki ramkalar yoki vositalar to'plami - odamlar bu kontekstda dasturlarni qanday yozishni anglatadi" degan ma'noni anglatadi. Va mening nutqim haqiqatan ham, API va shu kabi nozik o'zgarishlar, ular qanday ishlashi haqida. dasturlash modeliga ta'sir qilish.

Slayd matni: Dasturlash modeliga ta'sir ko'rsatuvchi misollar: React, Preact, Redux, npm, npm dan sana tanlagich

Dasturlash modeliga ta'sir ko'rsatadigan bir nechta misollarni keltirmoqchiman: Aytaylik, siz burchakli loyihangiz bor va siz "Men buni Reaktsiya qilish uchun portlataman" deb aytasiz, bu aniq dasturiy ta'minot yozishni o'zgartiradi, to'g'rimi? Ammo keyin siz "Oh, bir oz virtual DOM almashtirish uchun 60KB, Preact-ga o'taylik" kabi bo'lib, u API-ga mos keladigan kutubxona bo'lib, odamlar dasturni qanday yozishni o'zgartira olmaydi, chunki siz ushbu tanlovni qilgansiz. Ehtimol, siz "bu juda ham murakkab, mening dasturim qanday ishlashini boshqarish kerak, men Redux-ni taqdim qilaman" kabi narsa bo'lishi mumkin - bu odamlar dasturlarni qanday yozishlarini o'zgartiradi. Keyin siz "bizga sanani tanlaydigan odam kerak" degan talabni olasiz va siz soat nmga borasiz, 500 ta natija bor, bittasini tanlaysiz. Qaysi birini tanlaganingiz muhimmi? Bu sizning dasturiy ta'minotingizni qanday yozishni o'zgartira olmaydi. Ammo npm barmoqlaringiz uchida bo'lsa, ushbu modullarning katta to'plami sizning dasturiy ta'minotni yozishni butunlay o'zgartirib yuboradi. Albatta, bu odamlar dasturlarni yozishiga ta'sir qilishi yoki ta'sir qilishi mumkin bo'lgan narsalarning bir nechta namunalari.

Slayd matni: Kodni ajratish

Endi siz foydalanuvchilarga etkazganingizda, barcha katta JavaScript dasturlari umumiy bo'lgan bir jihat to'g'risida gapirishni istayman: Ya'ni, ular shu qadar katta bo'ladiki, siz ularni birdaniga etkazib berishni xohlamaysiz. Va buning uchun biz hammaga kodlarni ajratish deb nomlangan ushbu texnikani joriy etdik. Kodni ajratish nimani anglatadi, bu sizning ilovangiz uchun to'plamlar to'plamini aniqlaydi. Shunday qilib, siz "Ba'zi bir foydalanuvchilar faqat mening ilovamning bu qismini ishlatadilar, ba'zi foydalanuvchilar boshqa qismini ishlatadilar" deb aytmoqdasiz va shu bilan siz foydalanuvchi aslida ishlayotgan ilovaning qismi bajarilganda yuklab olinadigan to'plamlarni to'playsiz. Bu hammamiz qila oladigan narsadir. Ko'pgina narsalar kabi, bu hech bo'lmaganda JavaScript dunyosida yopuvchi tuzuvchi tomonidan ixtiro qilingan. Ammo menimcha, kodlarni ajratishning eng mashhur usuli bu veb-paket. Va agar siz juda ajoyib bo'lgan RollupJS-dan foydalanayotgan bo'lsangiz, ular yaqinda uni qo'llab-quvvatladilar. Shubhasiz, nimadir qilish kerak, lekin buni dastur bilan tanishtirganda o'ylashingiz kerak bo'lgan narsalar bor, chunki bu dasturiy modelga ta'sir qiladi.

Slayd matni: Sync -> Async

Sizda sinxronlashtiriladigan narsalar bor, endi ular asinxron bo'lib qoladi. Kodni ajratmasdan, sizning arizangiz yoqimli va sodda. Bu bitta katta narsa bor. U boshlanadi va keyin u barqaror, siz bu haqda o'ylashingiz mumkin, narsalarni kutishingiz shart emas. Kodni ajratish bilan siz ba'zida "Oh, menga bu to'plam kerak" deb aytishingiz mumkin, shuning uchun endi tarmoqqa kirishingiz kerak va siz bu sodir bo'lishi mumkinligini aniqlashingiz kerak va shuning uchun dasturlar yanada murakkablashadi.

Slayd matni: Inson

Shuningdek, biz odamlarni maydonga kiritamiz, chunki kodni ajratish to'plamlarni aniqlashni talab qiladi va ularni qachon yuklash haqida o'ylab ko'rishni talab qiladi, shuning uchun bu odamlar, sizning jamoangizdagi muhandislar, endi nima bo'layotganini hal qilishlari kerak. to'plamni va uni qachon yuklash kerakligini. Har safar biron bir odam ishtirok etganda, bu dasturlash modeliga aniq ta'sir qiladi, chunki ular bunday narsalar haqida o'ylashlari kerak.

Slayd matni: Yo'nalishga asoslangan kodlarni ajratish

Ushbu muammoni hal qiladigan bitta aniq yo'l mavjud, bu kodni ajratish paytida insonni tartibsizliklardan xalos qiladi, bu kodni marshrutga asoslangan bo'linish deb ataladi. Agar siz hali ham kodni ajratishda foydalanmasangiz, demak buni birinchi qism sifatida qilishingiz kerak. Yo'nalishlar - bu ilovangizning asosiy URL tuzilmasi. Masalan, siz o'zingizning mahsulot sahifalaringizni `/ product / 'da olishingiz mumkin va sizning kategoriya sahifalaringiz boshqa joyda bo'lishi mumkin. Siz har bir marshrutni bitta to'plamga aylantirasiz va sizning yo'riqnomaingiz endi kodni ajratish borligini tushunadi. Foydalanuvchi marshrutga borganda, yo'riqnoma ulangan to'plamni yuklaydi va keyin ushbu yo'nalish bo'ylab mavjud bo'lgan kodni ajratishni unutishingiz mumkin. Endi siz hamma uchun katta to'plamga ega bo'lish bilan deyarli bir xil bo'lgan dasturiy modelga qaytmoqdasiz. Buni amalga oshirish uchun, albatta, juda yaxshi usul va albatta birinchi yaxshi qadam.

Ammo ushbu nutqning nomi juda katta JavaScript dasturlarini loyihalashtirmoqda va ular shunchalik katta bo'ldiki, marshrutlarga bitta to'plamni endi amalga oshirishning iloji bo'lmasligi mumkin, chunki yo'nalishlarning o'zi juda katta bo'lib qoladi. Men aslida etarlicha katta bo'lgan dastur uchun yaxshi namunaga egaman.

Google Search so'rovining skrinshotini

Men qanday qilib ushbu nutqqa chiqadigan ommaviy ma'ruzachi bo'lishni bilmoqchi edim va bu yoqimli havolalar ro'yxatini oldim. Siz ushbu sahifaning bitta marshrut to'plamiga mos kelishini to'liq tasavvur qilishingiz mumkin.

Google qidiruv so'rovining

Ammo keyin men ob-havo haqida hayron bo'ldim, chunki Kaliforniyada qahraton qish bor edi va to'satdan butunlay boshqa modul paydo bo'ldi. Shunday qilib, oddiy ko'rinadigan bu yo'nalish biz o'ylagandan ko'ra murakkabroq.

Va keyin meni ushbu konferentsiyaga taklif qilishdi va 1 AQSh dollari Avstraliya dollarida qancha ekanligini va bu erda murakkab konvertor mavjudligini tekshirib ko'rdim. Shubhasiz, ushbu ixtisoslashgan modullarning mingdan ko'prog'i bor va ularning barchasini bitta to'plamga qo'yish mumkin emas, chunki bu to'plam bir necha megabayt hajmga ega bo'ladi va foydalanuvchilar haqiqatan ham baxtsiz bo'lishadi.

Slayd matni: Komponent darajasida yolg'on yuk?

Shunday qilib, biz shunchaki marshrutga asoslangan kodni ajratish usulidan foydalana olmaymiz, buni boshqa usul bilan o'ylab topishimiz kerak. Yo'nalishga asoslangan kodlarni ajratish juda yaxshi edi, chunki siz ilovangizni eng baland darajaga ajratdingiz va pastda joylashgan hamma narsa bunga e'tibor bermasligi mumkin. Menga oddiy narsalar yoqadi, shuning uchun juda mayda donali bo'linish o'rniga o'ta nozik taneli qanday ishlash kerak. Keling, veb-saytimizning har bir tarkibiy qismini yuklab qo'ysak, nima bo'lishi haqida o'ylab ko'raylik. Faqat o'tkazish qobiliyati haqida o'ylaganingizda, bu samaradorlik nuqtai nazaridan juda yoqimli ko'rinadi. Kechikish kabi boshqa nuqtai nazardan juda yomon bo'lishi mumkin, ammo albatta e'tiborga olish kerak.

Slayd matni: Reaktsiya komponenti statik ravishda bolalariga bog'liq.

Ammo, masalan, sizning ilovangiz React-ni ishlatishini tasavvur qiling. Va React tarkibiy qismlari statik ravishda bolalariga bog'liq. Agar siz bolalaringizni dangasa qilib qo'yganingiz uchun bunday qilishni to'xtatsangiz, u sizning dasturiy modelingizni o'zgartiradi va narsalar juda yaxshi bo'lishni to'xtatadi.

ES6 import namunasi.

Aytaylik, sizning qidiruv sahifangizga joylashtirmoqchi bo'lgan valyutani o'zgartiruvchi komponentingiz bor va uni import qilasiz, shunday emasmi? Bu ES6 modullarida buni oddiy usul.

Yuklanadigan komponentlar misoli.

Agar siz dangasa yuklamoqchi bo'lsangiz, sizga shunday kodni olasiz, bu erda siz dinamik importni ishlatasiz, bu ES6 modullarini dangasa qilish uchun yangi narsa va siz uni yuklanadigan tarkibiy qismga o'rab olasiz. Albatta, buni amalga oshirishning 500 million yo'li mavjud va men reaktsiya mutaxassisi emasman, ammo bularning barchasi sizning arizangizni qanday yozishingizni o'zgartiradi.

Slayd matni: Statik -> Dynanic

Va endi narsalar yaxshi emas - statik bo'lgan narsa endi dinamikaga aylanadi, bu dasturlash modelining o'zgarishi uchun yana bir qizil bayroqdir.

Slayd matni: qachon dangasa yuklashga kim qaror qiladi?

Siz to'satdan hayron bo'lishingiz kerak: "qachon dangasa yuklashga kim qaror qiladi", chunki bu sizning arizangizning kechikishiga ta'sir qiladi.

Slayd matni: Statik yoki dinamikmi?

Odam yana u erda va ular "statik import bor, dinamik import bor, men qaydan foydalanaman?" Haqida o'ylashlari kerak. Bunday xatoni olish juda yomon, chunki bitta statik import, agar u to'satdan dinamik bo'lgan bo'lsa, u bo'lishi kerak bo'lmagan to'plamga narsalarni joylashtirishi mumkin. Uzoq vaqt davomida ko'plab muhandislar mavjud bo'lganda, bu narsalar yomonlashadi.

Slayd matni: Mantiq va renderlarni ajratish

Endi men Google buni qanday amalga oshirishi va yaxshi dasturiy ta'minot modelini olishning bir usuli haqida gaplashmoqchiman. Biz nima qilamiz, biz tarkibiy qismlarni olamiz va ularni mantiqiy va amaliy mantiq bo'yicha ajratamiz, masalan, ushbu konvertorni bosganda nima sodir bo'ladi.

Slayd matni: agar u ko'rsatilgan bo'lsa, faqat mantiqni yuklang.

Shunday qilib, endi biz ikkita alohida narsaga egamiz va biz uni taqdim qilganimizda faqat biron bir komponent uchun amaliy mantiqiy qo'llanmani har doim yuklaymiz. Bu juda oddiy modelga aylanadi, chunki siz shunchaki server tomoni orqali sahifani ko'rsatishingiz mumkin, so'ngra aslida nima ko'rsatilgan bo'lsa, bog'langan dastur to'plamlarini yuklab olishni boshlashingiz mumkin. Bu insonni tizimdan tashqariga chiqaradi, chunki yuklash avtomatik ravishda ishga tushirish orqali ishga tushadi.

Slayd matni: Qidiruv natijalari sahifasida valyuta konvertori.

Ushbu model yoqimli bo'lib tuyulishi mumkin, ammo u ba'zi savdolarga ega. Odatda server reaktsiyasi React yoki Vue.js kabi freymlarda qanday ishlashini bilsangiz, ular hidratatsiya deb ataladigan jarayondir. Hidratsiya qanday ishlaydi, siz server tomonidan nimadir taqdim etasizmi va keyin mijozga yana uni taqdim etasiz, demak siz sahifada allaqachon mavjud bo'lgan narsani ko'rsatish uchun kodni yuklashingiz kerak, bu yuklash nuqtai nazaridan ham behuda isrofdir. kod va uni bajarish muddatlari. Bu shunchaki sarflangan o'tkazish qobiliyati, isrof qilingan CPU to'plami - lekin bu juda yoqimli, chunki siz mijoz tomonidan biron bir narsa ko'rsatgan mijoz tomonidan e'tibordan chetda qolishingiz kerak. Biz Google-da ishlatadigan usul unday emas. Shunday qilib, agar siz ushbu juda katta dasturni ishlab chiqsangiz, siz o'ylab ko'ring: men juda murakkab bo'lgan juda tezkor usulni qabul qilyapmanmi yoki kam samaraliroq hidratatsiya bilan ketyapmanmi, lekin bunday yoqimli dasturiy modelmi? Siz ushbu qarorni qabul qilishingiz kerak bo'ladi.

Slayd matni: 2017 Yangi yilingiz bilan

Keyingi mavzuim kompyuter fanidagi eng sevimli muammom - bu narsalarga nom bermaslik, garchi men bunga yomon nom bergan bo'lsam ham. Bu "2017 yilgi bayramning alohida muammosi". Kim bu erda biron bir kod yozgan va endi u endi kerak emas, lekin u hali ham sizning kod bazangizda? ... Bu sodir bo'ladi va menimcha CSS u uchun juda mashhurdir. Sizda bu bitta CSS katta fayl mavjud. Bu erda selektor mavjud. Haqiqatan ham bu sizning ilovangizga mos keladimi yoki yo'qligini kim biladi? Shunday qilib, siz faqat shu erda saqlamoqchisiz. Menimcha, CSS hamjamiyati inqilobning boshida, chunki ular bu muammo ekanligini tushunishdi va ular CSS-in-JS kabi echimlarni yaratdilar. Shu bilan sizda bitta fayl komponenti mavjud - 2017HolidaySpecialComponent va siz "endi bu 2017 emas" deb ayta olasiz va siz butun tarkibni o'chirib tashlashingiz mumkin va hamma narsa bir vaqtning o'zida yo'q bo'lib ketadi. Kodni o'chirish juda oson. Menimcha, bu juda katta g'oya va uni faqat CSS-ga nisbatan qo'llash kerak.

Slayd matni: har qanday holatda ham markaziy konfiguratsiyadan qoching

Ilovaning markaziy konfiguratsiyasini har qanday holatda ham chetlab o'tishni xohlaydigan ushbu umumiy fikrning bir nechta misollarini keltirmoqchiman, chunki markaziy konfiguratsiya, CSS-ning fayliga ega bo'lish kabi, kodni o'chirishni juda qiyinlashtiradi.

Slayd matni: train.js

Ilgari arizangizdagi marshrutlar haqida gaplashdim. Ko'pgina dasturlarda "yo'nalishlar.js" kabi fayl bo'lishi mumkin, bu sizning barcha marshrutlaringizni o'z ichiga oladi va keyin ushbu yo'nalishlar o'zlarini biron bir ildiz tarkibiy qismiga yo'naltiradi. Bu markaziy konfiguratsiyaga misol, siz katta dasturda xohlamagan narsadir. Chunki ba'zi bir muhandis “Menga hali ham o'sha ildiz komponent kerakmi? Men boshqa jamoaga tegishli bo'lgan boshqa faylni yangilashim kerak. Uni o'zgartirishim mumkinligiga ishonchim komil emas. Balki buni ertaga qilaman ». Bunda ushbu fayllar faqat qo'shimcha bo'ladi.

Slayd matni: webpack.config.js

Ushbu anti-naqshning yana bir misoli bu vebpack.config.js fayli bo'lib, unda sizning butun ilovangizni yaratish uchun taxmin qilingan bitta narsa mavjud. Bu biroz vaqtga cho'zilishi mumkin, ammo oxir-oqibat boshqa biron bir guruhning ilovada biron bir ish qilgani to'g'risida bilish kerak. Qurilish jarayonimiz konfiguratsiyasini qanday markazsizlashtirish haqida yana bir bor bizga namuna kerak.

Slayd matni: pack.json

Bu yaxshi misol: npm tomonidan ishlatiladigan pack.json. Har bir to'plamda "Menda bu bog'liqliklar bor, meni qanday boshqarasan, meni shunday qurasan" deyiladi. Shubhasiz, barcha npm uchun bitta ulkan konfiguratsiya fayli mavjud emas. Bu shunchaki yuz minglab fayllar bilan ishlamaydi. Bu sizga git ichida ko'p mojarolarni birlashtirishga olib keladi. To'g'ri, npm juda katta, lekin men shuni ta'kidlaymanki, bizning ko'pgina ilovalarimiz juda katta bo'lib, biz bir xil muammolar haqida tashvishlanib, bir xil naqshlarni qabul qilishimiz kerak. Menda barcha echimlar yo'q, lekin menimcha, CSS-in-JS jadvalga keltirgan fikr bizning ilovalarimizning boshqa jihatlariga to'g'ri keladi.

Slayd matni: qaramlik daraxtlari

Mavzuni yanada abstraktroq qilib aytamanki, biz abstraktda dasturimiz qanday yaratilganligi, qanday tuzilganligi va bizning ilovamizga bog'liqlik daraxtini shakllantirish vazifasini o'z zimmamizga olganimiz uchun javobgarlikni o'z zimmamizga olamiz. "Qaramlik" deganda men juda mavhum narsani nazarda tutaman. Bu modulga bog'liqlik bo'lishi mumkin, bu ma'lumotlarga bog'liqlik, xizmatlarga bog'liqlik bo'lishi mumkin, ko'p turli xil bo'lishi mumkin.

Slayd matni: Router va 3 ildiz komponentlari bilan bog'liqlik daraxtiga misol.

Shubhasiz, barchamizda juda murakkab dasturlar mavjud, ammo men juda oddiy misoldan foydalanmoqchiman. U faqat 4 qismdan iborat. U sizning dasturingizning bir yo'nalishidan ikkinchisiga qanday o'tishni biladigan yo'riqchiga ega va u bir nechta ildiz tarkibiy qismlariga ega, A, B va C.

Slayd matni: markaziy import muammosi.

Yuqorida aytib o'tganimdek, bu markaziy import muammosiga ega.

Slayd matni: Router va 3 ildiz komponentlari bilan bog'liqlik daraxtiga misol. Router ildiz qismlarini import qiladi.

Router endi barcha ildiz tarkibiy qismlarini import qilishi kerak va agar siz ulardan birini o'chirishni xohlasangiz, yo'riqchiga o'tishingiz kerak, importni o'chirib tashlashingiz kerak, marshrutni o'chirib tashlashingiz kerak va oxir-oqibat sizda maxsus bayram bor. 2017 muammosi.

Slayd matni: Import -> Yaxshilash

Biz Google-da bu haqda siz bilan tanishtirmoqchi bo'lgan echimni o'ylab topdik, uni men hech qachon gaplashmagan edik. Biz yangi tushunchani ixtiro qildik. U kuchaytirish deyiladi. Bu siz import o'rniga foydalanadigan narsadir.

Slayd matni: Import -> Yaxshilash

Aslida, bu importning aksi. Bu teskari qaramlik. Agar siz modulni yaxshilasangiz, siz ushbu modulning o'ziga bog'liq bo'lishini ta'minlaysiz.

Slayd matni: Router va 3 ildiz komponentlari bilan bog'liqlik daraxtiga misol. Ildiz tarkibiy qismlari routerni yaxshilaydi.

Bog'lanish grafigini ko'rib chiqsak, unda bir xil tarkibiy qismlar mavjudligi nima bo'ladi, ammo o'qlar teskari yo'nalishda ishora qiladi. Shunday qilib, ildiz tarkibiy qismini import qiluvchi yo'riqnoma o'rniga, ildiz tarkibiy qismlari yo'riqnoma uchun yaxshilanish haqida e'lon qiladilar. Bu shunchaki faylni o'chirish orqali ildiz tarkibiy qismidan xalos bo'lishim mumkinligini anglatadi. Yo'riqnoma endi takomillashtirilmayotganligi sababli, tarkibiy qismni yo'q qilish uchun siz bajarishingiz kerak bo'lgan yagona operatsiya.

Slayd matni: Enjoyni qachon ishlatishni kim hal qiladi?

Bu juda yaxshi, agar u boshqa odamlar uchun bo'lmasa edi. Endi ular "Men biron-bir narsani import qilyapmanmi yoki kuchaytiruvchilardan foydalanyapmanmi? Qaysi sharoitda men ulardan foydalanaman? ”.

Rasm: Xavf. Xavfli kimyoviy moddalar.

Ushbu muammoning alohida yomon holati, chunki modulni kuchaytirish, tizimdagi boshqa hamma narsani sizga bog'liq qilish qobiliyati juda kuchli va agar noto'g'ri bo'lsa, juda xavflidir. Bu haqiqatan ham yomon vaziyatlarga olib kelishi mumkinligini tasavvur qilish oson. Shunday qilib, Google-da biz bu juda yaxshi fikr deb qaror qildik, ammo biz uni noqonuniy qilamiz, hech kim uni ishlatishga majbur qilmaydi - bitta istisno: yaratilgan kod. Bu aslida yaratilgan kod uchun juda mosdir va u yaratilgan kodning o'ziga xos muammolarini hal qiladi. Yaratilgan kod bilan siz ba'zan siz ko'rmaydigan fayllarni import qilishingiz kerak, ularning nomlarini taxmin qilishingiz kerak bo'ladi. Agar hosil bo'lgan fayl soyada bo'lsa va kerakli narsani yaxshilasa, unda sizda bunday muammolar bo'lmaydi. Siz bu fayllar haqida umuman bilishingiz shart emas. Ular shunchaki sehrli ravishda markaziy registrni kuchaytiradi.

Slayd matni: Routerni yaxshilaydigan qismlarga ishora qiluvchi bitta fayl komponentasi.

Keling, aniq bir misolni ko'rib chiqaylik. Bizning bitta fayl tarkibiy qismimiz bu erda. Biz unda kod ishlab chiqaruvchisini ishga tushiramiz va undan marshrutni aniqlash faylini chiqarib olamiz. Va marshrut fayli shunchaki "Hey Router, men shu erdaman, iltimos, meni import qiling" deb aytadi. Va siz ushbu naqshni boshqa barcha narsalar uchun ishlatishingiz mumkinligi aniq. Ehtimol, siz GraphQL-dan foydalanayotgan bo'lsangiz va yo'riqnoma ma'lumotlarga bog'liqlik haqida bilishi kerak bo'lsa, unda siz xuddi shu naqshdan foydalanishingiz mumkin.

Slayd matni: asosiy to'plam

Afsuski, bu biz bilishimiz kerak bo'lgan hamma narsa emas. Informatika fanida mening ikkinchi eng sevimli muammom bo'lib, uni “axlat yig'indisi” deb atayman. Ilovadagi to'plamlar grafikangizdagi asosiy to'plam - bu foydalanuvchi ilova bilan qanday munosabatda bo'lishidan qat'iy nazar har doim yuklanadigan bitta to'plam. Shunday qilib, bu juda muhim, chunki agar u katta bo'lsa, unda pastdagi hamma narsalar ham katta bo'ladi. Agar u kichkina bo'lsa, unda qaram to'plamlar hech bo'lmaganda kichik bo'lishi ham mumkin. Bir oz latifalar: Bir payt men Google Plus JavaScript infratuzilmasi guruhiga qo'shildim va ularning bazasida 800KB JavaScript borligini bilib oldim. Shunday qilib, men sizga ogohlantiraman: agar siz Google Plus-dan muvaffaqiyatli bo'lishni istasangiz, tayanch to'plamingizda 800KB JS bo'lmasligi kerak. Afsuski, bunday yomon ahvolga tushib qolish juda oson.

Slayd matni: 3 xil bog'liqlikni ko'rsatadigan tayanch to'plam.

Mana bir misol. Sizning tayanch to'plamingiz marshrutlarga bog'liq bo'lishi kerak, chunki siz A-dan B-ga borganingizda, B uchun marshrutni oldindan bilishingiz kerak, shuning uchun u har doim atrofida bo'lishi kerak. Lekin asosiy to'plamda UI kodining har qanday shakli umuman xohlamaydi, chunki foydalanuvchi sizning ilovangizga qanday kirganiga qarab, turli xil UI bo'lishi mumkin. Shunday qilib, masalan, sana tanlagich sizning tayanch to'plamingizda mutlaqo bo'lmasligi kerak va to'lovlar ketmasligi kerak. Ammo buni qanday oldini olamiz? Afsuski, import juda mo'rt. Siz bu ajoyib foydalanish paketini aybsiz ravishda olib kirishingiz mumkin, chunki unda tasodifiy raqamlar qilish funktsiyasi mavjud. Va endi kimdir "menga o'z-o'zini boshqarish mashinalari uchun yordam dasturi kerak" deb aytadi va birdan siz o'zingizning mashinangizni boshqarish algoritmlarini tayanch to'plamingizga import qilasiz. Bunga o'xshash narsalar osonlikcha ro'y berishi mumkin, chunki import vaqtinchalik bo'lib qoladi, shuning uchun vaqt o'tishi bilan narsalar kamayib ketadi.

Slayd matni: taqiqlangan qaramlik testlari.

Buning uchun biz taqiqlangan qaramlik testlarini topdik. Taqiqlangan bog'liqlik testlari, masalan, sizning tayanch to'plamingiz biron bir UIga bog'liq emasligini tasdiqlashning bir usuli.

Slayd matni: Asosiy to'plam React.Componentga bog'liq emasligini tasdiqlang

Keling, aniq bir misolni ko'rib chiqaylik. React-da har bir komponent React.Componentdan meros olinishi kerak. Shunday qilib, agar sizning maqsadingiz biron bir foydalanuvchi interfeysi tayanch to'plamda bo'lolmasa, React.Component sizning tayanch to'plamingizning o'tkinchi bog'liqligi emasligini tasdiqlovchi testni qo'shing.

Taqiqlangan qaramliklar bekor qilindi.

Avvalgi misolga yana bir bor qarasangiz, kimdir sana tanlagichini qo'shmoqchi bo'lsa, siz shunchaki sinov muvaffaqiyatsiz bo'ladi. Va bu sinov muvaffaqiyatsizliklarini darhol tuzatish juda oson, chunki odatda bu odam qaramlikni qo'shishni istamagan - bu shunchaki o'tish yo'lidan o'tib ketgan. Agar sizda sinov yo'q bo'lsa, bu qaramlik 2 yil atrofida bo'lgan vaqtni taqqoslang. Bunday holatlarda, qaramlikdan qutulish uchun kodni qayta ishlab chiqish odatda juda qiyin.

Slayd matni: eng tabiiy yo'l

Ideal holda, lekin siz bu tabiiy yo'lni topasiz.

Slayd matni: Eng to'g'ri yo'l to'g'ri yo'l bo'lishi kerak.

Siz o'zingizning jamoangizdagi muhandislar nima qilishidan qat'iy nazar, to'g'ri yo'l - to'g'ri yo'lni tanlashni xohlaysiz, ya'ni ular yo'ldan ketmasliklari va tabiiy ravishda to'g'ri ish qilishlari kerak.

Slayd matni: Aks holda to'g'ri yo'lni ta'minlaydigan test qo'shing,

Bu har doim ham mumkin emas. Bunday holda, faqat sinov qo'shing. Ammo bu ko'pchilik o'zlarini his qila olmaydigan narsa emas. Ammo iltimos, o'zingizning infratuzilmangizning asosiy invariantlarini ta'minlaydigan testlaringizni ilovangizga qo'shishga qodir ekanligingizni his eting. Sinovlar nafaqat matematik funktsiyalaringizni to'g'ri bajarishini sinash uchun. Ular, shuningdek, infratuzilma va ilovangizning asosiy dizayn xususiyatlari uchun.

Slayd matni: Ilova doirasidan tashqarida insonning fikridan qoching.

Iloji bo'lsa, ilova doirasidan tashqarida insonning hukmidan qochishga harakat qiling. Ilova ustida ishlayotganda biz biznesni tushunishimiz kerak, ammo sizning tashkilotingizdagi har bir muhandis kodni qanday ishlashini tushunmaydi va tushunmaydi. Va ular buni qilishlari shart emas. Bularni o'zingizning arizangizga hamma narsani tushunishga harakat qiling, chunki hamma ham tushunmaydi va murakkablikni boshlarida ushlab turmaydi.

Slayd matni: Kodni o'chirishni osonlashtirish.

Va haqiqatan ham kodni o'chirishni osonlashtiradi. Mening nutqim "juda katta JavaScript dasturlarini yaratish" deb nomlanadi. Men beradigan eng yaxshi maslahat: Sizning ilovalaringiz juda katta bo'lishiga yo'l qo'ymang. U erga etib bormaslikning eng yaxshi usuli bu juda kech bo'lishidan oldin narsalarni yo'q qilishdir.

Slayd matni: Hech qanday abstraksiya noto'g'ri abstraktdan yaxshiroq emas.

Men yana bir narsani ta'kidlamoqchiman, shunda odamlar ba'zida umuman mavhum bo'lish noto'g'ri abstraktlarga qaraganda yaxshiroq degan. Bu aslida nimani anglatadi, noto'g'ri abstraktsiyaning narxi juda katta, shuning uchun ehtiyot bo'ling. Menimcha, bu ba'zan noto'g'ri talqin qilinadi. Bu sizda mavhumliklar bo'lmasligi kerak degani emas. Bu shunchaki ehtiyot bo'lishingiz kerakligini anglatadi.

Biz to'g'ri abstraktlarni topishda yaxshi bo'lishimiz kerak.
Slayd matni: Hamdardlik va tajriba -> O'ng mavhumliklar.

Taqdimotning boshida aytgan edim: U erga borish usuli - bu sizning hamjamiyatingizdagi muhandislar bilan sizning API-laringizdan qanday foydalanishlari va sizning abstraktsiyalaringizdan qanday foydalanishlari haqida o'ylash va tushunish. Vaqt o'tishi bilan bu hissiyotga qanday munosabatda bo'lganligingizni tajriba. Birgalikda, hamdardlik va tajriba sizning arizangiz uchun to'g'ri abstraktsiyalarni tanlashga imkon beradi

Agar siz buni qiziq deb topsangiz, dizayn hujjatlari haqidagi maqolamni o'qib chiqing.