Ndakhala ndikuchita chidwi ndi momwe Habr amapangidwira mkati, momwe kayendetsedwe ka ntchito kamapangidwira, momwe mauthenga amapangidwira, ndi miyezo iti yomwe imagwiritsidwa ntchito komanso momwe ma code amalembedwera pano. Mwamwayi, ndidapeza mwayi wotero, chifukwa posachedwa ndidakhala m'gulu la habra. Pogwiritsa ntchito chitsanzo cha kukonzanso kwakung'ono kwa mtundu wa mafoni, ndiyesera kuyankha funso: zimakhala bwanji kugwira ntchito pano kutsogolo. Mu pulogalamuyi: Node, Vue, Vuex ndi SSR yokhala ndi msuzi kuchokera pamawu okhudza zomwe wakumana nazo ku Habr.
Choyambirira chomwe muyenera kudziwa za gulu lachitukuko ndikuti ndife ochepa. Sizokwanira - awa ndi ma tsogolo atatu, misana iwiri komanso kutsogolo kwaukadaulo kwa onse Habr - Baxley. Pali, ndithudi, woyesa, wojambula, atatu Vadim, tsache lozizwitsa, katswiri wa zamalonda ndi Bumburums ena. Koma pali anthu asanu ndi limodzi okha omwe amapereka mwachindunji kwa Habr. Izi ndizosowa - pulojekiti yokhala ndi omvera mamiliyoni ambiri, yomwe kuchokera kunja imawoneka ngati bizinesi yayikulu, imawoneka ngati yoyambira momasuka ndi dongosolo lokhazikika labungwe.
Monga makampani ena ambiri a IT, Habr amavomereza malingaliro a Agile, machitidwe a CI, ndipo ndizo zonse. Koma malinga ndi momwe ndimamvera, Habr monga chinthu akukula kwambiri mafunde kuposa mosalekeza. Chifukwa chake, pama sprints angapo motsatana, timalemba mwachangu china chake, kupanga ndi kukonzanso, kuswa china chake ndikuchikonza, kuthetsa matikiti ndikupanga zatsopano, kuponda pachocho ndikudziwombera pamapazi, kuti pamapeto pake titulutse mawonekedwewo. kupanga. Ndiyeno pamabwera nthawi yopumula, nthawi yokonzanso, nthawi yochita zomwe zili mu "zofunikira-osati zachangu" quadrant.
Ndi ndendende kuthamanga kwa "nyengo yopuma" komwe kudzakambidwe pansipa. Nthawi ino idaphatikizanso kukonzanso mtundu wamtundu wa Habr. Kawirikawiri, kampaniyo ili ndi chiyembekezo chachikulu, ndipo m'tsogolomu iyenera kulowa m'malo mwa zoo yonse ya Habr's incarnations ndikukhala yankho lapadziko lonse lapansi. Tsiku lina padzakhala masanjidwe osinthika, PWA, mawonekedwe opanda intaneti, makonda ogwiritsa ntchito, ndi zina zambiri zosangalatsa.
Tiyeni tiyike ntchito
Nthawi ina, poyimilira wamba, m'modzi wakutsogolo adalankhula za zovuta pamapangidwe a gawo la ndemanga za mtundu wamafoni. Poganizira izi, tidakonza msonkhano wawung'ono mumtundu wa psychotherapy yamagulu. Aliyense ankasinthana kunena pamene zinawawa, analemba zonse papepala, anamvera chisoni, anamvetsa, kupatulapo kuti palibe amene anawomba mβmanja. Zotsatira zake zidali mndandanda wamavuto 20, zomwe zidawonetsa kuti Habr mobile anali ndi njira yayitali komanso yaminga yopambana.
Ndinkada nkhawa kwambiri ndi kugwiritsa ntchito bwino zinthu komanso zomwe zimatchedwa mawonekedwe osalala. Tsiku lililonse, panjira yopita kunyumba, ndimawona foni yanga yakale ikuyesera kuwonetsa mitu 20 muzakudya. Zinkawoneka motere:
Mawonekedwe a Mobile Habr musanayambe kukonzanso
Kodi chikuchitika ndi chiyani pano? Mwachidule, seva idatumizira tsamba la HTML kwa aliyense mwanjira yomweyo, mosasamala kanthu kuti wogwiritsa ntchitoyo adalowa kapena ayi. Ndiye kasitomala JS amadzaza ndikupempha deta yofunikira kachiwiri, koma kusinthidwa kuti avomereze. Ndiko kuti, tinachitadi ntchito yomweyo kawiri. Mawonekedwewo adawoneka, ndipo wogwiritsa ntchito adatsitsa ma kilobytes owonjezera zana. Mwatsatanetsatane zonse zinkawoneka zowopsya kwambiri.
Ndondomeko yakale ya SSR-CSR. Chilolezo chimatheka pazigawo C3 ndi C4, pamene Node JS siili yotanganidwa kupanga HTML ndipo ikhoza kuitanitsa zopempha ku API.
Zomangamanga zathu panthawiyo zidafotokozedwa molondola ndi m'modzi mwa ogwiritsa ntchito a Habr:
Mtundu wa mafoni ndiwopanda pake. Ine ndikunena izo monga izo ziri. Kuphatikiza koyipa kwa SSR ndi CSR.
Tinayenera kuvomereza, mosasamala kanthu zachisoni chotani.
Ndidawunika zomwe mwasankha, ndidapanga tikiti ku Jira ndikulongosola pamlingo wa "zoyipa tsopano, chitani bwino" ndikuwola ntchitoyo movutikira:
- gwiritsanso ntchito data,
- kuchepetsa kuchuluka kwa zolembera,
- kuchotsa zopempha zobwereza,
- pangani njira yotsegula bwino kwambiri.
Tiyeni tigwiritsenso ntchito deta
M'malingaliro, kuperekera mbali ya seva kudapangidwa kuti kuthetse mavuto awiri: kuti asavutike ndi malire a injini zosaka malinga ndi ndi kuwonjezera metric (kungowonjezereka ). Mu tingachipeze powerenga zochitika kuti potsiriza chaka (akadali pa Backbone.js), SSR ndi yofanana isomorphic JS ntchito ikuyenda mu Node chilengedwe. Seva imangotumiza mawonekedwe opangidwa ngati yankho ku pempho. Ndiye kubwezeretsa madzi m'thupi kumachitika kumbali ya kasitomala, ndiyeno zonse zimagwira ntchito popanda kukwezanso masamba. Kwa Habr, monganso zina zambiri zomwe zili ndi zolemba, kumasulira kwa seva ndikofunikira kwambiri pakumanga ubale wabwino ndi injini zosaka.
Ngakhale kuti zaka zoposa zisanu ndi chimodzi zapita kuchokera kukubwera kwa teknoloji, ndipo panthawiyi madzi ambiri akuyenda pansi pa mlatho ku dziko lakutsogolo, kwa opanga ambiri lingaliro ili likadali lobisika. Sitinayime pambali ndikutulutsa pulogalamu ya Vue ndi chithandizo cha SSR kuti tipange, tikusowa kanthu kakang'ono kakang'ono: sitinatumize dziko loyamba kwa kasitomala.
Chifukwa chiyani? Palibe yankho lenileni la funsoli. Mwina iwo sanafune kuonjezera kukula kwa yankho kuchokera ku seva, kapena chifukwa cha zovuta zina zomangamanga, kapena sizinayambe. Mwanjira ina, kutaya dziko ndikugwiritsanso ntchito zonse zomwe seva idachita kumawoneka koyenera komanso kothandiza. Ntchitoyi ndi yaying'ono - m'machitidwe, ndipo Vue amangowonjezera pamapangidwe opangidwa ngati kusintha kwapadziko lonse: window.__INITIAL_STATE__.
Limodzi mwamavuto omwe abuka ndikulephera kusintha ma cyclic structures kukhala JSON (); chinathetsedwa mwa kungochotsa nyumba zoterozo ndi zina zafulati.
Kuphatikiza apo, pochita ndi UGC, muyenera kukumbukira kuti deta iyenera kusinthidwa kukhala mabungwe a HTML kuti asaphwanye HTML. Pazifukwa izi timagwiritsa ntchito .
Kuchepetsa kujambulanso
Monga mukuwonera pa chithunzi pamwambapa, kwa ife, chitsanzo chimodzi cha Node JS chimagwira ntchito ziwiri: SSR ndi "proxy" mu API, kumene chilolezo cha ogwiritsa ntchito chimapezeka. Izi zimapangitsa kuti zikhale zosatheka kuvomereza pamene JS code ikugwira ntchito pa seva, popeza mfundoyi imakhala ndi ulusi umodzi, ndipo ntchito ya SSR ndiyofanana. Ndiye kuti, seva siingathe kutumiza zopempha zokha pomwe calltack ili yotanganidwa ndi china chake. Zinapezeka kuti tidasintha dzikolo, koma mawonekedwewo sanasiye kugwedezeka, popeza zomwe kasitomala amayenera kusinthidwa poganizira gawo la ogwiritsa ntchito. Tinkafunika kuphunzitsa pulogalamu yathu kuti tiyike zolondola poyambira, poganizira zolowera kwa wogwiritsa ntchito.
Panali njira ziwiri zokha zothetsera vutoli:
- Gwirizanitsani zilolezo pazofunsira pa seva yodutsa;
- kugawa zigawo za Node JS muzochitika ziwiri zosiyana.
Yankho loyamba linkafuna kugwiritsa ntchito zosintha zapadziko lonse pa seva, ndipo lachiwiri linawonjezera nthawi yomaliza ntchitoyo ndi mwezi umodzi.
Kodi kusankha? Habr nthawi zambiri amayenda m'njira yosakanizidwa pang'ono. Mwamwayi, pali chikhumbo chofuna kuchepetsa kuzungulira kuchokera ku lingaliro kupita ku prototype kukhala kochepa. Mtundu wamalingaliro pazamalonda ndi wofanana ndi zolemba za booking.com, kusiyana kokhako ndikuti Habr amatenga malingaliro a ogwiritsa ntchito mozama kwambiri ndipo amakukhulupirirani, monga wopanga, kuti mupange zisankho zotere.
Potsatira mfundo iyi komanso chikhumbo changa chofuna kuthetsa vutoli mwamsanga, ndinasankha mitundu yapadziko lonse. Ndipo, monga nthawi zambiri zimachitika, muyenera kuwalipira posachedwa. Tinalipira pafupifupi nthawi yomweyo: tinagwira ntchito kumapeto kwa sabata, kuyeretsa zotsatira zake, analemba ndipo anayamba kugawa seva mu magawo awiri. Cholakwikacho chinali chopusa kwambiri, ndipo cholakwikacho sichinali chophweka kuberekanso. Ndipo inde, ndi zamanyazi pa izi, koma mwanjira ina, ndikupunthwa ndikubuula, PoC yanga yokhala ndi zosintha zapadziko lonse lapansi idayamba kupanga ndipo ikugwira ntchito bwino ndikudikirira kusamukira kumalo atsopano a "node-awiri". Ichi chinali sitepe yofunikira, chifukwa cholinga chake chinakwaniritsidwa - SSR idaphunzira kupereka tsamba lokonzeka kugwiritsidwa ntchito, ndipo UI idakhala bata.
Mawonekedwe a Mobile Habr pambuyo pa gawo loyamba la kukonzanso
Pamapeto pake, kamangidwe ka SSR-CSR kamtundu wa mafoni amatsogolera ku chithunzi ichi:
οΏΌ"Two-node" SSR-CSR dera. Node JS API nthawi zonse imakhala yokonzekera I / O ya asynchronous ndipo sichimatsekedwa ndi ntchito ya SSR, popeza yotsirizirayi imakhala yosiyana. Funso #3 sikufunika.
Kuchotsa zopempha zobwereza
Atasintha, kumasulira koyamba kwa tsambalo sikunayambitsenso khunyu. Koma kugwiritsidwa ntchito kwina kwa Habr mu SPA mode kudadzetsabe chisokonezo.
Popeza maziko a ogwiritsira ntchito ndi kusintha kwa mawonekedwe mndandanda wa zolemba β nkhani β ndemanga ndi mosemphanitsa, kunali kofunikira kukhathamiritsa kagwiritsidwe ntchito ka unyolowu poyamba.
Kubwerera ku post feed kumabweretsa pempho latsopano la data
Panalibe chifukwa chokumba mozama. Pazenera lomwe lili pamwambapa mutha kuwona kuti pulogalamuyo imapemphanso mndandanda wazolemba mukamasewera kumbuyo, ndipo panthawi yopemphayo sitikuwona zolembazo, zomwe zikutanthauza kuti zomwe zidachitika kale zimasowa kwinakwake. Zikuwoneka ngati chigawo cha mndandanda wankhani chimagwiritsa ntchito dera la komweko ndikuchitaya pakuwononga. M'malo mwake, pulogalamuyi idagwiritsa ntchito dziko lonse lapansi, koma zomangamanga za Vuex zidamangidwa molunjika: ma module amangiriridwa pamasamba, omwe amamangiriridwa kumayendedwe. Kuphatikiza apo, ma module onse ndi "otayika" - ulendo uliwonse wotsatira patsambalo udalembanso gawo lonse:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Pazonse, tinali ndi module ZolembaList, yomwe ili ndi zinthu zamtundu nkhani ndi module Tsamba la Tsamba, chomwe chinali chowonjezera cha chinthucho nkhani, mtundu wa Nkhani Yathunthu. Kwakukulukulu, kukhazikitsidwa uku sikunyamula chilichonse choyipa mwachokha - ndikosavuta, munthu akhoza kunena kuti sakudziwa, koma ndizomveka. Ngati mukonzanso gawoli nthawi iliyonse mukasintha njira, ndiye kuti mutha kukhala nayo. Komabe, kusuntha pakati pa ma feed a nkhani, mwachitsanzo / feed β /onse, akutsimikiziridwa kutaya chirichonse chokhudzana ndi chakudya chaumwini, popeza tili ndi chimodzi chokha ZolembaList, momwe muyenera kuyika zatsopano. Izi zikutifikitsanso pakubwereza zopempha.
Nditasonkhanitsa zonse zomwe ndidatha kukumba pamutuwu, ndidapanga dongosolo latsopano la boma ndikulipereka kwa anzanga. Zokambiranazo zinali zazitali, koma pamapeto pake zotsutsana zokomera zidaposa kukayikira, ndipo ndidayamba kukhazikitsa.
Lingaliro la yankho limawululidwa bwino munjira ziwiri. Choyamba timayesa kuchotsa gawo la Vuex kuchokera pamasamba ndikumanga mwachindunji kumayendedwe. Inde, padzakhala zambiri zambiri m'sitolo, ma getters adzakhala ovuta kwambiri, koma sitidzakweza zolemba kawiri. Kwa mtundu wa mafoni, uwu mwina ndiye mkangano wamphamvu kwambiri. Idzawoneka motere:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Koma bwanji ngati mindandanda yazolemba imatha kupindika pakati panjira zingapo komanso ngati tikufuna kugwiritsanso ntchito data yachinthu nkhani kuti mupereke tsamba la positi, kutembenuza Nkhani Yathunthu? Pankhaniyi, zingakhale zomveka kugwiritsa ntchito dongosolo lotere:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
ZolembaList apa ndi mtundu chabe wa nkhokwe zolemba. Zolemba zonse zomwe zidatsitsidwa panthawi yogwiritsa ntchito. Timawasamalira mosamala kwambiri, chifukwa awa ndi magalimoto omwe mwina adatsitsidwa kudzera mu ululu kwinakwake pakati pa masiteshoni, ndipo sitikufuna kubweretsanso ululu kwa wogwiritsa ntchito pomukakamiza kutsitsa zomwe ali nazo kale. dawunilodi. Chinthu ZolembaIds ndi ma ID angapo (monga ngati "maulalo") kuzinthu nkhani. Kapangidwe kameneka kamakupatsani mwayi wopewa kubwereza zomwe zimafanana ndi njira ndikugwiritsanso ntchito chinthucho nkhani popereka tsamba la positi pophatikiza deta yotalikiramo.
Kutulutsa kwa mndandanda wa zolembazo kwawonekeranso momveka bwino: gawo lobwerezabwereza limabwereza mndandanda ndi ma ID a nkhani ndikujambula chigawo cha teaser, ndikudutsa id ngati prop, ndipo gawo la mwana, limatenganso zofunikira kuchokera ZolembaList. Mukapita patsamba lofalitsidwa, timapeza tsiku lomwe lilipo kale kuchokera ZolembaList, timapempha kuti tipeze deta yomwe ikusowa ndikungowonjezera ku chinthu chomwe chilipo.
Nβchifukwa chiyani njira imeneyi ili yabwino? Monga ndalembera pamwambapa, njirayi ndi yofatsa kwambiri pokhudzana ndi deta yomwe yatsitsidwa ndipo imakupatsani mwayi wogwiritsanso ntchito. Koma pambali pa izi, zimatsegula njira kuzinthu zatsopano zomwe zimagwirizana bwino ndi zomangamanga. Mwachitsanzo, kuvota ndikukweza zolemba muzakudya momwe zimawonekera. Titha kungoyika zolemba zaposachedwa mu "chosungira" ZolembaList, sungani mndandanda wosiyana wa ma ID atsopano ZolembaIds ndi kudziwitsa wogwiritsa za izo. Tikadina batani la "Show new publications", timangoyika ma ID atsopano koyambirira kwa mndandanda wazomwe ulipo ndipo chilichonse chidzagwira ntchito mwamatsenga.
Kupangitsa kutsitsa kukhala kosangalatsa
The icing pa keke refactoring ndi lingaliro la mafupa, zomwe zimapangitsa ndondomeko kutsitsa zinthu pa Intaneti pang'onopang'ono kukhala chonyansa pang'ono. Panalibe zokambirana pankhaniyi; njira yochokera ku lingaliro kupita ku prototype idatenga maola awiri enieni. Mapangidwewo adadzijambula okha, ndipo tidaphunzitsa zida zathu kuti zipereke ma block osavuta, osasunthika podikirira deta. Mwachidziwitso, njira iyi yotsitsa imachepetsa kuchuluka kwa mahomoni opsinjika m'thupi la wogwiritsa ntchito. Chigobachi chikuwoneka motere:
Habraloading
Kulingalira
Ndakhala ndikugwira ntchito ku HabrΓ© kwa miyezi isanu ndi umodzi ndipo anzanga amafunsabe: chabwino, mumakonda bwanji kumeneko? Chabwino, omasuka - inde. Koma pali chinachake chimene chimapangitsa kuti ntchitoyi ikhale yosiyana ndi ena. Ndinkagwira ntchito m'magulu omwe analibe chidwi ndi zomwe amagulitsa, omwe sankadziwa kapena kumvetsa omwe amawagwiritsa ntchito. Koma pano zonse ndi zosiyana. Apa mukumva kuti muli ndi udindo pazomwe mumachita. Mukupanga mawonekedwe, mumakhala mwini wake pang'ono, mutenge nawo gawo pamisonkhano yonse yokhudzana ndi magwiridwe antchito anu, pangani malingaliro ndikupanga zisankho nokha. Kupanga mankhwala omwe mumagwiritsa ntchito tsiku lililonse nokha ndikozizira kwambiri, koma kulemba ma code kwa anthu omwe mwina ali bwino kuposa inu ndikumverera kodabwitsa (palibe kunyoza).
Pambuyo pa kutulutsidwa kwa zosintha zonsezi, tinalandira ndemanga zabwino, ndipo zinali zabwino kwambiri. Ndi zolimbikitsa. Zikomo! Lembani zambiri.
Ndiroleni ndikukumbutseni kuti pambuyo pa zosintha zapadziko lonse lapansi tidaganiza zosintha kamangidwe ndikugawa gawo la proxy kukhala fanizo lina. Zomangamanga za "two-node" zafika kale kumasulidwa ngati kuyesa kwa beta. Tsopano aliyense atha kusintha ndi kutithandiza kupanga Habr yam'manja bwino. Ndizo zonse za lero. Ndidzakhala wokondwa kuyankha mafunso anu onse mu ndemanga.
Source: www.habr.com