A koyaushe ina sha'awar yadda aka tsara Habr daga ciki, yadda aka tsara tsarin aiki, yadda aka tsara hanyoyin sadarwa, menene ma'auni da yadda ake rubuta lambar a nan gaba ɗaya. Abin farin ciki, na sami wannan damar, saboda kwanan nan na shiga cikin tawagar habra. Yin amfani da misalin ƙaramin refactoring na sigar wayar hannu, zan yi ƙoƙarin amsa tambayar: menene kama da aiki akan layin gaba a nan? A cikin shirin: Node, Vue, Vuex da SSR tare da miya daga bayanin kula game da kwarewar mutum a Habr.
Abu na farko da kuke buƙatar sani game da ƙungiyar ci gaba shine cewa mu ƙanana ne. Ƙananan gaba uku ne, baya biyu da jagorar fasaha na duk Habr - Baxley. Akwai, ba shakka, kuma mai gwadawa, mai zane, Vadim guda uku, tsintsiya mai ban mamaki, mai kasuwa da sauran Bumburums. Amma akwai masu ba da gudummawa kai tsaye guda shida kawai ga rukunin yanar gizon Habr. Wannan abu ne mai wuyar gaske - aikin tare da masu sauraro na miliyoyin daloli, wanda a waje yayi kama da babban kamfani, a zahiri ya fi kama da farawa mai jin daɗi tare da tsarin ƙungiyoyin mafi lebur.
Kamar sauran kamfanonin IT da yawa, Habr yana ba da ra'ayi na Agile, ayyukan CI, kuma shi ke nan. Amma a ganina, Habr a matsayin samfur yana tasowa a cikin raƙuman ruwa maimakon ci gaba. Don haka, don sprints da yawa a jere, muna yin rikodin wani abu da himma, ƙira da sake tsarawa, karya wani abu kuma mu gyara shi, warware tikiti da ƙirƙirar sababbi, mu taka rake kuma mu harbi kanmu a ƙafafu don a ƙarshe mu saki fasalin a cikin nan gaba. Sa'an nan kuma akwai wani ɗan gajeren lokaci, lokacin sake haɓakawa, lokacin yin abin da ke cikin "mahimmancin-ba gaggawa ba" quadrant.
Shi ne daidai wannan "off-season" Gudu da za a tattauna a kasa. A wannan lokacin ya haɗa da sake fasalin sigar wayar hannu ta Habr. Gabaɗaya, kamfanin yana da babban bege a gare shi, kuma a nan gaba ya kamata ya maye gurbin duk gidan zoo na Habr's incarnations kuma ya zama mafita ta giciye ta duniya. Wata rana za a sami shimfidar daidaitawa, PWA, yanayin layi, gyare-gyaren mai amfani, da sauran abubuwa masu ban sha'awa da yawa.
Bari mu saita aikin
Da zarar, a tsaye tsaye, ɗaya daga cikin gaba ya yi magana game da matsaloli a cikin gine-ginen ɓangaren sharhi na sigar wayar hannu. Tare da wannan shawarar, mun shirya ƙaramin taro a cikin tsari na rukuni na psychotherapy. Kowa ya juyo yana cewa inda ya yi zafi, an rubuta komai a takarda, tausayi, fahimta, sai dai babu wanda ya tafa. Sakamakon ya kasance jerin matsaloli 20, wanda ya bayyana a fili cewa Habr wayar hannu har yanzu tana da doguwar hanya mai ƙaya don samun nasara.
Na damu da farko game da ingancin albarkatu da abin da ake kira mai santsi. Kowace rana, akan hanyar "aiki-gida-gida", na ga tsohuwar wayata tana ƙoƙarin nuna kanun labarai 20 a cikin abincin. Ya kasance kamar haka:
Hannun Hannun Hannun Hannun Hannu kafin sake fasalin
Me ke faruwa a nan? A taƙaice, uwar garken ta yi amfani da shafin HTML ga kowa da kowa iri ɗaya, ba tare da la'akari da ko an shiga ko a'a ba. Sa'an nan an ɗora wa abokin ciniki JS kuma ya sake buƙatar bayanan da suka dace, amma wannan lokacin an daidaita shi don izini. Wato a zahiri mun yi aiki iri ɗaya sau biyu. Ƙaƙƙarfan keɓancewa, kuma mai amfani ya zazzage kyakkyawan karin kilobytes ɗari. A cikin cikakkun bayanai, komai ya yi kama da ban tsoro.
Tsohon tsarin SSR-CSR. Izini mai yiwuwa ne kawai a matakai C3 da C4, lokacin da Node JS ba ya shagaltuwa da samar da HTML kuma yana iya neman buƙatun wakili zuwa API.
Daya daga cikin masu amfani da Habr ya siffanta tsarin gine-ginenmu na wancan lokacin:
Sigar wayar hannu abin banza ne. Ina fada kamar yadda yake. Mummunan haɗin SSR tare da CSR.
An tilasta mana mu yarda da hakan, komai bakin ciki.
Na kimanta zaɓuɓɓukan, na ƙirƙiri tikiti a Jira tare da bayanin matakin "ba daidai ba ne yanzu, mai da shi lafiya" kuma na lalata aikin a cikin faɗuwar bugun jini:
- sake amfani data,
- rage yawan redraws,
- kawar da buƙatun kwafi,
- sanya tsarin lodawa ya fi bayyane.
Mu sake amfani da bayanan
A ka'idar, an tsara ma'anar sabar-gefen uwar garke don magance matsaloli biyu: kar a sha wahala daga gazawar injin bincike dangane da da inganta awo (ba makawa yana kara muni ). A cikin yanayin al'ada cewa a ƙarshe shekara (baya akan Backbone.js), SSR shine aikace-aikacen JS iri ɗaya na isomorphic da ke gudana a cikin yanayin Node. Sabar kawai tana mayar da shimfidar da aka samar azaman amsa ga buƙatar. Sa'an nan rehydration faruwa a kan abokin ciniki gefen, sa'an nan kuma duk abin da aiki ba tare da page reloads. Ga Habr, dangane da sauran albarkatu masu yawa tare da abun ciki na rubutu, sabar uwar garken muhimmin abu ne wajen gina dangantakar abokantaka da injunan bincike.
Duk da cewa fiye da shekaru shida ke nan da fasahar ta bayyana, kuma a wannan lokacin ruwa mai yawa ya shuɗe a ƙarƙashin gada a ƙarshen duniya, ga yawancin masu haɓaka wannan ra'ayi har yanzu yana ɓoye a ɓoye. Ba mu tsaya a gefe ba kuma muka fitar da aikace-aikacen Vue tare da tallafin SSR don samarwa, rasa ƙaramin dalla-dalla: ba mu ƙaddamar da yanayin farko ga abokin ciniki ba.
Me yasa? Babu takamaiman amsar wannan tambayar. Ko dai ba sa son ƙara girman amsa daga uwar garken, ko kuma saboda tarin wasu matsalolin gine-gine, ko kuma kawai bai tashi ba. Wata hanya ko wata, fitar da jihar da sake amfani da duk abin da uwar garken ya yi yana da kyau da amfani. Ainihin aikin ba shi da mahimmanci. a cikin mahallin aiwatarwa, kuma Vue ta atomatik yana ƙara shi zuwa shimfidar da aka ƙirƙira azaman madaidaicin duniya: window.__INITIAL_STATE__.
Daya daga cikin matsalolin da suka taso shine rashin iya juyar da tsarin keken keke zuwa JSON (); An warware su ta hanyar maye gurbin irin waɗannan gine-gine tare da takwarorinsu na lebur.
Bugu da ƙari, lokacin da ake hulɗa da abun ciki na UGC, ya kamata ku tuna cewa ya kamata a canza bayanan zuwa abubuwan HTML don kada a karya HTML. Don waɗannan dalilai muna amfani da su .
Rage jajayen jakunkuna
Kamar yadda kuke gani daga zanen da ke sama, a cikin yanayinmu, ɗayan Node JS yana yin ayyuka biyu: SSR da “proxy” a cikin API, inda izinin mai amfani ya faru. Wannan yanayin yana sa ba zai yiwu a ba da izini ba yayin da lambar JS ke gudana akan uwar garken, tunda kullin mai zaren guda ɗaya ne, kuma aikin SSR yana aiki tare. Wato, uwar garken ba za ta iya aika buƙatun zuwa kanta ba yayin da calltack ke shagaltu da wani abu. Ya bayyana cewa mun sabunta jihar, amma haɗin yanar gizon bai dakatar da kullun ba, tun da bayanan da ke kan abokin ciniki dole ne a sabunta tare da la'akari da zaman mai amfani. Ya zama dole mu koyar da aikace-aikacenmu don sanya bayanan da suka dace a farkon yanayin, la'akari da shiga mai amfani.
Akwai mafita guda biyu kawai ga matsalar:
- haɗin bayanan izini zuwa buƙatun uwar garken;
- raba Node JS yadudduka zuwa wurare daban-daban guda biyu.
Magani na farko ya buƙaci amfani da masu canji na duniya akan uwar garke, kuma na biyu ya tsawaita lokacin kammala aikin da akalla wata guda.
Yadda za a yi zabi? Habr sau da yawa yana tafiya tare da mafi ƙarancin juriya. A bisa ƙa'ida, akwai sha'awar rage zagayowar daga ra'ayi zuwa samfuri zuwa ƙarami. Samfurin hali game da samfurin yana da ɗan tunowa da postulates na booking.com, tare da kawai bambanci shine Habr yana ɗaukar ra'ayin mai amfani da mahimmanci kuma yana ba ku irin waɗannan yanke shawara a matsayin mai haɓakawa.
Bayan wannan tunani da sha'awar kaina don magance matsalar cikin sauri, na zaɓi masu canji na duniya. Kuma, kamar yadda sau da yawa ya faru, dole ne ku biya su ba dade ko ba dade. Mun biya kusan nan da nan: mun yi aiki a karshen mako, mun share sakamakon, rubuta sannan ya fara raba uwar garken gida biyu. Kuskuren ya kasance wauta sosai, kuma kwaro da ke tattare da shi ba shi da sauƙi a sake haifuwa. Kuma a, abin kunya ne ga wannan, amma wata hanya ko wata, tuntuɓe da nishi, PoC na tare da masu canji na duniya duk da haka ya shiga samarwa kuma yana aiki sosai cikin nasara yayin da yake jiran ƙaura zuwa sabon tsarin gine-ginen "ƙulli biyu". Wannan mataki ne mai mahimmanci, saboda a zahiri an cimma burin - SSR ya koyi sadar da shafin da aka shirya gabaɗaya, kuma UI ya sami nutsuwa sosai.
Wayar hannu Habr dubawa bayan matakin farko na refactoring
A ƙarshe, tsarin SSR-CSR na sigar wayar hannu yana kaiwa ga hoto mai zuwa:
"Kudi biyu" SSR-CSR kewaye. Node JS API koyaushe yana shirye don I/O mai asynchronous kuma aikin SSR baya katange shi, tunda ƙarshen yana cikin wani misali na daban. Sarkar tambaya #3 ba a buƙata.
Kawar da kwafin buƙatun
Bayan an yi magudin, rubutun farko na shafin ya daina haifar da farfadiya. Amma ƙarin amfani da Habr a yanayin SPA har yanzu ya haifar da rudani.
Tunda tushen kwararar mai amfani shine sauye-sauye na tsari jerin labarai → labarin → sharhi kuma akasin haka, yana da mahimmanci don inganta yawan amfani da albarkatun wannan sarkar a farkon wuri.
Komawa ga ciyarwar gidan yana haifar da sabon buƙatar bayanai
Babu buƙatar tono zurfi. A cikin sikirin da ke sama za ku ga cewa aikace-aikacen yana sake buƙatar jerin labaran lokacin da ake swiping baya, kuma yayin buƙatar ba mu ga labarin ba, wanda ke nufin bayanan baya sun ɓace a wani wuri. Yana kama da ɓangaren jerin labaran yana amfani da ƙasa na gida kuma ya rasa shi don lalata. A zahiri, aikace-aikacen ya yi amfani da ƙasa ta duniya, amma an gina gine-ginen Vuex gabaɗaya: an ɗaure modules zuwa shafuka, wanda hakanan yana da alaƙa da hanyoyi. Bugu da ƙari, duk samfuran "lokaci ɗaya ne" - kowace ziyarar da ta biyo baya zuwa shafin ta sake rubuta dukkan tsarin:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Gabaɗaya, muna da module Lissafin Labarai, wanda ya ƙunshi abubuwa iri Mataki na ashirin da da module Labarin Shafi, wanda aka tsawaita sigar abin Mataki na ashirin da, irin Cikakkun labarin. Gabaɗaya, wannan aiwatarwa ba ya ɗaukar wani abu mai muni a cikin kansa - abu ne mai sauqi qwarai, mutum ma yana iya faɗin butulci, amma mai sauƙin fahimta. Idan kun sake saita tsarin duk lokacin da kuka canza hanya, to zaku iya rayuwa tare da shi. Koyaya, canji tsakanin ciyarwar labarin, alal misali /feed → /duk, An ba da tabbacin jefar da duk abin da ya shafi abincin ku na sirri, tunda muna da ɗaya kawai Lissafin Labarai, wanda kuke buƙatar saka sabbin bayanai a ciki. Wannan kuma yana kai mu ga kwafin buƙatun.
Bayan tattara duk abin da na yi nasarar tono kan batun, na tsara sabon tsarin jiha na gabatar da shi ga abokan aikina. Tattaunawar ta yi tsayi, amma a karshe muhawarar da ke goyon bayan ta fi karfin shakku, na fara aiwatarwa.
Hankalin yanke shawara ya fi bayyana a matakai biyu. Da farko muna ƙoƙarin ƙaddamar da Vuex module daga shafukan kuma mu ɗaure kai tsaye zuwa hanyoyin. Ee, za a sami ƙarin ƙarin bayanai a cikin kantin sayar da, getters za su zama ɗan ƙaramin rikitarwa, amma ba za mu loda labarai sau biyu ba. Don sigar wayar hannu, wannan ita ce ƙila hujja mafi ƙarfi. Zai yi kama da wani abu kamar haka:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Amma menene idan jerin labaran zasu iya haɗuwa tsakanin hanyoyi da yawa kuma menene idan muna son sake amfani da bayanan abu Mataki na ashirin da don sanya shafin post, juya shi zuwa Cikakkun labarin? A wannan yanayin, zai zama mafi ma'ana don amfani da irin wannan tsari:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Lissafin Labarai ga irin ma'ajiyar labarai. Duk labaran da aka sauke yayin zaman mai amfani. Muna kula da su da matuƙar kulawa, domin wannan ita ce zirga-zirgar da ta yiwu an saukar da ita a wani wuri a cikin metro tsakanin tashoshi, kuma ba shakka ba ma son sake haifar da wannan ciwo ga mai amfani ta hanyar tilasta masa ya loda bayanan da ya riga ya sauke. . Wani abu ArticlesIds kawai jeri ne na ID (kamar "hanyoyi") zuwa abubuwa Mataki na ashirin da. Wannan tsarin yana ba ku damar guje wa kwafin bayanai gama gari zuwa hanyoyin da sake amfani da abu Mataki na ashirin da a lokacin da ake yin shafi ta hanyar haɗa bayanan da aka ƙara a ciki.
Fitowar jerin labaran kuma ya zama mai fayyace: bangaren mai amfani yana maimaitawa ta hanyar tsararru tare da ID na labarin kuma ya zana bangaren teaser ɗin labarin, yana wucewa da ID ɗin azaman abin talla, ɓangaren yara, bi da bi, yana dawo da mahimman bayanai daga Lissafin Labarai. Lokacin da kuka je shafin bugawa, za mu dawo da kwanan wata daga Lissafin Labarai, Muna yin buƙatu don karɓar bayanan da suka ɓace kuma kawai ƙara su zuwa abin da ke akwai.
Me yasa wannan hanyar ta fi kyau? Kamar yadda na rubuta a sama, wannan tsarin yana da hankali sosai game da bayanan da aka sauke kuma yana ba ku damar sake amfani da su. Amma baya ga wannan, yana buɗe hanyar zuwa wasu sabbin damar da suka dace daidai da irin wannan gine-gine. Misali, jefa kuri'a da loda labarai cikin abinci kamar yadda suka bayyana. Za mu iya kawai sanya sabbin posts a cikin "ajiya" Lissafin Labarai, ajiye lissafin daban na sababbin ID a ciki ArticlesIds kuma sanar da mai amfani game da wannan. Lokacin da muka danna maɓallin "Nuna sabbin wallafe-wallafe", kawai za mu saka sabbin ID a cikin farkon jerin labaran yanzu kuma komai zai yi aiki kusan sihiri.
Yin zazzagewa ya fi jin daɗi
Icing a kan kek ɗin da aka gyara shine manufar kwarangwal, wanda ke sa aiwatar da loda abun ciki a kan jinkirin intanet kadan kadan. Babu tattaunawa kan wannan al'amari; hanyar daga ra'ayi zuwa samfuri ya ɗauki awanni biyu a zahiri. A zahiri ƙirar ta zana kanta, kuma mun koya wa kayan aikin mu yin sauƙi, da ƙyar ƙwarƙwarar div yayin jiran bayanai. A zahiri, wannan hanyar yin lodi a zahiri yana rage adadin ƙwayoyin damuwa a jikin mai amfani. kwarangwal din yayi kama da haka:
Habraloading
Tunani
Na yi wata shida ina aiki a Habr kuma abokaina har yanzu suna tambaya: da kyau, yaya kuke son shi a can? To, dadi - eh. Amma akwai wani abu da ya bambanta wannan aikin daga wasu. Na yi aiki a cikin ƙungiyoyin da ba su da sha'awar samfurin su, ba su sani ba ko fahimtar su wane ne masu amfani da su. Amma a nan komai ya bambanta. Anan kuna jin alhakin abin da kuke yi. A cikin aiwatar da haɓaka fasalin, wani ɓangare na zama mai shi, shiga cikin duk tarukan samfur da suka shafi ayyukanku, ba da shawarwari kuma yanke shawara da kanku. Yin samfurin da kuke amfani da shi a kowace rana yana da kyau sosai, kuma rubuta lambar ga mutanen da wataƙila sun fi ku fahimtar shi abu ne mai ban mamaki (ba zagi).
Bayan da aka saki duk waɗannan canje-canje, mun sami ra'ayi mai kyau, kuma yana da kyau sosai. Yana da ban sha'awa. Na gode! Rubuta ƙari.
Bari in tunatar da ku cewa bayan sauye-sauye na duniya, mun yanke shawarar canza tsarin gine-gine kuma mu ware Layer proxy zuwa wani misali na daban. Tsarin gine-ginen "kumburi biyu" ya riga ya kai ga fitarwa ta hanyar gwajin beta na jama'a. Yanzu kowa zai iya canzawa zuwa gare ta kuma ya taimaka mana mu inganta Habr wayar hannu. Shi ke nan na yau. Zan yi farin cikin amsa duk tambayoyinku a cikin sharhi.
source: www.habr.com