Bhí suim agam i gcónaí sa chaoi a bhfuil Habr struchtúrtha ón taobh istigh, conas a dhéantar an sreabhadh oibre a struchtúrú, conas a dhéantar cumarsáid a struchtúrú, cad iad na caighdeáin a úsáidtear agus conas a scríobhtar cód go ginearálta anseo. Go fortunately, fuair mé deis den sórt sin, toisc go raibh mé mar chuid den fhoireann habra le déanaí. Ag baint úsáide as an sampla de athmhacrú beag ar an leagan soghluaiste, déanfaidh mé iarracht an cheist a fhreagairt: cad é mar atá sé a bheith ag obair anseo ag an tosach. Sa chlár: Nód, Vue, Vuex agus SSR le anlann ó nótaí faoi thaithí phearsanta i Habr.
Is é an chéad rud a theastaíonn uait a bheith ar an eolas faoin bhfoireann forbartha ná nach bhfuil mórán againn. Ní leor - is iad seo trí aghaidh, dhá chúl agus an luaidhe teicniúil gach Habr - Baxley. Ar ndóigh, tá tástálaí, dearthóir, trí Vadim, broom miracle, speisialtóir margaíochta agus Bumburums eile ann freisin. Ach níl ach seisear a chuireann go díreach le foinsí Habr. Tá sé seo fíor-annamh - tionscadal le lucht féachana il-milliún dollar, a bhreathnaíonn ón taobh amuigh cosúil le fiontar ollmhór, i ndáiríre níos mó cosúil le tosaithe cluthar leis an struchtúr eagrúcháin flattest is féidir.
Cosúil le go leor cuideachtaí TF eile, molann Habr smaointe Agile, cleachtais CI, agus sin uile. Ach de réir mo mhothúcháin, tá Habr mar tháirge ag forbairt níos mó i dtonnta ná mar a bhíonn sé go leanúnach. Mar sin, le haghaidh roinnt sprints i ndiaidh a chéile, déanaimid rud éigin a chódú go dícheallach, a dhearadh agus a athdhearadh, rud a bhriseadh agus é a shocrú, ticéid a réiteach agus cinn nua a chruthú, céim a chur ar raca agus muid féin a lámhach sna cosa, chun an ghné a scaoileadh isteach sa deireadh. táirgeadh. Agus ansin tagann lull áirithe, tréimhse athfhorbartha, am chun an rud atá sa cheathrú “tábhachtach-ní práinneach” a dhéanamh.
Is é an sprint “lasmuigh den séasúr” seo a phléifear thíos. An uair seo chuimsigh sé athmhacrú ar an leagan soghluaiste de Habr. Go ginearálta, tá an chuideachta ag súil go mór leis, agus sa todhchaí ba cheart go gcuirfí in ionad an zú iomlán de incarnations Habr agus a bheith ina réiteach uilíoch tras-ardán. Lá éigin beidh leagan amach oiriúnaitheach, PWA, modh as líne, saincheaptha úsáideora, agus go leor rudaí suimiúla eile ann.
A ligean ar a leagtar ar an tasc
Uair amháin, ag gnáthsheasamh, labhair duine den lucht tosaigh faoi fhadhbanna ailtireachta chomhpháirt tuairimí an leagan soghluaiste. Agus é seo san áireamh, d'eagraíomar micrea-chruinniú i bhformáid síciteiripe grúpa. Ghlac gach duine seal ag rá cá raibh sé gortaithe, thaifead siad gach rud ar pháipéar, rinne siad comhbhrón, thuig siad, ach amháin nach raibh aon duine ag bualadh bos. Ba é an toradh ná liosta de 20 fadhb, rud a léirigh go raibh cosán fada agus deilgneach fós ag Habr soghluaiste chun ratha.
Bhí imní orm go príomha faoi éifeachtúlacht úsáid acmhainní agus rud ar a dtugtar comhéadan mín. Gach lá, ar an mbealach baile-obair-bhaile, chonaic mé mo sheanfhón ag iarraidh go dian 20 ceannlíne a thaispeáint sa bhfotha. D'fhéach sé rud éigin mar seo:
Comhéadan Soghluaiste Habr roimh athmhacrú
Cad atá ar siúl anseo? I mbeagán focal, rinne an freastalaí an leathanach HTML a sheirbheáil ar gach duine ar an mbealach céanna, is cuma an raibh an t-úsáideoir logáilte isteach nó nach raibh. Ansin tá an cliant JS luchtaithe agus iarrann sé na sonraí is gá arís, ach a choigeartú le haghaidh údarú. Is é sin le rá, rinneamar an jab céanna faoi dhó. Chas an comhéadan, agus d'íoslódáil an t-úsáideoir céad cilibheart breise. Go mion d'fhéach gach rud níos creepy.
Sean scéim SSR-CSR. Ní féidir údarú a údarú ach ag céimeanna C3 agus C4, nuair nach bhfuil Node JS gnóthach ag giniúint HTML agus gur féidir leis iarratais seachfhreastalaí chuig an API.
Rinne duine d’úsáideoirí Habr cur síos an-chruinn ar ár n-ailtireacht ag an am sin:
Tá an leagan soghluaiste cacamas. Tá mé á rá mar atá sé. Meascán uafásach de SSR agus CSR.
Bhí orainn é a admháil, is cuma cé chomh brónach a bhí sé.
Rinne mé measúnú ar na roghanna, chruthaigh mé ticéad i Jira le cur síos ar an leibhéal “tá sé go dona anois, déan i gceart é” agus rinne mé an tasc a dhianscaoileadh i strócanna leathana:
- sonraí athúsáid,
- líon na n-aththarraingtí a íoslaghdú,
- deireadh a chur le hiarratais dhúblacha,
- an próiseas luchtaithe a dhéanamh níos soiléire.
Déanaimis na sonraí a athúsáid
Go teoiriciúil, tá rindreáil ar thaobh an fhreastalaí deartha chun dhá fhadhb a réiteach: gan a bheith thíos le teorainneacha inneall cuardaigh i dtéarmaí agus an méadrach a fheabhsú (ag dul in olcas dosheachanta ). I gcás clasaiceach go deireadh bliana (fós ar Backbone.js), is é SSR an t-iarratas JS isomorphic céanna atá ag rith i dtimpeallacht Nód. Seolann an freastalaí an leagan amach ginte mar fhreagra ar an iarratas. Ansin tarlaíonn rehydration ar thaobh an chliaint, agus ansin oibríonn gach rud gan athlódáil leathanaigh. I gcás Habr, mar atá i gcás go leor acmhainní eile le hábhar téacs, tá rindreáil freastalaí ina ghné ríthábhachtach chun caidreamh cairdiúil a thógáil le hinnill chuardaigh.
In ainneoin go bhfuil níos mó ná sé bliana caite ó tháinig an teicneolaíocht, agus le linn an ama seo tá a lán uisce ar foluain i ndáiríre faoin droichead ar fud an domhain tosaigh, i gcás go leor forbróirí tá an smaoineamh seo fós faoi shrouded rúndachta. Níor sheas muid ar leataobh agus rinneamar feidhmchlár Vue le tacaíocht SSR don táirgeadh a rolladh amach, rud a d'fhág nach raibh sonraí beag amháin in easnamh: níor chuireamar an stát tosaigh chuig an gcliant.
Cén fáth? Níl aon fhreagra cruinn ar an gceist seo. Ní raibh siad ag iarraidh méid an fhreagra ón bhfreastalaí a mhéadú, nó mar gheall ar roinnt fadhbanna ailtireachta eile, nó níor éirigh leis. Bealach amháin nó bealach eile, is cosúil go bhfuil sé cuí agus úsáideach gach rud a rinne an freastalaí a chaitheamh amach agus a athúsáid. Is é an tasc i ndáiríre fánach - isteach sa chomhthéacs forghníomhaithe, agus cuireann Vue go huathoibríoch leis an leagan amach ginte mar athróg dhomhanda: window.__INITIAL_STATE__.
Ceann de na fadhbanna a tháinig chun cinn is ea an neamhábaltacht struchtúir thimthriallacha a thiontú ina JSON (); go simplí trí struchtúir den sórt sin a athsholáthar lena gcomhghleacaithe cothroma.
Ina theannta sin, agus tú ag déileáil le hábhar UGC, ba cheart duit cuimhneamh gur cheart na sonraí a thiontú go heintitis HTML chun gan an HTML a bhriseadh. Chun na críocha seo a úsáidimid .
Aththarraingtí a íoslaghdú
Mar a fheiceann tú ón léaráid thuas, inár gcás féin, comhlíonann cás Nóde JS dhá fheidhm: SSR agus “seachfhreastalaí” san API, áit a dtarlaíonn údarú úsáideora. Mar gheall ar an imthoisc seo tá sé dodhéanta údarú a dhéanamh agus an cód JS ag rith ar an bhfreastalaí, ós rud é go bhfuil an nód singil-snáithithe, agus go bhfuil an fheidhm SSR sioncrónach. Is é sin le rá, ní féidir leis an bhfreastalaí iarratais a sheoladh chuige féin fad is atá an cruach ghlao gnóthach le rud éigin. Tharla sé gur nuashonraíomar an stát, ach níor stop an comhéadan ag casadh, ós rud é go gcaithfí na sonraí faoin gcliant a nuashonrú agus an seisiún úsáideora á gcur san áireamh. Ní mór dúinn ár n-iarratas a mhúineadh chun na sonraí cearta a chur sa stát tosaigh, ag cur logáil isteach an úsáideora san áireamh.
Ní raibh ach dhá réiteach ar an bhfadhb:
- sonraí údaraithe a cheangal le hiarrataí trasfhreastalaí;
- scoilt sraitheanna Nód JS ina dhá chás ar leith.
Bhí gá le hathróga domhanda a úsáid ar an bhfreastalaí leis an gcéad réiteach, agus chuir an dara réiteach síneadh de mhí ar a laghad leis an spriocdháta chun an tasc a chríochnú.
Conas rogha a dhéanamh? Is minic a ghluaiseann Habr feadh chonair na frithsheasmhachta is lú. Go neamhfhoirmiúil, tá fonn ginearálta ann an timthriall ó smaoineamh go fréamhshamhail a laghdú go híosmhéid. Tá an tsamhail de dhearcadh i leith an táirge beagán i gcuimhne do na postulates de booking.com, agus an difríocht amháin go bhfuil Habr a ghlacadh aiseolas úsáideora i bhfad níos dáiríre agus muinín agat, mar fhorbróir, a dhéanamh cinntí den sórt sin.
Tar éis an loighic seo agus mo mhian féin an fhadhb a réiteach go tapa, roghnaigh mé athróga domhanda. Agus, mar a tharlaíonn go minic, caithfidh tú íoc astu luath nó mall. D'íoc muid beagnach láithreach: d'oibrigh muid ar an deireadh seachtaine, glanadh suas na hiarmhairtí, scríobh agus thosaigh sé ar an bhfreastalaí a roinnt ina dhá chuid. Bhí an earráid an-dúr, agus ní raibh an fabht lena mbaineann sé éasca a atáirgeadh. Agus tá, is mór an náire é seo, ach bealach amháin nó bealach eile, ag cromadh agus ag caoineadh, chuaigh mo PoC le hathróga domhanda isteach i dtáirgeadh agus tá sé ag obair go rathúil agus é ag fanacht leis an aistriú chuig ailtireacht nua “dhá nód”. Ba chéim thábhachtach é seo, toisc go ndearnadh an sprioc a bhaint amach go foirmiúil - d'fhoghlaim SSR leathanach réidh le húsáid a sheachadadh, agus tháinig an Chomhéadain i bhfad níos ciúine.
Comhéadan Soghluaiste Habr tar éis an chéad chéim den athfhachtóiriú
Ar deireadh thiar, tá an pictiúr seo mar thoradh ar ailtireacht SSR-CSR an leagan soghluaiste:
Ciorcad SSR-CSR “dhá nód”. Tá an Node JS API réidh i gcónaí le haghaidh I/O asincrónach agus ní chuireann an fheidhm SSR bac air, ós rud é go bhfuil an dara ceann suite i gcás ar leith. Níl slabhra ceisteanna #3 ag teastáil.
Deireadh a chur le hiarratais dhúblacha
Tar éis na hionramhálacha a dhéanamh, níor spreag rindreáil tosaigh an leathanaigh titimeas a thuilleadh. Ach bhí mearbhall fós mar thoradh ar úsáid bhreise Habr i mód SPA.
Ós rud é go bhfuil an bonn de shreabhadh úsáideora aistrithe na foirme liosta alt → alt → tuairimí agus vice versa, bhí sé tábhachtach úsáid acmhainní an tslabhra seo a bharrfheabhsú ar an gcéad dul síos.
Spreagann filleadh ar an bhfotha postála iarratas nua ar shonraí
Ní raibh aon ghá le tochailt domhain. Sa screencast thuas is féidir leat a fheiceáil go n-iarrann an t-iarratas liosta na n-alt nuair a bhíonn tú ag swiping ar ais, agus le linn an iarratais ní fheicimid na hailt, rud a chiallaíonn go n-imíonn na sonraí roimhe seo áit éigin. Tá an chuma ar an scéal go n-úsáideann comhpháirt liosta na n-alt stát áitiúil agus go gcailltear é ar scrios. Go deimhin, d'úsáid an feidhmchlár staid dhomhanda, ach tógadh ailtireacht Vuex ceann ar aghaidh: tá modúil ceangailte le leathanaigh, atá ceangailte le bealaí ina dhiaidh sin. Ina theannta sin, tá gach modúl “indiúscartha” - athscríobh gach cuairt ina dhiaidh sin ar an leathanach an modúl iomlán:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
San iomlán, bhí modúl againn Liosta na nAilt, ina bhfuil rudaí de chineál Airteagal agus modúl LeathanachAirteagal, a bhí ina leagan leathnaithe den réad Airteagal, cineál Airteagal Iomlán. Tríd is tríd, ní iompraíonn an cur i bhfeidhm seo aon rud uafásach ann féin - tá sé an-simplí, d'fhéadfadh duine a rá fiú naive, ach thar a bheith intuigthe. Má athshocraíonn tú an modúl gach uair a athraíonn tú an bealach, is féidir leat maireachtáil leis fiú. Mar sin féin, ag bogadh idir fothaí alt, mar shampla /beatha → /gach, ráthaítear gach rud a bhaineann leis an mbeathú pearsanta a chaitheamh amach, ós rud é nach bhfuil againn ach ceann amháin Liosta na nAilt, inar gá duit sonraí nua a chur isteach. Mar thoradh air seo arís déantar dúbailt ar iarratais.
Tar éis dom gach rud a bhí ar mo chumas a thochailt ar an ábhar a bhailiú, cheap mé struchtúr stáit nua agus chuir mé faoi bhráid mo chomhghleacaithe é. Bhí an plé fada, ach sa deireadh ba mhó na hargóintí i bhfabhar na n-amhras, agus thosaigh mé á gcur i bhfeidhm.
Is fearr loighic an réitigh a nochtadh in dhá chéim. Ar dtús déanaimid iarracht an modúl Vuex a dhíchúpláil ó na leathanaigh agus é a cheangal go díreach de na bealaí. Sea, beidh beagán níos mó sonraí sa siopa, beidh getters beagán níos casta, ach ní bheidh muid ag luchtú earraí faoi dhó. Maidir leis an leagan soghluaiste, b'fhéidir gurb é seo an argóint is láidre. Beidh sé cuma rud éigin mar seo:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Ach cad a tharlóidh más féidir le liostaí alt forluí idir bealaí iolracha agus cad é más mian linn sonraí oibiachta a athúsáid Airteagal a rindreáil an leathanach post, casadh sé isteach Airteagal Iomlán? Sa chás seo, bheadh sé níos loighciúil struchtúr den sórt sin a úsáid:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Liosta na nAilt níl ann anseo ach stór alt de chineál. Gach alt a íoslódáladh le linn an tseisiúin úsáideora. Caithimid go han-chúramach iad, mar is trácht é seo a d’fhéadfadh a bheith íoslódáilte trí phian áit éigin sa meitreo idir stáisiúin, agus is cinnte nach bhfuilimid ag iarraidh an phian seo a chur faoi deara don úsáideoir arís trí iallach a chur air sonraí a luchtú atá aige cheana féin. íoslódáilte. Réad AirteagailIds níl ann ach sraith aitheantais (amhail “naisc”) le réada Airteagal. Ligeann an struchtúr seo duit sonraí a bhaineann le bealaí a dhúbailt agus an réad a athúsáid a sheachaint Airteagal agus leathanach poist á rindreáil trí shonraí sínte a chumasc ann.
Tá aschur liosta na n-alt tar éis éirí níos trédhearcaí freisin: athraíonn an comhpháirt iterator tríd an eagar le IDs na n-alt agus tarraingíonn sé comhpháirt teaser an ailt, ag dul thar an Id mar théip, agus aisghabhann comhpháirt an linbh, ina dhiaidh sin, na sonraí riachtanacha ó Liosta na nAilt. Nuair a théann tú chuig an leathanach foilseacháin, faightear an dáta atá ann cheana féin ó Liosta na nAilt, déanaimid iarratas chun na sonraí atá in easnamh a fháil agus go simplí é a chur leis an réad atá ann cheana féin.
Cén fáth a bhfuil an cur chuige seo níos fearr? Mar a scríobh mé thuas, tá an cur chuige seo níos míne maidir leis na sonraí a íoslódáladh agus ligeann sé duit iad a athúsáid. Ach ina theannta sin, osclaíonn sé an bealach do roinnt féidearthachtaí nua a luíonn go foirfe in ailtireacht den sórt sin. Mar shampla, earraí a vótaíocht agus a luchtú isteach sa bheatha mar a fheictear dóibh. Ní féidir linn ach na postálacha is déanaí a chur i “stóráil” Liosta na nAilt, sábháil liosta ar leith d'aitheantais nua i AirteagailIds agus an t-úsáideoir a chur ar an eolas faoi. Nuair a chliceálann muid ar an gcnaipe “Taispeáin foilseacháin nua”, ní chuirfimid ach Ids nua isteach i dtús na sraithe den liosta alt reatha agus oibreoidh gach rud beagnach go draíochta.
Íoslódáil níos mó spraoi
Is é an t-oighriú ar an gcíste athmhonaraithe ná coincheap na gcnámharlach, rud a fhágann go bhfuil an próiseas chun ábhar a íoslódáil ar Idirlíon mall beagán níos lú náire. Ní raibh aon phlé ar an ábhar seo; thóg sé dhá uair an chloig go litriúil ón smaoineamh go dtí an fhréamhshamhail. Tharraing an dearadh é féin go praiticiúil, agus mhúin muid ár gcomhpháirteanna chun bloic div simplí, ar éigean a bhí ag flickering, a sholáthar agus muid ag fanacht le sonraí. Go suibiachtúil, laghdaíonn an cur chuige seo maidir le luchtú an méid hormóin struis i gcorp an úsáideora. Breathnaíonn an creatlach mar seo:
Habralódáil
Ag machnamh
Tá mé ag obair i Habré le sé mhí agus tá mo chairde fós ag fiafraí de: bhuel, conas is maith leat ansin? Ceart go leor, compordach - tá. Ach tá rud éigin a fhágann go bhfuil an obair seo difriúil ó dhaoine eile. D'oibrigh mé i bhfoirne a bhí go hiomlán neamhshuimiúil maidir lena dtáirge, nach raibh a fhios nó a thuiscint cé hiad na húsáideoirí a bhí acu. Ach anseo tá gach rud difriúil. Anseo mothaíonn tú freagrach as an méid a dhéanann tú. Sa phróiseas maidir le gné a fhorbairt, bíonn tú ina úinéir go páirteach, páirt a ghlacadh i ngach cruinniú táirge a bhaineann le do fheidhmiúlacht, moltaí a dhéanamh agus cinntí a dhéanamh leat féin. Tá sé an-fhionnuar táirge a úsáideann tú gach lá a dhéanamh duit féin, ach níl ann ach mothú dochreidte (gan searbhas) a scríobh cód do dhaoine atá níos fearr ná tú féin.
Tar éis scaoileadh na n-athruithe seo go léir, fuaireamar aiseolas dearfach, agus bhí sé an-, an-deas. Tá sé spreagúil. Go raibh maith agat! Scríobh níos mó.
Lig dom a mheabhrú duit gur shocraigh muid tar éis athróga domhanda an ailtireacht a athrú agus an ciseal seachfhreastalaí a leithdháileadh i gcás ar leith. Tá an ailtireacht “dhá-nód” bainte amach cheana féin i bhfoirm tástála béite poiblí. Anois is féidir le duine ar bith aistriú chuige agus cabhrú linn Habr soghluaiste a dhéanamh níos fearr. Sin go léir don lá atá inniu ann. Beidh áthas orm do chuid ceisteanna go léir a fhreagairt sna tuairimí.
Foinse: will.com