Kodni o'rganishning eng yaxshi usuli bu Kod: Qurilish ilovalari orqali App Architecture-ni o'rganish

Amaliyot Benjamin Stayudinger tomonidan takomillashtirilgan (CC BY-NC-ND 2.0)

Kodni o'rganish juda qiyin bo'lishi mumkin. Men o'qiyotganimda duch kelgan eng katta qiyinchiliklardan biri bu o'quv resurslaridan qanday o'tish va sizga oddiy dasturlarni kodlashni o'rgatadigan ozgina amaliy muammolar.

Uning boshqa yo'li yo'q. O'rganishning eng yaxshi usuli - bu sakrash va qurilishni boshlash, lekin bu juda qo'rqinchli bo'lishi mumkin. Qayerdan boshlaysiz?

Foydalanuvchilar va autentifikatsiya?

Siz foydalanuvchilarni boshqarish va autentifikatsiyani o'rganish uchun yaxshi qadam deb o'ylashingiz mumkin. Siz yanglishgan bo'lasiz. Avvalo, parollar eskirgan, shuning uchun barcha yangi ilovalaringiz parolsiz autentifikatsiyadan foydalanishi kerak.

Ikkinchidan, foydalanuvchini autentifikatsiya qilish katta xavfsizlikka tahdiddir va hech qanday holatda yangi kelganlarga berilmasligi kerak. Yuzlab millionlab kirish ma'lumotlari yirik kompaniyalar tomonidan o'g'irlangan, ular xavfsizlikni qanday yaxshilash haqida tunu kun ishlaydigan maxsus xavfsizlik bo'yicha mutaxassislar bilan ishlaydi. Ba'zi kirish ma'lumotlari o'g'irlangan bo'lishi juda yaxshi.

Agar siz foydalanuvchini tasdiqlashni yopib qo'ysangiz, bu sizning ilovangiz uchun shunchaki xavfli emas, chunki ular elektron pochta provayderi yoki ularning bank hisob qaydnomalari kabi boshqa dasturlar uchun bir xil kirish ma'lumotlarini ishlatayotgan bo'lishi mumkin. Boshqacha qilib aytganda, kimdir sizning ilovangizdan parollarni o'g'irlasa, ular ulardan sizning ilovangiz bilan hech qanday aloqasi bo'lmagan sohalarda haqiqiy zarar etkazishda foydalanishi mumkin.

Esda tutingki, foydalanuvchini autentifikatsiya qilish katta xavf tug'diradi va uni har qanday holatda ham yangi boshlovchilarga qoldirmaslik kerak.

Ko'pgina ilovalarga autentifikatsiya vazifalarini Facebook, Twitter yoki shunga o'xshash autentifikatsiya qilish provayderlariga topshirishni maslahat beraman. O'zining autentifikatsiya strategiyasini boshqarish uchun qonuniy sabablarga va manbalarga ega bo'lgan yirik kompaniyalar tomonidan qo'llab-quvvatlanadigan yirik dasturlar ham o'zlarining autentifikatsiyasini noldan siljitish o'rniga mashhur, jangovor sinov kutubxonalaridan foydalanishi kerak.

Ammo sizda juda ko'p sonli bitta foydalanuvchi ilovalari mavjud bo'lib, ularda foydalanuvchi autentifikatsiyasiga umuman ehtiyoj sezilmaydi va foydalanuvchi autentifikatsiyasidan foyda oladigan ba'zi ilovalar keyinchalik ushbu xususiyatni qo'shishi mumkin.

Haqiqiy ilovalarga o'tishni boshlashning yaxshi usullaridan biri bu "localStorage" -dan foydalangan holda brauzerga asoslangan dasturlarni yaratish, faqat bitta foydalanuvchini qo'llab-quvvatlash va shu asosda kengayishdir. Keyinchalik, zamonaviy mijoz ilova arxitekturasining asoslarini o'rganib chiqqandan so'ng, siz bir nechta foydalanuvchilar va ma'lumotlar bazalariga ulanishlarni qo'shishingiz mumkin.

Client Side App Architecture-ga kirish

Xo'sh, zamonaviy mijoz dasturlari arxitekturasi nimaga o'xshaydi? Bir necha yil oldin, u MVC, MVP, MVVM va boshqalar kabi MV * arxitekturalarida ustunlik qildi…

Ularning aksariyati modellar (ma'lumotlar) va ko'rinish (UI / Taqdimot) o'rtasida qanday muvofiqlashtirishni hal qilish bilan shug'ullanadi. Ilova arxitekturasidagi muhim tushuncha tashvishlarni ajratishdir.

Alohida saqlashni xohlaydigan ba'zi bir narsalar:

  • Taqdimot / ko'rinish (tartib, uslub, DOM manipulyatsiyasi)
  • Voqealar bilan ishlash / harakatlar (foydalanuvchilar va tashqi xabarlarni yozib olish va yozib olish va ilovadagi harakatlarga aylantirish)
  • Yo'naltirish / URL-lar (URL-larni harakatlarga tarjima qilish)
  • Biznes mantig'i (ma'lumotlarning boshqarilishi qoidalari)
  • Mijozning boshqaruv menejmenti / modeli / do'koni (mijozning xotirasida saqlanadigan ma'lumotlar strukturasi)
  • Ma`lumotning turg'unligi va serverning I / O (uzoq muddatli saqlash, AJAX, SSE)

MVC arxitekturasi quyidagicha ko'rinadi:

MVC-da model o'zgaruvchan hodisalarni chiqaradi va ko'rinish hozirgi holat va yangilanishni so'rab javob beradi. Nazoratchi voqealarni ko'rishni tinglaydi va holatni yangilash, shuningdek ko'rinishni boshqarishi yoki marshrutizatsiyadagi o'zgarishlarga javoban yangi ko'rinishni tanlash orqali javob beradi.

Ikki tomonlama ma'lumotni bog'lab turganda, ko'rinishni o'zgartirish o'zgartirilishi to'g'ridan-to'g'ri boshqaruvchidan o'tmasdan modelda aks etadi. Tasavvur qiling, shunchaki holatni so'rashning o'rniga, ko'rinish to'g'ridan-to'g'ri holatni yangilashi mumkin. Qisqasi, bu ikki tomonlama bog'lash.

Foydalanuvchi kiritish holatni yangilashni boshlashi mumkin, bu DOM o'zgarishini, boshqa holatni yangilashni, ko'proq DOM o'zgarishini keltirib chiqarishi mumkin va hokazo. O'zgarishlar qanday ta'sir qilishi va ilovangizning holatiga qanday ta'sir qilishi mumkinligini tezda anglash qiyinlashadi va tasodifan cheksiz pastadirlarni kiritish osonlashadi.

Bunga misol 1-burchak. 1-burchak. UI UI holatini yangilash tsiklini (hazm qilish aylanishi deb nomlanadi) boshqarib, ushbu murakkablikni boshqarishga urinish. Xabarlarning cheksiz takrorlanishiga yo'l qo'ymaslik uchun, hazm qilish tsiklining qattiq simli chegarasi 10 tsiklni tashkil etdi, ammo bu hali ko'p hodisalarni keltirib chiqarishi mumkin bo'lgan ko'plab DOM o'zgarishlarini keltirib chiqaradigan kaskadni yuborish uchun bitta voqea uchun juda ko'p joy qoldirdi. tsikllar. Murakkab va tushunish qiyin bo'lishidan tashqari, bu Angularda ishlash muammolarining keng tarqalgan sababi edi, chunki bitta o'zgarish katta yangilanishlar kaskadini boshlashi mumkin.

2013 yilda Facebook React: foydalanuvchi interfeysi tarkibiy qismlarini yaratish uchun yangi ochiq manba asosini e'lon qildi. React ma'lumotlarning yangilanishini qanday qabul qilishingizga ahamiyat bermaydi, lekin ma'lumotlarning ikki tomonlama bog'lanishini qo'llab-quvvatlamaydi. Buning o'rniga, Flux arxitekturasiga o'xshash reaktsiyani birlashtirib, ma'lumotlarning bir tomonlama oqimidan foydalanish tavsiya etiladi.

React & Flux veb-platforma dasturlarini qanday yaratishni tubdan o'zgartirdi va bir tomonlama ma'lumotlar oqimi g'oyasi Angular va Ember dasturlariga ham tarqaldi.

Flux arxitekturasi quyidagicha ko'rinadi:

Flux arxitekturasi

O'zgarishlarni ko'p sonli tinglovchilar orqali tarqatish o'rniga, DOM voqealari tinglovchilarining qo'ng'iroqlariga bog'langan qayta qo'ng'iroq funktsiyalari ko'rinishga o'tkaziladi. Qaytarib qo'ng'iroq qilish holat o'zgarishini boshqaradigan do'konga yuboriladigan harakat ob'ekti hosil qiladi.

I / O serverini aralashtirishga qo'shganingizda, u quyidagicha ko'rinishi mumkin:

I / O server bilan oqim

Qo'ng'iroqlarni qayta ko'rib chiqish bilan bir qatorda, ko'plab dasturlarda voqea tinglovchilarini server bilan aloqa o'rnatish uchun ulanadi. UI xatti-harakatlari server so'rovlarini yuborishi va yangilanishlarni serverga yuborishi mumkin. Shunday qilib, ko'rinishda qaytarilgan qo'ng'iroq server so'rovini yoki yangilashni boshlashi mumkin, va server tomonidan yuborilgan hodisalarni tinglovchi do'konga yuborilishi mumkin bo'lgan boshqa ishlarni boshlashi mumkin va hokazo.

Siz hozirda Flux alternativasi bo'lgan Redux haqida eshitgan bo'lishingiz mumkin. Bu reduktorlar deb nomlangan do'kon manipulyatsiyasi uchun sof funktsiyalar tushunchasini qo'shadi. Reduktorlar har qanday davlat yangilanishi mustaqil boshqarilishi va sinovdan o'tkazilishi va reduktorlarning nojo'ya ta'siri yo'qligiga ishonch hosil qilish orqali do'kon haqida mulohaza yuritishni soddalashtiradi, ya'ni har qanday muayyan harakatlarning ta'sirini tushunish juda oson. Redux arxitekturasining ajoyib ko'rinishi uchun ushbu slaydni ko'ring.

Birinchi ilovalaringizda, ehtimol, ushbu arxitektura bilan shug'ullanishning hojati yo'q. Biz ushbu arxitektura yangilanishlariga ilovalar holatiga cheklanmagan umumiy foydalanish chalkash va tartibsiz bo'lib qolishi mumkin bo'lgan katta dasturlarni yaratish orqali keldik. Ushbu abstraksiyalar bizga ilovadagi barcha holatlar uchun aniq zanjir beradi, ammo ular arzimas narsalar uchun haddan tashqari ko'pdir.

Dastlab, siz tadbir tinglovchilariga qo'ng'iroq qilib, javoban murojaat holatingizni boshqarishingiz mumkin va bu yaxshi. Yugurishdan oldin yurishni o'rganing. Keyinchalik murakkab dasturlarga o'tishga tayyor bo'lganingizda, Dan Abramovning "Redux bilan ishlash" va "Idiomatik Redux yordamida reaktsion ilovalarni yaratish" kabi mukammal kurslarini tekshiring.

Amaliy dasturlar

Har bir ishlab chiqaruvchiga kod portfeli kerak. Amaliy ilovalar - bu tuzishning ajoyib usuli.

Yuqorida aytib o'tilgan kurslarni o'rganayotganda, sizga juda ko'p ishlatiladigan "Do list" misoli ilovasi duch keladi. Men sizga darsliklarni kuzatib borishingizni va o'zingizni birga qo'yishingizni maslahat beraman.

Ammo yana qanday qiziqarli ilovalarni yaratishingiz mumkin? Kodlashni o'rganishning eng qiyin jihatlaridan biri bu ilova yaratish uchun yaxshi g'oyalardir.

Ilovalar g'oyalarini ovozlar bo'yicha birlashtiradigan va tartiblaydigan saytlar mavjud. Agar g'oyalarni izlayotgan bo'lsangiz, shubhasiz ularga qarang.

"Erik Elliott bilan JavaScript-ni o'rganing" o'quvchilari qisqa xususiyatlar ro'yxati bilan ishlangan talabalar loyihalarining yangi ro'yxatini topadilar. Ilovalar va xususiyatlarning ikkalasida ham o'quvchilarga hozirgi o'quv darajasidagi muammolarni hal etishda yordam berish uchun "asosiy", "o'rta" va "ilg'or" reytinglar qiyin.

Namuna loyihasi: Rad etish

Erik Elliott bilan JavaScript-ni o'rganish uchun talaba loyihasi.

Jamoa bo'lib ishlashni xohlaysizmi? Talaba suhbatida kodlovchi do'stni toping.

Siz yutishingiz kerak.

O'zingizni quyidagilarga o'rgating:

  • Ko'taring
  • Ko'proq sotish
  • Ko'proq biznesni rivojlantiring
  • Yaxshi narxlar bo'yicha muzokaralar olib boring

O'yin bitta qoidaga ega:

Odam tomonidan kuniga kamida bir marta sizni rad etishingiz kerak.

O'zingizning konfor zonangizdan tashqaridagi narsalarni so'rang, shunda ko'proq yutib olasiz.

Win = 1 ball. Rad etish = 10 ball.

Rad etish chizig'ini qancha davom ettirishingiz mumkin?

Asosiy daraja

O'zingizning hisoblaringizni kuzatib borish imkonini beradigan UI yarating. So'rov uchun matnni kiriting, kim so'ragan va ikkita tugma: "Qabul qilingan" yoki "Rad etilgan". Elektron pochta yoki xabarlar kabi asenkron so'rovlar uchun siz so'ragan vaqtingizda emas, balki javobni olganingizda hisobni yozib oling.

HTML + CSS-dan foydalaning va ma'lumotlar yozuvini mahalliy xotirada saqlang.

Foydalanuvchining joriy hisobini yuritishda davom eting. Unutmangki, so'rovni qabul qilish yoki rad etishda har bir kunning pastki sonini qayta hisoblash kerak, shuning uchun ro'yxatni har bir yangi javob bilan qisqartirishingiz mumkin bo'lgan qatorda saqlash foydali bo'ladi.

O'rta daraja

  • Veb-xizmat va ma'lumotlar bazasi yordamida ma'lumotlarni saqlash uchun API qo'shing.
  • Haqiqiylikni tekshirishni qo'shing va bir nechta foydalanuvchilarni kuzatib boring. Maslahat: Redis, Mongo yoki RethinkDB ma'lumotlar bazasiga yaxshi nomzodlar bo'lishi mumkin.
  • Facebook yoki Twitter kabi ijtimoiy kirish yaxshi autentifikatsiya variantlari bo'lishi mumkin (foydalanuvchi nomi / parol kirishiga qaraganda osonroq va xavfsizroq).

Ilg'or daraja

  • Hisobingizni baham ko'ring va Facebook-dagi do'stlaringiz bilan raqobatlashing.
  • Har bir foydalanuvchi uchun o'z do'stlari doirasidan peshqadamlikni saqlang.

Qo'shimcha kredit

  • Mobil ilovalarni qo'shing

Amalga oshirish:

  1. Repo bilan vilka
  2. Qaroringizni amalga oshiring.
  3. Muammoni sizning vilkalaringiz bilan bog'lang.

Kredit olish uchun siz vilka uchun havolani ochishingiz kerak.

Loyihani GitHub-da ko'ring.

Erik Elliott bilan JavaScript-ni o'rganing

Erik Elliot "JavaScript dasturlarini dasturlash" (yaxshiReilly) va "Erik Elliott bilan JavaScript-ni o'rganing" muallifi. U Adobe Systems, Zumba Fitness, Uoll-strit jurnali, ESPN, Bi-bi-si, shuningdek, Usher, Frank Okean, Metallica va boshqa ko'plab yozuvchilarning dasturiy tajribalariga hissa qo'shgan.

U ko'p vaqtini dunyodagi eng go'zal ayol bilan San-Frantsisko ko'rfazida o'tkazadi.