Bengilokhu nginentshisekelo yokuthi i-Habr ihlelwe kanjani ngaphakathi, ukuthi ukuhamba komsebenzi kuhlelwe kanjani, ukuthi ukuxhumana kuhlelwe kanjani, yiziphi izindinganiso ezisetshenziswayo nokuthi ikhodi ngokuvamile ibhalwa kanjani lapha. Ngenhlanhla, ngathola ithuba elinjalo, ngoba ngisanda kuba yingxenye yeqembu le-habra. Ngisebenzisa isibonelo sokwenza kabusha okuncane kwenguqulo yeselula, ngizozama ukuphendula umbuzo: kunjani ukusebenza lapha ngaphambili. Kuhlelo: I-Node, i-Vue, i-Vuex ne-SSR enesosi evela kumanothi amayelana nolwazi lomuntu siqu ku-Habr.
Okokuqala okumele ukwazi ngeqembu elithuthukisayo ukuthi simbalwa. Akwanele - lawa ama-front amathathu, ama-backs amabili kanye ne-technical lead yawo wonke u-Habr - Baxley. Kukhona, yiqiniso, futhi umhloli, umklami, ama-Vadim amathathu, umshanelo oyisimangaliso, uchwepheshe wezokuthengisa kanye nezinye i-Bumburums. Kepha bayisithupha kuphela abanikela ngqo emithonjeni kaHabr. Lokhu kuyivelakancane impela - iphrojekthi enezithameli zezigidi zamadola, okuvela ngaphandle ibukeka njengebhizinisi elikhulu, empeleni ibukeka njengesiqalo esithokomele esinesakhiwo senhlangano esibhebhetheke kakhulu.
Njengezinye izinkampani eziningi ze-IT, uHabr uprofesa imibono ye-Agile, imikhuba ye-CI, futhi yilokho kuphela. Kepha ngokwemizwa yami, uHabr njengomkhiqizo uthuthuka kakhulu kumagagasi kunokuqhubekayo. Ngakho-ke, emijahweni eminingana ilandelana, sibhala ngenkuthalo okuthile, ukuklama nokuklama kabusha, siphule okuthile futhi sikulungise, sixazulule amathikithi futhi sakhe amasha, sinyathele erekeni futhi sizidubule ezinyaweni, ukuze ekugcineni sikhulule isici ukukhiqiza. Bese kuba khona ukuzola okuthile, inkathi yokuthuthukiswa kabusha, isikhathi sokwenza lokho okuku-quadrant “okubalulekile-hhayi okuphuthumayo”.
Yilo kanye le “off-season” okuzoxoxwa ngakho ngezansi. Kulokhu ifake phakathi ukwenziwa kabusha kwenguqulo yeselula ye-Habr. Ngokuvamile, inkampani inethemba elikhulu ngayo, futhi esikhathini esizayo kufanele ithathe indawo ye-zoo yokuzalwa kuka-Habr futhi ibe yisisombululo se-cross-platform yomhlaba wonke. Ngolunye usuku kuzoba nesakhiwo esiguqukayo, i-PWA, imodi engaxhunyiwe ku-inthanethi, ukwenza ngokwezifiso umsebenzisi, nezinye izinto eziningi ezithokozisayo.
Asisethe umsebenzi
Ngesinye isikhathi, endaweni evamile yokuma, omunye wabaphambili wakhuluma ngezinkinga ekwakhiweni kwengxenye yokuphawula yenguqulo yeselula. Sinalokhu engqondweni, sahlela umhlangano omncane ngendlela yokwelashwa kwengqondo yeqembu. Wonke umuntu wayeshintshana ngokuthi lapho kubuhlungu khona, baqopha yonke into ephepheni, bazwelana, baqonda, ngaphandle kokuthi akekho owayeshaya izandla. Umphumela waba uhlu lwezinkinga ezingu-20, okwakwenza kwacaca ukuthi uHabr ongumakhalekhukhwini wayesenendlela ende nenemeva eya empumelelweni.
Bengikhathazeke ngokuyinhloko ngokusebenza kahle kokusetshenziswa kwezinsiza nalokho okubizwa ngokuthi isikhombikubona esibushelelezi. Nsuku zonke, emzileni wasekhaya wasekhaya, ngabona ifoni yami endala izama ukubonisa izihloko ezingu-20 kokuphakelayo. Bekubukeka kanjena:
I-Mobile Habr interface ngaphambi kokwenza kabusha
Kwenzakalani lapha? Ngamafuphi, iseva inikeze wonke umuntu ikhasi le-HTML ngendlela efanayo, kungakhathaliseki ukuthi umsebenzisi ungene ngemvume noma cha. Khona-ke i-JS yeklayenti iyalayishwa futhi icela idatha edingekayo futhi, kodwa ilungiselwe ukugunyazwa. Okungukuthi, empeleni senze umsebenzi ofanayo kabili. Isixhumi esibonakalayo salokoza, futhi umsebenzisi walanda amakhilobhayithi ayikhulu engeziwe. Ngokuningiliziwe yonke into yayibukeka yethusa nakakhulu.
Isikimu esidala se-SSR-CSR. Ukugunyaza kungenzeka kuphela ezigabeni C3 ne-C4, lapho i-Node JS ingekho matasa ikhiqiza i-HTML futhi ingafaka izicelo zommeleli ku-API.
Isakhiwo sethu sangaleso sikhathi sachazwa ngokunembe kakhulu ngomunye wabasebenzisi bakaHabr:
Мобильная версия — дерьмо. Говорю как есть. Ужасное сочетание SSR вместе с CSR.
Мы вынуждены были это признать, как бы печально это ни было.
Ngihlole izinketho, ngenza ithikithi ngesi-Jira elinencazelo ezingeni elithi "kubi manje, kwenze kahle" ngase ngiwohloza umsebenzi ngamagalelo abanzi:
- sebenzisa kabusha idatha,
- ukunciphisa inani lokudwetshwa kabusha,
- исключить дубли запросов,
- yenza inqubo yokulayisha ibonakale kakhudlwana.
Masiphinde sisebenzise idatha
Ngokombono, ukunikezwa kohlangothi lweseva kuklanyelwe ukuxazulula izinkinga ezimbili: ukungahlushwa imikhawulo yenjini yokusesha ngokwemibandela и улучшить метрику (okungenzeka kube kubi kakhulu ). Esimweni sakudala ukuthi ekugcineni unyaka (kuse-Backbone.js), i-SSR iwuhlelo lokusebenza lwe-JS ye-isomorphic efanayo olusebenza endaweni ye-Node. Iseva ivele ithumele isakhiwo esikhiqiziwe njengempendulo yesicelo. Bese ukubuyisela amanzi emzimbeni kwenzeka ohlangothini lweklayenti, bese yonke into isebenza ngaphandle kokulayisha kabusha kwekhasi. Ku-Habr, njengezinye izinsiza eziningi ezinokuqukethwe kombhalo, ukunikezwa kweseva kuyisici esibalulekile ekwakheni ubudlelwano obunobungani nezinjini zokusesha.
Naphezu kokuthi sekudlule iminyaka engaphezu kweyisithupha kusukela ekufikeni kobuchwepheshe, futhi ngalesi sikhathi amanzi amaningi asuke egeleza ngempela ngaphansi kwebhuloho emhlabeni ongaphambili, kubathuthukisi abaningi lo mbono usagcwele imfihlo. Asizange sime eceleni futhi sethula uhlelo lwe-Vue olusekelwa yi-SSR ekukhiqizeni, sishoda ngemininingwane eyodwa encane: asizange sithumele isimo sokuqala kuklayenti.
Kungani? Ayikho impendulo eqondile yalo mbuzo. Kungenzeka ukuthi bebengafuni ukukhulisa usayizi wempendulo evela kuseva, noma ngenxa yenqwaba yezinye izinkinga zezakhiwo, noma ayizange isuke. Ngandlela thize, ukukhipha isimo nokusebenzisa kabusha yonke into eyenziwe yiseva ibonakala ifaneleka futhi iwusizo. Umsebenzi empeleni umncane - kumongo wokwenza, futhi i-Vue iyengeza ngokuzenzakalelayo esakhiweni esikhiqiziwe njengokuguquguquka komhlaba wonke: window.__INITIAL_STATE__.
Enye yezinkinga ezivelile ukungakwazi ukuguqula izakhiwo zama-cyclic zibe i-JSON (); yaxazululwa ngokumane kushintshwe izakhiwo ezinjalo ngozakwabo abayisicaba.
Ukwengeza, lapho usebenza nokuqukethwe kwe-UGC, kufanele ukhumbule ukuthi idatha kufanele iguqulelwe kumabhizinisi e-HTML ukuze ingaphuli i-HTML. Kulezi zinhloso sisebenzisa .
Ukunciphisa ukudwetshwa kabusha
Njengoba ungabona kumdwebo ongenhla, kithi, isibonelo esisodwa se-Node JS senza imisebenzi emibili: I-SSR kanye “nommeleli” ku-API, lapho ukugunyazwa komsebenzisi kwenzeka khona. Lesi simo sikwenza kungenzeki ukugunyaza ngenkathi ikhodi ye-JS isebenza kuseva, njengoba i-node inomucu owodwa, futhi umsebenzi we-SSR uyavumelana. Okusho ukuthi, iseva ayikwazi nje ukuzithumelela izicelo ngenkathi i-callstack imatasa ngokuthile. Kuvele ukuthi sibuyekeze isimo, kodwa isixhumi esibonakalayo asizange siyeke ukunyakaza, njengoba idatha yeklayenti bekufanele ibuyekezwe kucatshangelwa iseshini yomsebenzisi. Besidinga ukufundisa uhlelo lwethu lokusebenza ukubeka idatha efanele esimweni sokuqala, sicabangela ukungena ngemvume komsebenzisi.
Bekunezixazululo ezimbili kuphela zenkinga:
- namathisela idatha yokugunyazwa ezicelweni ze-cross-server;
- hlukanisa izendlalelo ze-Node JS zibe izimo ezimbili ezihlukene.
Isixazululo sokuqala sasidinga ukusetshenziswa kwezinto eziguquguqukayo zomhlaba wonke kuseva, kanti esesibili sanweba umnqamulajuqu wokuqeda umsebenzi okungenani inyanga.
Indlela yokwenza ukukhetha? U-Habr uvamise ukuhamba endleleni yokumelana okuncane. Ngokungakahleleki, kunesifiso esijwayelekile sokunciphisa umjikelezo ukusuka embonweni uye ku-prototype ube ubuncane. Imodeli yesimo sengqondo ngomkhiqizo ngandlela-thile ikhumbuza okuthunyelwe kwe-booking.com, umehluko kuphela ukuthi u-Habr uthatha impendulo yomsebenzisi njengento ebaluleke kakhulu futhi ukwethemba wena, njengonjiniyela, ukuthi uzokwenza izinqumo ezinjalo.
Ngokulandela lo mqondo kanye nesifiso sami sokuxazulula inkinga ngokushesha, ngakhetha okuguquguqukayo komhlaba. Futhi, njengoba kuvame ukwenzeka, kufanele uzikhokhele ngokushesha noma kamuva. Sakhokha cishe ngokushesha: sisebenze ngempelasonto, sasusa imiphumela, sabhala futhi waqala ukuhlukanisa iseva zibe izingxenye ezimbili. Iphutha beliwubulima kakhulu, futhi iphutha elibandakanya lona bekungelula ukuphinda likhiqizeke. Futhi yebo, kuyihlazo ngalokhu, kodwa ngandlela thile, ngiyakhubeka futhi ngibubula, i-PoC yami enezinto eziguquguqukayo zomhlaba wonke nokho ingene ekukhiqizeni futhi isebenza ngempumelelo ngenkathi ilinde ukuthuthela ekwakhiweni okusha “okunamanodi amabili”. Lesi kwakuyisinyathelo esibalulekile, ngoba ngokusemthethweni umgomo wafinyelelwa - i-SSR yafunda ukuletha ikhasi elilungele ukusetshenziswa ngokuphelele, futhi i-UI yaba nokuzola kakhulu.
I-Mobile Habr interface ngemva kwesigaba sokuqala sokuphinda kwenziwe kabusha
Ekugcineni, ukwakheka kwe-SSR-CSR yenguqulo yeselula kuholela kulesi sithombe:
«Двухнодная» схема SSR-CSR. Node JS API всегда готова к асинхронному I/O и не блокируется функцией SSR, так как последняя находится в отдельном инстансе. Цепочка запросов #3 не нужна.
Ukuqeda izicelo eziyimpinda
Ngemva kokwenziwa kwalezi zindlela zokukhwabanisa, ukukhishwa kokuqala kwekhasi akuzange kusasibangela isithuthwane. Kepha ukusetshenziswa okuqhubekayo kwe-Habr kumodi ye-SPA kusabangela ukudideka.
Njengoba isisekelo sokugeleza komsebenzisi ukuguqulwa kwefomu uhlu lwezihloko → isihloko → amazwana futhi ngokuphambene nalokho, bekubalulekile ukuthuthukisa ukusetshenziswa kwezinsiza zalolu chungechunge kwasekuqaleni.
Ukubuyela kokuphakelayo okuthunyelwe kuphakamisa isicelo sedatha esisha
Sasingekho isidingo sokumba ujule. Kusikrini esingenhla ungabona ukuthi uhlelo lokusebenza lucela kabusha uhlu lwama-athikili lapho uswayiphela emuva, futhi phakathi nesicelo asiwaboni ama-athikili, okusho ukuthi idatha yangaphambilini iyanyamalala ndawana thize. Kubonakala sengathi ingxenye yohlu lwe-athikili isebenzisa isifunda sasendaweni futhi iyasilahlekela ekubhubhiseni. Eqinisweni, uhlelo lokusebenza lusebenzise isimo somhlaba wonke, kodwa ukwakheka kwe-Vuex kwakhiwe ngqo: amamojula aboshwe emakhasini, wona aboshwe emizileni. Ngaphezu kwalokho, wonke amamojula "ayalahleka" - ukuvakasha ngakunye okulandelayo ekhasini kubhala kabusha yonke imojula:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Sekukonke, sibe nemojuli ArticlesList, equkethe izinto zohlobo esihlokweni kanye nemojuli Isihloko Sekhasi, obekuyinguqulo enwetshiwe yento esihlokweni, cishe ukuthi I-ArticleFull. Ngokuvamile, lokhu kuqaliswa akuthwali lutho olubi ngokwalo - kulula kakhulu, umuntu angase athi ukungazi, kodwa kuyaqondakala kakhulu. Uma usetha kabusha imojuli ngaso sonke isikhathi uma ushintsha umzila, ungaphila ngisho nayo. Nokho, ukuhamba phakathi kokuphakelayo kwe-athikili, isibonelo /okuphakelayo → /konke, kuqinisekisiwe ukulahla yonke into ehlobene nokuphakelayo komuntu siqu, njengoba sinayo eyodwa kuphela ArticlesList, lapho udinga ukufaka khona idatha entsha. Lokhu futhi kusiholela ekuphindaphindweni kwezicelo.
Ngemva kokuqoqa konke engikwazile ukukumba ngesihloko, ngakha uhlaka olusha lombuso ngase ngilwethula kozakwethu. Izingxoxo zazizinde, kodwa ekugcineni izimpikiswano ezivuna zadlula ukungabaza, futhi ngaqala ukusebenzisa.
Umqondo wesixazululo wembulwa kangcono ngezinyathelo ezimbili. Okokuqala sizama ukuhlukanisa imojuli ye-Vuex emakhasini futhi sibophe ngokuqondile emizileni. Yebo, kuzoba nedatha eyengeziwe esitolo, ama-getters azoba yinkimbinkimbi, kodwa ngeke silayishe izindatshana kabili. Okwenguqulo yeselula, lena mhlawumbe impikiswano enamandla kakhulu. Kuzobukeka kanjena:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Но что если списки статей могут пересекаться между несколькими роутами и что, если мы хотим переиспользовать данные объекта esihlokweni ukuze unikeze ikhasi lokuthunyelwe, uliguqule libe I-ArticleFull? Kulokhu, kungaba okunengqondo ukusebenzisa isakhiwo esinjalo:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
ArticlesList lapha kuwuhlobo nje lwenqolobane yezihloko. Wonke ama-athikili alandwe ngesikhathi somsebenzisi. Sibaphatha ngokucophelela okukhulu, ngoba lena traffic okungenzeka ukuthi ilandwe ngobuhlungu endaweni ethile ku-metro phakathi kweziteshi, futhi asifuni neze ukubangela lobu buhlungu kumsebenzisi futhi ngokumphoqa ukuthi alayishe idatha asevele enayo. ukulandwa. Into ImibhaloIds является просто массивом айдишников (как бы «ссылок») на объекты esihlokweni. Lesi sakhiwo sikuvumela ukuthi ugweme ukuphinda idatha evamile emizileni nokusebenzisa kabusha into esihlokweni lapho unikeza ikhasi lokuthunyelwe ngokuhlanganisa idatha enwetshiwe kulo.
Okukhishwayo kohlu lwama-athikili nakho sekucace kakhudlwana: ingxenye ye-iterator iphindaphinda kumalungu afanayo nama-athikili esihloko futhi idweba ingxenye yamazwibela e-athikili, idlulise i-Id njenge-prop, futhi ingxenye yengane, yona, ithola idatha edingekayo ArticlesList. Uma uya ekhasini lokushicilela, sithola idethi ekhona kakade kusukela ArticlesList, senza isicelo sokuthola idatha elahlekile futhi simane siyengeze entweni ekhona.
Kungani le ndlela ingcono? Njengoba ngibhale ngenhla, le ndlela imnene ngokuphathelene nedatha elandiwe futhi ikuvumela ukuthi uyisebenzise kabusha. Kodwa ngaphandle kwalokhu, kuvula indlela kwamanye amathuba amasha angena ngokuphelele kusakhiwo esinjalo. Isibonelo, ukuvota nokulayisha izindatshana kokuphakelayo njengoba zivela. Singamane sibeke okuthunyelwe kwakamuva “kusitoreji” ArticlesList, londoloza uhlu oluhlukile lwama-ID amasha kulo ImibhaloIds futhi wazise umsebenzisi ngakho. Uma sichofoza inkinobho ethi “Bonisa ukushicilelwa okusha”, sizovele sifake ama-Id amasha ekuqaleni kwezinhlu zohlu lwamanje lwezihloko futhi yonke into izosebenza cishe ngomlingo.
Ukwenza ukulanda kujabulise kakhudlwana
Uqweqwe lwekhekhe ku-refactoring ikhekhe umqondo wamathambo, okwenza inqubo yokulanda okuqukethwe ku-inthanethi enensayo ingabi nesinengiso kancane. Azikho izingxoxo mayelana nalolu daba; indlela esuka embonweni iye kwisibonelo yathatha amahora amabili ngokoqobo. Idizayini ivele yazisondeza, futhi safundisa izingxenye zethu ukuthi zinikeze amabhulokhi e-div alula, anganyikinyi ngenkathi silinde idatha. Ngokuzithoba, le ndlela yokulayisha empeleni inciphisa inani lamahomoni okucindezeleka emzimbeni womsebenzisi. Uhlaka lwamathambo lubukeka kanje:
Хабралоадинг
Ukucabangisisa
Ngisebenze e-Habré izinyanga eziyisithupha futhi abangani bami basabuza: kahle, uthanda kanjani lapho? Kulungile, ukhululekile - yebo. Kodwa kukhona okwenza lo msebenzi wehluke kweminye. Ngisebenze emaqenjini abengenandaba nhlobo nomkhiqizo wawo, angazi noma aqonde ukuthi obani abasebenzisi bawo. Kodwa lapha konke kuhlukile. Lapha uzizwa unesibopho ngalokho okwenzayo. Enqubweni yokuthuthukisa isici, uba umnikazi waso kancane, ubambe iqhaza kuyo yonke imihlangano yomkhiqizo ehlobene nokusebenza kwakho, wenze iziphakamiso futhi uzenzele izinqumo. Ukwenza umkhiqizo owusebenzisa nsuku zonke kuhle kakhulu, kodwa ukubhala ikhodi yabantu okungenzeka ukuthi abangcono kunawe kuwumuzwa omangalisayo (akukho ukubhuqa).
Ngemuva kokukhululwa kwazo zonke lezi zinguquko, sithole impendulo eyakhayo, futhi bekukuhle kakhulu. Kuyakhuthaza. Ngiyabonga! Bhala okwengeziwe.
Ake ngikukhumbuze ukuthi ngemuva kokuguquguquka komhlaba wonke sanquma ukushintsha ukwakheka futhi sabe isendlalelo se-proxy sibe yisibonelo esihlukile. I-architecture "ye-two-node" isivele ifinyelele ukukhululwa ngendlela yokuhlolwa kwe-beta yomphakathi. Manje noma ubani angashintshela kuyo futhi asisize senze i-Habr yeselula ibe ngcono. Yilokho kuphela okwanamuhla. Ngizojabula ukuphendula yonke imibuzo yakho kumazwana.
Source: www.habr.com