Kanunay kong interesado kung giunsa ang pagkahan-ay sa Habr gikan sa sulod, kung giunsa ang pagkahan-ay sa daloy sa trabaho, kung giunsa ang pagkahan-ay sa mga komunikasyon, kung unsang mga sumbanan ang gigamit ug kung giunsa ang kasagarang pagsulat sa code dinhi. Maayo na lang, nakabaton ako sa ingon nga oportunidad, tungod kay bag-o lang ako nahimong bahin sa habra team. Gamit ang pananglitan sa usa ka gamay nga refactoring sa mobile nga bersyon, sulayan nako nga tubagon ang pangutana: unsa ang gusto nga magtrabaho dinhi sa atubangan. Sa programa: Node, Vue, Vuex ug SSR nga adunay sarsa gikan sa mga nota bahin sa personal nga kasinatian sa Habr.
Ang unang butang nga kinahanglan nimong masayran bahin sa development team mao nga gamay ra kami. Dili igo - kini ang tulo ka atubangan, duha ka likod ug ang teknikal nga lead sa tanan nga Habr - Baxley. Adunay, siyempre, usa usab ka tester, usa ka tigdesinyo, tulo ka Vadim, usa ka milagro nga silhig, usa ka espesyalista sa marketing ug uban pang mga Bumburum. Apan adunay unom ra ka direkta nga nag-ambag sa mga gigikanan ni Habr. Talagsa ra kini - usa ka proyekto nga adunay usa ka multimillion-dollar nga mamiminaw, nga gikan sa gawas ingon usa ka higante nga negosyo, sa tinuud ingon usa ka komportable nga pagsugod nga adunay labing patag nga istruktura sa organisasyon nga posible.
Sama sa daghang uban pang mga kompanya sa IT, giangkon ni Habr ang mga ideya nga Agile, mga gawi sa CI, ug kana ra. Apan sumala sa akong gibati, ang Habr isip usa ka produkto mas nag-uswag sa mga balud kaysa padayon. Mao nga, alang sa daghang mga sprint nga sunud-sunod, kami makugihon nga nag-code sa usa ka butang, nagdesinyo ug nagdesinyo pag-usab, nagguba sa usa ka butang ug nag-ayo niini, pagsulbad sa mga tiket ug paghimo og mga bag-o, pagtunob sa usa ka rake ug pagpusil sa among mga tiil, aron sa katapusan buhian ang bahin sa produksyon. Ug unya moabut ang usa ka piho nga pagpahulay, usa ka yugto sa pagbag-o, panahon sa pagbuhat kung unsa ang naa sa "importante-dili dinalian" nga quadrant.
Kini gyud ang "off-season" nga sprint nga hisgutan sa ubos. Niining higayona naglakip kini sa refactoring sa mobile nga bersyon sa Habr. Sa kinatibuk-an, ang kompanya adunay taas nga paglaum alang niini, ug sa umaabot kinahanglan nga pulihan ang tibuuk nga zoo sa mga inkarnasyon ni Habr ug mahimong usa ka unibersal nga solusyon sa cross-platform. Sa umaabot nga adlaw adunay adaptive layout, PWA, offline mode, user customization, ug daghan pang mga makapaikag nga mga butang.
Atong ibutang ang buluhaton
Kas-a, sa usa ka ordinaryo nga stand-up, ang usa sa atubangan naghisgot bahin sa mga problema sa arkitektura sa mga komentaryo nga bahin sa mobile nga bersyon. Uban niini sa hunahuna, nag-organisar kami usa ka micro-meeting sa pormat sa psychotherapy sa grupo. Ang tanan nagpuli-puli sa pagsulti kung asa kini masakit, ilang girekord ang tanan sa papel, sila naluoy, sila nakasabot, gawas nga walay namakpak. Ang resulta mao ang usa ka lista sa 20 ka mga problema, nga nagpatin-aw nga ang mobile Habr sa gihapon adunay taas ug tunok nga dalan sa kalampusan.
Nag-una ako nga nabalaka bahin sa kaepektibo sa paggamit sa kapanguhaan ug kung unsa ang gitawag nga hapsay nga interface. Kada adlaw, sa rota sa balay-trabaho-balay, akong nakita ang akong daan nga telepono nga desperado nga naningkamot sa pagpakita sa 20 ka mga ulohan sa feed. Kini mitan-aw sama niini:
Mobile Habr interface sa wala pa refactoring
Unsa ang nahitabo dinhi? Sa laktod nga pagkasulti, ang server nagsilbi sa HTML nga panid sa tanan sa parehas nga paagi, bisan pa kung ang tiggamit naka-log in o wala. Dayon ang kliyente nga JS gikarga ug gihangyo pag-usab ang gikinahanglan nga datos, apan gi-adjust alang sa pagtugot. Sa ato pa, kaduha namong gibuhat ang parehas nga trabaho. Ang interface nagkidlap-kidlap, ug ang tiggamit nag-download sa usa ka gatos nga dugang nga kilobytes. Sa detalye ang tanan tan-awon nga mas makahadlok.
Karaang SSR-CSR nga laraw. Ang pagtugot mahimo lamang sa mga yugto sa C3 ug C4, kung ang Node JS dili busy sa paghimo og HTML ug mahimo nga mag-proxy sa mga hangyo sa API.
Ang among arkitektura niadtong panahona tukma kaayo nga gihulagway sa usa sa mga tiggamit sa Habr:
Ang mobile nga bersyon kay crap. Gisulti ko kini nga ingon niini. Usa ka makalilisang nga kombinasyon sa SSR ug CSR.
Kinahanglan namong dawaton kini, bisag unsa kasubo kini.
Gi-assess nako ang mga kapilian, naghimo og tiket sa Jira nga adunay usa ka paghulagway sa lebel nga "dili maayo karon, buhata kini sa husto" ug gibuak ang buluhaton sa halapad nga mga hampak:
- paggamit pag-usab sa datos,
- pagminus sa gidaghanon sa mga pag-usab,
- wagtangon ang mga duplicate nga hangyo,
- himoa nga mas klaro ang proseso sa pagkarga.
Atong gamiton pag-usab ang datos
Sa teorya, ang server-side rendering gidisenyo aron masulbad ang duha ka problema: dili mag-antos sa mga limitasyon sa search engine sa termino sa ug pagpalambo sa metric (dili malikayan nga mograbe ). Sa usa ka klasiko nga senaryo nga sa katapusan tuig (sa Backbone.js pa), ang SSR mao ang parehas nga isomorphic JS nga aplikasyon nga nagdagan sa palibot sa Node. Ang server nagpadala lang sa namugna nga layout isip tubag sa hangyo. Dayon ang rehydration mahitabo sa kilid sa kliyente, ug dayon ang tanan molihok nga walay pag-reload sa panid. Alang kang Habr, sama sa daghang uban pang mga kapanguhaan nga adunay sulud sa teksto, ang paghubad sa server usa ka kritikal nga elemento sa pagtukod og mahigalaon nga relasyon sa mga search engine.
Bisan pa sa kamatuoran nga labaw pa sa unom ka tuig ang milabay sukad sa pag-abut sa teknolohiya, ug niining panahona daghang tubig ang midagayday sa ilawom sa taytayan sa front-end nga kalibutan, alang sa daghang mga developers kini nga ideya gitabonan gihapon sa sekreto. Wala kami mobarug ug gilukot ang aplikasyon sa Vue nga adunay suporta sa SSR sa produksiyon, nawala ang usa ka gamay nga detalye: wala namon ipadala ang inisyal nga kahimtang sa kliyente.
Ngano man? Walay eksaktong tubag niini nga pangutana. Bisan kung dili nila gusto nga madugangan ang gidak-on sa tubag gikan sa server, o tungod sa usa ka hugpong sa uban pang mga problema sa arkitektura, o wala kini mawala. Usa ka paagi o lain, paglabay sa estado ug paggamit pag-usab sa tanan nga gibuhat sa server ingon og angay ug mapuslanon. Ang buluhaton sa tinuod walay hinungdan - ngadto sa konteksto sa pagpatuman, ug ang Vue awtomatikong idugang kini sa namugna nga layout isip global variable: window.__INITIAL_STATE__.
Usa sa mga problema nga mitumaw mao ang kawalay katakus sa pag-convert sa cyclic structures ngadto sa JSON (); nasulbad pinaagi lamang sa pag-ilis sa maong mga istruktura sa ilang mga patag nga katugbang.
Dugang pa, kung mag-atubang sa sulud sa UGC, kinahanglan nimong hinumdoman nga ang datos kinahanglan nga mabag-o sa mga entidad sa HTML aron dili mabuak ang HTML. Alang niini nga mga katuyoan among gigamit .
Pagminus sa pag-usab sa mga pag-usab
Sama sa imong makita gikan sa dayagram sa ibabaw, sa among kaso, ang usa ka Node JS nga pananglitan naghimo sa duha ka mga gimbuhaton: SSR ug "proxy" sa API, diin ang pagtugot sa user mahitabo. Kini nga sirkumstansya naghimo nga imposible ang pagtugot samtang ang JS code nagdagan sa server, tungod kay ang node usa ka sinulud, ug ang function sa SSR dungan. Kana mao, ang server dili gyud makapadala mga hangyo sa kaugalingon samtang ang callstack busy sa usa ka butang. Nahibal-an nga gi-update namon ang estado, apan ang interface wala mohunong sa pag-twitch, tungod kay ang datos sa kliyente kinahanglan nga ma-update nga gikonsiderar ang sesyon sa gumagamit. Kinahanglan namon nga itudlo ang among aplikasyon sa pagbutang sa husto nga datos sa una nga kahimtang, nga gikonsiderar ang pag-login sa tiggamit.
Adunay duha lamang ka solusyon sa problema:
- ilakip ang datos sa pagtugot sa mga hangyo sa cross-server;
- gibahin ang mga layer sa Node JS sa duha nga magkabulag nga mga higayon.
Ang una nga solusyon nanginahanglan sa paggamit sa mga global variable sa server, ug ang ikaduha gipalugway ang deadline sa pagkompleto sa buluhaton sa labing menos usa ka bulan.
Unsaon paghimog pagpili? Si Habr kanunay nga naglihok sa dalan nga labing gamay nga pagsukol. Sa dili pormal nga paagi, adunay usa ka kinatibuk-ang tinguha sa pagpakunhod sa cycle gikan sa ideya ngadto sa prototype ngadto sa minimum. Ang modelo sa kinaiya sa produkto medyo nagpahinumdum sa mga postulates sa booking.com, nga ang bugtong kalainan mao nga si Habr nagkuha sa feedback sa gumagamit nga labi ka seryoso ug nagsalig kanimo, ingon usa ka developer, sa paghimo sa ingon nga mga desisyon.
Pagsunod niini nga lohika ug sa akong kaugalingon nga tinguha nga dali nga masulbad ang problema, gipili nako ang mga global variable. Ug, sama sa kanunay nga mahitabo, kinahanglan nimo nga bayran sila sa madugay o sa madali. Nagbayad kami hapit dayon: nagtrabaho kami sa katapusan sa semana, gilimpyohan ang mga sangputanan, nagsulat ug nagsugod sa pagbahin sa server sa duha ka bahin. Ang kasaypanan kay hungog kaayo, ug ang bug nga naglambigit niini dili sayon sa pagsanay. Ug oo, kini usa ka kaulaw alang niini, apan sa usa ka paagi o sa lain, napandol ug nag-agulo, ang akong PoC nga adunay mga global nga variable bisan pa niana miadto sa produksiyon ug nagtrabaho nga malampuson samtang naghulat sa pagbalhin sa usa ka bag-ong "duha ka node" nga arkitektura. Kini usa ka importante nga lakang, tungod kay pormal nga nakab-ot ang tumong - ang SSR nakakat-on sa paghatud sa usa ka hingpit nga andam nga gamiton nga panid, ug ang UI nahimong mas kalmado.
Mobile Habr interface human sa unang yugto sa refactoring
Sa katapusan, ang arkitektura sa SSR-CSR sa mobile nga bersyon nagpadulong sa kini nga litrato:
"Duha ka node" nga SSR-CSR nga sirkito. Ang Node JS API kanunay nga andam alang sa asynchronous nga I/O ug wala gibabagan sa SSR function, tungod kay ang naulahi nahimutang sa bulag nga higayon. Ang kadena sa pangutana #3 wala kinahanglana.
Pagwagtang sa mga duplicate nga hangyo
Pagkahuman sa mga manipulasyon nga gihimo, ang una nga paghubad sa panid wala na makapukaw sa epilepsy. Apan ang dugang nga paggamit sa Habr sa SPA mode hinungdan gihapon sa kalibog.
Tungod kay ang sukaranan sa dagan sa tiggamit mao ang mga pagbalhin sa porma listahan sa mga artikulo → artikulo → mga komento ug vice versa, importante nga ma-optimize ang konsumo sa kapanguhaan niini nga kadena sa unang dapit.
Ang pagbalik sa post feed naghagit og bag-ong hangyo sa datos
Dili kinahanglan nga magkalot ug lawom. Sa screencast sa ibabaw imong makita nga ang aplikasyon naghangyo pag-usab sa lista sa mga artikulo sa dihang nag-swipe balik, ug sa panahon sa hangyo dili namo makita ang mga artikulo, nga nagpasabot nga ang naunang datos mawala sa usa ka dapit. Morag ang bahin sa lista sa artikulo naggamit sa usa ka lokal nga estado ug nawala kini sa paglaglag. Sa tinuud, ang aplikasyon migamit sa usa ka global nga estado, apan ang arkitektura sa Vuex gitukod nga head-on: ang mga module gihigot sa mga panid, nga sa baylo gihigot sa mga ruta. Dugang pa, ang tanan nga mga module "magamit" - matag sunod nga pagbisita sa panid gisulat pag-usab ang tibuuk nga module:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Sa kinatibuk-an, kami adunay usa ka module Listahan sa mga Artikulo, nga adunay mga butang sa tipo artikulo ug module Panid Artikulo, nga usa ka taas nga bersyon sa butang artikulo, matang sa Artikulo Puno. Sa kinatibuk-an, kini nga pagpatuman wala magdala sa bisan unsa nga makalilisang sa iyang kaugalingon - kini yano kaayo, ang usa mahimong moingon nga walay pulos, apan hilabihan ka masabtan. Kung imong i-reset ang module sa matag higayon nga imong usbon ang ruta, mahimo ka pa nga mabuhi uban niini. Bisan pa, ang paglihok tali sa mga feed sa artikulo, pananglitan / feed → / tanan, gigarantiyahan nga ilabay ang tanan nga may kalabutan sa personal nga feed, tungod kay usa ra kami Listahan sa mga Artikulo, diin kinahanglan nimong ibutang ang bag-ong datos. Kini usab nagdala kanato sa pagdoble sa mga hangyo.
Nakolekta ko ang tanan nga akong nahibal-an bahin sa hilisgutan, naghimo ako usa ka bag-ong istruktura sa estado ug gipresentar kini sa akong mga kauban. Taas ang mga diskusyon, apan sa katapusan ang mga argumento nga pabor milabaw sa mga pagduhaduha, ug gisugdan nako ang pagpatuman.
Ang lohika sa usa ka solusyon labing maayo nga gipadayag sa duha ka mga lakang. Una among gisulayan nga i-decouple ang Vuex module gikan sa mga panid ug direkta nga magbugkos sa mga ruta. Oo, adunay gamay nga dugang nga datos sa tindahan, ang mga getter mahimong mas komplikado, apan dili kami mag-load sa mga artikulo sa makaduha. Alang sa mobile nga bersyon, kini tingali ang labing kusgan nga argumento. Kini tan-awon sama niini:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Apan unsa man kung ang mga lista sa artikulo mahimong mag-overlap tali sa daghang mga ruta ug kung gusto naton gamiton pag-usab ang datos sa butang artikulo aron ma-render ang post page, himuon kini Artikulo Puno? Sa kini nga kaso, mas makatarunganon nga gamiton ang ingon nga istruktura:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
Listahan sa mga Artikulo dinhi kini usa lamang ka matang sa tipiganan sa mga artikulo. Ang tanan nga mga artikulo nga na-download sa panahon sa sesyon sa tiggamit. Gitratar namon sila sa labing kaayo nga pag-atiman, tungod kay kini ang trapiko nga mahimo’g na-download pinaagi sa kasakit sa usa ka lugar sa metro taliwala sa mga estasyon, ug siguradong dili namon gusto nga ipahinabo usab kini nga kasakit sa tiggamit pinaagi sa pagpugos kaniya sa pag-load sa datos nga naa na niya. gi-download. Usa ka butang Mga ArtikuloId usa lang ka han-ay sa mga ID (ingon nga "mga link") sa mga butang artikulo. Gitugotan ka niini nga istruktura nga malikayan ang pagdoble sa datos nga kasagaran sa mga ruta ug paggamit pag-usab sa butang artikulo sa paghubad sa usa ka panid sa post pinaagi sa paghiusa sa gipalapdan nga datos niini.
Ang output sa listahan sa mga artikulo nahimo usab nga mas transparent: ang iterator component nag-uli sa array nga adunay mga article ID ug nagdrowing sa article teaser component, nga nagpasa sa Id isip prop, ug ang child component, sa baylo, nagkuha sa gikinahanglan nga datos gikan sa Listahan sa mga Artikulo. Kung moadto ka sa panid sa publikasyon, makuha namon ang naa na nga petsa gikan Listahan sa mga Artikulo, naghangyo kami nga makuha ang nawala nga datos ug idugang lang kini sa naa na nga butang.
Ngano nga kini nga pamaagi mas maayo? Sama sa akong gisulat sa ibabaw, kini nga pamaagi mas malumo kalabot sa na-download nga datos ug nagtugot kanimo sa paggamit niini pag-usab. Apan gawas pa niini, kini nagbukas sa dalan ngadto sa pipila ka bag-ong mga posibilidad nga mohaum sa hingpit sa maong arkitektura. Pananglitan, ang pagboto ug pagkarga sa mga artikulo sa feed ingon nga kini makita. Mahimo namong ibutang ang pinakabag-o nga mga post sa usa ka "storage" Listahan sa mga Artikulo, pagtipig og bulag nga listahan sa bag-ong mga ID sa Mga ArtikuloId ug ipahibalo ang tiggamit bahin niini. Kung mag-klik kami sa buton nga "Ipakita ang mga bag-ong publikasyon", isulud ra namon ang mga bag-ong Id sa sinugdanan sa han-ay sa karon nga lista sa mga artikulo ug ang tanan molihok hapit sa mahika.
Paghimo sa pag-download nga mas makalingaw
Ang icing sa refactoring cake mao ang konsepto sa mga kalabera, nga naghimo sa proseso sa pag-download sa sulod sa usa ka hinay nga Internet nga dili kaayo makaluod. Wala’y mga panaghisgot bahin niini nga butang; ang agianan gikan sa ideya hangtod sa prototype literal nga duha ka oras. Ang disenyo halos nagdrowing sa iyang kaugalingon, ug among gitudloan ang among mga sangkap sa paghimo nga yano, halos dili mokidlap nga mga bloke sa div samtang naghulat sa datos. Sa tinuud, kini nga pamaagi sa pagkarga sa tinuud nga pagkunhod sa gidaghanon sa mga hormone sa stress sa lawas sa tiggamit. Ang skeleton ingon niini:
Habraloading
Namalandong
Nagtrabaho ko sa Habré sulod sa unom ka bulan ug ang akong mga higala nangutana gihapon: maayo, unsa ang imong gusto didto? Okay, komportable - oo. Apan adunay usa ka butang nga naghimo niini nga trabaho nga lahi sa uban. Nagtrabaho ko sa mga team nga hingpit nga walay pagtagad sa ilang produkto, wala makaila o makasabut kinsa ang ilang mga tiggamit. Apan dinhi ang tanan lahi. Dinhi gibati nimo nga responsable sa imong gibuhat. Sa proseso sa pagpalambo sa usa ka bahin, partially ikaw mahimong tag-iya niini, apil sa tanan nga mga miting sa produkto nga may kalabutan sa imong pag-andar, paghimo og mga sugyot ug paghimo og mga desisyon sa imong kaugalingon. Ang paghimo sa usa ka produkto nga imong gigamit kada adlaw sa imong kaugalingon cool kaayo, apan ang pagsulat sa code alang sa mga tawo nga tingali mas maayo niini kay kanimo usa lamang ka talagsaon nga pagbati (walay sarcasm).
Pagkahuman sa pagpagawas sa tanan niini nga mga pagbag-o, nakadawat kami positibo nga feedback, ug kini nindot kaayo. Kini makapadasig. Salamat! Pagsulat ug dugang.
Tugoti ako nga pahinumdoman ka nga pagkahuman sa mga global variable nakahukom kami nga usbon ang arkitektura ug igahin ang proxy layer sa usa ka lahi nga higayon. Ang "duha ka node" nga arkitektura nakaabot na sa pagpagawas sa porma sa publiko nga beta testing. Karon bisan kinsa mahimong mobalhin niini ug makatabang kanamo sa paghimo sa mobile Habr nga mas maayo. Kana lang para karong adlawa. Malipay ko nga tubagon ang tanan nimong mga pangutana sa mga komento.
Source: www.habr.com