Mani vienmÄr ir interesÄjis, kÄ Habr ir strukturÄts no iekÅ”puses, kÄ tiek strukturÄta darbplÅ«sma, kÄ tiek strukturÄtas komunikÄcijas, kÄdi standarti tiek izmantoti un kÄ Å”eit parasti tiek rakstÄ«ts kods. Par laimi, man radÄs Å”Äda iespÄja, jo nesen kļuvu par habras komandu. Izmantojot nelielu mobilÄs versijas pÄrveidoÅ”anas piemÄru, es mÄÄ£inÄÅ”u atbildÄt uz jautÄjumu: kÄ ir strÄdÄt Å”eit, priekÅ”Ä. ProgrammÄ: Node, Vue, Vuex un SSR ar mÄrci no piezÄ«mÄm par personÄ«go pieredzi Habr.
PirmÄ lieta, kas jums jÄzina par izstrÄdes komandu, ir tas, ka mÅ«su ir maz. Nepietiek ā tÄs ir trÄ«s frontes, divas aizmugures un visa Habr ā Bakslija tehniskais pÄrsvars. Ir, protams, arÄ« testÄtÄjs, dizainers, trÄ«s Vadimi, brÄ«numslota, mÄrketinga speciÄlists un citi Bumburi. TaÄu Habra avotiem ir tikai seÅ”i tieÅ”ie lÄ«dzstrÄdnieki. Tas notiek diezgan reti ā projekts ar vairÄku miljonu dolÄru auditoriju, kas no malas izskatÄs pÄc milzu uzÅÄmuma, patiesÄ«bÄ vairÄk izskatÄs pÄc omulÄ«ga startapa ar iespÄjami plakanÄko organizatorisko struktÅ«ru.
TÄpat kÄ daudzi citi IT uzÅÄmumi, Habr piedÄvÄ Agile idejas, CI praksi, un tas arÄ« viss. Bet pÄc manÄm sajÅ«tÄm Habr kÄ produkts attÄ«stÄs vairÄk viļÅveidÄ«gi nekÄ nepÄrtraukti. TÄ nu vairÄkus sprintus pÄc kÄrtas cÄ«tÄ«gi kaut ko kodÄjam, projektÄjam un pÄrprojektÄjam, kaut ko laužam un labojam, risinÄm biļetes un veidojam jaunas, kÄpjam uz grÄbekļa un Å”aujam sev kÄjÄs, lai beidzot atbrÄ«votu funkciju ražoÅ”anu. Un tad iestÄjas zinÄms klusums, pÄrbÅ«ves periods, laiks darÄ«t to, kas atrodas kvadrantÄ āsvarÄ«gi-nesteidzamiā.
TieÅ”i Å”is ānesezonasā sprints tiks apspriests tÄlÄk. Å oreiz tas ietvÄra Habr mobilÄs versijas pÄrveidoÅ”anu. KopumÄ uzÅÄmums uz to saista lielas cerÄ«bas, un nÄkotnÄ tam vajadzÄtu aizstÄt visu Habra iemiesojumu zoodÄrzu un kļūt par universÄlu starpplatformu risinÄjumu. KÄdreiz bÅ«s adaptÄ«vais izkÄrtojums, PWA, bezsaistes režīms, lietotÄja pielÄgoÅ”ana un daudzas citas interesantas lietas.
Izvirzīsim uzdevumu
Reiz parastajÄ stendÄ viens no priekÅ”Äjiem runÄja par problÄmÄm mobilÄs versijas komentÄru komponenta arhitektÅ«rÄ. Å emot to vÄrÄ, organizÄjÄm mikrosanÄksmi grupu psihoterapijas formÄtÄ. Visi pÄc kÄrtas stÄstÄ«ja, kur sÄp, visu pierakstÄ«ja uz papÄ«ra, juta lÄ«dzi, saprata, izÅemot to, ka neviens neaplaudÄja. RezultÄtÄ tika izveidots 20 problÄmu saraksts, kas skaidri parÄdÄ«ja, ka mobilajam Habram joprojÄm ir garÅ” un sarežģīts ceļŔ uz panÄkumiem.
Mani galvenokÄrt uztrauca resursu izmantoÅ”anas efektivitÄte un tas, ko sauc par vienmÄrÄ«gu saskarni. Katru dienu marÅ”rutÄ mÄjasādarbsāmÄjas redzÄju, kÄ mans vecais tÄlrunis izmisÄ«gi mÄÄ£inÄja plÅ«smÄ parÄdÄ«t 20 virsrakstus. Tas izskatÄ«jÄs apmÄram Å”Ädi:
MobilÄ Habr saskarne pirms pÄrstrukturÄÅ”anas
Kas Å”eit notiek? ÄŖsÄk sakot, serveris visiem apkalpoja HTML lapu vienÄdi, neatkarÄ«gi no tÄ, vai lietotÄjs bija pieteicies vai nÄ. PÄc tam klients JS tiek ielÄdÄts un vÄlreiz pieprasa nepiecieÅ”amos datus, bet tiek pielÄgots autorizÄcijai. Tas ir, mÄs faktiski veicÄm vienu un to paÅ”u darbu divas reizes. Interfeiss mirgoja, un lietotÄjs lejupielÄdÄja labu simtu papildu kilobaitu. DetaļÄs viss izskatÄ«jÄs vÄl Å”ausmÄ«gÄk.
VecÄ SSR-CSR shÄma. AutorizÄcija ir iespÄjama tikai C3 un C4 posmos, kad mezgls JS nav aizÅemts ar HTML Ä£enerÄÅ”anu un var nosÅ«tÄ«t starpniekservera pieprasÄ«jumus API.
MÅ«su tÄ laika arhitektÅ«ru ļoti precÄ«zi aprakstÄ«ja viens no Habr lietotÄjiem:
MobilÄ versija ir muļķīga. Es to saku tÄ, kÄ tas ir. BriesmÄ«ga SSR un KSA kombinÄcija.
Mums tas bija jÄatzÄ«st, lai cik skumji tas nebÅ«tu.
IzvÄrtÄju iespÄjas, izveidoju biļeti JirÄ ar aprakstu lÄ«menÄ« ātagad ir slikti, dari pareiziā un uzdevumu sadalÄ«ju lielos vilcienos:
- atkÄrtoti izmantot datus,
- samazinÄt pÄrzÄ«mÄÅ”anas gadÄ«jumu skaitu,
- novÄrst dublÄtus pieprasÄ«jumus,
- padariet iekrauÅ”anas procesu skaidrÄku.
Izmantosim datus atkÄrtoti
TeorÄtiski servera puses renderÄÅ”ana ir paredzÄta, lai atrisinÄtu divas problÄmas: lai neciestu no meklÄtÄjprogrammu ierobežojumiem saistÄ«bÄ ar un uzlabot metriku (neizbÄgami pasliktinÄs ). KlasiskÄ scenÄrijÄ, ka beidzot gadÄ (joprojÄm vietnÄ Backbone.js), SSR ir tÄ pati izomorfÄ JS lietojumprogramma, kas darbojas Node vidÄ. Serveris vienkÄrÅ”i nosÅ«ta Ä£enerÄto izkÄrtojumu kÄ atbildi uz pieprasÄ«jumu. PÄc tam klienta pusÄ notiek rehidratÄcija, un tad viss darbojas bez lapu atkÄrtotas ielÄdes. Habram, tÄpat kÄ daudziem citiem teksta satura resursiem, servera renderÄÅ”ana ir bÅ«tisks elements draudzÄ«gu attiecÄ«bu veidoÅ”anÄ ar meklÄtÄjprogrammÄm.
Neskatoties uz to, ka kopÅ” tehnoloÄ£ijas parÄdÄ«Å”anÄs ir pagÄjuÅ”i vairÄk nekÄ seÅ”i gadi, un Å”ajÄ laikÄ front-end pasaulÄ zem tilta patieÅ”Äm ir aizlidojis daudz Å«dens, daudziem izstrÄdÄtÄjiem Ŕī ideja joprojÄm ir noslÄpumains. MÄs nestÄvÄjÄm malÄ un izlaidÄm Vue lietojumprogrammu ar SSR atbalstu ražoÅ”anai, pietrÅ«kstot vienas sÄ«kas detaļas: klientam nenosÅ«tÄ«jÄm sÄkotnÄjo stÄvokli.
KÄpÄc? Uz Å”o jautÄjumu nav precÄ«zas atbildes. Vai nu viÅi nevÄlÄjÄs palielinÄt servera atbildes lielumu, vai arÄ« daudzu citu arhitektÅ«ras problÄmu dÄļ, vai arÄ« tÄ vienkÄrÅ”i nepacÄlÄs. TÄ vai citÄdi izmest stÄvokli un atkÄrtoti izmantot visu, ko darÄ«ja serveris, Ŕķiet diezgan piemÄroti un noderÄ«gi. Uzdevums patiesÄ«bÄ ir triviÄls - izpildes kontekstÄ, un Vue automÄtiski pievieno to Ä£enerÄtajam izkÄrtojumam kÄ globÄlo mainÄ«go: window.__INITIAL_STATE__.
Viena no problÄmÄm, kas raduÅ”Äs, ir nespÄja pÄrveidot cikliskÄs struktÅ«ras par JSON (); tika atrisinÄts, vienkÄrÅ”i aizstÄjot Å”Ädas konstrukcijas ar to plakanajÄm konstrukcijÄm.
TurklÄt, strÄdÄjot ar UGC saturu, jums jÄatceras, ka dati ir jÄpÄrvÄrÅ” par HTML entÄ«tijÄm, lai nepÄrkÄptu HTML. Å iem nolÅ«kiem mÄs izmantojam .
PÄrzÄ«mÄjumu samazinÄÅ”ana lÄ«dz minimumam
KÄ redzat no iepriekÅ” redzamÄs diagrammas, mÅ«su gadÄ«jumÄ viens Node JS gadÄ«jums veic divas funkcijas: SSR un āstarpniekserverisā API, kur notiek lietotÄja autorizÄcija. Å is apstÄklis āāpadara neiespÄjamu autorizÄciju, kamÄr JS kods darbojas serverÄ«, jo mezglam ir viens pavediens un SSR funkcija ir sinhrona. Tas nozÄ«mÄ, ka serveris vienkÄrÅ”i nevar nosÅ«tÄ«t pieprasÄ«jumus sev, kamÄr zvanu steks ir ar kaut ko aizÅemts. IzrÄdÄ«jÄs, ka mÄs atjauninÄjÄm stÄvokli, taÄu saskarne nepÄrstÄja raustÄ«ties, jo klienta dati bija jÄatjaunina, Åemot vÄrÄ lietotÄja sesiju. Mums bija jÄiemÄca mÅ«su lietojumprogrammai ievietot pareizos datus sÄkotnÄjÄ stÄvoklÄ«, Åemot vÄrÄ lietotÄja pieteikÅ”anos.
ProblÄmai bija tikai divi risinÄjumi:
- pievienot autorizÄcijas datus starpserveru pieprasÄ«jumiem;
- sadalÄ«t Node JS slÄÅus divos atseviŔķos gadÄ«jumos.
Pirmais risinÄjums prasÄ«ja serverÄ« izmantot globÄlos mainÄ«gos, bet otrais uzdevuma izpildes termiÅÅ” pagarinÄja vismaz par mÄnesi.
KÄ izdarÄ«t izvÄli? Habrs bieži pÄrvietojas pa mazÄkÄs pretestÄ«bas ceļu. NeformÄli ir vispÄrÄja vÄlme ciklu no idejas lÄ«dz prototipam samazinÄt lÄ«dz minimumam. Attieksmes modelis pret produktu nedaudz atgÄdina booking.com postulÄtus, ar vienÄ«go atŔķirÄ«bu, ka Habrs daudz nopietnÄk uztver lietotÄju atsauksmes un uzticas jums kÄ izstrÄdÄtÄjam Å”Ädu lÄmumu pieÅemÅ”anÄ.
Sekojot Å”ai loÄ£ikai un savai vÄlmei Ätri atrisinÄt problÄmu, es izvÄlÄjos globÄlos mainÄ«gos. Un, kÄ tas bieži notiek, jums par tiem agrÄk vai vÄlÄk ir jÄmaksÄ. GandrÄ«z uzreiz samaksÄjÄm: nedÄļas nogalÄ strÄdÄjÄm, noskaidrojÄm sekas, rakstÄ«jÄm un sÄka sadalÄ«t serveri divÄs daļÄs. Kļūda bija ļoti muļķīga, un ar to saistÄ«to kļūdu nebija viegli reproducÄt. Un jÄ, par to ir žÄl, taÄu tÄ vai citÄdi, klupdams un stenot, mans PoC ar globÄlajiem mainÄ«gajiem tomÄr nonÄca ražoÅ”anÄ un darbojas diezgan veiksmÄ«gi, gaidot pÄreju uz jaunu ādivu mezgluā arhitektÅ«ru. Tas bija nozÄ«mÄ«gs solis, jo formÄli mÄrÄ·is tika sasniegts ā SSR iemÄcÄ«jÄs piegÄdÄt pilnÄ«bÄ lietoÅ”anai gatavu lapu, un lietotÄja saskarne kļuva daudz mierÄ«gÄka.
MobilÄ Habr saskarne pÄc pirmÄ pÄrstrukturÄÅ”anas posma
Galu galÄ mobilÄs versijas SSR-CSR arhitektÅ«ra noved pie Å”Äda attÄla:
ļæ¼āDivu mezgluā SSR-CSR Ä·Äde. Node JS API vienmÄr ir gatavs asinhronai ievadei/izvadei, un SSR funkcija to nebloÄ·Ä, jo tÄ atrodas atseviÅ”Ä·Ä instancÄ. VaicÄjuma Ä·Äde #3 nav nepiecieÅ”ama.
DublÄtu pieprasÄ«jumu novÄrÅ”ana
PÄc manipulÄciju veikÅ”anas sÄkotnÄjÄ lapas atveidoÅ”ana vairs neizraisÄ«ja epilepsiju. Bet turpmÄkÄ Habr izmantoÅ”ana SPA režīmÄ tik un tÄ radÄ«ja neizpratni.
TÄ kÄ lietotÄju plÅ«smas pamatÄ ir formas pÄrejas rakstu saraksts ā raksts ā komentÄri un otrÄdi, vispirms bija svarÄ«gi optimizÄt Ŕīs Ä·Ädes resursu patÄriÅu.
AtgrieÅ”anÄs pie ziÅu plÅ«smas izraisa jaunu datu pieprasÄ«jumu
NevajadzÄja dziļi rakt. AugÅ”ÄjÄ ekrÄnuzÅÄmumÄ var redzÄt, ka, velkot atpakaļ, programma atkÄrtoti pieprasa rakstu sarakstu, un pieprasÄ«juma laikÄ mÄs neredzam rakstus, kas nozÄ«mÄ, ka iepriekÅ”Äjie dati kaut kur pazÅ«d. Å Ä·iet, ka rakstu saraksta komponents izmanto vietÄjo stÄvokli un zaudÄ to iznÄ«cinÄÅ”anas laikÄ. Faktiski lietojumprogramma izmantoja globÄlu stÄvokli, bet Vuex arhitektÅ«ra tika veidota uz priekÅ”u: moduļi ir piesaistÄ«ti lapÄm, kuras savukÄrt ir saistÄ«tas ar marÅ”rutiem. TurklÄt visi moduļi ir āvienreiz lietojamiā - katrs nÄkamais lapas apmeklÄjums pÄrrakstÄ«ja visu moduli:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
KopumÄ mums bija modulis Rakstu saraksts, kurÄ ir tipa objekti Raksts un modulis LapaRaksts, kas bija objekta paplaÅ”inÄta versija Raksts, it kÄ Raksts Pilns. KopumÄ Å”Ä« realizÄcija pati par sevi nenes neko briesmÄ«gu - tÄ ir ļoti vienkÄrÅ”a, varÄtu pat teikt, naiva, bet ÄrkÄrtÄ«gi saprotama. Ja moduli atiestatÄ«siet katru reizi, kad mainÄt marÅ”rutu, tad jÅ«s pat varat dzÄ«vot ar to. TomÄr, piemÄram, pÄrvietojoties starp rakstu plÅ«smÄm /feed ā /all, tiek garantÄts, ka izmetÄ«s visu, kas saistÄ«ts ar personÄ«go barÄ«bu, jo mums ir tikai viens Rakstu saraksts, kurÄ jÄievieto jauni dati. Tas atkal noved pie pieprasÄ«jumu dublÄÅ”anÄs.
SavÄcis visu, ko varÄju izrakt par tÄmu, formulÄju jaunu valsts struktÅ«ru un iepazÄ«stinÄju ar to saviem kolÄÄ£iem. Diskusijas bija garas, taÄu galu galÄ argumenti par labu atsvÄra Å”aubas, un es sÄku Ä«stenot.
RisinÄjuma loÄ£iku vislabÄk atklÄj divos posmos. Vispirms mÄs cenÅ”amies atsaistÄ«t Vuex moduli no lapÄm un saistÄ«t tieÅ”i ar marÅ”rutiem. JÄ, veikalÄ bÅ«s nedaudz vairÄk datu, getteri kļūs nedaudz sarežģītÄki, bet rakstus divreiz neielÄdÄsim. Mobilajai versijai tas, iespÄjams, ir spÄcÄ«gÄkais arguments. Tas izskatÄ«sies apmÄram Å”Ädi:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Bet ko darÄ«t, ja rakstu saraksti var pÄrklÄties starp vairÄkiem marÅ”rutiem un ja mÄs vÄlamies atkÄrtoti izmantot objektu datus Raksts lai renderÄtu ziÅas lapu, pÄrvÄrÅ”ot to par Raksts Pilns? Å ajÄ gadÄ«jumÄ loÄ£iskÄk bÅ«tu izmantot Å”Ädu struktÅ«ru:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Rakstu saraksts Å”eit tÄ ir tikai sava veida rakstu krÄtuve. Visi raksti, kas tika lejupielÄdÄti lietotÄja sesijas laikÄ. MÄs pret tiem izturamies ar vislielÄko piesardzÄ«bu, jo Ŕī ir satiksme, kas, iespÄjams, ir lejupielÄdÄta sÄpju dÄļ kaut kur metro starp stacijÄm, un mÄs noteikti nevÄlamies atkÄrtoti izraisÄ«t Ŕīs sÄpes lietotÄjam, piespiežot viÅu ielÄdÄt datus, kas viÅam jau ir lejupielÄdÄts. Objekts Rakstu ID ir vienkÄrÅ”i ID masÄ«vs (it kÄ āsaitesā) uz objektiem Raksts. Å Ä« struktÅ«ra ļauj izvairÄ«ties no marÅ”rutiem kopÄ«gu datu dublÄÅ”anas un objekta atkÄrtotas izmantoÅ”anas Raksts renderÄjot ziÅas lapu, apvienojot tajÄ paplaÅ”inÄtos datus.
ArÄ« rakstu saraksta izvade ir kļuvusi pÄrskatÄmÄka: iteratora komponents iterÄ cauri masÄ«vam ar rakstu ID un zÄ«mÄ raksta teaser komponentu, nododot Id kÄ rekvizÄ«tu, savukÄrt pakÄrtotais komponents izgÅ«st nepiecieÅ”amos datus no Rakstu saraksts. PÄrejot uz publikÄcijas lapu, mÄs iegÅ«stam jau esoÅ”o datumu no Rakstu saraksts, mÄs veicam pieprasÄ«jumu iegÅ«t trÅ«kstoÅ”os datus un vienkÄrÅ”i pievienot tos esoÅ”ajam objektam.
KÄpÄc Ŕī pieeja ir labÄka? KÄ jau rakstÄ«ju iepriekÅ”, Ŕī pieeja ir saudzÄ«gÄka attiecÄ«bÄ uz lejupielÄdÄtajiem datiem un ļauj tos izmantot atkÄrtoti. Bet turklÄt tas paver ceļu uz dažÄm jaunÄm iespÄjÄm, kas lieliski iekļaujas Å”ÄdÄ arhitektÅ«rÄ. PiemÄram, aptauju un rakstu ielÄde plÅ«smÄ, kad tie parÄdÄs. MÄs varam vienkÄrÅ”i ievietot jaunÄkÄs ziÅas "krÄtuvÄ" Rakstu saraksts, saglabÄjiet atseviŔķu jauno ID sarakstu Rakstu ID un paziÅot par to lietotÄjam. NoklikŔķinot uz pogas āRÄdÄ«t jaunas publikÄcijasā, mÄs vienkÄrÅ”i ievietosim jaunus ID paÅ”reizÄjÄ rakstu saraksta masÄ«va sÄkumÄ, un viss darbosies gandrÄ«z maÄ£iski.
Padarot lejupielÄdi patÄ«kamÄku
KukurÅ«za uz pÄrveidoÅ”anas kÅ«kas ir skeletu jÄdziens, kas satura lejupielÄdes procesu lÄnÄ internetÄ padara nedaudz mazÄk pretÄ«gu. Diskusijas par Å”o jautÄjumu nenotika; ceļŔ no idejas lÄ«dz prototipam aizÅÄma burtiski divas stundas. Dizains praktiski uzzÄ«mÄja pats sevi, un mÄs mÄcÄ«jÄm mÅ«su komponentiem atveidot vienkÄrÅ”us, tikko mirgojoÅ”us div blokus, gaidot datus. SubjektÄ«vi Ŕī pieeja iekrauÅ”anai faktiski samazina stresa hormonu daudzumu lietotÄja organismÄ. Skelets izskatÄs Å”Ädi:
Habraloading
Atspoguļojot
Es strÄdÄju HabrÄ seÅ”us mÄneÅ”us, un mani draugi joprojÄm jautÄ: nu, kÄ jums tur patÄ«k? Labi, Ärti - jÄ. Bet ir kaut kas, kas padara Å”o darbu atŔķirÄ«gu no citiem. Es strÄdÄju komandÄs, kuras bija pilnÄ«gi vienaldzÄ«gas pret savu produktu, nezinÄja un nesaprata, kas ir viÅu lietotÄji. Bet Å”eit viss ir savÄdÄk. Å eit tu jÅ«ties atbildÄ«gs par to, ko dari. Funkcijas izstrÄdes procesÄ jÅ«s daļÄji kļūstat par tÄs Ä«paÅ”nieku, piedalÄties visÄs ar jÅ«su funkcionalitÄti saistÄ«tÄs produktu sanÄksmÄs, pats sniedzat ieteikumus un pieÅemat lÄmumus. Izgatavot produktu, ko pats lietojat ikdienÄ, ir ļoti forÅ”i, taÄu rakstÄ«t kodu cilvÄkiem, kuri, iespÄjams, ir labÄki par jums, ir vienkÄrÅ”i neticama sajÅ«ta (bez sarkasma).
PÄc visu Å”o izmaiÅu izdoÅ”anas saÅÄmÄm pozitÄ«vas atsauksmes, un tas bija ļoti, ļoti jauki. Tas ir iedvesmojoÅ”i. Paldies! Rakstiet vairÄk.
AtgÄdinÄÅ”u, ka pÄc globÄlajiem mainÄ«gajiem mÄs nolÄmÄm mainÄ«t arhitektÅ«ru un pieŔķirt starpniekservera slÄni atseviÅ”Ä·Ä instancÄ. āDivu mezgluā arhitektÅ«ra jau ir izlaista publiskas beta testÄÅ”anas veidÄ. Tagad ikviens var pÄrslÄgties uz to un palÄ«dzÄt mums uzlabot mobilo Habr. Tas Å”odienai viss. Ar prieku atbildÄÅ”u uz visiem jÅ«su jautÄjumiem komentÄros.
Avots: www.habr.com