Ndagara ndichifarira kuti Habr yakarongeka sei kubva mukati, kuti mafambiro ebasa anogadziriswa sei, kuti kutaurirana kunogadziriswa sei, ndeapi maitiro anoshandiswa uye kuti kodhi inowanzonyorwa sei pano. Sezvineiwo, ndakawana mukana wakadaro, nekuti ini nguva pfupi yadarika ndakava chikamu chechikwata chehabra. Ndichishandisa muenzaniso wediki refactoring yeiyo mobile vhezheni, ini ndichaedza kupindura mubvunzo: zvinoita sei kushanda pano kumberi. Muchirongwa: Node, Vue, Vuex uye SSR ine sosi kubva kune manotsi nezve ruzivo rwemunhu muHabr.
Chekutanga chaunofanira kuziva nezvechikwata chebudiriro ndechekuti isu tiri vashoma. Hazvina kukwana - aya mamberi matatu, kumashure maviri uye tekinoroji inotungamira yevose Habr - Baxley. Iko kune, hongu, zvakare muongorori, mugadziri, vatatu Vadim, chishamiso chitsva, nyanzvi yekushambadzira uye mamwe maBumburum. Asi kune vatanhatu chete vanopa zvakananga kune kwaHabr masosi. Izvi hazvishamisi - purojekiti ine mamirioni emadhora-vateereri, iyo kubva kunze inoita senge bhizinesi hombe, muchokwadi inotaridzika senge inotonhorera yekutanga ine flattest yesangano chimiro chinogoneka.
Kufanana nemamwe makambani mazhinji eIT, Habr anopupura mazano eAgile, maitiro eCI, uye ndizvo chete. Asi maererano nemanzwiro angu, Habr sechigadzirwa chiri kukura zvakanyanya mumafungu pane kuenderera mberi. Saka, kune akati wandei achimhanya akatevedzana, isu tinoshingairira kodhi chimwe chinhu, dhizaini nekugadzirisa patsva, kutyora chimwe chinhu nekuchigadzirisa, kugadzirisa matikiti uye kugadzira matsva, kutsika reki uye kupfura isu pachedu mutsoka, kuti pakupedzisira tisunungure chimiro mukati. production. Uye zvino kunouya kumwe kunyarara, nguva yekuvandudzwa, nguva yekuita izvo zviri mu "zvakakosha-kwete zvekukurumidzira" quadrant.
Ndizvo chaizvo izvi "off-season" sprint ichakurukurwa pazasi. Panguva ino yaisanganisira kudzokororwa kweiyo mobile version yeHabr. Kazhinji, kambani ine tarisiro huru pamusoro payo, uye mune ramangwana inofanira kutsiva iyo zoo yose yeHabr's incarnations uye kuva yepasi rose-cross-platform solution. Rimwe zuva kuchave nekugadziriswa dhizaini, PWA, offline mode, mushandisi kugadzirisa, uye zvimwe zvakawanda zvinonakidza zvinhu.
Ngatiise basa
Pane imwe nguva, pane yakajairwa kusimuka, imwe yekumberi yakataura nezve matambudziko mukuvaka kwechikamu chemashoko eiyo mobile version. Tine izvi mupfungwa, takaronga micro-musangano muchimiro cheboka psychotherapy. Vanhu vese vaichinjana kutaura pairwadza vakanyora zvese pabepa vakanzwira tsitsi vakanzwisisa kunze kwekuti hapana aiombera maoko. Mhedzisiro yacho yaive rondedzero yematambudziko makumi maviri, izvo zvakajekesa kuti mobile Habr yakanga ichine nzira refu uye ine minzwa yekubudirira.
Ini ndainyanya kunetseka nezve kugona kwekushandisa zviwanikwa uye inonzi yakatsetseka interface. Mazuva ese, panzira yekumba-yekumba, ndakaona foni yangu yekare ichiedza kuratidza 20 misoro yenyaya mukudya. Zvaiita seizvi:
Mobile Habr interface isati yagadzirisa
Chii chiri kuitika pano? Muchidimbu, sevha yakashandira iyo HTML peji kumunhu wese nenzira imwechete, zvisinei nekuti mushandisi akapinzwa mukati kana kwete. Ipapo mutengi JS anotakurwa uye anokumbira iyo data inodiwa zvakare, asi yakagadziridzwa kuti ibvumidzwe. Kureva kuti takaita basa rimwe chete kaviri. Iyo interface yakapenya, uye mushandisi akadhawunirodha zana rakanaka rekuwedzera kilobytes. Muchidimbu zvinhu zvese zvaitonyanya kutyisa.
Old SSR-CSR chirongwa. Mvumo inogoneka chete pamatanho C3 neC4, kana Node JS isiri kubatikana kugadzira HTML uye inogona proxy zvikumbiro kuAPI.
Mavakirwo edu enguva iyoyo akatsanangurwa chaizvo nemumwe wevashandisi veHabr:
Iyo mobile version ndeye crap. Ndiri kuzvitaura sezvazviri. Kusanganiswa kunotyisa kweSSR neCSR.
Taifanira kuzvibvuma, pasinei nokuti zvaisuruvarisa sei.
Ndakaongorora sarudzo, ndikagadzira tikiti muJira ine tsananguro padanho rekuti "zvakashata izvozvi, ita nemazvo" uye ndikaodza basa racho mukurohwa kukuru:
- shandisazve data,
- kuderedza kuwanda kwekudhirowazve,
- bvisa zvikumbiro zvakapetwa,
- ita kuti basa rekurodha rive pachena.
Ngatishandise zvakare data
Muchiono, server-side rendering yakagadzirirwa kugadzirisa matambudziko maviri: kwete kutambura nekutsvaga injini mipimo maererano ne uye kuvandudza metric (zvisingadzivisiki kuwedzera ) Muchiitiko chekare chekupedzisira gore (ichiri paBackbone.js), SSR ndiyo yakafanana isomorphic JS application inomhanya munzvimbo yeNode. Sevha inongotumira marongerwo akagadzirwa semhinduro kune chikumbiro. Ipapo rehydration inoitika kudivi revatengi, uyezve zvese zvinoshanda pasina peji reloads. Kuna Habr, sekune zvimwe zviwanikwa zvakawanda zvine zvinyorwa zvemukati, server kupa chinhu chakakosha mukuvaka hukama hushamwari neinjini dzekutsvaga.
Pasinei nokuti makore anopfuura matanhatu apfuura kubva pakatanga teknolojia, uye panguva ino mvura yakawanda yakanyatsoyerera pasi pebhiriji munyika yepamberi, kune vakawanda vanogadzira pfungwa iyi ichiri yakavharwa pakavanzika. Isu hatina kumira padivi tikaburitsa Vue application neSSR rutsigiro mukugadzira, tichishaya chinhu chidiki diki: isu hatina kutumira mamiriro ekutanga kumutengi.
Sei? Hapana mhinduro chaiyo kumubvunzo uyu. Pamwe ivo vaisada kuwedzera saizi yemhinduro kubva kuseva, kana nekuda kweboka remamwe matambudziko ekuvaka, kana kuti haina kungobvisa. Imwe nzira kana imwe, kukanda kunze uye kushandisazve zvese zvakaitwa nesevha zvinoita sekunge zvakakodzera uye zvinobatsira. Basa racho ndere diki - muchirevo chekuuraya, uye Vue otomatiki anoiwedzera kune yakagadzirwa dhizaini seyakasarudzika yepasirese: window.__INITIAL_STATE__.
Rimwe rematambudziko amuka ndere kusakwanisa kushandura zvimiro zve cyclic kuita JSON (); yakagadziriswa nekungotsiva zvivakwa zvakadaro nemafurati adzo.
Uye zvakare, kana uchibata neUGC zvemukati, unofanirwa kuyeuka kuti iyo data inofanirwa kuchinjirwa kune HTML masangano kuitira kuti isatyora iyo HTML. Nezvinangwa izvi tinoshandisa .
Kuderedza kudhirowazve
Sezvauri kuona kubva pamufananidzo uri pamusoro, kwatiri, imwe Node JS muenzaniso inoita mabasa maviri: SSR uye "proxy" muAPI, apo mvumo yemushandisi inoitika. Mamiriro ezvinhu aya anoita kuti zvisakwanise kubvumidza apo JS kodhi iri kushanda pavhavha, sezvo node iri imwechete-shinda, uye SSR basa rinoenderana. Ndokunge, sevha haingokwanise kutumira zvikumbiro kune iyo iyo callstack iri kubatikana nechimwe chinhu. Zvakazoitika kuti isu takagadziridza iyo nyika, asi iyo interface haina kumira kuzununguka, sezvo data pamutengi raifanirwa kuvandudzwa tichifunga nezvesesheni yemushandisi. Taifanira kudzidzisa application yedu kuisa iyo data chaiyo mukutanga, tichifunga nezve mushandisi wekupinda.
Paive nemhinduro mbiri chete kudambudziko:
- batanidza data remvumo kune-cross-server zvikumbiro;
- patsanura Node JS zvikamu muzvikamu zviviri zvakasiyana.
Mhinduro yekutanga yaida kushandiswa kwezvinhu zvakasiyana-siyana zvepasi rose pavhavha, uye yechipiri yakawedzera nguva yekupedzisira yekupedzisa basa neinenge mwedzi.
Nzira yekuita sei sarudzo? Habr anowanzo famba munzira yekushomeka kushoma. Zvisina kurongeka, pane chishuwo chakazara chekudzikisa kutenderera kubva pane zano kuenda kune prototype kusvika kushoma. Iyo modhi yemafungiro kune chigadzirwa inotiyeuchidza nezve mapostulates ebooking.com, nemusiyano chete uri wekuti Habr anotora mhinduro yemushandisi zvakanyanya uye anovimba newe, semugadziri, kuita sarudzo dzakadaro.
Kutevera pfungwa iyi uye chishuwo changu chekukurumidza kugadzirisa dambudziko, ndakasarudza zvisikwa zvepasi rose. Uye, sezvinowanzoitika, unofanira kuvabhadhara nokukurumidza kana kuti gare gare. Isu takabhadhara nekukurumidza: takashanda pakupera kwevhiki, takabvisa mhedzisiro, akanyora ndokutanga kupatsanura server muzvikamu zviviri. Kukanganisa kwacho kwaive kupusa, uye tsikidzi inobatanidza iyo yakanga isiri nyore kubereka. Uye hongu, zvinonyadzisa pane izvi, asi imwe nzira kana imwe, kugumburwa uye kugomera, PoC yangu ine shanduko dzepasi rose yakapinda mukugadzira uye iri kushanda zvakabudirira ichimirira kutamira kune nyowani "mbiri-node" yekuvaka. Iri raive danho rakakosha, nekuti zviri pamutemo chinangwa chakaitwa - SSR yakadzidza kuendesa peji rakagadzirira-kushandisa, uye UI yakadzikama zvakanyanya.
Mobile Habr interface mushure mechikamu chekutanga chekugadzirisa
Pakupedzisira, iyo SSR-CSR dhizaini yeiyo nharembozha inotungamira kune uyu mufananidzo:
οΏΌ"Two-node" SSR-CSR dunhu. Iyo Node JS API inogara yakagadzirira asynchronous I/O uye haina kuvharwa nebasa reSSR, sezvo iyo yekupedzisira iri mune imwe muenzaniso. Query cheni #3 haidiwe.
Kubvisa zvikumbiro zvakapetwa
Pashure pokunge manomano aya aitwa, kunyorwa kwokutanga kwepeji racho kwakanga kusingachanyanyi kumutsa pfari. Asi kumwe kushandiswa kweHabr muSPA modhi kuchiri kukonzera nyonganiso.
Sezvo hwaro hwekuyerera kwemushandisi kuri shanduko yefomu rondedzero yezvinyorwa β chinyorwa β makomendi uye zvakapesana, zvaive zvakakosha kukwidziridza mashandisirwo ezviwanikwa zveketani iyi pakutanga.
Kudzokera kune post feed kunomutsa chikumbiro chitsva che data
Pakanga pasina chikonzero chekuchera zvakadzika. Mune iyo skrini iri pamusoro unoona kuti iyo application inokumbira zvakare runyorwa rwezvinyorwa paunenge uchitsvaira uchidzoka, uye panguva yekukumbira isu hatione zvinyorwa, zvinoreva kuti data yapfuura inonyangarika kumwe kunhu. Zvinoita senge chinyorwa chinyorwa chikamu chinoshandisa nzvimbo yenzvimbo uye chinorasikirwa nacho pakuparadza. Muchokwadi, iyo application yakashandisa nyika yepasirese, asi iyo Vuex architecture yakavakirwa musoro-on: ma module akasungirirwa kumapeji, ayo anosungirirwa kune nzira. Uyezve, mamodule ese "anoraswa" - kushanya kwega kwega kunotevera peji kunonyorazve module yese:
ArticlesList: [
{ Article1 },
...
],
PageArticle: { ArticleFull1 },
Pakazara, takanga tine module ArticlesList, iyo ine zvinhu zverudzi chinyorwa uye module PejiChinyorwa, iyo yaiva shanduro yakawedzerwa yechinhu chacho chinyorwa, kunge ArticleFull. Kakawanda, kuita uku hakutakure chero chinhu chinotyisa mukati mayo - chiri nyore kwazvo, munhu anogona kutotaura asina maturo, asi anonzwisisika zvakanyanya. Kana iwe ukagadzirisazve module pese paunochinja nzira, saka unogona kutorarama nayo. Zvisinei, kufamba pakati pezvinyorwa zvekudya, semuenzaniso /feed β /zvose, inovimbiswa kurasa zvese zvine chekuita nekudya kwega, sezvo isu tine imwe chete ArticlesList, mauri iwe unofanirwa kuisa data nyowani. Izvi zvinotitungamira zvakare kukudzokorora kwezvikumbiro.
Ndaunganidza zvese zvandaikwanisa kuchera pamusoro penyaya, ndakagadzira chimiro chitsva chehurumende ndokuchipa kune vandinoshanda navo. Hurukuro dzacho dzakanga dzakareba, asi pakupedzisira nharo dzokutsigira dzakapfuura kusava nechokwadi, uye ndakatanga kushandisa.
Pfungwa yemhinduro inonyatso kuratidzwa mumatanho maviri. Kutanga isu tinoedza kudhiza iyo Vuex module kubva pamapeji uye sunga zvakananga kumigwagwa. Hongu, pachave ne data shoma muchitoro, vanowana vanozowedzera kuomarara, asi isu hatizorodha zvinyorwa kaviri. Kune iyo mobile vhezheni, iyi ingangove nharo yakasimba. Ichaita seizvi:
ArticlesList: {
ROUTE_FEED: [
{ Article1 },
...
],
ROUTE_ALL: [
{ Article2 },
...
],
}
Asi ko kana zvinyorwa zvinyorwa zvichigona kupindirana pakati penzira dzakawanda uye ko kana tichida kushandisazve chinhu data chinyorwa kupa iyo post peji, kuishandura kuita ArticleFull? Muchiitiko ichi, zvingava zvine musoro kushandisa chimiro chakadaro:
ArticlesIds: {
ROUTE_FEED: [ '1', ... ],
ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
'1': { Article1 },
'2': { Article2 },
...
}
ArticlesList pano ingori rudzi rwechinyorwa chezvinyorwa. Zvese zvinyorwa zvakatorwa panguva yevashandisi. Isu tinovabata nekuchenjerera kukuru, nekuti iyi ndiyo traffic inogona kunge yakadhindwa kuburikidza nekurwadziwa kumwe mune metro pakati pezviteshi, uye isu hatidi kukonzeresa kurwadziwa uku kumushandisi zvakare nekumumanikidza kurodha data raakange atove. downloaded. Chinhu ZvinyorwaIds ingori maID akawanda (sokunge "manongedzo") kune zvinhu chinyorwa. Chimiro ichi chinokutendera kuti udzivise kudzokorora data yakajairika kumakwara uye kushandisazve chinhu chinyorwa paunenge uchipa peji rekutumira nekubatanidza data rakawedzerwa mariri.
Kubuda kwechinyorwa chezvinyorwa kwawedzera kujeka: iyo iterator chikamu chinodzokorora kuburikidza nehurongwa hwechinyorwa ID uye inodhirowa chinyorwa chetiyeri chikamu, ichipfuura iyo Id senge prop, uye chikamu chemwana, zvakare, chinotora data rinodiwa kubva. ArticlesList. Paunoenda kupeji yekushambadzira, tinowana zuva ragara riripo kubva ArticlesList, tinoita chikumbiro chekuwana iyo data isipo uye kungoiwedzera kune chinhu chiripo.
Nei nzira iyi iri nani? Sezvandanyora pamusoro, nzira iyi yakapfava zvine ruremekedzo kune yakatorwa data uye inobvumidza iwe kuti uishandise zvakare. Asi kunze kweizvi, inovhura nzira kune dzimwe mikana mitsva inokodzera zvakakwana mukuvaka kwakadai. Semuenzaniso, kuvhota uye kurodha zvinyorwa mufidhi sezvazvinoonekwa. Tinogona kungoisa zvinyorwa zvitsva mu "storage" ArticlesList, chengetedza runyoro rwakasiyana rwemaID matsva mukati ZvinyorwaIds uye zivisa mushandisi nezvazvo. Kana isu tikadzvanya bhatani rekuti "Ratidza zvitsva" bhatani, isu tinongoisa maIds matsva mukati mekutanga kweiyo rondedzero yezvino zvinyorwa uye zvese zvinoshanda zvine mashiripiti.
Kuita kuti kudhaunirodha kunakidze
Iyo icing pane refactoring keke ipfungwa yema skeletons, izvo zvinoita kuti maitiro ekurodha zvemukati pane inononoka Internet zvishoma asemese. Pakanga pasina nhaurirano nezvenyaya iyi; nzira kubva kune imwe pfungwa kuenda kune prototype yakatora maawa maviri chaiwo. Dhizaini yacho yakazvidhirowa, uye isu takadzidzisa zvikamu zvedu kupa zvakapfava, zvisingakwanisi kupenya div block tichimirira data. Zvine musoro, nzira iyi yekurodha inoderedza huwandu hwemahomoni ekushushikana mumuviri wemushandisi. Skeleton inotaridzika seizvi:
Habraloading
Reflecting
Ndanga ndichishanda muHabrΓ© kwemwedzi mitanhatu uye shamwari dzangu dzichiri kubvunza: zvakanaka, unoifarira sei ipapo? Zvakanaka, kusununguka - hongu. Asi pane chimwe chinhu chinoita kuti basa iri risiyane nemamwe. Ndakashanda muzvikwata zvakanga zvisina basa zvachose nechigadzirwa chavo, ndisingazivi kana kunzwisisa kuti vashandisi vavo vaiva ani. Asi pano zvinhu zvose zvakasiyana. Apa unonzwa mutoro pane zvaunoita. Mukuita kugadzira chimiro, iwe unova muridzi wayo zvishoma, tora chikamu mumisangano yese yechigadzirwa ine chekuita nekushanda kwako, ita mazano uye ita sarudzo iwe pachako. Kugadzira chigadzirwa chaunoshandisa mazuva ese iwe pachako kunotonhorera, asi kunyora kodhi kune vanhu vangangove vari nani pairi kupfuura iwe kungonzwa kunoshamisa (hapana kunyomba).
Mushure mekuburitswa kwese shanduko idzi, takagamuchira mhinduro yakanaka, uye yaive yakanaka, yakanaka kwazvo. Zvinokurudzira. Ndatenda! Nyora zvimwe.
Rega ndikuyeuchidze kuti mushure mekusiyana kwepasirese takafunga kushandura dhizaini uye kugovera iyo proxy layer mune imwe muenzaniso wakasiyana. Iyo "mbiri-node" dhizaini yakatosvika pakuburitswa mumhando yeruzhinji beta bvunzo. Iye zvino chero munhu anogona kuchinjira kwairi uye kutibatsira kuita mobile Habr zviri nani. Ndizvo zvanhasi chete. Ini ndichafara kupindura mibvunzo yako yese mumhinduro.
Source: www.habr.com