Dejjem kont interessat kif Habr huwa strutturat minn ġewwa, kif il-fluss tax-xogħol huwa strutturat, kif il-komunikazzjonijiet huma strutturati, liema standards jintużaw u kif ġeneralment jinkiteb il-kodiċi hawn. Fortunatament, sibt opportunità bħal din, għax dan l-aħħar sirt parti mit-tim tal-habra. Billi tuża l-eżempju ta 'refactoring żgħir tal-verżjoni mobbli, ser nipprova nwieġeb il-mistoqsija: x'inhi taħdem hawn fuq quddiem. Fil-programm: Node, Vue, Vuex u SSR biz-zalza minn noti dwar esperjenza personali fl-Habr.
L-ewwel ħaġa li għandek bżonn tkun taf dwar it-tim ta 'żvilupp hija li hemm ftit minna. Mhux biżżejjed – dawn huma tliet fronts, żewġ difensuri u l-vantaġġ tekniku ta’ Habr kollha – Baxley. Hemm, ovvjament, ukoll tester, disinjatur, tliet Vadim, xkupa miraklu, speċjalista tal-marketing u Bumburums oħra. Iżda hemm biss sitt kontributuri diretti għas-sorsi ta 'Habr. Dan huwa pjuttost rari - proġett b'udjenza ta 'ħafna miljuni ta' dollari, li minn barra tidher qisha intrapriża ġgant, fir-realtà tidher aktar qisha startup cosy bl-aktar struttura organizzattiva ċatta possibbli.
Bħal ħafna kumpaniji oħra tal-IT, Habr jistqarr ideat Agile, prattiki CI, u dak kollu. Imma skond is-sentimenti tiegħi, Habr bħala prodott qed jiżviluppa aktar fil-mewġ milli kontinwament. Għalhekk, għal diversi sprints konsekuttivi, aħna nikkodifikaw xi ħaġa b'mod diliġenti, niddisinjaw u niddisinjaw mill-ġdid, inkissru xi ħaġa u nirranġawha, insolvu biljetti u noħolqu oħrajn ġodda, nitfgħu fuq rake u nisparaw lilna nfusna fis-saqajn, sabiex finalment nirrilaxxaw il-karatteristika f' produzzjoni. U mbagħad jiġi ċerta pausa, perjodu ta 'żvilupp mill-ġdid, żmien biex tagħmel dak li huwa fil-kwadrant "importanti-mhux urġenti".
Huwa preċiżament dan l-isprint "off-season" li se jiġi diskuss hawn taħt. Din id-darba inkludiet refactoring tal-verżjoni mobbli ta’ Habr. B'mod ġenerali, il-kumpanija għandha tamiet kbar għaliha, u fil-futur għandha tissostitwixxi ż-żoo kollu ta 'l-inkarnazzjonijiet ta' Habr u ssir soluzzjoni universali bejn pjattaformi. Xi darba se jkun hemm tqassim adattiv, PWA, modalità offline, customization tal-utent, u ħafna affarijiet interessanti oħra.
Ejja nissettjaw il-kompitu
Darba, fi stand-up ordinarju, wieħed mill-quddiem tkellem dwar problemi fl-arkitettura tal-komponent tal-kummenti tal-verżjoni mobbli. B’dan f’moħħna, organizzajna mikro-laqgħa fil-format ta’ psikoterapija ta’ grupp. Kulħadd ħa dawra jgħid fejn weġġa’, irreġistra kollox fuq il-karta, ssimpatizza, fehem, ħlief li ħadd ma ċapċip. Ir-riżultat kien lista ta’ 20 problema, li għamlitha ċara li l-mobile Habr għad kellu triq twila u xewka għas-suċċess.
Kont primarjament imħasseb dwar l-effiċjenza tal-użu tar-riżorsi u dak li jissejjaħ interface bla xkiel. Kuljum, fuq ir-rotta dar-xogħol-dar, rajt it-telefon antik tiegħi iddisprat jipprova juri 20 aħbarijiet fil-feed. Deher xi ħaġa bħal din:
Mobile Habr interface qabel refactoring
X'qed jiġri hawn? Fil-qosor, is-server serva l-paġna HTML lil kulħadd bl-istess mod, irrispettivament minn jekk l-utent kienx illoggjat jew le. Imbagħad il-klijent JS jitgħabba u jitlob id-dejta meħtieġa mill-ġdid, iżda aġġustat għall-awtorizzazzjoni. Jiġifieri fil-fatt għamilna l-istess xogħol darbtejn. L-interface teptip, u l-utent niżżel mitt kilobytes żejda tajba. Fid-dettall kollox deher saħansitra aktar creepy.
Skema antika SSR-CSR. L-awtorizzazzjoni hija possibbli biss fl-istadji C3 u C4, meta Node JS ma jkunx okkupat jiġġenera HTML u jista 'jipprokura talbiet lill-API.
L-arkitettura tagħna ta’ dak iż-żmien kienet deskritta b’mod preċiż ħafna minn wieħed mill-utenti tal-Habr:
Il-verżjoni mobbli hija ħażina. Qed ngħidha kif inhi. Għaqda terribbli ta 'SSR u CSR.
Kellna nammettuha, tkun kemm kienet imdejjaq.
Ivvalutajt l-għażliet, ħloqt biljett f'Jira b'deskrizzjoni fil-livell ta '"huwa ħażin issa, agħmel tajjeb" u ddekompost il-kompitu f'daqqa:
- uża mill-ġdid id-dejta,
- jimminimizza n-numru ta' tiġbed mill-ġdid,
- telimina talbiet duplikati,
- tagħmel il-proċess tat-tagħbija aktar ovvju.
Ejja nużaw mill-ġdid id-dejta
Fit-teorija, l-għoti fuq in-naħa tas-server huwa ddisinjat biex isolvi żewġ problemi: biex ma jbatix minn limitazzjonijiet tal-magni tat-tiftix f'termini ta' u ttejjeb il-metrika (inevitabbilment tmur għall-agħar ). F'xenarju klassiku li finalment sena (għadha fuq Backbone.js), SSR hija l-istess applikazzjoni JS iżomorfika li taħdem fl-ambjent Node. Is-server sempliċement jibgħat it-tqassim iġġenerat bħala tweġiba għat-talba. Imbagħad ir-riidratazzjoni sseħħ fuq in-naħa tal-klijent, u mbagħad kollox jaħdem mingħajr reloads tal-paġna. Għal Habr, bħal għal ħafna riżorsi oħra b'kontenut ta 'test, ir-rendiment tas-server huwa element kritiku fil-bini ta' relazzjonijiet ta 'ħbiberija mal-magni tat-tiftix.
Minkejja l-fatt li għaddew aktar minn sitt snin mill-miġja tat-teknoloġija, u matul dan iż-żmien ħafna ilma verament ittajjar taħt il-pont fid-dinja ta 'quddiem, għal ħafna żviluppaturi din l-idea għadha mgħottija fis-segretezza. Aħna ma twarrabniex u ħarġet applikazzjoni Vue b'appoġġ SSR għall-produzzjoni, nieqes dettall żgħir wieħed: ma bgħatniex l-istat inizjali lill-klijent.
Għaliex? M'hemm l-ebda tweġiba eżatta għal din il-mistoqsija. Jew ma ridux iżidu d-daqs tar-rispons mis-server, jew minħabba mazz ta 'problemi arkitettoniċi oħra, jew sempliċement ma ħaditx. B'xi mod jew ieħor, it-tneħħija tal-istat u l-użu mill-ġdid ta 'dak kollu li għamel is-server jidher pjuttost xieraq u utli. Il-kompitu huwa fil-fatt trivjali - fil-kuntest tal-eżekuzzjoni, u Vue awtomatikament iżidha mat-tqassim iġġenerat bħala varjabbli globali: window.__INITIAL_STATE__.
Waħda mill-problemi li qamet hija l-inabbiltà li jiġu kkonvertiti strutturi ċikliċi f'JSON (); ġiet solvuta billi sempliċiment ibdel tali strutturi mal-kontropartijiet ċatti tagħhom.
Barra minn hekk, meta tittratta l-kontenut UGC, għandek tiftakar li d-dejta għandha tiġi kkonvertita f'entitajiet HTML sabiex ma tkisserx l-HTML. Għal dawn l-iskopijiet nużaw .
Minimizzazzjoni ta' redraws
Kif tistgħu taraw mid-dijagramma ta 'hawn fuq, fil-każ tagħna, istanza waħda ta' Node JS twettaq żewġ funzjonijiet: SSR u "proxy" fl-API, fejn isseħħ l-awtorizzazzjoni tal-utent. Din iċ-ċirkustanza tagħmilha impossibbli li tiġi awtorizzata waqt li l-kodiċi JS ikun qed jaħdem fuq is-server, peress li n-nodu huwa b'ħajt wieħed, u l-funzjoni SSR hija sinkronika. Jiġifieri, is-server sempliċement ma jistax jibgħat talbiet lilu nnifsu waqt li l-callstack ikun okkupat b'xi ħaġa. Irriżulta li aġġornajna l-istat, iżda l-interface ma waqafx tixgħel, peress li d-dejta fuq il-klijent kellha tiġi aġġornata b'kont meħud tas-sessjoni tal-utent. Kellna ngħallmu l-applikazzjoni tagħna biex tpoġġi d-dejta korretta fl-istat inizjali, b'kont meħud tal-login tal-utent.
Kien hemm biss żewġ soluzzjonijiet għall-problema:
- ehmeż data ta' awtorizzazzjoni ma' talbiet bejn is-server;
- qassam saffi Node JS f'żewġ każijiet separati.
L-ewwel soluzzjoni kienet teħtieġ l-użu ta 'varjabbli globali fuq is-server, u t-tieni estendiet l-iskadenza għat-tlestija tal-kompitu b'mill-inqas xahar.
Kif tagħmel għażla? Habr spiss jimxi tul it-triq tal-inqas reżistenza. B'mod informali, hemm xewqa ġenerali li jitnaqqas iċ-ċiklu mill-idea għall-prototip għall-minimu. Il-mudell ta 'attitudni lejn il-prodott huwa kemmxejn reminixxenti tal-postulati ta' booking.com, bl-unika differenza tkun li Habr jieħu l-feedback tal-utent ħafna aktar bis-serjetà u jafda lilek, bħala żviluppatur, biex tieħu deċiżjonijiet bħal dawn.
Wara din il-loġika u x-xewqa tiegħi stess li nsolvi malajr il-problema, għażilt varjabbli globali. U, kif jiġri spiss, trid tħallas għalihom illum jew għada. Ħlasna kważi immedjatament: ħdimna fi tmiem il-ġimgħa, naddafna l-konsegwenzi, ktibna u beda jaqsam is-server f'żewġ partijiet. L-iżball kien stupid ħafna, u l-bug li jinvolviha ma kienx faċli li tirriproduċi. U iva, hija tal-mistħija għal dan, iżda b'xi mod jew ieħor, tfixkel u groaning, il-PoC tiegħi b'varjabbli globali madankollu daħal fil-produzzjoni u qed jaħdem pjuttost b'suċċess waqt li qed jistenna ċ-ċaqliq għal arkitettura ġdida "b'żewġ nodi". Dan kien pass importanti, għaliex formalment l-għan intlaħaq - SSR tgħallem iwassal paġna kompletament lesta għall-użu, u l-UI saret ħafna aktar kalma.
Mobile Habr interface wara l-ewwel stadju ta 'refactoring
Fl-aħħar mill-aħħar, l-arkitettura SSR-CSR tal-verżjoni mobbli twassal għal din l-istampa:
Ċirkwit SSR-CSR ta’ “żewġ nodi”. In-Node JS API hija dejjem lesta għal I/O asinkronu u mhix imblukkata mill-funzjoni SSR, peress li din tal-aħħar tinsab f'istanza separata. Il-katina tal-mistoqsijiet #3 mhix meħtieġa.
Jeliminaw talbiet duplikati
Wara li twettqu l-manipulazzjonijiet, l-għoti inizjali tal-paġna m'għadux ipprovoka epilessija. Iżda l-użu ulterjuri ta 'Habr fil-mod SPA xorta kkawża konfużjoni.
Peress li l-bażi tal-fluss tal-utent hija tranżizzjonijiet tal-forma lista ta’ artikli → artiklu → kummenti u viċi versa, kien importanti li jiġi ottimizzat il-konsum tar-riżorsi ta 'din il-katina fl-ewwel lok.
Ir-ritorn għall-għalf tal-post jipprovoka talba għal dejta ġdida
Ma kienx hemm bżonn tħaffer fil-fond. Fl-iscreencast ta 'hawn fuq tista' tara li l-applikazzjoni terġa' titlob il-lista ta 'artikoli meta swiping lura, u waqt it-talba ma narawx l-artikoli, li jfisser li d-dejta preċedenti tisparixxi x'imkien. Jidher li l-komponent tal-lista tal-artikoli juża stat lokali u jitlifha meta jinqered. Fil-fatt, l-applikazzjoni użat stat globali, iżda l-arkitettura Vuex inbniet head-on: il-moduli huma marbuta ma 'paġni, li mbagħad huma marbuta mar-rotot. Barra minn hekk, il-moduli kollha huma "li jintremew" - kull żjara sussegwenti għall-paġna kitbet mill-ġdid il-modulu kollu:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
B'kollox, kellna modulu ArtikoliLista, li fih oġġetti tat-tip Artikolu u modulu PageArticle, li kienet verżjoni estiża tal-oġġett Artikolu, speċi ta ArtikoluSħiħ. B'mod ġenerali, din l-implimentazzjoni ma ġġorr xejn terribbli fiha nnifisha - hija sempliċi ħafna, wieħed jista 'saħansitra jgħid naive, iżda li jinftiehem ħafna. Jekk tirrisettja l-modulu kull darba li tibdel ir-rotta, allura tista 'saħansitra tgħix miegħu. Madankollu, jiċċaqilqu bejn għalf artikolu, per eżempju /feed → /all, huwa garantit li tarmi dak kollu relatat mal-għalf personali, peress li għandna wieħed biss ArtikoliLista, li fiha għandek bżonn tpoġġi data ġdida. Dan jerġa’ jwassalna għal duplikazzjoni ta’ talbiet.
Wara li ġabar dak kollu li stajt inħaffer fuq is-suġġett, fformulajt struttura statali ġdida u ppreżentajtha lill-kollegi tiegħi. Id-diskussjonijiet kienu twal, iżda fl-aħħar mill-aħħar l-argumenti favur għelbu d-dubji, u bdejt l-implimentazzjoni.
Il-loġika ta 'soluzzjoni hija żvelata l-aħjar f'żewġ passi. L-ewwel nippruvaw inseparaw il-modulu Vuex mill-paġni u norbtu direttament mar-rotot. Iva, se jkun hemm ftit aktar data fil-maħżen, getters se jsiru ftit aktar kumplessi, iżda mhux se ngħabbu artikli darbtejn. Għall-verżjoni mobbli, dan huwa forsi l-aktar argument b'saħħtu. Se tidher xi ħaġa bħal din:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Imma x'jiġri jekk il-listi tal-artikoli jistgħu jikkoinċidu bejn rotot multipli u x'jiġri jekk irridu nużaw mill-ġdid id-dejta tal-oġġett Artikolu biex tirrendi l-paġna tal-post, tibdilha ArtikoluSħiħ? F'dan il-każ, ikun aktar loġiku li tintuża struttura bħal din:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
ArtikoliLista hawn huwa biss tip ta 'repożitorju ta' artikoli. L-artikoli kollha li ġew imniżżla matul is-sessjoni tal-utent. Aħna nittrattawhom bl-akbar attenzjoni, għax dan huwa traffiku li seta' ġie mniżżel permezz ta' uġigħ x'imkien fil-metro bejn l-istazzjonijiet, u żgur ma rridux nerġgħu nikkawżaw dan l-uġigħ lill-utent billi nġegħluh jgħabbi dejta li diġà jkun. jitniżżel. Oġġett ArticlesIds hija sempliċement firxa ta 'IDs (bħallikieku "links") għal oġġetti Artikolu. Din l-istruttura tippermettilek tevita li tidduplika data komuni għar-rotot u tuża mill-ġdid l-oġġett Artikolu meta tirrendi paġna tal-post billi tgħaqqad dejta estiża fiha.
L-output tal-lista tal-artikoli sar ukoll aktar trasparenti: il-komponent tal-iteratur itenni permezz tal-firxa bl-ID tal-artikoli u jiġbed il-komponent teaser tal-artikoli, jgħaddi l-Id bħala prop, u l-komponent tat-tfal, min-naħa tiegħu, jirkupra d-dejta meħtieġa minn ArtikoliLista. Meta tmur fil-paġna tal-pubblikazzjoni, inġibu d-data diġà eżistenti minn ArtikoliLista, nagħmlu talba biex niksbu d-dejta nieqsa u sempliċement inżiduha mal-oġġett eżistenti.
Għaliex dan l-approċċ huwa aħjar? Kif ktibt hawn fuq, dan l-approċċ huwa aktar ġentili fir-rigward tad-dejta mniżżla u jippermettilek terġa 'tużaha. Iżda minbarra dan, tiftaħ it-triq għal xi possibbiltajiet ġodda li jidħlu perfettament f'arkitettura bħal din. Per eżempju, polling u tagħbija ta 'oġġetti fl-għalf kif jidhru. Nistgħu sempliċement inpoġġu l-aħħar postijiet fi "ħażna" ArtikoliLista, isalva lista separata ta' IDs ġodda fi ArticlesIds u jinnotifika lill-utent dwar dan. Meta nikklikkjaw fuq il-buttuna "Uri pubblikazzjonijiet ġodda", aħna sempliċement indaħħlu Ids ġodda fil-bidu tal-firxa tal-lista attwali ta 'artikoli u kollox jaħdem kważi b'mod maġiku.
Tagħmel it-tniżżil aktar pjaċevoli
Is-silġ fuq il-kejk tar-refactoring huwa l-kunċett ta 'skeletri, li jagħmel il-proċess ta' tniżżil ta 'kontenut fuq Internet bil-mod ftit inqas disgusting. Ma kien hemm l-ebda diskussjoni dwar din il-kwistjoni; it-triq mill-idea għall-prototip ħadet litteralment sagħtejn. Id-disinn prattikament ġibed lilu nnifsu, u aħna għallimna l-komponenti tagħna biex jirrendu blokki div sempliċi, bilkemm teptip waqt li nistennew id-data. Suġġettivament, dan l-approċċ għat-tagħbija fil-fatt inaqqas l-ammont ta 'ormoni tal-istress fil-ġisem tal-utent. L-iskeletru jidher bħal dan:
Habraloading
Rifletti
Ilni sitt xhur naħdem f’Habré u sħabi għadhom jistaqsu: sew, kif togħġobkom hemm? Okay, komdu - iva. Imma hemm xi ħaġa li tagħmel dan ix-xogħol differenti minn oħrajn. Ħdimt f'timijiet li kienu kompletament indifferenti għall-prodott tagħhom, ma kinux jafu jew jifhmu min kienu l-utenti tagħhom. Imma hawn kollox huwa differenti. Hawnhekk tħossok responsabbli għal dak li tagħmel. Fil-proċess li tiżviluppa karatteristika, inti parzjalment issir is-sid tagħha, tieħu sehem fil-laqgħat kollha tal-prodott relatati mal-funzjonalità tiegħek, tagħmel suġġerimenti u tieħu deċiżjonijiet lilek innifsek. Li tagħmel prodott li tuża kuljum lilek innifsek huwa jibred ħafna, iżda l-kitba tal-kodiċi għal nies li probabbilment huma aħjar minnek hija biss sensazzjoni inkredibbli (l-ebda sarkasm).
Wara r-rilaxx ta 'dawn il-bidliet kollha, irċevejna feedback pożittiv, u kien sabiħ ħafna, ħafna. Huwa jispira. Grazzi! Ikteb aktar.
Ħa nfakkarkom li wara varjabbli globali iddeċidejna li nibdlu l-arkitettura u nallokaw is-saff ta 'prokura f'istanza separata. L-arkitettura ta '"żewġ nodi" diġà laħqet ir-rilaxx fil-forma ta' ttestjar beta pubbliku. Issa kulħadd jista’ jaqleb għaliha u jgħinna nagħmlu l-mobile Habr aħjar. Dak kollu għal-lum. Inkun kuntent li nwieġeb il-mistoqsijiet kollha tiegħek fil-kummenti.
Sors: www.habr.com