2019 yilda zamonaviy Frontend dasturchisi bo'lishni o'rganing

Men ushbu xabarni yangi yil uchun qayta yozdim / almashtirdim, bu biroz qisqartirilgan va ba'zi mashqlar bilan bajarishni osonlashtirgan, shuning uchun agar siz uni o'qiganingizdan biroz farq qilsangiz, xafa bo'lmang. oldin yoki siz qarama-qarshi sharhlarni topsangiz. O'tgan yillar uchun versiyani GitHub arxivida topish mumkin

Veb-ishlab chiqish doimo o'zgarib turadigan sohadir - bugungi kunda veb-saytlarni yaratish usuli, bundan bir necha yil avval qilganimizdan mutlaqo farq qiladi. Har kuni mavjud bo'lgan vositalarning ko'pligi va har kuni yangilari paydo bo'lishi bilan, ko'pchilik ishlab chiqaruvchilar qaysi yo'lni tanlash haqida adashib qolishadi.

Tasodifiy rasm, chunki eskiz maqolaning bir qismi bo'lishi kerak

Men "Tuzuvchi Yo'l xaritasi" ning muallifi va ishchisiman, unda siz yo'l xaritasi, vositalar va texnologiyalarni ro'yxatiga kiritmoqchimisiz? Men dastlab ushbu yo'l xaritalarini 2017 yilda yaratdim, keyin 2018 yilda yangiladim va eng yangi 2019 yilda qayta ko'rib chiqdim. Ushbu yozuv paytida, oldingi ishlab chiquvchilarning xaritasi joriy yil uchun yangilandi. Men hali ham Backend and Operations / DevOps yo'l xaritalari ustida ishlamoqdaman va yaqin kunlarda umid qilaman.

Ushbu postda men bir oz o'ylab ko'rmoqchiman va agar siz ushbu yo'l xaritalarini bajarishga qaror qilsangiz va nihoyat buzilish va zamonaviy bo'lishni o'rgansangiz, qanday yo'l tutishni bilsangiz, ushbu "yo'l xaritalari" ni yaratishga bo'lgan motivatsiyani, bir nechta javobgarlikdan bosh tortish niyatidaman. 2019 yilda frontend dasturchisi.

Motivatsiya

Maqolani boshlashdan oldin, men haqimda tushuncha berish uchun men so'nggi 6 yil ichida Fullstack Development bilan shug'ullanaman va hozirda tajavalda etakchi muhandis bo'lib ishlayapman, u erda men turli xil shlyapalarni kiyishim kerak. ish. Faqatgina mening sevimli mashg'ulotim emas, balki mening vazifalarimdan biri tendentsiyalarni kuzatib borish, texnik qarorlarni qabul qilish va ishlab chiquvchilarni g'ayratli va o'qimishli qilishdir.

Veb-taraqqiyot juda ko'p rivojlandi va tez rivojlandi; old tomonida mavjud variantlar soni, hech kimni xijolat qilish uchun etarli. Men ochiq manbada va jamoada juda faolman; agar har safar menga tinim bo'lsa, yoki forumda paydo bo'lgan "men nimani o'rganishim kerak" degan savolni ko'rganimda, ikki yil oldin nafaqaga chiqqan bo'lardim. Circa 2017, mening eski universitet professori o'z talabalariga bozor to'g'risida tushuncha berish uchun yo'llar to'plamini tayyorladi va menga veb-ishlab chiqish uchun vositalar va texnik tavsiyalar ro'yxatini berishini aytdi. Men qo'pol rasmni chizib, unga uzatdim, lekin keyinroq uni biroz tozalab, GitHub-ga qo'yishga qaror qildim, chunki qachondir menga bu savol berganda biron bir kishiga murojaat qilishim mumkin edi. Shunday qilib, ushbu yo'l xaritalari paydo bo'ldi.

Rad etish

Yo'l xaritasini boshlashdan oldin, bir nechta rad etishni yodda tuting

Ushbu yo'l xaritasining maqsadi sizga peyzaj haqida tushuncha berish va agar kelajakda nimani o'rganish kerakligi haqida chalkashlik bo'lsa va sizni kestirib va ​​zamonaviyni o'rganishga undash emas. Siz nima uchun bitta vosita boshqasiga qaraganda ba'zi holatlar uchun mosroq bo'lishi kerakligini tushunishingiz kerak va kestirib, moda hech qachon ish uchun eng mos kelishini anglatmaydi.

Ikkinchidan, ish bozorida qandaydir izlanish olib boring

Tillar va vositalar bozorga juda bog'liq bo'lishi mumkinligini e'tiborsiz qoldirmang, shuning uchun siz maqsad qilgan bozorda bir oz izlanish olib boring.

Uchinchidan, siz bu erda keltirilgan barcha narsalarni bilishingiz shart emas

Sizning birinchi ishingizni boshlash uchun bu erda keltirilgan barcha narsalarni o'rganishingiz shart emas. Yo'l xaritalari juda kulgili tuyulishi mumkin, ammo agar siz veb-taraqqiyotga qadam qo'ysangiz, ularni qo'rqitishga yo'l qo'ymaydi. Men siz oxir-oqibat o'rganadigan yoki ishlatadigan barcha narsalarni qamrab olishga harakat qildim. Yig'ilishni boshlash paytida siz yalang'och minimalni bilib olishingiz va qolganini o'rganishingiz mumkin.

1-bosqich - ishga tayyor

Agar siz boshlang'ich bo'lsangiz va veb-taraqqiyotga qadam qo'ysangiz, siz uchun boshqacha yo'l xaritasi mavjud. Quyidagi yo'l xaritasini ko'rib chiqing va o'qishni to'xtating; ushbu yo'l xaritasida ko'rsatilgan narsalarni to'ldiring va ulardan foydalanib bir nechta loyihalarni amalga oshirganingizdan so'ng qaytib keling

Faqat ro'yxatda keltirilgan narsalarni bilib oling va o'zingizni veb-ishlab chiqaruvchi deb atashingiz va bozorda ish topishingiz kerak. Men shunchaki ish olib borgan va mustaqil ishdan yoki kunlik ishdan munosib pul ishlab topgan ko'plab odamlarni bilaman. Yo'l xaritasida keltirilgan barcha narsalarga biroz vaqt sarflang, bularning barchasini yaxshilab ko'rib chiqing va ko'p mashq qiling. Ko'p va ko'plab loyihalarni amalga oshiring; bu erda siz kiritishingiz mumkin bo'lgan ba'zi g'oyalar ro'yxati

Vazifalar

  • Pomodoro dasturini yarating. Siz ushbu dasturni klonlashingiz va veb-versiyasini qilishingiz mumkin
  • GitHub Repositories API-dan foydalanadigan veb-sahifani yarating va joriy haftaning eng yaxshi 10 omborini yoqimli javob formatida ko'rsating.
  • Vazifalarni qo'shish, ularni tugallangan deb belgilash, tahrirlash va o'chirishga imkon beradigan oddiy todo ro'yxati ilovasini yarating.
  • Oddiy soniya hisoblagichini yarating, unda foydalanuvchi boshlashi, to'xtatishi, to'xtatib qo'yishi va qayta o'rnatishi mumkin.

Buni amalga oshirganingizdan so'ng, versiyani boshqarish tizimlari haqida ma'lumot oling, Git-ning asosiy ishlatilishini bilib oling va GitHub-da profilingizni yarating.

2-bosqich - Yaxshiroq CSS-ni yozing

Asoslarni ko'rib chiqqaningizdan so'ng, keyingi bosqichga o'ting va qanday qilib CSS yozishni va CSS ramkalarini ishlatishni o'rganing. Mana, yo'l xaritasi qanday ko'rinishga ega bo'lishi kerak

Ushbu qadamni bajarganingizdan so'ng, birinchi bosqichda yuqorida ko'rsatgan loyihalaringiz bo'yicha oldinga o'ting va quyidagi vazifalarni bajaring

Vazifalar

  • Yuqoridagi loyihalarga npm yoki ipdan foydalanib yuklash chizig'ini qo'shing.
  • BEM-dan foydalanish uchun 1-bosqichda amalga oshirgan loyihalaringizni o'zgartiring
  • CSS-ni SASS-ga yozing
  • NPM Script yordamida SASS-ni CSS-ga o'zgartirishni avtomatlashtirish

3-bosqich - ko'tarilish

Ushbu bosqich biroz vaqt talab etiladi va zamonaviy jabhani rivojlantirishga qadam qo'yadi. Oldinga o'ting va JavaScript haqida ko'proq bilib oling. Webpack nima ekanligini bilib oling, turli xil tushunchalarni va nima uchun kerak bo'lganligini tushuning. Babel nima ekanligini tushunib oling, nima uchun biz uni ishlatamiz va veb-paket bilan qanday birlashishni va nihoyat ESLint-dan foydalanib kodni qanday yopishtirishni o'rganamiz. Ushbu bosqichda sanab o'tilgan barcha narsalar veb-to'plam atrofida aylanadi.

Siz ushbu haftaning oxiriga qadar zamonaviy jabhada ishlab chiqarishni tatib ko'rishni boshlaysiz. Ushbu bosqichni tugatganingizdan so'ng, oldinga o'ting va o'rnatish vositalarini yaxshi bilib olish uchun quyidagi amallarni bajaring

Vazifalar

  • Foydalanuvchi nomini olgan va ijtimoiy tarmoqlarda topilgan havolalar ro'yxatini (agar ular mavjud bo'lsa) qaytarib beradigan npm to'plamini yarating. Bu brauzerda ishlatilishi kerak, uni veb-paket bilan bog'lang, uni ko'chirish uchun babeldan foydalaning va astarlash uchun ESLint-dan foydalaning.
  • Oddiy todo ro'yxati ilovasini yarating, CSS uchun SASS-dan foydalaning, uslublar uchun yuklash chizig'ini qo'shing, BEM-dan foydalaning, babel-dan foydalanib JavaScript-ni ko'chiring, veb-paket bilan bog'lang, optimallashtirilgan ishlab chiqarishni yarating va uni Github sahifalarida joylashtiring.

4-bosqich - Zamonaviy Frontend ilovalari

Keyingi qadam - bu oldingi ramka haqida o'rganish. Bir nechta variant mavjud, ammo bugungi kunda eng ko'p ishlatiladiganlar React, Angular va Vue. React bilan borishingizni maslahat beraman.

Avvalo React-ni o'rganing, keyin redux-ni ko'rib chiqing va keyin JS-da CSS haqida ma'lumot oling; Agar kerak bo'lsa, Styled Component va CSS modullarini ko'rib chiqing.

Reaktsiyani bilib olganingizdan so'ng, Progressive veb-ilovalari haqida o'qing. Endi siz old tomonning ramkalarini bilsangiz, bu sizga qiyin bo'lmasligi kerak. PWA ro'yxat varag'ini ko'rib chiqing, xizmat xodimlari haqida o'qing, mayoqchadan foydalanib, ishlashni o'lchang va o'zingizning foydangiz uchun foydalanishingiz mumkin bo'lgan turli xil brauzer API-lariga qarang. Saqlash, joylashuv, bildirishnomalar, qurilmaga yo'naltirilganlik va to'lovlar. RAIL modeli va PRPL naqsh haqida ham o'qing.

Buni amalga oshirgandan so'ng, siz o'zingizni zamonaviy frontend dasturchisi deb atashingiz kerak. O'rgangan narsalaringizga ishonch hosil qiling. Agar siz g'oyalarni izlayotgan bo'lsangiz, tanlashingiz mumkin bo'lgan vazifalar ro'yxati.

Vazifalar

  • Bir nechta hashtaglarni tanlashga imkon beradigan va Twitter-ning qidiruv API-sidan foydalangan holda, ushbu hashtaglar uchun eng so'nggi xabarlarni joylashtiradigan va o'xshash paneldagi ko'rsatishga imkon beradigan oddiy dastur yarating. Foydalanuvchi sahifani yangilaganda, u siz tanlagan hashtaglarni eslab qolishi uchun hashtaglarni qadab qo'yishga harakat qiling. Reaksiya yo'riqchisidan foydalaning va qo'shimcha sahifalar qo'shing.
  • Shunga o'xshash Pomodoro dasturini yarating, bu foydalanuvchilarga ish vaqtlari va tanaffuslar davomiyligini sozlash, ish yoki tanaffus tugagan / boshlanganida bildirishnomalarni ko'rsatish va ovozni o'ynashga imkon beradi.
  • Reaktsiya yordamida GitHub yo'naltirilgan sahifasini qayta yarating va xuddi GitHub singari til va sanalarni ishlatib filtrlashga ruxsat bering. Siz sanalar uchun biron bir kutubxonani qo'shishingiz mumkin.

5-bosqich - Avtomatlashtirilgan sinov

Ilovalaringiz uchun avtomatlashtirilgan testlarni yozishni o'rganish kelajakda sizni juda ko'p bosh og'rig'idan qutqaradi va ish qidirishda sizni yaxshiroq holatga keltiradi. Xullas, har xil sinov turlarini, masxara qilish, stublar kabi turli xil tushunchalarni nima ekanligini bilib oling va shundan keyin Jest, Enzim va Cypressni tegishli tarzda o'rganing. Shuningdek, sinov qamrovini hisoblashni o'rganing.

Vazifalar

Vazifalar uchun yuqorida 4-bosqichda yaratgan dastur (lar) uchun birlik, integratsiya va funktsional testlarni yozing.

6-bosqich - Statik turni tekshirish

Turli datchiklar sizga kodingizni o'sib borishiga xizmat qiladi, qayta ishlab chiqarishda chaqqonlikni oshiradi, IDE-larda yaxshiroq qo'llab-quvvatlaydi va sizga ega bo'lishi mumkin bo'lgan hujjatlarning eng yaxshi shakli hisoblanadi. Ushbu domenda asosan Flow va TypeScript mavjud. Shunga qaramay, TypeScript-ga ko'proq itarish mavjud va men sizga buni davom ettirishingizni maslahat beraman.

Siz TypeScript-ni o'rganib bo'lganingizdan so'ng, mavjud JavaScript dasturlaringizni TypeScript-dan foydalanishga aylantiring.

7-bosqich - Server tomonidan ko'rsatiladigan xizmatlar

Server tomonidan taqdim etiladigan ilovalar mijoz tomonidan taqdim etilgan dasturlarga nisbatan yaxshiroq ishlash va SEO yaxshilanishiga imkon beradi. Garchi bu talab bo'lmasa ham, bu sizga eng yaxshi dasturlarni ishlab chiqishda yordam beradi. Sizning tanlaganingizning oldingi doirasiga qarab turli xil variantlar mavjud; Agar siz React.js-ni tanlagan bo'lsangiz, Next.js-ga o'tishingiz kerak, bu esa SSRni shabada qiladi.

Vazifalar uchun Next.js-dan foydalanib, yuqorida ko'rsatgan barcha dasturlarni server tomonida o'zgartirish uchun aylantiring

8-bosqich - orqaga qarab

Ushbu bosqichda ko'rsatilgan barcha narsalar ixtiyoriy va siz uchun haqiqatan ham talab qilinmaydi, lekin agar siz ularni sinab ko'rmoqchi bo'lsangiz, oldinga qarab turing.

Iltimos, shuni yodda tutingki, qisqaroqlik uchun men beparvolikka kirmadim va sizga kattaroq rasm berishga harakat qildim; borib o'rganayotganda aniqlang.

To'liq yo'l xaritasi

Yo'l xaritasining to'liq sxemasi quyida qo'shimcha ma'lumot bilan birga keltirilgan.

Yo'l xaritasida hali etishmayotgan narsalar bo'lishi mumkin, ammo bu "Frontend Engineering" uchun har qanday rolni bajarish uchun kerak bo'lgan narsalardir. Va esda tutingki, iloji boricha mashq qilish. Bu boshida dahshatli ko'rinishi mumkin va siz o'zingizni juda yaxshi tushunmayotgandek his qilasiz, ammo bu normaldir va vaqt o'tishi bilan o'zingizni yaxshilanayotganingizni his qilasiz. Agar qoqilib qolsangiz, yordam so'rashni unutmang, qancha odam yordam berishga tayyor ekanligi sizni hayratda qoldiradi.

Ushbu xaritani orqa tomoni va operatsion xaritalari bilan birgalikda mening GitHub profilim orqali topish mumkin. E'tibor bering, men hali ham Backend va DevOps-ni yangilash ustida ishlamoqdaman va ularni yaqin kunlarda chiqarishni rejalashtirmoqdaman.

Buni aytib, ushbu xabar o'z nihoyasiga yetadi, meni twitterda do'st tuting yoki elektron pochta orqali salom ayting. Keyingi safargacha, davom eting!