Mwen te toujou enterese nan ki jan Habr estriktire soti nan anndan an, ki jan workflow la estriktire, ki jan kominikasyon yo estriktire, ki estanda yo itilize ak ki jan kòd yo jeneralman ekri isit la. Erezman, mwen te jwenn yon opòtinite konsa, paske mwen te fèk fè pati ekip habra la. Sèvi ak egzanp yon ti refactoring nan vèsyon mobil lan, mwen pral eseye reponn kesyon an: ki sa li renmen travay isit la nan devan an. Nan pwogram nan: Node, Vue, Vuex ak SSR ak sòs soti nan nòt sou eksperyans pèsonèl nan Habr.
Premye bagay ou bezwen konnen sou ekip devlopman an se ke gen kèk nan nou. Pa ase - sa yo se twa devan, de dèyè ak plon teknik nan tout Habr - Baxley. Genyen, nan kou, tou yon tèsteur, yon designer, twa Vadim, yon bale mirak, yon espesyalis maketing ak lòt Bumburums. Men, gen sèlman sis kontribitè dirèk nan sous Habr yo. Sa a se byen ra - yon pwojè ak yon odyans miltimilyon dola, ki soti nan deyò a sanble ak yon antrepriz jeyan, an reyalite sanble plis tankou yon demaraj brikabrak ak estrikti nan òganizasyon ki plat posib.
Menm jan ak anpil lòt konpayi IT, Habr pwofese lide Agile, pratik CI, ak sa a tout. Men, dapre santiman mwen, Habr kòm yon pwodwi ap devlope plis nan vag pase kontinyèlman. Se konsa, pou plizyè sprint nan yon ranje, nou avèk dilijans kode yon bagay, konsepsyon ak redesign, kraze yon bagay epi ranje li, rezoud tikè ak kreye lòt, monte sou yon rato epi tire tèt nou nan pye yo, yo nan lòd yo finalman lage karakteristik la nan. pwodiksyon. Lè sa a, gen vini yon sèten kalm, yon peryòd de redevlopman, tan pou fè sa ki nan kadran "enpòtan-pa ijan".
Se jisteman sprint "ande sezon" sa a ki pral diskite anba a. Fwa sa a, li enkli yon refactoring nan vèsyon mobil Habr. An jeneral, konpayi an gen gwo espwa pou li, ak nan lavni an li ta dwe ranplase tout zou a nan enkarnasyon Habr a epi li vin yon solisyon inivèsèl kwa-platfòm. Yon jou pral gen layout adaptasyon, PWA, mòd offline, personnalisation itilizatè, ak anpil lòt bagay enteresan.
Ann mete travay la
Yon fwa, nan yon stand-up òdinè, youn nan devan an te pale sou pwoblèm nan achitekti nan eleman nan kòmantè nan vèsyon an mobil. Nan lide sa a, nou te òganize yon mikwo-rankont nan fòma sikoterapi gwoup. Tout moun te pran tou pou di kote sa fè mal, yo anrejistre tout bagay sou papye, yo senpatize, yo konprann, sof ke pèsonn pa bat bravo. Rezilta a se te yon lis 20 pwoblèm, ki te fè li klè ke Habr mobil toujou te gen yon chemen long ak litijyeuz nan siksè.
Mwen te prensipalman konsène sou efikasite nan itilizasyon resous ak sa yo rele yon koòdone lis. Chak jou, sou wout lakay-travay-lakay, mwen te wè ansyen telefòn mwen an ap eseye dezespereman montre 20 tit nan fil la. Li te sanble yon bagay tankou sa a:
Entèfas mobil Habr anvan refactoring
Kisa k ap pase la a? Nan ti bout tan, sèvè a te sèvi paj HTML la bay tout moun menm jan an, kèlkeswa si itilizatè a te konekte oswa ou pa. Lè sa a, JS kliyan an chaje epi li mande done ki nesesè yo ankò, men ajiste pou otorizasyon. Sa vle di, nou aktyèlman te fè menm travay la de fwa. Koòdone a flickered, ak itilizatè a telechaje yon bon san kilobyte siplemantè. An detay tout bagay te gade menm plis grenpe.
Ansyen konplo SSR-CSR. Otorizasyon se sèlman posib nan etap C3 ak C4, lè Node JS pa okipe jenere HTML epi li ka proxy demann nan API a.
Youn nan itilizatè Habr yo te dekri achitekti nou an nan tan sa a avèk anpil presizyon:
Vèsyon mobil lan se yon vye bagay. Mwen di li jan li ye. Yon konbinezon terib nan SSR ak CSR.
Nou te oblije admèt li, kèlkeswa jan li te tris.
Mwen te evalye opsyon yo, te kreye yon tikè nan Jira ak yon deskripsyon nan nivo "li move kounye a, fè li byen" epi dekonpoze travay la an gwo kou:
- reitilize done yo,
- minimize kantite retrase,
- elimine demann kopi,
- fè pwosesis chaje a pi evidan.
Ann reitilize done yo
Nan teyori, rann bò sèvè fèt pou rezoud de pwoblèm: pa soufri soti nan limit motè rechèch an tèm de ak amelyore metrik la (inevitableman vin pi grav ). Nan yon senaryo klasik ki finalman ane (toujou sou Backbone.js), SSR se menm aplikasyon JS izomòfik ki kouri nan anviwònman an Node. Sèvè a tou senpleman voye layout pwodwi a kòm yon repons a demann lan. Lè sa a, reyidratasyon rive sou bò kliyan an, ak Lè sa a, tout bagay ap travay san yo pa rechaje paj. Pou Habr, menm jan ak anpil lòt resous ak kontni tèks, rann sèvè se yon eleman enpòtan nan bati relasyon amikal ak motè rechèch.
Malgre lefèt ke plis pase sis ane te pase depi avenman teknoloji a, ak pandan tan sa a anpil dlo te reyèlman vole anba pon an nan mond lan front-end, pou anpil devlopè lide sa a toujou kache nan sekrè. Nou pa t kanpe sou kote epi woule yon aplikasyon Vue ak sipò SSR nan pwodiksyon, manke yon ti detay: nou pa t voye eta inisyal la bay kliyan an.
Poukisa? Pa gen okenn repons egzak pou kesyon sa a. Swa yo pa t 'vle ogmante gwosè a nan repons lan soti nan sèvè a, oswa paske nan yon pakèt moun sou lòt pwoblèm achitekti, oswa li tou senpleman pa t 'dekole. Yon fason oswa yon lòt, jete eta a ak reitilize tout sa ki sèvè a te fè sanble byen apwopriye ak itil. Travay la se aktyèlman trivial - nan kontèks ekzekisyon an, ak Vue otomatikman ajoute li nan layout pwodwi a kòm yon varyab mondyal: window.__INITIAL_STATE__.
Youn nan pwoblèm ki parèt se enkapasite pou konvèti estrikti siklik nan JSON (); te rezoud pa tou senpleman ranplase estrikti sa yo ak tokay plat yo.
Anplis de sa, lè w ap fè fas ak kontni UGC, ou ta dwe sonje ke done yo ta dwe konvèti nan antite HTML yo nan lòd yo pa kraze HTML la. Pou rezon sa yo nou itilize .
Minimize redesine yo
Kòm ou ka wè nan dyagram ki pi wo a, nan ka nou an, yon egzanp Node JS fè de fonksyon: SSR ak "proxy" nan API a, kote otorizasyon itilizatè rive. Sikonstans sa a fè li enposib otorize pandan y ap kòd JS la ap kouri sou sèvè a, depi ne a se yon sèl-threaded, ak fonksyon an SSR se synchrone. Sa vle di, sèvè a tou senpleman pa ka voye demann nan tèt li pandan callstack la okipe ak yon bagay. Li te tounen soti ke nou mete ajou eta a, men koòdone a pa t 'sispann twitching, depi done yo sou kliyan an te dwe mete ajou pran an kont sesyon itilizatè a. Nou te bezwen anseye aplikasyon nou an pou mete done ki kòrèk yo nan eta inisyal la, pran an kont koneksyon itilizatè a.
Te gen sèlman de solisyon nan pwoblèm nan:
- tache done otorizasyon nan demann kwa-sèvè;
- divize kouch Node JS an de ka separe.
Premye solisyon an te mande pou sèvi ak varyab mondyal sou sèvè a, ak dezyèm lan pwolonje dat limit pou konplete travay la pa omwen yon mwa.
Ki jan yo fè yon chwa? Habr souvan deplase sou wout la nan pi piti rezistans. Enfòmèl, gen yon dezi jeneral diminye sik la soti nan lide nan pwototip nan yon minimòm. Modèl la nan atitid anvè pwodwi a se yon ti jan okoumansman de postila yo nan booking.com, ak diferans lan sèlman ke Habr pran fidbak itilizatè pi seryezman ak konfyans ou, kòm yon pwomotè, pran desizyon sa yo.
Apre lojik sa a ak pwòp dezi mwen pou rezoud pwoblèm nan byen vit, mwen te chwazi varyab mondyal yo. Epi, kòm souvan rive, ou dwe peye pou yo pi bonè oswa pita. Nou peye prèske imedyatman: nou te travay nan fen semèn nan, klarifye konsekans yo, ekri epi yo te kòmanse divize sèvè a an de pati. Erè a te trè estipid, ak pinèz ki enplike li pa t fasil pou repwodui. Ak repons lan se wi, li se yon wont pou sa a, men yon fason oswa yon lòt, bite ak jemi, PoC mwen an ak varyab mondyal kanmenm te antre nan pwodiksyon ak ap travay byen avèk siksè pandan y ap tann pou mouvman an nan yon nouvo "de-node" achitekti. Sa a te yon etap enpòtan, paske fòmèlman objektif la te reyalize - SSR te aprann delivre yon paj konplètman pare pou itilize, ak UI a te vin pi kalm.
Mobile Habr koòdone apre premye etap nan refactoring
Alafen, achitekti SSR-CSR nan vèsyon mobil lan mennen nan foto sa a:
"De-node" SSR-CSR kous. Node JS API a toujou pare pou I/O asynchrone epi li pa bloke pa fonksyon SSR la, paske lèt la sitiye nan yon egzanp separe. Chèn rechèch #3 pa nesesè.
Elimine demann kopi
Apre manipilasyon yo te fèt, premye rann paj la pa te pwovoke epilepsi ankò. Men, plis itilizasyon Habr nan mòd SPA toujou lakòz konfizyon.
Depi baz la nan koule itilizatè se tranzisyon nan fòm lan lis atik → atik → kòmantè ak vis vèrsa, li te enpòtan pou optimize konsomasyon resous chèn sa a an premye.
Retounen nan manje pòs la pwovoke yon nouvo demann done
Pa t 'gen bezwen fouye byen fon. Nan screencast ki anwo a ou ka wè ke aplikasyon an re-mande lis atik la lè glise tounen, epi pandan demann lan nou pa wè atik yo, ki vle di done anvan yo disparèt yon kote. Li sanble ke eleman lis atik la sèvi ak yon eta lokal epi li pèdi li sou detwi. An reyalite, aplikasyon an te itilize yon eta mondyal, men achitekti Vuex te bati tèt-sou: modil yo mare nan paj, ki an vire yo mare nan wout. Anplis, tout modil yo "jetab" - chak vizit ki vin apre nan paj la reekri tout modil la:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
An total, nou te gen yon modil AtikLis, ki gen objè nan kalite Atik ak modil PajAtik, ki te yon vèsyon pwolonje nan objè a Atik, kalite AtikFull. An jeneral, aplikasyon sa a pa pote anyen terib nan tèt li - li trè senp, yon moun ta ka menm di nayif, men trè konprann. Si ou Reyajiste modil la chak fwa ou chanje wout la, Lè sa a, ou ka menm viv ak li. Sepandan, deplase ant manje atik, pou egzanp /feed → /all, se garanti yo jete tout bagay ki gen rapò ak manje a pèsonèl, depi nou gen sèlman youn AtikLis, nan ki ou bezwen mete nouvo done. Sa a ankò mennen nou nan repetisyon demann yo.
Lè m te rasanble tout bagay mwen te kapab fouye sou sijè a, mwen te fòme yon nouvo estrikti leta epi mwen te prezante l bay kòlèg mwen yo. Diskisyon yo te long, men nan fen agiman an favè depase dout yo, epi mwen te kòmanse aplikasyon.
Lojik yon solisyon pi byen revele nan de etap. Premyèman, nou eseye dekouple modil Vuex la nan paj epi mare dirèkteman nan wout yo. Wi, pral gen yon ti kras plis done nan magazen an, getters yo pral vin yon ti kras pi konplèks, men nou pa pral chaje atik de fwa. Pou vèsyon mobil lan, sa a se petèt agiman ki pi fò. Li pral gade yon bagay tankou sa a:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Men, e si lis atik yo ka sipèpoze ant plizyè wout ak e si nou vle reitilize done objè yo Atik rann paj pòs la, vire l 'nan AtikFull? Nan ka sa a, li ta pi lojik pou itilize yon estrikti konsa:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
AtikLis isit la se jis yon kalite depo atik. Tout atik ki te telechaje pandan sesyon itilizatè a. Nou trete yo ak anpil atansyon, paske sa a se trafik ki te ka telechaje nan doulè yon kote nan métro a ant estasyon yo, epi nou definitivman pa vle lakòz doulè sa a itilizatè a ankò lè nou fòse l 'chaje done li deja genyen. telechaje. Yon objè ArticlesIds se tou senpleman yon etalaj de ID (tankou si "lyen") nan objè yo Atik. Estrikti sa a pèmèt ou evite kopi done komen nan wout ak reitilize objè a Atik lè rann yon paj pòs pa fusion done pwolonje nan li.
Pwodiksyon an nan lis atik yo te vin pi transparan tou: eleman iteratè a itere nan etalaj la ak idantite atik epi trase eleman an teaser atik la, pase Id la kòm yon akseswar, epi eleman timoun nan, nan vire, rekipere done ki nesesè yo soti nan. AtikLis. Lè ou ale nan paj piblikasyon an, nou jwenn dat ki deja egziste a soti nan AtikLis, nou fè yon demann pou jwenn done ki manke yo epi tou senpleman ajoute li nan objè ki egziste a.
Poukisa apwòch sa a pi bon? Kòm mwen te ekri pi wo a, apwòch sa a se pi dou ak respè done yo telechaje epi li pèmèt ou reitilize li. Men, san konte sa a, li louvri wout la nan kèk nouvo posiblite ki anfòm parfe nan yon achitekti konsa. Pou egzanp, biwo vòt ak chaje atik nan manje a jan yo parèt. Nou ka senpleman mete dènye post yo nan yon "depo" AtikLis, sove yon lis separe nouvo ID nan ArticlesIds epi notifye itilizatè a sou li. Lè nou klike sou bouton "Montre nouvo piblikasyon", nou pral tou senpleman mete nouvo Id nan kòmansman etalaj la nan lis atik aktyèl la ak tout bagay pral travay prèske majik.
Fè telechaje pi agreyab
Glas la sou gato refactoring la se konsèp nan vye zo eskèlèt, ki fè pwosesis la nan telechaje kontni sou yon entènèt dousman yon ti kras mwens degoutan. Pa te gen okenn diskisyon sou zafè sa a; chemen ki soti nan lide rive nan pwototip te pran literalman de èdtan. Konsepsyon an pratikman te trase tèt li, epi nou te anseye konpozan nou yo rann blòk div senp, apèn tranbleman pandan y ap tann pou done. Subjektif, apwòch sa a pou chaje aktyèlman diminye kantite òmòn estrès nan kò itilizatè a. Kilè eskèlèt la sanble sa a:
Habraloading
Reflechi
Mwen ap travay nan Habré depi sis mwa e zanmi m yo toujou mande: bon, ki jan ou renmen li la? Oke, konfòtab - wi. Men, gen yon bagay ki fè travay sa a diferan de lòt moun. Mwen te travay nan ekip ki te konplètman endiferan nan pwodwi yo, pa t 'konnen oswa konprann ki moun ki itilizatè yo te. Men, isit la tout bagay diferan. Isit la ou santi ou responsab pou sa ou fè. Nan pwosesis pou devlope yon karakteristik, ou pasyèlman vin pwopriyetè li, patisipe nan tout reyinyon pwodwi ki gen rapò ak fonksyonalite ou, fè sijesyon ak pran desizyon tèt ou. Fè yon pwodwi ke ou itilize chak jou tèt ou trè fre, men ekri kòd pou moun ki pwobableman pi bon nan li pase ou se jis yon santiman enkwayab (pa gen okenn sarcasm).
Apre liberasyon tout chanjman sa yo, nou te resevwa fidbak pozitif, e li te trè, trè bèl. Li enspire. Mèsi! Ekri plis.
Kite m 'fè ou sonje ke apre varyab mondyal nou deside chanje achitekti a ak asiyen kouch prokurasyon an nan yon egzanp separe. Achitekti "de-nœuds la" te deja rive lage nan fòm tès piblik beta. Koulye a, nenpòt moun ka chanje sou li epi ede nou fè Habr mobil pi byen. Se tout pou jodia. Mwen pral kontan reponn tout kesyon ou yo nan kòmantè yo.
Sous: www.habr.com