Mo ti nifẹ nigbagbogbo si bii Habr ṣe leto lati inu, bawo ni a ṣe ṣeto iṣan-iṣẹ, bawo ni a ṣe ṣeto awọn ibaraẹnisọrọ, awọn iṣedede wo ni a lo ati bii koodu ṣe kọ gbogbogbo nibi. Da, Mo ni iru anfani, nitori ti mo laipe di ara ẹgbẹ habra. Lilo apẹẹrẹ ti isọdọtun kekere ti ẹya alagbeka, Emi yoo gbiyanju lati dahun ibeere naa: kini o dabi lati ṣiṣẹ nibi ni iwaju. Ninu eto: Node, Vue, Vuex ati SSR pẹlu obe lati awọn akọsilẹ nipa iriri ti ara ẹni ni Habr.
Ohun akọkọ ti o nilo lati mọ nipa ẹgbẹ idagbasoke ni pe diẹ wa. Ko to - iwọnyi jẹ awọn iwaju mẹta, awọn ẹhin meji ati itọsọna imọ-ẹrọ ti gbogbo Habr - Baxley. O wa, dajudaju, tun jẹ oluyẹwo, onise apẹẹrẹ, Vadim mẹta, broom iyanu kan, ọlọgbọn tita ati awọn Bumburums miiran. Ṣugbọn awọn oluranlọwọ taara mẹfa nikan wa si awọn orisun Habr. Eyi jẹ ohun ti o ṣọwọn - iṣẹ akanṣe kan pẹlu awọn olugbo miliọnu-dola kan, eyiti lati ita dabi ile-iṣẹ nla kan, ni otitọ dabi diẹ sii bi ibẹrẹ itunu pẹlu eto igbekalẹ alapin ti o ṣeeṣe.
Gẹgẹbi ọpọlọpọ awọn ile-iṣẹ IT miiran, Habr jẹwọ awọn imọran Agile, awọn iṣe CI, ati pe gbogbo rẹ ni. Ṣugbọn ni ibamu si awọn ikunsinu mi, Habr bi ọja kan n dagbasoke diẹ sii ni awọn igbi ju igbagbogbo lọ. Nitorinaa, fun ọpọlọpọ awọn sprints ni ọna kan, a fi itara ṣe koodu ohun kan, ṣe apẹrẹ ati tun ṣe, fọ nkan kan ki o tunṣe, yanju awọn tikẹti ki o ṣẹda awọn tuntun, tẹ lori rake ki o iyaworan ara wa ni awọn ẹsẹ, nikẹhin lati tu ẹya naa sinu iṣelọpọ. Ati lẹhinna igbaduro kan wa, akoko ti atunkọ, akoko lati ṣe ohun ti o wa ninu “pataki-kii ṣe amojuto” ikẹẹrin.
O ti wa ni gbọgán yi “pipa-akoko” ṣẹṣẹ ti yoo wa ni sísọ ni isalẹ. Ni akoko yii o pẹlu isọdọtun ti ẹya alagbeka ti Habr. Ni gbogbogbo, ile-iṣẹ ni awọn ireti ti o ga julọ fun u, ati ni ojo iwaju o yẹ ki o rọpo gbogbo zoo ti Habr's incarnations ati ki o di ojutu agbelebu gbogbo agbaye. Ni ọjọ kan yoo wa iṣeto adaṣe, PWA, ipo aisinipo, isọdi olumulo, ati ọpọlọpọ awọn nkan ti o nifẹ si.
Jẹ ki a ṣeto iṣẹ naa
Ni ẹẹkan, ni imurasilẹ lasan, ọkan ninu awọn iwaju sọ nipa awọn iṣoro ni faaji ti ẹya paati asọye ti ẹya alagbeka. Pẹlu eyi ni lokan, a ṣeto ipade bulọọgi ni ọna kika ti psychotherapy ẹgbẹ. Gbogbo eniyan n sọ ibi ti o farapa, wọn ṣe igbasilẹ ohun gbogbo sori iwe, wọn ba wọn kẹdun, wọn loye, ayafi ti ko sẹnikan ti o pàtẹwọ. Abajade jẹ atokọ ti awọn iṣoro 20, eyiti o jẹ ki o ye wa pe Habr alagbeka tun ni ọna gigun ati ẹgún si aṣeyọri.
Emi ni nipataki fiyesi nipa ṣiṣe ti lilo awọn oluşewadi ati ohun ti a pe ni wiwo didan. Lojoojumọ, ni ipa ọna ile-iṣẹ-ile, Mo rii foonu atijọ mi ti n gbiyanju lati ṣe afihan awọn akọle 20 ni kikọ sii. O dabi nkan bi eyi:
Mobile Habr ni wiwo ṣaaju ki o to refactoring
Kini n ṣẹlẹ nibi? Ni kukuru, olupin naa ṣe iranṣẹ oju-iwe HTML si gbogbo eniyan ni ọna kanna, laibikita boya olumulo ti wọle tabi rara. Lẹhinna a kojọpọ JS alabara ati beere fun data pataki lẹẹkansi, ṣugbọn ṣatunṣe fun aṣẹ. Iyẹn ni, a ṣe iṣẹ kanna ni igba meji. Ni wiwo flickered, ati awọn olumulo gbaa lati ayelujara kan ti o dara ọgọrun afikun kilobytes. Ni apejuwe awọn ohun gbogbo wò ani diẹ ti irako.
Atijọ SSR-CSR eni. Aṣẹ ṣee ṣe nikan ni awọn ipele C3 ati C4, nigbati Node JS ko ṣiṣẹ lọwọ ṣiṣẹda HTML ati pe o le awọn ibeere aṣoju si API.
Iṣaworanhan ti akoko yẹn jẹ apejuwe ni pipe nipasẹ ọkan ninu awọn olumulo Habr:
Awọn mobile version jẹ inira. Mo n sọ bi o ti ri. A ẹru apapo ti SSR ati CSR.
A ni lati gba, laibikita bi o ti ṣe banujẹ.
Mo ṣe ayẹwo awọn aṣayan, ṣẹda tikẹti kan ni Jira pẹlu apejuwe kan ni ipele ti “o buru ni bayi, ṣe o tọ” ati pe o bajẹ iṣẹ-ṣiṣe ni awọn ọpọlọ nla:
- tun lo data,
- dinku nọmba ti redraws,
- imukuro awọn ibeere ẹda-iwe,
- ṣe ilana ikojọpọ diẹ sii kedere.
Jẹ ki a tun lo data naa
Ni imọran, ti n ṣe atunṣe ẹgbẹ olupin jẹ apẹrẹ lati yanju awọn iṣoro meji: kii ṣe lati jiya lati awọn idiwọn ẹrọ wiwa ni awọn ofin ti ati ki o mu metric (eyiti o buru si ). Ni a Ayebaye ohn ti o nipari odun (si tun lori Backbone.js), SSR jẹ kanna isomorphic JS ohun elo nṣiṣẹ ni Node ayika. Olupin naa firanṣẹ ni irọrun ti ipilẹṣẹ ti ipilẹṣẹ bi idahun si ibeere naa. Lẹhinna isọdọtun waye ni ẹgbẹ alabara, lẹhinna ohun gbogbo ṣiṣẹ laisi awọn atunbere oju-iwe. Fun Habr, bi fun ọpọlọpọ awọn orisun miiran pẹlu akoonu ọrọ, ṣiṣe olupin jẹ nkan pataki ni kikọ awọn ibatan ọrẹ pẹlu awọn ẹrọ wiwa.
Bíótilẹ o daju wipe diẹ ẹ sii ju odun mefa ti koja niwon awọn dide ti awọn ọna ti, ati nigba akoko yi kan pupo ti omi ti gan fò labẹ awọn Afara ni iwaju-opin aye, fun ọpọlọpọ awọn Difelopa yi ero ti wa ni ṣi shrouded ni asiri. A ko duro ni apakan ati yiyi ohun elo Vue kan pẹlu atilẹyin SSR si iṣelọpọ, ti o padanu alaye kekere kan: a ko fi ipo ibẹrẹ ranṣẹ si alabara.
Kí nìdí? Ko si idahun gangan si ibeere yii. Boya wọn ko fẹ lati mu iwọn esi pọ si lati olupin, tabi nitori opo ti awọn iṣoro ayaworan miiran, tabi nirọrun ko ya kuro. Ni ọna kan tabi omiiran, sisọ jade ni ipinlẹ ati atunlo ohun gbogbo ti olupin ṣe dabi ohun ti o yẹ ati iwulo. Iṣẹ-ṣiṣe naa jẹ ohun ti o ṣe pataki - sinu ipo ipaniyan, ati Vue ṣe afikun laifọwọyi si ipilẹ ti ipilẹṣẹ bi oniyipada agbaye: window.__INITIAL_STATE__.
Ọkan ninu awọn iṣoro ti o dide ni ailagbara lati yi awọn ẹya iyipo pada si JSON (); ti yanju nipasẹ irọrun rọpo iru awọn ẹya pẹlu awọn ẹlẹgbẹ alapin wọn.
Ni afikun, nigbati o ba n ṣe pẹlu akoonu UGC, o yẹ ki o ranti pe data yẹ ki o yipada si awọn ohun elo HTML ki o má ba fọ HTML naa. Fun awọn idi wọnyi a lo .
Dinku redraw
Gẹgẹbi o ti le rii lati aworan atọka loke, ninu ọran wa, apẹẹrẹ Node JS kan ṣe awọn iṣẹ meji: SSR ati “aṣoju” ni API, nibiti aṣẹ olumulo ti waye. Ipo yii jẹ ki o ṣee ṣe lati fun laṣẹ lakoko ti koodu JS n ṣiṣẹ lori olupin naa, nitori ipade naa jẹ asapo ẹyọkan, ati pe iṣẹ SSR jẹ amuṣiṣẹpọ. Iyẹn ni, olupin nìkan ko le fi awọn ibeere ranṣẹ si ararẹ lakoko ti ipe ipe n ṣiṣẹ lọwọ pẹlu nkan kan. O wa ni jade wipe a imudojuiwọn ipinle, ṣugbọn awọn wiwo ko da twitching, niwon awọn data lori ose ni lati wa ni imudojuiwọn mu sinu iroyin awọn igba olumulo. A nilo lati kọ ohun elo wa lati fi data to pe ni ipo ibẹrẹ, ni akiyesi iwọle olumulo.
Awọn ojutu meji nikan lo wa si iṣoro naa:
- so data ašẹ si awọn ibeere olupin-agbelebu;
- pin Node JS fẹlẹfẹlẹ si meji lọtọ instances.
Ojutu akọkọ nilo lilo awọn oniyipada agbaye lori olupin naa, ati keji gbooro akoko ipari fun ipari iṣẹ naa nipasẹ o kere ju oṣu kan.
Bawo ni lati ṣe yiyan? Habr nigbagbogbo n gbe ni ọna ti o kere ju resistance. Ni aiṣedeede, ifẹ gbogbogbo wa lati dinku iyipo lati imọran si apẹrẹ si o kere ju. Awoṣe ti ihuwasi si ọja naa jẹ iranti diẹ ti awọn ifiweranṣẹ ti booking.com, pẹlu iyatọ kan ṣoṣo ni pe Habr gba awọn esi olumulo ni pataki diẹ sii ati gbẹkẹle ọ, bi olupilẹṣẹ, lati ṣe iru awọn ipinnu.
Ni atẹle ọgbọn yii ati ifẹ ti ara mi lati yara yanju iṣoro naa, Mo yan awọn oniyipada agbaye. Ati, bi igbagbogbo ṣẹlẹ, o ni lati sanwo fun wọn laipẹ tabi ya. A sanwo fere lẹsẹkẹsẹ: a ṣiṣẹ ni ipari ose, ṣalaye awọn abajade, kọ o si bẹrẹ si pin olupin si awọn ẹya meji. Aṣiṣe naa jẹ aṣiwere pupọ, ati pe kokoro ti o kan ko rọrun lati tun ṣe. Ati bẹẹni, o jẹ itiju fun eyi, ṣugbọn ọna kan tabi omiiran, ikọsẹ ati kerora, PoC mi pẹlu awọn oniyipada agbaye sibẹsibẹ lọ sinu iṣelọpọ ati pe o n ṣiṣẹ ni aṣeyọri lakoko ti o nduro fun gbigbe si ọna faaji “oju-meji” tuntun kan. Eyi jẹ igbesẹ pataki, nitori ni deede ibi-afẹde naa ti ṣaṣeyọri - SSR kọ ẹkọ lati fi oju-iwe ti o ṣetan-lati-lo ni kikun, ati UI di idakẹjẹ pupọ.
Ni wiwo Mobile Habr lẹhin ipele akọkọ ti atunṣe
Ni ipari, SSR-CSR faaji ti ẹya alagbeka yori si aworan yii:
Iduro"Meji-ipade" SSR-CSR Circuit. Node JS API ti šetan nigbagbogbo fun I/O asynchronous ati pe ko ṣe idinamọ nipasẹ iṣẹ SSR, nitori igbehin naa wa ni apẹẹrẹ lọtọ. Pq ibeere #3 ko nilo.
Imukuro awọn ibeere ẹda-iwe
Lẹhin ti awọn ifọwọyi ti a ṣe, titumọ akọkọ ti oju-iwe naa ko tun fa warapa mọ. Ṣugbọn lilo siwaju ti Habr ni ipo SPA tun fa iporuru.
Niwon ipilẹ ti sisan olumulo jẹ awọn iyipada ti fọọmu naa akojọ awọn nkan → nkan → awọn asọye ati idakeji, o jẹ pataki lati je ki awọn oluşewadi agbara ti yi pq ni akọkọ ibi.
Pada si ifunni ifiweranṣẹ nfa ibeere data tuntun kan
Ko si ye lati ma wà jin. Ninu iboju iboju ti o wa loke o le rii pe ohun elo tun beere atokọ ti awọn nkan nigbati o ba n ra pada, ati lakoko ibeere a ko rii awọn nkan naa, eyiti o tumọ si pe data ti tẹlẹ parẹ ni ibikan. O dabi pe paati akojọ nkan ti nlo ipinlẹ agbegbe ati padanu rẹ lori run. Ni otitọ, ohun elo naa lo ipinlẹ agbaye kan, ṣugbọn a ṣe agbekalẹ faaji Vuex ni ori-lori: awọn modulu ti so si awọn oju-iwe, eyiti o jẹ titan si awọn ipa-ọna. Pẹlupẹlu, gbogbo awọn modulu jẹ “isọnu” - ibewo kọọkan ti o tẹle si oju-iwe tun tun gbogbo module naa:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Ni apapọ, a ni module Ìwé Akojọ, eyi ti o ni awọn nkan ti iru Abala ati module Abala Oju-iwe, eyi ti o jẹ ẹya o gbooro sii ti ohun naa Abala, bi i Ìwé Full. Nipa ati nla, imuse yii ko gbe ohunkohun ẹru ninu ararẹ - o rọrun pupọ, ọkan le paapaa sọ rọrun, ṣugbọn oye pupọ. Ti o ba tun module naa pada ni gbogbo igba ti o ba yi ipa ọna pada, lẹhinna o le paapaa gbe pẹlu rẹ. Sibẹsibẹ, gbigbe laarin awọn kikọ sii nkan, fun apẹẹrẹ / kikọ sii → /gbogbo, ti wa ni ẹri a jabọ kuro ohun gbogbo jẹmọ si awọn ara ẹni kikọ sii, niwon a nikan ni ọkan Ìwé Akojọ, sinu eyi ti o nilo lati fi titun data. Eyi tun nyorisi wa si pipọ ti awọn ibeere.
Lẹhin ti o ti ṣajọ ohun gbogbo ti Mo ni anfani lati ma wà lori koko naa, Mo ṣe agbekalẹ eto ipinlẹ tuntun kan ati gbekalẹ si awọn ẹlẹgbẹ mi. Awọn ijiroro naa gun, ṣugbọn ni ipari awọn ariyanjiyan ni ojurere ju awọn iyemeji lọ, ati pe Mo bẹrẹ imuse.
Awọn kannaa ti a ojutu ti wa ni ti o dara ju han ni meji awọn igbesẹ ti. Ni akọkọ a gbiyanju lati decouple Vuex module lati awọn oju-iwe ati dipọ taara si awọn ipa-ọna. Bẹẹni, nibẹ ni yio je kekere kan diẹ data ninu itaja, getters yoo di kekere kan diẹ eka, sugbon a yoo ko fifuye ìwé lemeji. Fun ẹya alagbeka, eyi jẹ boya ariyanjiyan ti o lagbara julọ. Yoo dabi iru eyi:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Ṣugbọn kini ti awọn atokọ nkan ba le ni lqkan laarin awọn ipa-ọna pupọ ati kini ti a ba fẹ tun lo data ohun Abala lati pese oju-iwe ifiweranṣẹ, yiyi pada si Ìwé Full? Ni ọran yii, yoo jẹ ọgbọn diẹ sii lati lo iru eto kan:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Ìwé Akojọ nibi o jẹ iru ibi ipamọ ti awọn nkan. Gbogbo awọn nkan ti a ṣe igbasilẹ lakoko igba olumulo. A tọju wọn pẹlu itọju to ga julọ, nitori eyi ni ijabọ ti o le ti ṣe igbasilẹ nipasẹ irora ni ibikan ni metro laarin awọn ibudo, ati pe dajudaju a ko fẹ lati fa irora yii si olumulo lẹẹkansi nipa fipa mu u lati gbe data ti o ti ni tẹlẹ. gbaa lati ayelujara. Ohun kan ArticlesIds jẹ apẹrẹ ti awọn ID (bi ẹnipe “awọn ọna asopọ”) si awọn nkan Abala. Eto yii ngbanilaaye lati yago fun didakọ data ti o wọpọ si awọn ipa-ọna ati atunlo ohun naa Abala nigbati o ba n ṣe oju-iwe ifiweranṣẹ nipasẹ sisopọ data ti o gbooro sinu rẹ.
Ijade ti atokọ ti awọn nkan ti tun di sihin diẹ sii: paati iterator ṣe atunbere nipasẹ titobi pẹlu awọn ID nkan ati fa paati Iyọlẹnu nkan, ti o kọja Id bi ategun, ati paati ọmọ, lapapọ, gba data pataki lati Ìwé Akojọ. Nigbati o ba lọ si oju-iwe titẹjade, a gba ọjọ ti o wa tẹlẹ lati Ìwé Akojọ, a ṣe ibeere lati gba data ti o padanu ati nirọrun fi kun si nkan ti o wa tẹlẹ.
Kini idi ti ọna yii dara julọ? Gẹgẹbi Mo ti kowe loke, ọna yii jẹ onírẹlẹ diẹ sii pẹlu ọwọ si data ti a gbasilẹ ati gba ọ laaye lati tun lo. Ṣugbọn ni afikun si eyi, o ṣii ọna si diẹ ninu awọn aye tuntun ti o baamu ni pipe sinu iru faaji kan. Fun apẹẹrẹ, idibo ati awọn nkan ikojọpọ sinu kikọ sii bi wọn ṣe han. A le jiroro fi awọn ifiweranṣẹ tuntun sinu “ipamọ” kan Ìwé Akojọ, ṣafipamọ atokọ lọtọ ti awọn ID titun sinu ArticlesIds ati ki o leti olumulo nipa rẹ. Nigbati a ba tẹ bọtini “Fihan awọn atẹjade tuntun”, a yoo fi awọn ID tuntun sii nirọrun si ibẹrẹ ti atokọ ti atokọ lọwọlọwọ ti awọn nkan ati pe ohun gbogbo yoo ṣiṣẹ ni idan.
Ṣiṣe gbigba lati ayelujara diẹ igbadun
Awọn icing lori akara oyinbo ti n ṣe atunṣe jẹ imọran ti awọn egungun, eyi ti o jẹ ki ilana igbasilẹ akoonu lori Intanẹẹti ti o lọra diẹ kere si irira. Ko si awọn ijiroro lori ọrọ yii; ọna lati imọran si apẹrẹ gba gangan wakati meji. Apẹrẹ naa fa funrararẹ, ati pe a kọ awọn paati wa lati ṣe irọrun, awọn bulọọki div ti o rọ ni aifẹ lakoko ti o nduro data. Ni koko-ọrọ, ọna yii si ikojọpọ gangan dinku iye awọn homonu wahala ninu ara olumulo. Egungun naa dabi eleyi:
Habraloading
Ti n ṣe afihan
Mo ti n ṣiṣẹ ni Habré fun oṣu mẹfa ati pe awọn ọrẹ mi tun beere: daradara, bawo ni o ṣe fẹran rẹ nibẹ? O dara, itunu - bẹẹni. Ṣugbọn ohun kan wa ti o mu ki iṣẹ yii yatọ si awọn miiran. Mo ṣiṣẹ ni awọn ẹgbẹ ti o jẹ alainaani patapata si ọja wọn, ko mọ tabi loye tani awọn olumulo wọn jẹ. Ṣugbọn nibi ohun gbogbo yatọ. Nibi ti o lero lodidi fun ohun ti o ṣe. Ninu ilana ti idagbasoke ẹya kan, o di oniwun rẹ ni apakan, kopa ninu gbogbo awọn ipade ọja ti o ni ibatan si iṣẹ rẹ, ṣe awọn imọran ati ṣe awọn ipinnu funrararẹ. Ṣiṣe ọja ti o lo lojoojumọ funrararẹ dara pupọ, ṣugbọn koodu kikọ fun awọn eniyan ti o ṣee ṣe dara julọ ni rẹ jẹ rilara iyalẹnu nikan (ko si ẹgan).
Lẹhin itusilẹ gbogbo awọn ayipada wọnyi, a gba awọn esi rere, ati pe o dara pupọ, pupọ. O jẹ iwunilori. E dupe! Kọ diẹ sii.
Jẹ ki n leti pe lẹhin awọn oniyipada agbaye a pinnu lati yi faaji pada ki o pin iyẹfun aṣoju sinu apẹẹrẹ lọtọ. Itumọ “ipade-meji” ti de itusilẹ tẹlẹ ni irisi idanwo beta ti gbogbo eniyan. Bayi ẹnikẹni le yipada si o ati ki o ran wa ṣe mobile Habr dara. Iyẹn ni gbogbo fun oni. Emi yoo dun lati dahun gbogbo awọn ibeere rẹ ninu awọn asọye.
orisun: www.habr.com