Bha ùidh agam a-riamh ann an structar Habr bhon taobh a-staigh, mar a tha an sruth-obrach air a structaradh, mar a tha conaltradh air a structaradh, dè na h-ìrean a thathas a’ cleachdadh agus mar a tha còd air a sgrìobhadh san fharsaingeachd an seo. Gu fortanach, fhuair mi a leithid de chothrom, oir o chionn ghoirid thàinig mi gu bhith na phàirt den sgioba habra. A’ cleachdadh an eisimpleir de ath-dhealbhadh beag den dreach gluasadach, feuchaidh mi ris a’ cheist a fhreagairt: cò ris a tha e coltach a bhith ag obair an seo aig an aghaidh. Anns a’ phrògram: Node, Vue, Vuex agus SSR le sabhs bho notaichean mu eòlas pearsanta ann an Habr.
Is e a’ chiad rud a dh’ fheumas tu a bhith eòlach air an sgioba leasachaidh nach eil mòran againn ann. Chan eil gu leòr - is iad sin trì aghaidhean, dà chùl agus stiùir theicnigeach Habr gu lèir - Baxley. Tha, gu dearbh, cuideachd neach-dearbhaidh, dealbhaiche, trì Vadim, broom mìorbhaileach, eòlaiche margaidheachd agus Bumburums eile. Ach chan eil ach sianar a’ cur gu dìreach ri stòran Habr. Tha seo gu math tearc - pròiseact le luchd-èisteachd ioma-mhillean dolar, a tha bhon taobh a-muigh coltach ri iomairt mòr, gu fìrinneach a’ coimhead nas coltaiche ri tòiseachadh comhfhurtail leis an structar eagrachaidh as rèidh a tha comasach.
Coltach ri mòran chompanaidhean IT eile, tha Habr ag aideachadh beachdan Agile, cleachdaidhean CI, agus tha sin uile. Ach a rèir m ’fhaireachdainnean, tha Habr mar thoradh a’ fàs nas motha ann an tonnan na tha e an-còmhnaidh. Mar sin, airson grunn sprints ann an sreath, bidh sinn gu dìcheallach a ’còdachadh rudeigin, a’ dealbhadh agus ag ath-dhealbhadh, a ’briseadh rudeigin agus ga chàradh, a’ fuasgladh thiogaidean agus a ’cruthachadh feadhainn ùra, a’ ceum air ràcan agus a ’losgadh sinn fhìn anns na casan, gus am feart a leigeil ma sgaoil mu dheireadh. cinneasachadh. Agus an uairsin thig tàladh sònraichte, àm ath-leasachaidh, ùine airson na tha anns a’ cheathramh “cudromach - chan e èiginneach” a dhèanamh.
Is e dìreach an sprint “far-seusan” seo a thèid a dheasbad gu h-ìosal. An turas seo bha e a’ toirt a-steach ath-dhealbhadh den dreach gluasadach de Habr. San fharsaingeachd, tha dòchasan mòra aig a’ chompanaidh air a shon, agus san àm ri teachd bu chòir dha an sù gu lèir de chorpachadh Habr a chuir an àite agus a bhith na fhuasgladh tar-àrd-ùrlar uile-choitcheann. Aon latha bidh cruth atharrachail, PWA, modh far-loidhne, gnàthachadh luchd-cleachdaidh, agus mòran de rudan inntinneach eile.
Leig leinn an obair a shuidheachadh
Aon uair, aig seasamh àbhaisteach, bhruidhinn aon den aghaidh mu dhuilgheadasan ann an ailtireachd pàirt bheachdan an dreach gluasadach. Le seo san amharc, chuir sinn air dòigh meanbh-choinneamh ann an cruth psychotherapy buidhne. Ghabh a h-uile duine cothrom mu seach ag ràdh far an do ghortaich e, chlàr iad a h-uile càil air pàipear, rinn iad co-fhaireachdainn, thuig iad, ach a-mhàin nach robh duine a’ bualadh. B’ e an toradh seo liosta de 20 duilgheadas, a rinn soilleir gu robh slighe fhada agus duilich aig Habr gluasadach fhathast gu soirbheachas.
Bha dragh mòr orm mu èifeachdas ghoireasan agus rud ris an canar eadar-aghaidh rèidh. Gach latha, air an t-slighe dachaigh-obair-dachaigh, chunnaic mi an seann fhòn agam gu dìcheallach a’ feuchainn ri 20 cinn-naidheachd a thaisbeanadh anns a’ bhiadhadh. Bha e a’ coimhead rudeigin mar seo:
Eadar-aghaidh gluasadach Habr mus tèid ath-shuidheachadh
Dè tha dol an seo? Ann an ùine ghoirid, thug am frithealaiche an duilleag HTML don h-uile duine san aon dòigh, ge bith an robh an neach-cleachdaidh air logadh a-steach no nach robh. An uairsin tha an neach-dèiligidh JS air a luchdachadh agus ag iarraidh an dàta riatanach a-rithist, ach air atharrachadh airson cead. Is e sin, gu dearbh rinn sinn an aon obair dà uair. Bhris an eadar-aghaidh, agus luchdaich an neach-cleachdaidh ceud kilobytes a bharrachd a-nuas. Gu mionaideach bha a h-uile dad a’ coimhead eadhon nas iongantaiche.
Seann sgeama SSR-CSR. Chan eil cead ceadaichte ach aig ìrean C3 agus C4, nuair nach eil Node JS trang a’ gineadh HTML agus is urrainn dha iarrtasan neach-ionaid don API.
Chaidh ar ailtireachd aig an àm sin a mhìneachadh gu fìor cheart le fear de luchd-cleachdaidh Habr:
Tha an dreach gluasadach crap. Tha mi ag innse mar a tha e. Cothlamadh uamhasach de SSR agus CSR.
Bha againn ri aideachadh, ge bith dè cho duilich 'sa bha e.
Rinn mi measadh air na roghainnean, chruthaich mi tiogaid ann an Jira le tuairisgeul aig an ìre “tha e dona a-nis, dèan ceart e” agus chuir mi sìos an obair ann an stròcan farsaing:
- dàta ath-chleachdadh,
- lùghdachadh an àireamh de ath-tharraing,
- cuir às do dh’ iarrtasan dùblaichte,
- Dèan am pròiseas luchdachadh nas follaisiche.
Leig leinn an dàta ath-chleachdadh
Ann an teòiridh, tha tairgse taobh an fhrithealaiche air a dhealbhadh gus fuasgladh fhaighinn air dà dhuilgheadas: gun a bhith a’ fulang le cuingealachaidhean einnsean sgrùdaidh a thaobh agus a’ leasachadh a’ mheatair (gu do-sheachanta a’ fàs nas miosa ). Ann an suidheachadh clasaigeach a tha mu dheireadh bliadhna (fhathast air Backbone.js), is e SSR an aon iarrtas isomorphic JS a tha a’ ruith ann an àrainneachd Node. Bidh am frithealaiche dìreach a’ cur an cruth a chaidh a chruthachadh mar fhreagairt don iarrtas. An uairsin bidh rehydration a ’tachairt air taobh an neach-dèiligidh, agus an uairsin bidh a h-uile càil ag obair gun ath-luchdachadh duilleag. Airson Habr, mar a tha airson mòran ghoireasan eile le susbaint teacsa, tha toirt seachad frithealaiche na eileamaid chudromach ann a bhith a’ togail dhàimhean càirdeil le einnseanan luirg.
A dh 'aindeoin gu bheil còrr is sia bliadhna air a dhol seachad bho thàinig an teicneòlas a-steach, agus aig an àm seo tha tòrr uisge air a dhol fon drochaid anns an t-saoghal aghaidh, dha mòran de luchd-leasachaidh tha am beachd seo fhathast air a chòmhdach ann an dìomhaireachd. Cha do sheas sinn gu aon taobh agus chuir sinn a-steach tagradh Vue le taic SSR gu cinneasachadh, ag ionndrainn aon mhion-fhiosrachadh: cha do chuir sinn a’ chiad staid chun neach-dèiligidh.
Carson? Chan eil fìor fhreagairt air a 'cheist seo. An dàrna cuid cha robh iad airson meud freagairt an fhrithealaiche àrdachadh, no air sgàth dòrlach de dhuilgheadasan ailtireil eile, no dìreach cha do dh’ fhalbh e. Aon dòigh no dòigh eile, tha coltas gu math iomchaidh agus feumail a bhith a 'tilgeil stàite agus a' cleachdadh a h-uile càil a rinn an fhrithealaiche. Tha an obair dha-rìribh beag - a-steach don cho-theacsa cur gu bàs, agus bidh Vue gu fèin-obrachail ga chur ris a’ chruth a chaidh a chruthachadh mar chaochladair cruinne: window.__INITIAL_STATE__.
Is e aon de na duilgheadasan a tha air èirigh an neo-chomas structaran cearcallach a thionndadh gu JSON (); chaidh a rèiteachadh le bhith dìreach a’ cur an àite structaran mar sin leis na co-aoisean còmhnard aca.
A bharrachd air an sin, nuair a bhios tu a’ dèiligeadh ri susbaint UGC, bu chòir dhut cuimhneachadh gum bu chòir an dàta a thionndadh gu aonadan HTML gus nach bris thu an HTML. Airson na h-adhbharan sin bidh sinn a 'cleachdadh .
A 'lùghdachadh ath-tharraing
Mar a chì thu bhon dealbh gu h-àrd, anns a ’chùis againn, bidh aon eisimpleir Node JS a’ coileanadh dà ghnìomh: SSR agus “proxy” anns an API, far a bheil cead neach-cleachdaidh a ’tachairt. Tha an suidheachadh seo ga dhèanamh do-dhèanta cead a thoirt fhad ‘s a tha an còd JS a’ ruith air an fhrithealaiche, leis gu bheil an nód aon-snàithleach, agus tha an gnìomh SSR sioncronaich. Is e sin, chan urrainn don fhrithealaiche dìreach iarrtasan a chuir thuige fhèin fhad ‘s a tha an inneal-gairm trang le rudeigin. Thionndaidh e a-mach gun do dh’ ùraich sinn an stàit, ach cha do stad an eadar-aghaidh a bhith a ’tionndadh, oir dh’ fheumadh an dàta mun neach-dèiligidh ùrachadh a ’toirt aire don t-seisean cleachdaiche. Dh'fheumadh sinn an tagradh againn a theagasg gus an dàta ceart a chuir anns a 'chiad staid, a' toirt aire do logadh a-steach an neach-cleachdaidh.
Cha robh ann ach dà fhuasgladh air an duilgheadas:
- ceangail dàta ùghdarrais ri iarrtasan tar-fhrithealaiche;
- roinneadh sreathan Node JS ann an dà shuidheachadh eadar-dhealaichte.
Dh'fheumadh a' chiad fhuasgladh caochladairean cruinne a chleachdadh air an fhrithealaiche, agus leudaich an dàrna fear an ceann-latha airson a' ghnìomh a choileanadh le co-dhiù mìos.
Ciamar a dhèanamh roghainn? Bidh Habr gu tric a 'gluasad air an t-slighe as lugha de dh' ionnsaigh. Gu neo-fhoirmeil, tha miann coitcheann ann an cearcall a lughdachadh bho bheachd gu prototype chun ìre as ìsle. Tha am modail de bheachd a thaobh an toraidh rudeigin coltach ri postulates booking.com, leis an aon eadar-dhealachadh gu bheil Habr a’ toirt fios air ais bho luchd-cleachdaidh tòrr nas cudromaiche agus a’ toirt earbsa dhut, mar leasaiche, gus na co-dhùnaidhean sin a dhèanamh.
Às deidh an loidsig seo agus mo mhiann fhìn airson an duilgheadas fhuasgladh gu sgiobalta, thagh mi caochladairean cruinne. Agus, mar a thachras gu tric, feumaidh tu pàigheadh air an son luath no mall. Phàigh sinn cha mhòr sa bhad: bha sinn ag obair air an deireadh-sheachdain, ghlan sinn na builean, sgrìobh agus thòisich e air an t-seirbheisiche a roinn na dhà phàirt. Bha a’ mhearachd gu math gòrach, agus cha robh am biast a bha na lùib furasta ath-riochdachadh. Agus tha, tha e tàmailteach airson seo, ach aon dòigh no dòigh eile, a’ tuisleadh agus a’ caoineadh, a dh’ aindeoin sin chaidh am PoC agam le caochladairean cruinne a-steach gu cinneasachadh agus tha e ag obair gu math soirbheachail fhad ‘s a tha e a’ feitheamh ris a ’ghluasad gu ailtireachd“ dà nód ”ùr. B 'e ceum cudromach a bha seo, oir gu foirmeil chaidh an amas a choileanadh - dh' ionnsaich SSR duilleag deiseil gu tur a lìbhrigeadh, agus dh'fhàs an UI tòrr nas socraiche.
Eadar-aghaidh gluasadach Habr às deidh a’ chiad ìre de ath-shuidheachadh
Aig a 'cheann thall, tha ailtireachd SSR-CSR an dreach gluasadach a' leantainn chun an dealbh seo:
Cuairt “dà-nód” SSR-CSR. Tha an Node JS API an-còmhnaidh deiseil airson I / O asyncronach agus chan eil gnìomh SSR air a bhacadh, leis gu bheil an dàrna fear ann an suidheachadh air leth. Chan eil feum air sèine ceist #3.
Cur às do dh’ iarrtasan dùblaichte
Às deidh na h-làimhseachaidhean a dhèanamh, cha do bhrosnaich a bhith a’ toirt seachad na duilleige an toiseach tinneas tuiteamach tuilleadh. Ach dh’ adhbhraich tuilleadh cleachdaidh Habr ann am modh SPA troimh-chèile.
Leis gur e bun-stèidh sruth luchd-cleachdaidh eadar-ghluasadan an fhoirm liosta artaigilean → artaigil → beachdan agus a chaochladh, bha e cudromach an fheum as fheàrr a dhèanamh de chaitheamh ghoireasan na slabhraidh seo sa chiad àite.
Le bhith a’ tilleadh chun inbhir puist a’ brosnachadh iarrtas dàta ùr
Cha robh feum air cladhach domhainn. Anns an screencast gu h-àrd chì thu gu bheil an tagradh ag ath-iarraidh liosta nan artaigilean nuair a thèid iad air ais, agus rè an iarrtais chan fhaic sinn na h-artaigilean, a tha a’ ciallachadh gun tèid an dàta a bh ’ann roimhe à sealladh am badeigin. Tha e coltach gu bheil am pàirt liosta artaigil a’ cleachdadh stàit ionadail agus ga chall air sgrios. Gu dearbh, chleachd an tagradh stàit chruinneil, ach chaidh ailtireachd Vuex a thogail air adhart: tha modalan ceangailte ri duilleagan, a tha an uair sin ceangailte ri slighean. A bharrachd air an sin, tha na modalan uile “cuspaireil” - bidh gach turas às deidh sin air an duilleag ag ath-sgrìobhadh a’ mhodal gu lèir:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Gu h-iomlan, bha modal againn Liosta artaigilean, anns a bheil nithean de sheòrsa Article agus modal Artaigil na duilleige, a bha na dhreach leudaichte den nì Article, Seòrsa de Artaigil slàn. Gu h-iomlan, chan eil am buileachadh seo a 'giùlain rud sam bith uamhasach ann fhèin - tha e gu math sìmplidh, is dòcha gu bheil aon eadhon ag ràdh naive, ach gu math so-thuigsinn. Ma dh'atharraicheas tu am modal a h-uile uair a dh'atharraicheas tu an t-slighe, faodaidh tu fiù 's a bhith beò leis. Ach, gluasad eadar biadhan artaigil, mar eisimpleir /biadh → /uile, gealltainn gun tilg thu air falbh a h-uile càil co-cheangailte ris a’ bhiadhadh pearsanta, leis nach eil againn ach aon Liosta artaigilean, anns am feum thu dàta ùr a chuir. Bheir seo sinn a-rithist gu dùblachadh iarrtasan.
Às deidh dhomh a h-uile dad a bha e comasach dhomh a chladhach air a’ chuspair a chruinneachadh, chuir mi ri chèile structar stàite ùr agus thug mi dha mo cho-obraichean e. Bha na còmhraidhean fada, ach aig a’ cheann thall bha na h-argamaidean fàbharach nas àirde na na teagamhan, agus thòisich mi air a bhuileachadh.
Tha e nas fheàrr loidsig fuasgladh fhoillseachadh ann an dà cheum. An toiseach feuchaidh sinn ris a’ mhodal Vuex a dhì-cheangal bho dhuilleagan agus a cheangal gu dìreach ri slighean. Bidh, bidh beagan a bharrachd dàta anns a 'bhùth, bidh luchd-faighinn a' fàs beagan nas iom-fhillte, ach cha bhith sinn a 'luchdachadh artaigilean dà uair. Airson an dreach gluasadach, is dòcha gur e seo an argamaid as làidire. Seallaidh e rudeigin mar seo:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Ach dè ma dh’ fhaodadh liostaichean artaigil a dhol thairis air grunn shlighean agus dè ma tha sinn airson dàta nì ath-chleachdadh Article gus an duilleag puist a thoirt seachad, ga thionndadh a-steach Artaigil slàn? Anns a 'chùis seo, bhiodh e na b' reusanta structar mar seo a chleachdadh:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Liosta artaigilean an seo chan eil ann ach seòrsa de stòr de artaigilean. A h-uile artaigil a chaidh a luchdachadh sìos tron t-seisean cleachdaiche. Bidh sinn gan làimhseachadh le fìor chùram, oir is e seo trafaic a dh ’fhaodadh a bhith air a luchdachadh sìos tro phian am badeigin san metro eadar stèiseanan, agus gu cinnteach chan eil sinn airson a’ phian seo adhbhrachadh don neach-cleachdaidh a-rithist le bhith ga sparradh air dàta a tha aige mar-thà a luchdachadh. air a luchdachadh sìos. Rud Artaigilean Ids dìreach sreath de IDan (mar gum biodh “ceanglaichean”) ri nithean Article. Leigidh an structar seo leat dùblachadh dàta a tha cumanta do shlighean a sheachnadh agus an nì ath-chleachdadh Article nuair a bhios tu a’ toirt seachad duilleag puist le bhith a’ ceangal dàta leudaichte ann.
Tha toradh liosta nan artaigilean cuideachd air fàs nas soilleire: bidh am pàirt iterator ag ath-aithris tron raon le IDan artaigil agus a’ tarraing a ’phàirt teaser artaigil, a’ dol seachad air an Id mar prop, agus bidh am pàirt cloinne, an uair sin, a ’faighinn air ais an dàta riatanach bho Liosta artaigilean. Nuair a thèid thu gu duilleag an fhoillseachaidh, gheibh sinn an ceann-latha a tha ann mu thràth Liosta artaigilean, bidh sinn a’ dèanamh iarrtas airson an dàta a tha a dhìth fhaighinn agus dìreach a chuir ris an nì a th’ ann mar-thà.
Carson a tha an dòigh-obrach seo nas fheàrr? Mar a sgrìobh mi gu h-àrd, tha an dòigh-obrach seo nas socair a thaobh an dàta a chaidh a luchdachadh sìos agus leigidh e leat ath-chleachdadh. Ach a bharrachd air an seo, tha e a’ fosgladh na slighe gu cuid de chothroman ùra a tha a’ freagairt gu foirfe air ailtireachd mar sin. Mar eisimpleir, a’ bhòtadh agus a’ luchdachadh artaigilean a-steach don bhiadhadh mar a nochdas iad. Is urrainn dhuinn dìreach na puist as ùire a chuir ann an “stòradh” Liosta artaigilean, sàbhail liosta fa leth de IDan ùra a-steach Artaigilean Ids agus cuir fios chun neach-cleachdaidh mu dheidhinn. Nuair a phutas sinn air a’ phutan “Seall foillseachaidhean ùra”, bidh sinn dìreach a’ cuir a-steach Ids ùra aig toiseach an liosta de artaigilean gnàthach agus obraichidh a h-uile càil gu draoidheil.
A ' dèanamh nas fhasa a luchdadh a-nuas
Tha an icing air a’ chèic ath-nuadhachaidh na bhun-bheachd de chnàmhan, a tha a’ fàgail pròiseas luchdachadh sìos susbaint air eadar-lìn slaodach beagan nas tàmailteach. Cha robh còmhraidhean sam bith ann mun chùis seo; thug an t-slighe bho bheachd gu prototype gu litireil dà uair a thìde. Tharraing an dealbhadh e fhèin gu practaigeach, agus theagaisg sinn na co-phàirtean againn gus blocaichean div sìmplidh a thoirt seachad fhad ‘s a bha sinn a’ feitheamh ri dàta. Gu cuspaireil, tha an dòigh-obrach seo airson luchdachadh gu dearbh a ’lughdachadh na tha de hormonaichean cuideam ann am bodhaig an neach-cleachdaidh. Tha an cnàimhneach coltach ri seo:
A 'luchdachadh sìos
A' meòrachadh
Tha mi air a bhith ag obair ann an Habré airson sia mìosan agus tha mo charaidean fhathast a’ faighneachd: Uill, ciamar as toil leat e an sin? Ceart gu leòr, comhfhurtail - tha. Ach tha rudeigin ann a tha a’ fàgail na h-obrach seo eadar-dhealaichte bho dhaoine eile. Bha mi ag obair ann an sgiobaidhean a bha gu tur diofraichte mun toradh aca, nach robh fios no a’ tuigsinn cò an luchd-cleachdaidh a bh’ aca. Ach an seo tha a h-uile dad eadar-dhealaichte. An seo tha thu a’ faireachdainn cunntachail airson na nì thu. Anns a 'phròiseas a bhith a' leasachadh feart, bidh thu gu ìre mar neach-seilbh, gabh pàirt anns a h-uile coinneamh toraidh co-cheangailte ri do ghnìomhachd, dèan molaidhean agus dèan co-dhùnaidhean thu fhèin. Tha e gu math fionnar a bhith a’ dèanamh toradh a bhios tu a’ cleachdadh a h-uile latha leat fhèin, ach tha sgrìobhadh còd airson daoine a tha is dòcha nas fheàrr air na thusa dìreach na fhaireachdainn iongantach (gun searbhas).
Às deidh na h-atharrachaidhean sin uile a leigeil ma sgaoil, fhuair sinn fios air ais math, agus bha e glè, glè laghach. Tha e brosnachail. Tapadh leat! Sgrìobh tuilleadh.
Leig leam do chuir nad chuimhne, às deidh caochladairean cruinne, gun do chuir sinn romhainn an ailtireachd atharrachadh agus an ìre proxy a riarachadh gu eisimpleir air leth. Tha an ailtireachd “dà-nód” mu thràth air a leigeil ma sgaoil ann an cruth deuchainn beta poblach. A-nis faodaidh duine sam bith tionndadh thuige agus ar cuideachadh gus Habr gluasadach a dhèanamh nas fheàrr. Tha sin uile airson an-diugh. Bidh mi toilichte do cheistean gu lèir a fhreagairt anns na beachdan.
Source: www.habr.com