Dino Esposito: Maendeleo ya programu za kisasa za wavuti. Uchambuzi wa maeneo ya somo na teknolojia. Usivunje historia, iboresha. Upimaji na uendeshaji wa majaribio

Hivi karibuni, hasa kutokana na UX na utendaji.

Ninataka kuwasilisha kanuni 7 zinazoweza kutekelezeka kwa tovuti zinazotaka kutumia JavaScript kudhibiti UI. Kanuni hizi ni matokeo ya kazi yangu kama mbunifu wa wavuti, lakini pia kama mtumiaji wa muda mrefu wa WWW.

JavaScript bila shaka imekuwa zana ya lazima kwa wasanidi wa mbele. Sasa wigo wake unapanuka hadi maeneo mengine kama vile seva na vidhibiti vidogo. Lugha hii ya upangaji imechaguliwa na vyuo vikuu maarufu ili kufundisha wanafunzi misingi ya sayansi ya kompyuta.

Wakati huo huo, kuna idadi ya maswali kuhusu jukumu lake na matumizi maalum, ambayo wengi wanaona ni vigumu kujibu, ikiwa ni pamoja na waandishi wa mifumo na maktaba.

Je, JavaScript inapaswa kutumika kama mbadala wa vitendaji vya kivinjari: historia, urambazaji, utoaji?
Je, backend inakufa? Je, ni muhimu kutoa HTML hata kidogo?
Je, ni kweli kwamba Programu za Ukurasa Mmoja (SPAs) ni za siku zijazo?
JS inapaswa kutoa kurasa kwenye wavuti na kutoa kurasa katika programu za wavuti?
Je! nitumie mbinu kama PJAX au TurboLinks?
Je, ni tofauti gani hasa kati ya tovuti na programu ya wavuti? Je, kunapaswa kuwa na kitu kimoja?

1. Kutoa kurasa kwenye seva ni hiari

tl;DR: Utoaji wa seva haufanyiki kwa SEO, lakini kwa utendakazi. Zingatia maombi ya ziada ya hati, mitindo na maombi ya API yanayofuata. Katika siku zijazo, kuzingatia matumizi Mbinu ya HTTP 2.0 Sukuma.

Kwanza kabisa, lazima nionyeshe kosa la kawaida la kutenganisha "programu zilizotolewa za seva" kutoka "programu za ukurasa mmoja". Iwapo tunataka kupata matumizi bora zaidi kutoka kwa mtazamo wa mtumiaji, hatupaswi kujiwekea mipaka kwa vikomo hivyo na kuacha njia mbadala moja kwa kupendelea nyingine.

Sababu ziko wazi kabisa. Kurasa hutumwa kupitia Mtandao, ambayo ina mapungufu ya kimwili, kama Stuart Cheshire alivyoonyeshwa kwa kukumbukwa katika insha maarufu "Ni Latency, Fool":

Matokeo yaliyoonyeshwa ya 85 ms yanaweza kuboreshwa (na tayari ni bora kidogo), lakini ni muhimu kuelewa kwamba kuna kikomo cha kimwili juu ya kuchelewa wakati wa kusambaza habari kwenye mtandao, bila kujali ni kiasi gani cha bandwidth kwenye kompyuta za watumiaji huongezeka. .

Hii ni muhimu hasa kwa kuongezeka kwa umaarufu wa programu za JavaScript, ambazo kwa kawaida huwa na alama na sehemu tupu karibu nayo. Kinachojulikana maombi ya ukurasa mmoja (SPA) - seva inarudisha ukurasa mmoja, na kila kitu kingine kinaitwa kwa nambari ya upande wa mteja.

Hebu fikiria hali ambapo mtumiaji anafikia http://app.com/orders/ moja kwa moja. Kufikia wakati ombi lako linapokea na kushughulikia ombi hili, tayari lina muhimu habari kuhusu kile kinachohitajika kuonyeshwa kwenye ukurasa. Inaweza, kwa mfano, kupakia agizo kutoka kwa hifadhidata na kuiongeza kwenye jibu. Lakini SPA nyingi katika hali hii zinarudisha ukurasa tupu na lebo. Kisha utalazimika kubadilishana maombi tena ili kupokea yaliyomo kwenye hati, na tena kupokea yaliyomo.

Kuchanganua HTML iliyotumwa na seva kwa kila ukurasa wa SPA

Watengenezaji wengi hufanya dhabihu hii kwa makusudi. Wanajaribu kuhakikisha kuwa mtandao wa ziada humle itatokea mara moja tu kwa mtumiaji, kutuma vichwa sahihi kuhifadhiwa katika majibu na hati na CSS. Hekima ya kawaida ni kwamba hii ni mpango mzuri kwa sababu faili zote zinapopakuliwa kwenye kompyuta, vitendo vingi vya watumiaji (kama vile kuelekeza sehemu zingine) hufanyika bila kuhitaji kurasa za ziada au hati.

Hata hivyo, hata kwa kuzingatia cache, kuna hasara fulani katika utendaji ikiwa tutazingatia wakati wa kuchanganua na utekelezaji wa hati. Katika makala "Je, jQuery ni kubwa sana kwa simu ya mkononi?" inasema jinsi jQuery pekee inaweza kupunguza kasi zingine vivinjari vya simu kwa mamia ya milliseconds.

Ili kufanya mambo kuwa mbaya zaidi, mtumiaji kwa kawaida hapokei maoni yoyote wakati hati zinapakia. Matokeo yake ni ukurasa tupu kwenye skrini, ambayo kisha inageuka ghafla kuwa ukurasa uliojaa kikamilifu.

Muhimu zaidi, tunaelekea kusahau kwamba usafiri wa data ya mtandao unaojulikana zaidi (TCP) huanza polepole. Kwa hakika hii inahakikisha kwamba vifurushi vingi vya hati havitahamishwa kwa kwenda moja, na kufanya hali iliyo hapo juu kuwa mbaya zaidi.

Muunganisho wa TCP huanza na ubadilishanaji wa pakiti za kupeana mikono. Ikiwa unatumia SSL, ambayo ni muhimu kwa uhamisho salama wa hati, kuna ubadilishanaji wa pakiti mbili za ziada (moja ikiwa mteja atapata kipindi). Ni baada tu ya hii seva inaweza kuanza kutuma data, lakini mazoezi yanaonyesha kuwa hufanya hivi polepole na kwa vikundi.

Utaratibu wa kudhibiti msongamano unaoitwa Anza Polepole umejengwa ndani Itifaki ya TCP kutuma data, hatua kwa hatua kuongeza kiasi sehemu. Hii ina maana mbili kubwa kwa SPA:

1. Maandishi makubwa huchukua muda mrefu kupakia kuliko inavyoonekana. Kama ilivyoelezwa katika kitabu "Mitandao ya Kivinjari yenye Utendaji wa Juu" na Ilya Grigorik, inachukua "mabadilishano manne ya pakiti (...) na mamia ya milisekunde ya latency kufikia 64 KB ya kubadilishana data kati ya mteja na seva." Kwa mfano, katika kesi ya muunganisho wa haraka wa Mtandao kati ya London na New York, inachukua ms 225 kabla ya TCP kufikia. ukubwa wa juu kifurushi.

2. Kwa kuwa sheria hii inatumika pia kwa upakiaji wa ukurasa wa mwanzo, ni muhimu sana ni maudhui gani yanayopakiwa ili kutolewa kwenye ukurasa kwanza. Paul Irish anapohitimisha katika uwasilishaji wake wa Kuwasilisha Bidhaa, KB 14 za kwanza ni muhimu. Hii ni wazi ikiwa unatazama grafu inayoonyesha kiasi cha uhamisho kati ya mteja na seva wakati wa hatua za kwanza za kuanzisha muunganisho.

Seva inaweza kutuma KB ngapi katika kila hatua ya unganisho, kwa sehemu

Tovuti zinazosimamia kuwasilisha maudhui (hata lebo ya msingi bila data) katika dirisha hili huonekana kuitikia kwa njia ya kipekee. Kwa kweli, waandishi wengi wa haraka programu za seva tambua JavaScript kama kitu kisichohitajika au itumike kwa tahadhari kubwa. Mtazamo huu unaimarishwa zaidi ikiwa programu ina urejeshaji wa haraka na hifadhidata, na seva zake ziko karibu na watumiaji (CDN).

Jukumu la seva katika kuharakisha uwasilishaji wa yaliyomo inategemea moja kwa moja kwenye programu ya wavuti. Suluhisho haichemki kila wakati ili "kutoa kurasa nzima kwenye seva."

Katika baadhi ya matukio, ni bora kuwatenga sehemu ya ukurasa ambayo kwa sasa haina umuhimu kwa mtumiaji kutoka kwa jibu la awali na kuiacha kwa ajili ya baadaye. Baadhi ya programu, kwa mfano, zinapendelea kutoa tu "msingi" wa ukurasa ili kuhakikisha uitikiaji wa haraka. Kisha wanaomba sehemu tofauti za ukurasa kwa sambamba. Hii hutoa mwitikio bora zaidi hata katika hali zilizo na urithi wa polepole. Kwa baadhi ya kurasa, kutoa tu sehemu inayoonekana ya ukurasa inaweza kuwa chaguo nzuri.

Muhimu sana tathmini ya ubora maandishi na mitindo, kwa kuzingatia habari ambayo seva inayo kuhusu kipindi, mteja na URL. Maandishi ambayo yanapanga maagizo bila shaka yatakuwa muhimu zaidi kwa / kuagiza kuliko mantiki ya ukurasa wa mipangilio. Labda sio dhahiri sana, lakini kuna tofauti katika upakiaji " CSS ya muundo" na "CSS kwa styling". Ya kwanza inaweza kuhitajika kwa msimbo wa JavaScript, kwa hivyo inahitajika kuzuia, na ya pili imepakiwa asynchronously.

Mfano mzuri wa SPA ambao hauleti ubadilishanaji wa pakiti usio wa lazima ni mfano wa dhana ya 4096 byte StackOverflow, ambayo inaweza kupakia kinadharia na pakiti ya kwanza baada ya kupeana mkono kwenye muunganisho wa TCP! Mwandishi aliweza kufanikisha hili kwa kukataa caching, kwa kutumia inline kwa rasilimali zote katika majibu kutoka kwa seva. Kwa kutumia SPDY au kisukuma kwa seva ya HTTP/2, kinadharia inawezekana kuhamisha msimbo wote wa mteja ulioakibishwa katika mruko mmoja. Kweli, kwa sasa, kutoa sehemu au ukurasa mzima kwenye upande wa seva inabaki kuwa njia maarufu zaidi ya kuondoa mizunguko isiyo ya lazima ya ubadilishanaji wa pakiti.

Uthibitisho wa dhana ya SPA kutumia inline kwa CSS na JS kuondoa safari zisizo za lazima.

Mfumo unaonyumbulika kwa usawa unaogawanya uwasilishaji kati ya kivinjari na seva na kutoa zana za kupakia hati na mitindo hatua kwa hatua unaweza kutia ukungu kati ya mstari kati ya. tovuti Na maombi ya mtandao. Wote hutumia URL, urambazaji, na kuonyesha data kwa mtumiaji. Hata maombi na lahajedwali, ambayo kwa kawaida hutegemea utendakazi wa upande wa mteja, lazima kwanza ionyeshe mteja taarifa ambayo inahitaji kuhaririwa. Na kufanya hivi katika idadi ndogo zaidi ya kurudi na kurudi ni muhimu sana.

Kwa mtazamo wangu, dosari kubwa ya utendaji katika wengi mifumo maarufu katika nyakati za kisasa inaelezewa na mkusanyiko unaoendelea wa utata katika stack. Baada ya muda, teknolojia kama JavaScript na CSS ziliongezwa. Umaarufu wao pia ulikua polepole. Ni sasa tu tunaweza kufahamu jinsi zinaweza kutumika tofauti. Pia tunazungumza kuhusu kuboresha itifaki (hii inaonyeshwa na maendeleo ya sasa ya SPDY na QUIC), lakini manufaa makubwa zaidi yanatokana na kuboresha programu.

Inaweza kuwa muhimu kukumbuka baadhi ya mijadala ya kihistoria inayozunguka muundo. matoleo ya awali HTML na WWW. Kwa mfano, orodha hii ya barua kutoka 1997 inapendekeza kuongeza lebo katika HTML. Marc Andreessen anasisitiza umuhimu wa kutoa habari haraka:

2. Jibu la haraka kwa vitendo vya mtumiaji

tl;DR: JavaScript hukuruhusu kuficha muda wa kusubiri wa mtandao kabisa. Kwa kutumia hii kama kanuni ya muundo, tunaweza hata kuondoa karibu viashiria vyote vya upakiaji na ujumbe wa "kupakia" kutoka kwa programu. PJAX au TurboLinks zinakosa fursa za kuongeza kasi ya kiolesura cha kibinafsi.

Lengo letu ni kuongeza kasi ya kukabiliana na vitendo vya mtumiaji. Haijalishi ni juhudi ngapi tunazoweka katika kupunguza idadi ya humle tunapofanya kazi na programu ya wavuti, kuna mambo yaliyo nje ya uwezo wetu. Hii ni kikomo cha kinadharia cha kasi ya mwanga na ping ya chini kati ya mteja na seva.

Jambo muhimu ni ubora usiotabirika wa mawasiliano kati ya mteja na seva. Ikiwa ubora wa uunganisho ni duni, basi kusambaza tena vifurushi. Ambapo maudhui yanahitaji kupakiwa katika safari kadhaa za kurudi na kurudi, unaweza kuhitaji mengi zaidi.

Hii ndiyo faida kuu ya JavaScript kwa kuboresha UX. Ikiwa kiolesura kimeandikwa kwa upande wa mteja, tunaweza kuficha muda wa kusubiri wa mtandao. Tunaweza kuunda hisia ya kasi ya juu. Tunaweza kufikia muda wa kusubiri sifuri kwa njia bandia.

Tuseme tena kwamba mbele yetu HTML wazi. Nyaraka zimeunganishwa na viungo au lebo . Ikiwa unabonyeza yoyote kati yao, kivinjari hufanya ombi la mtandao, ambalo huchukua muda mrefu bila kutabirika, kisha hupokea na kusindika data iliyopokelewa na hatimaye huingia katika hali mpya.

JavaScript hukuruhusu kujibu mara moja na kwa matumaini kwa vitendo vya mtumiaji. Kubofya kiungo au kitufe husababisha jibu la papo hapo, bila kulazimika kwenda kwenye Mtandao. Mfano unaojulikana ni kiolesura cha Gmail (au Google Inbox), ambapo uhifadhi wa ujumbe wa barua pepe hutokea mara moja, wakati ombi linalolingana na seva linatumwa na kusindika asynchronously.

Kwa upande wa fomu, badala ya kungoja msimbo fulani wa HTML kama jibu la kuijaza, tunaweza kujibu mara tu mtumiaji anapobonyeza "Ingiza". Au bora zaidi, kama vile utafutaji wa Google unavyofanya, tunaweza kuguswa mapema zaidi kwa kuandaa lebo ya ukurasa mpya mapema.

Tabia hii ni mfano wa kile ninachokiita marekebisho ya alama. Wazo la msingi ni kwamba ukurasa "unajua" alama yake ya baadaye, kwa hivyo inaweza kubadili kwake wakati hakuna data ya kuionyesha bado. Hii ni tabia ya "matumaini" kwa sababu bado kuna hatari kwamba data haitawahi kufika na ujumbe wa makosa utalazimika kuripotiwa, lakini hii ni nadra.

Ukurasa wa nyumbani wa Google ni mfano mzuri kwa sababu unaonyesha kanuni mbili za kwanza kutoka kwa nakala yetu kwa uwazi sana.

Mwishoni mwa 2004, Google ikawa waanzilishi katika kwa kutumia JavaScript kutoa vidokezo vya wakati halisi wakati wa kuandika swali la utafutaji(cha kufurahisha ni kwamba mfanyakazi aliendeleza kipengele hiki katika 20% ya muda wake bila kazi yake kuu, kama vile Gmail). Hii hata ikawa msingi wa kuibuka kwa Ajax:

Aina nyingine ya kitendo kando na mibofyo na uwasilishaji wa fomu ambayo imeimarishwa sana na JavaScript ni uwasilishaji wa upakiaji wa faili.

Tunaweza kuweka jaribio la mtumiaji kupakua faili njia tofauti: buruta-n-tone, bandika kutoka kwenye ubao wa kunakili, chagua faili. Kisha, kutokana na API mpya za HTML5, tunaweza kuonyesha maudhui kana kwamba tayari yamepakuliwa. Mfano wa aina hii ya kiolesura ni kazi yetu na vipakuliwa katika Cloudup. Angalia jinsi kijipicha cha picha kinatolewa na kutolewa papo hapo:

Picha hutolewa na kuonyeshwa hadi upakiaji ukamilike

Katika visa hivi vyote tunaboresha mtazamo wa kasi. Kwa bahati nzuri, kuna ushahidi mwingi wa manufaa ya mbinu hii. Chukua angalau mfano wa jinsi Ongeza umbali wa kisafirishaji cha mizigo kwenye Uwanja wa Ndege wa Houston ilipungua idadi ya malalamiko kuhusu mizigo iliyopotea, bila ya haja ya kuharakisha usindikaji wa mizigo.

Wazo hili linafaa kuathiri sana UI ya programu zetu. Ninaamini kwamba viashirio vya upakiaji vinapaswa kuwa adimu, hasa tunapohamia kwenye programu za taarifa za wakati halisi, ambazo zimefafanuliwa katika sehemu inayofuata.

Kuna hali ambapo udanganyifu wa hatua ya papo hapo una athari mbaya kwa UX. Hii inaweza kuwa njia ya malipo au kumaliza kipindi kwenye tovuti. Kwa kuchukua mtazamo wa matumaini hapa, kwa kumdanganya mtumiaji, tuna hatari ya kumkasirisha.

Lakini hata katika kesi hizi, kuonyesha spinners au viashiria vya upakiaji kwenye skrini inapaswa kusimamishwa. Zinapaswa kuonyeshwa tu baada ya mtumiaji kuzingatia jibu si mara moja. Kulingana na utafiti wa Nielsen unaotajwa mara kwa mara:

Ushauri wa wakati wa majibu ya kimsingi umebaki sawa kwa miaka thelathini Miller 1968; Kadi et al. 1991:
*Sekunde 0.1 ndio kikomo cha mtumiaji kutambua jibu mara moja, hakuna onyesho linalohitajika hapa Taarifa za ziada, isipokuwa matokeo ya operesheni.
* Sekunde 1.0 ndio kikomo cha mwendelezo wa mawazo ya mtumiaji, ingawa ataona kuchelewa. Kwa kawaida, hakuna dalili ya ziada inayohitajika kwa ucheleweshaji wa zaidi ya sekunde 0.1 lakini chini ya sekunde 1.0, lakini mtumiaji hupoteza hisia ya kufanya kazi moja kwa moja na data.
* Sekunde 10 ndio kikomo cha kuweka umakini wa mtumiaji kwenye mazungumzo. Kwa muda wa kusubiri wa juu, watumiaji watataka kufanya kazi nyingine huku wakisubiri jibu kutoka kwa kompyuta.

Mbinu kama vile PJAX au TurboLinks kwa bahati mbaya hukosa vipengele vingi vilivyofafanuliwa ndani sehemu hii. Msimbo wa upande wa mteja "haujui" kuhusu hali ya baadaye ya ukurasa hadi ubadilishanaji wa data na seva ufanyike.

3. Mwitikio wa mabadiliko ya data

tl;DR: Wakati data inasasishwa kwenye seva, mteja anapaswa kuarifiwa bila kuchelewa. Hii ni aina ya uboreshaji wa tija wakati mtumiaji ameachiliwa kutoka kwa hitaji la kufanya vitendo vya ziada (bonyeza F5, onyesha ukurasa upya). Masuala mapya: (re) usimamizi wa muunganisho, kurejesha hali.

Kanuni ya tatu inahusiana na majibu ya UI kwa mabadiliko ya data kwenye chanzo, kwa kawaida seva moja au zaidi ya hifadhidata.

Muundo wa kupitisha data ya HTML ambao hubakia tuli umepita hadi mtumiaji atakapoonyesha upya ukurasa (tovuti za kawaida) au kuingiliana nao (Ajax).

UI yako inapaswa kusasishwa kiotomatiki.

Hili ni muhimu katika ulimwengu wenye mtiririko unaoongezeka wa taarifa kutoka vyanzo mbalimbali, ikiwa ni pamoja na saa, simu, kompyuta kibao na vifaa vinavyoweza kuvaliwa ambavyo vitaonekana katika siku zijazo.

Wasilisha hadithi ya habari Mlisho wa Facebook mara baada ya kuonekana kwake, wakati habari ilichapishwa hasa na kompyuta za kibinafsi watumiaji. Utoaji tulivu haukuwa bora, lakini ilieleweka kwa watu ambao walionyesha upya mipasho yao, tuseme, mara moja kwa siku.

Sasa tunaishi katika ulimwengu ambapo unapakia picha na karibu mara moja kupokea kupendwa na maoni kutoka kwa marafiki na watu unaowajua. Haja ya majibu ya papo hapo imekuwa hitaji la asili katika mazingira ya ushindani ya programu zingine.

Itakuwa vibaya, hata hivyo, kudhani kwamba manufaa ya masasisho ya papo hapo ya UI yanazuiliwa kwa programu za watumiaji wengi. Ndio maana napenda kuongea pointi za data zilizokubaliwa, badala ya watumiaji. Hebu tuchukue hali ya kawaida ya kusawazisha picha kati ya simu yako na kompyuta yako ya mkononi:

Programu ya mtumiaji mmoja pia inaweza kufaidika kutokana na utendakazi tena.

Inasaidia kufikiria zote habari ambayo inatumwa kwa mtumiaji kama "tendaji". Kusawazisha kikao na hali ya uidhinishaji ni mfano mmoja wa mbinu ya jumla. Ikiwa watumiaji wa programu yako wana vichupo kadhaa vilivyofunguliwa kwa wakati mmoja, basi kumalizia kipindi cha kazi kwenye mojawapo yao kunapaswa kulemaza mara moja uidhinishaji kwa vingine vyote. Hii bila shaka husababisha usalama bora na ulinzi bora. habari za siri, hasa katika hali ambapo watu wengi wanaweza kufikia kifaa kimoja.

Kila ukurasa humenyuka kwa hali ya kipindi na hali ya uidhinishaji

Mara baada ya kuanzisha sheria kwamba habari kwenye skrini inasasishwa moja kwa moja, ni muhimu kufanya kazi kwenye kazi mpya: kurejesha hali.

Unapotuma maombi na kupokea masasisho ya atomiki, ni rahisi kusahau kwamba programu yako inapaswa kusasishwa kawaida hata baada ya muda mrefu wa kutofanya kazi. Hebu fikiria kufunga kifuniko cha kompyuta yako ya mkononi na kuifungua siku chache baadaye. Je, maombi yatakuwaje?

Mfano wa kile kinachotokea ikiwa muunganisho haujasasishwa kwa usahihi

Uwezo wa programu kuunganisha upya kwa kawaida huingiliana na kanuni #1. Ukichagua kutuma data kwenye upakiaji wa ukurasa wa kwanza, lazima pia uzingatie muda unaopita kabla hati kupakiwa. Wakati huu kimsingi ni sawa na muda wa kukatwa, kwa hivyo muunganisho wa awali wa hati zako ni kuanza tena kwa kipindi.

4. Udhibiti wa kubadilishana data na seva

tl;DR: Sasa tunaweza kurekebisha ubadilishanaji wa data na seva. Hakikisha kushughulikia hitilafu, omba upya upendeleo wa mteja, kusawazisha data chinichini, na kuhifadhi akiba nje ya mtandao.

Wakati wavuti ilipoundwa, mawasiliano kati ya mteja na seva yalipunguzwa kwa njia kadhaa:

Kubofya kiungo kutatuma GET ili kupokea ukurasa mpya na utoaji wake.

Kuwasilisha fomu itatuma POST au GET ikifuatiwa na utoaji wa ukurasa mpya.

Kuingiza picha au kitu kutatuma GET isivyolingana ikifuatiwa na utoaji.

Unyenyekevu wa mtindo huu unavutia sana, na sasa mambo yamekuwa magumu zaidi linapokuja kuelewa jinsi ya kupokea na kutuma habari.

Vikwazo kuu vinahusiana na hatua ya pili. Kutoweza kutuma data bila lazima kupakia ukurasa mpya ilikuwa hasara kutoka kwa mtazamo wa utendaji. Lakini jambo muhimu zaidi ni kwamba ilivunja kabisa kitufe cha "Nyuma":

Labda kisanii cha kuudhi zaidi cha wavuti ya zamani

Hii ndiyo sababu wavuti kama jukwaa la programu ilibaki bila kukamilika bila JavaScript. Ajax iliwakilisha hatua kubwa mbele katika suala la urahisi wa uchapishaji wa watumiaji.

Sasa tuna API nyingi (XMLHttpRequest, WebSocket, EventSource, kwa kutaja chache) ambazo hutoa udhibiti kamili na sahihi juu ya mtiririko wa data. Mbali na uwezo wa kuchapisha data ya mtumiaji kupitia fomu, tuna fursa mpya za kuboresha UX.

Moja kwa moja kuhusiana na kanuni ya awali ni kuonyesha hali ya muunganisho. Ikiwa tunatarajia data kusasishwa kiotomatiki, ni lazima tumjulishe mtumiaji ukweli kupoteza uhusiano Na majaribio ya kuirejesha.

Wakati muunganisho umegunduliwa, ni muhimu kuhifadhi data kwenye kumbukumbu (au bora zaidi, kwenye Hifadhi ya ndani) ili iweze kutumwa baadaye. Hii ni muhimu hasa kwa kuzingatia matumizi ya baadaye ya ServiceWorker, ambayo inaruhusu programu za JavaScript kufanya kazi kwa nyuma. Ikiwa programu yako haijafunguliwa, bado unaweza kuendelea kujaribu kusawazisha data na seva chinichini.

Zingatia uwezekano wa kuisha na makosa wakati wa kutuma data; hali kama hizi zinapaswa kutatuliwa kwa niaba ya mteja. Ikiwa muunganisho umerejeshwa, jaribu kutuma data tena. Katika kesi ya hitilafu ya kudumu, mjulishe mtumiaji kuhusu hilo.

Baadhi ya makosa yanahitaji kushughulikiwa hasa kwa uangalifu. Kwa mfano, 403 isiyotarajiwa inaweza kumaanisha kuwa kipindi cha mtumiaji kimebatilishwa. Katika hali hiyo, inawezekana kurejesha kikao kwa kuonyesha mtumiaji dirisha la kuingia kuingia na nenosiri.

Pia ni muhimu kuhakikisha kuwa mtumiaji hakatishi mtiririko wa data kwa bahati mbaya. Hii inaweza kutokea katika hali mbili. Kesi ya kwanza na dhahiri zaidi ni kufunga kivinjari au kichupo, ambacho ndicho tunachojaribu kuzuia na kidhibiti kabla ya kupakua.

Onyo kabla ya kupakua

Kesi nyingine (na isiyo dhahiri) ni wakati unapojaribu kwenda kwenye ukurasa mwingine, kwa mfano kwa kubofya kiungo. Katika kesi hii, programu inaweza kusimamisha mtumiaji kutumia njia zingine, kwa hiari ya msanidi programu.

5. Usivunje hadithi, iboreshe

tl;DR: Ikiwa kivinjari hakidhibiti URL na historia, tutakuwa na matatizo mapya. Hakikisha unakidhi tabia inayotarajiwa ya kusogeza. Hifadhi akiba yako mwenyewe kwa maoni ya haraka.

Kwa mfano, ukurasa wa kawaida "usio na mwisho" kwa kawaida hutengenezwa kwa kitufe cha JavaScript ambacho huomba data/HTML ya ziada na kuiingiza. Kwa bahati mbaya, ni watu wachache wanaokumbuka kupiga simu history.pushState au kuchukua nafasi ya Jimbo kama hatua inayohitajika.

Ndiyo maana ninatumia neno "kuvunja". Kwa mfano rahisi wa mtandao wa awali, hali hii haikuwezekana. Kila mabadiliko ya hali yalitokana na mabadiliko ya URL.

Lakini pia kuna upande wa nyuma medali - fursa kuboresha historia ya kuvinjari, ambayo sasa tunadhibiti kwa kutumia JavaScript.

Uwezekano mmoja kama huo uliitwa Kurudi Haraka na Daniel Pipius:

Kitufe cha nyuma kinapaswa kufanya kazi haraka; watumiaji hawatarajii mabadiliko mengi ya data.

Ni kama kutibu kitufe cha nyuma kama kitufe kutoka kwa programu ya wavuti na kutumia kanuni #2 kwake: jibu mara moja kwa hatua ya mtumiaji. Jambo kuu ni kwamba una nafasi ya kuamua jinsi ya kuweka cache ukurasa uliopita na kuionyesha mara moja kwenye skrini. Kisha unaweza kutumia kanuni #3 na kisha kumjulisha mtumiaji data mpya inapofika kwenye ukurasa huo.

Bado kuna hali chache ambapo huna udhibiti wa tabia ya kache. Kwa mfano, ikiwa ulitoa ukurasa, kisha ukaenda kwenye tovuti ya mtu wa tatu, na kisha mtumiaji akabofya "Nyuma". Maombi ambayo hutoa HTML kwenye upande wa seva na kisha kuibadilisha kwa upande wa mteja huathirika haswa na hitilafu hii ndogo:

Kazi isiyo sahihi Vifungo vya nyuma

Njia nyingine ya kuvunja urambazaji ni kupuuza kumbukumbu ya hali ya kusogeza. Kwa mara nyingine tena, kurasa ambazo hazitumii JS na udhibiti wa mwongozo historia, uwezekano mkubwa, haitakuwa na matatizo hapa. Lakini kurasa zenye nguvu kutakuwa na. Nilijaribu milisho miwili maarufu ya habari inayotegemea JavaScript kwenye Mtandao: Twitter na Facebook. Wote wawili walikuwa na amnesia ya kusogeza.

Kugeuza ukurasa bila mwisho ni kawaida ishara ya amnesia ya kusogeza

Baada ya yote, kuwa mwangalifu na mabadiliko ya hali ambayo yanafaa tu wakati wa kutazama historia. Kwa mfano, kesi hii na kubadilisha hali ya subtrees na maoni.

Kubadilisha aina ya maoni lazima kuhifadhiwa katika historia

Ikiwa ukurasa ulitolewa tena baada ya kubofya kiungo ndani ya programu, mtumiaji anaweza kutarajia maoni yote kupanuliwa. Wakati hali inabadilika, lazima ihifadhiwe katika historia.

6. Masasisho ya msimbo kupitia ujumbe wa programu

tl;DR: Haitoshi kutuma data pekee kupitia ujumbe wa kushinikiza, unahitaji pia msimbo. Epuka hitilafu za API na uboreshe utendakazi. Tumia DOM isiyo na uraia kuunda upya programu yako bila uchungu.

Ni muhimu sana kwamba programu yako ijibu mabadiliko katika msimbo.

Kwanza, inapunguza idadi makosa iwezekanavyo na huongeza kuegemea. Ikiwa ulifanya mabadiliko muhimu kwa API ya nyuma, basi lazima sasisha msimbo wa programu za mteja. Vinginevyo, wateja wanaweza wasikubali data mpya au wanaweza kutuma data katika umbizo lisilopatana.

Hakuna kidogo sababu muhimu ni kuzingatia kanuni Nambari 3. Ikiwa kiolesura chako kitajisasisha, basi kuna sababu ndogo kwa watumiaji kuamua kupakia upya ukurasa wao wenyewe.

Kumbuka kwamba kwa tovuti ya kawaida, kuonyesha upya ukurasa kunasababisha mambo mawili: upakiaji upya wa data na upakiaji upya wa msimbo. Kupanga mfumo na masasisho ya data ya programu bila masasisho ya nambari ya programu hakujakamilika, hasa katika ulimwengu ambapo kichupo kimoja (kipindi) kinaweza kubaki wazi kwa muda mrefu sana.

Ikiwa kituo cha kushinikiza cha seva kinafanya kazi, basi mtumiaji anaweza kuarifiwa kuhusu upatikanaji wa msimbo mpya. Ikiwa sivyo, nambari ya toleo inaweza kuongezwa kwenye kichwa cha maombi ya HTTP yanayotoka. Seva inaweza kuilinganisha na toleo jipya zaidi linalojulikana, kukubali kushughulikia ombi au la, na kutoa kazi kwa mteja.

Baada ya hayo, baadhi ya programu za wavuti hupakia upya ukurasa kwa niaba ya mtumiaji. Kwa mfano, ikiwa ukurasa hauko katika eneo linaloonekana la skrini na hakuna fomu zilizokamilishwa za kuingiza.

Njia bora zaidi ni kubadilishana nambari ya moto. Hii inamaanisha kuwa sio lazima upakie upya ukurasa kabisa. Badala yake, hakika moduli hubadilishwa kwa kuruka, na nambari zao zinatumwa tena kwa utekelezaji.

Katika programu nyingi zilizopo, ni vigumu sana kubadilishana msimbo. Kwa kufanya hivyo, lazima awali uambatana na usanifu unaojitenga tabia(code) kutoka data(jimbo). Mgawanyiko huu utaturuhusu kusambaza viraka vingi tofauti haraka sana.

Kwa mfano, katika programu yetu ya wavuti kuna moduli inayoweka basi kwa ajili ya kupitisha matukio (kama socket.io). Tukio linapotokea, hali ya kipengele fulani hubadilika na hii inaonekana katika DOM. Kisha unabadilisha tabia ya sehemu hiyo, kwa mfano ili itoe alama tofauti za DOM kwa hali iliyopo na mpya.

Kwa kweli, tunapaswa kuwa na uwezo wa kubadilisha msimbo kila wakati. Hakutakuwa na haja ya kuanzisha tena muunganisho kwenye tundu, kwa mfano, ikiwa inawezekana kusasisha msimbo tu. sehemu inayohitajika. Usanifu bora wa sasisho za nambari ya kushinikiza kwa hivyo ni msimu.

Lakini tatizo linatokea mara moja jinsi ya kutathmini modules bila zisizohitajika madhara. Usanifu kama ule unaotolewa na React unafaa zaidi hapa. Ikiwa msimbo wa kijenzi utasasishwa, mantiki yake inaweza kutekelezwa tena na DOM itasasishwa. Soma maelezo ya Dan Abramov kuhusu dhana hii.

Kimsingi, wazo ni kwamba unasasisha DOM (au kuipaka rangi tena), ambayo husaidia sana katika uingizwaji wa nambari. Ikiwa hali imehifadhiwa kwenye DOM au vidhibiti vya tukio vimesakinishwa na programu, basi kusasisha msimbo kunaweza kuwa kazi ngumu zaidi.

7. Utabiri wa tabia

tl;DR : Ucheleweshaji hasi.

Programu ya kisasa ya JavaScript inaweza kuwa na njia za kutabiri vitendo vya mtumiaji.

Utumiaji dhahiri zaidi wa wazo hili ni kupakua mapema data kutoka kwa seva kabla ya mtumiaji kuiomba. Kupakia ukurasa wa wavuti na kishale cha kipanya kinachoelea juu yake ili kubofya viungo kuuonyesha mara moja ni mfano rahisi.

Mbinu ya juu zaidi ya kufuatilia ufuatiliaji wa kipanya huchanganua mwelekeo wa kipanya kwa "migongano" ya baadaye na vipengele wasilianifu kama vile vitufe. :

jQuery programu-jalizi inatabiri njia ya panya

Hitimisho

Mtandao unasalia kuwa njia inayotumika zaidi ya kusambaza habari. Tunaendelea kuongeza mienendo kwenye kurasa zetu, na kabla ya kuzitekeleza, ni lazima tuhakikishe kwamba tunahifadhi kanuni muhimu za wavuti tulizorithi.

Kurasa zilizounganishwa ni vizuizi vyema vya ujenzi kwa programu yoyote. Kupakia msimbo, mitindo na alama taratibu kadri mtumiaji anavyoingiliana huhakikisha utendakazi bora bila kuacha mwingiliano.

Vipengele vipya vya kipekee vinatolewa na JavaScript. Ikiwa teknolojia hizi zinatumiwa sana, zitatoa uzoefu bora kazi kwa watumiaji wa jukwaa huru zaidi kuwepo - WWW.

ZANA ZA KISASA ZA KUENDELEZA TOVUTI ZA MTANDAO NA MAOMBI YA WAVUTI

Krupina Tatyana Aleksandrovna 1, Shcherbakova Svetlana Mikhailovna 1
1 Chuo Kikuu cha Jimbo la Pedagogical la Moscow, mwanafunzi wa bwana

maelezo
Nakala hii imejitolea kwa muhtasari wa zana za kisasa za kuunda tovuti za Mtandao na programu za Wavuti. Shida za kufundisha wanafunzi na watoto wa shule teknolojia hizi pia zinajadiliwa.

TOVUTI ZA KISASA ZA MAENDELEO MTANDAONI NA MAOMBI YA WAVUTI

Krupina Tatiana Aleksandrovna 1 , Shcherbakova Svetlana Mikhajlovna 1
1 Chuo Kikuu cha Pedagogical cha Jimbo la Moscow, Mhitimu wa Idara ya Hisabati Inayotumika na IT

Muhtasari
Kifungu hiki kinatoa muhtasari wa maendeleo ya tovuti za kisasa na programu zinazotegemea Wavuti. Pia inajadili tatizo la kuwafunza wanafunzi na wanafunzi wa teknolojia hizi.

Ufafanuzi wa jamii ya kisasa unahusishwa na kuanzishwa kwa njia na njia za habari na teknolojia za mawasiliano(TEHAMA) katika maeneo mbalimbali ya shughuli za binadamu. Jukumu maalum katika mchakato huu bila shaka ni la maendeleo ya teknolojia ya mtandao na mawasiliano, ambayo, kati ya mambo mengine, inajidhihirisha katika uundaji wa mifumo ya habari ya kiotomatiki ya kampuni na miradi ya mtandao wa e-commerce. Hakika, shughuli za yoyote biashara ya kisasa, kwa njia moja au nyingine, inahusiana na uundaji na matengenezo ya tovuti ya shirika.

Viwango vya Kisasa vya Kielimu vya Jimbo la Shirikisho (FSES) katika mengi sio tu ya uhandisi lakini pia maeneo ya kibinadamu yanahitaji wahitimu kuwa na ujuzi wa kukuza na kudhibiti tovuti.

Mbinu na zana za kuunda tovuti za Mtandao na programu za Wavuti zinaendelea kwa nguvu kutoka kwa uwezo wa kuunda tovuti rahisi za kadi za biashara hadi uundaji wa programu za seva ambazo huchakata na kuhifadhi kiasi kikubwa cha data.

Ili kutengeneza tovuti rahisi, ikijumuisha tovuti ya kadi ya biashara yenye maelezo na maelezo ya mawasiliano, unaweza kutumia mbinu tofauti:

kuunda hati ya HTML, i.e. ukitumia kihariri cha Notepad, charaza msimbo katika HTML mwenyewe na utekeleze kwa kutumia kivinjari kwenye kituo cha kazi cha mteja, na kisha uchapishe na mtoa huduma kwa kutumia huduma zake za upangishaji;
kuunda hati sawa ya HTML kwa kutumia kihariri Adobe Dreamweaver, kuchukua fursa ya anuwai ya kazi na vistawishi;
tumia tovuti zilizotengenezwa tayari kutengeneza Wavuti za maeneo na miundo mbalimbali yenye mada na pia kuchapisha tovuti kwenye Mtandao kwa kutumia huduma za upangishaji zisizolipishwa au zinazolipishwa.

Tofauti na ukuzaji wa tovuti rahisi na zisizo na mwingiliano, kwa ukuzaji wa programu za Wavuti zinazoendesha na kuchakata data kwenye seva, mbinu na zana zinahitajika zinazosaidia zile zilizoonyeshwa kwenye aya iliyotangulia. Uendelezaji wa maombi ya Mtandao unahusisha, pamoja na kuunda msimbo wa HTML, programu katika lugha maalum. Ili kuendeleza programu za Wavuti, lugha ya programu ya PHP hutumiwa, na mtu hawezi kufanya bila, kwa mfano, seva ya Apache ya ndani na hifadhidata za MySQL.

Wacha tuangalie zana zingine zaidi za programu ya programu ya Wavuti:

Lugha ya programu ya JavaScript hutumiwa kuunda hati shirikishi za HTML;
VBScript inatumika kwa uandishi wa mteja na pia uandishi wa seva;
Perl hutumiwa kutengeneza zana za usimamizi wa mfumo, na vile vile katika ukuzaji wa hati za CGI, mifumo ya kiotomatiki ya usindikaji wa barua pepe, na usaidizi wa wavuti.

Ili kuunda programu za Wavuti kwa uhuru, unaweza kutumia rasilimali ya Denwer iliyosambazwa kwa uhuru.

Denwer (kutoka kwa ufupisho wa DNVR - seti ya muungwana ya watengenezaji wa Wavuti) ni seti ya usambazaji na ganda la programu ambalo limeundwa kwa ajili ya kuunda na kutatua programu za Wavuti na maudhui mengine yenye nguvu ya kurasa za Wavuti kwenye Kompyuta inayoendesha OS.

Seti ya Denwer ni pamoja na:

mtaa Seva ya Apache kuzindua programu kwenye kompyuta ya mtumiaji, kuiga utendakazi wa seva, ambapo mtoa huduma atasakinisha programu iliyotengenezwa. Apache ni programu- jukwaa la msalaba, linasambazwa kwa uhuru na kuungwa mkono na mifumo mbalimbali ya uendeshaji;
Mfumo wa programu wa PHP ni lugha inayofanana na C ya kutengeneza misimbo ya programu iliyopachikwa katika msimbo wa HTML wa tovuti na kutekelezwa kwenye seva kwa madhumuni ya kuchakata data iliyopokelewa kutoka kwa watumiaji wa tovuti fulani. PHP (Hypertext Preprocessor - "Hypertext Preprocessor", awali Zana za Ukurasa wa Kibinafsi - "Zana za kuunda kurasa za wavuti za kibinafsi") - lugha ya maandishi madhumuni ya jumla, iliyotumiwa kwa ajili ya kuendeleza programu za Wavuti, iliundwa na Rasmus Lerdorf mwaka wa 1994;
MySQL ni programu inayopatikana bila malipo kwa usindikaji wa hifadhidata, ikijumuisha wakati wa kufanya kazi na data iliyopokelewa kutoka kwa vivinjari vya mteja. MySQL (Lugha ya Maswali Iliyoundwa - " Lugha iliyopangwa maswali") iliundwa na Michael Widenius wa kampuni ya Uswidi TcX mnamo 1995.

Weka Programu za Denwer au vipengee vyake kivyake vinatumiwa sana na wafadhili na wataalamu kuunda na kutatua programu na tovuti za Wavuti. Seti hii pia inatumika sana kwa madhumuni ya kielimu kufundisha programu za Wavuti kwa watoto wa shule na wanafunzi.

Abdulgalimov G.L., Kugel L.A. Mafunzo katika muundo wa mifumo ya habari na uchambuzi wa data. Elimu ya kitaaluma. Mtaji. 2013. Nambari 4. ukurasa wa 31-33.

Abdulgalimov G.L. Mfumo wa kufundisha walimu wa taaluma za IT. Elimu ya juu nchini Urusi. 2010. Nambari 3. P. 156-158.

Luke Welling, Laura Thomson. Maendeleo ya programu za wavuti kwa kutumia PHP na MySQL. Nyumba ya Uchapishaji"Williams." 2010. -837. ISBN: 978-5-8459-1574-0.

Idadi ya maoni ya uchapishaji: Tafadhali subiri Katika suala hili, swali ni - ni nini kingine unahitaji kujua?
Kwa vyovyote vile, unahitaji mazingira ya nyuma. Ikiwa ninaelewa kwa usahihi, Angular, Vue na mifumo mingine ni ya mbele tu.
Hiyo ni kweli. Kila mahali unapogeuka, ukuzaji wa wavuti husemwa kila mahali kama ukuzaji wa mwisho, na kwa hakika umeunganishwa na Node.js (ili kuandika kitu kwa Angular, huwezi kufanya bila hiyo). Sielewi jinsi sehemu ya mbele imeunganishwa na Node.js, kwa sababu... Node.js kimsingi ni njia ya kuendesha JS nje ya kivinjari.
Uwezekano mkubwa zaidi, unasoma makala kuhusu frontend, kwa sababu hakuna kitu kuhusu backend ndani yao. Kama unavyojua, sehemu ya mbele imeandikwa katika JS na wengi wanavutiwa na ukweli kwamba unaweza kusakinisha NodeJS kwenye sehemu ya nyuma na kuunda tovuti kwa kutumia lugha moja. Ikiwa ninataka kuendesha programu kwenye kivinjari, kwa nini ninahitaji nodi ? Haya yote yananichanganya; naona mikanganyiko tu.
Usichanganyikiwe. Kuna teknolojia ambazo hutumiwa wakati wa mchakato wa maombi na kuna teknolojia zinazotumiwa wakati wa mchakato wa ukuzaji wa programu. Gulp, Grunt, Babel, Webpack na zingine zote hizi ni zana za ukuzaji. Wanaharakisha, kurahisisha, na kuboresha ubora wa kazi. Wakati huo, jQuery, Angular, React ni maktaba na mifumo ambayo programu itafanya kazi nayo.

Ikiwa tovuti za awali ziliundwa kwa kutumia teknolojia kadhaa, basi maombi ya kisasa inaweza kutumia kadhaa, au hata mamia ya mwisho. Hii inaweza kuwa na nini cha kufanya nayo? lugha mbalimbali programu, maktaba, mifumo, huduma, n.k. Yote hii mara nyingi huitwa "zoo" ya teknolojia.

Hapa naweza tu kudhani kuwa seva, badala ya html, inapaswa kubadilishana data na programu kupitia json au kitu kingine.
Ndiyo, JSON ndiyo inayojulikana zaidi. Unahitaji mfumo wa nyuma ambao unaweza kupeleka API ya REST. Kwa kadiri ninavyojua, mifumo mingi ya kisasa ya lugha za kisasa za programu zinazotumika kwa ukuzaji wa wavuti zinaweza kufanya hivi. Siwezi kusema kwa uhakika, ninafanya kazi katika lugha moja. Bado, seva ndio msingi wa yoyote programu ya mtandao, na kwanza kabisa unahitaji kukuza sehemu ya seva.
Hakika. Programu za kisasa za ukurasa mmoja (SPA) zinajumuisha sehemu mbili tofauti - mbele na nyuma. Wanaweza kuundwa tofauti kabisa na watengenezaji tofauti, jambo kuu ni kukubaliana juu ya muundo wa uhamisho wa data na nuances yote.

Uzuri wa SPA ni katika mgawanyo wa sehemu hizi. Yoyote kati yao inaweza kubadilishwa na mwingine bila matokeo yoyote maalum. Backend moja inaweza kutumika tovuti, maombi ya simu, kutoa upatikanaji wa data kwa upande wa tatu maombi ya washirika, na haya yote kupitia API moja.

Ni nini kingine kinachohitajika kujifunza? Au ujuzi ulioorodheshwa unatosha?
Nadhani haitoshi. Utaamua kwa usahihi kazi ambazo mradi wako lazima utatue na uchague teknolojia kwao. Unahitaji kuzingatia jambo moja, hutaweza kujifunza kila kitu kisasa, hakutakuwa na muda wa kutosha Je, inawezekana kutotumia Node.js na, ipasavyo, npm ikiwa JS (TS) inahitajika tu katika kivinjari? Wakati huo huo, kupima pia ni muhimu.
Ndiyo, ni kabisa. Kwa upande wa mteja, kwa mfano, JS+Angular. Na kwa upande wa nyuma, kwa mfano, PHP + Laravel. Sasa kuna lugha nyingi na mifumo zaidi kwao. Chagua kilicho rahisi kwako.

Hivi karibuni, hasa kutokana na UX na utendaji.

Wakati huo huo, kuna idadi ya maswali kuhusu jukumu lake na matumizi maalum, ambayo wengi wanaona vigumu kujibu, ikiwa ni pamoja na waandishi wa mifumo na maktaba.

Je, JavaScript inapaswa kutumika kama mbadala wa vitendaji vya kivinjari: historia, urambazaji, utoaji?
Je, backend inakufa? Je, ni muhimu kutoa HTML hata kidogo?
Je, ni kweli kwamba Programu za Ukurasa Mmoja (SPAs) ni za siku zijazo?
JS inapaswa kutoa kurasa kwenye wavuti na kutoa kurasa katika programu za wavuti?
Je! nitumie mbinu kama PJAX au TurboLinks?
Je, ni tofauti gani hasa kati ya tovuti na programu ya wavuti? Je, kunapaswa kuwa na kitu kimoja?

Yafuatayo yatakuwa ni majaribio yangu ya kujibu maswali haya. Nilijaribu kutafiti jinsi ya kutumia JavaScript kutoka kwa uzoefu wa mtumiaji (UX) mtazamo. Hasa, nililipa kipaumbele maalum kwa wazo la kupunguza wakati inachukua mtumiaji kupata data anayopenda. Kuanzia misingi ya teknolojia ya mtandao na kuishia na kutabiri tabia ya mtumiaji wa siku zijazo.1. Uwasilishaji wa kurasa kwenye sevatl;DR: Utoaji kwenye seva haufanyiki kwa ajili ya SEO, bali kwa ajili ya utendaji. Zingatia maombi ya ziada ya hati, mitindo na maombi ya API yanayofuata. Katika siku zijazo, zingatia kutumia mbinu ya HTTP 2.0 Push.
Kwanza kabisa, lazima nionyeshe kosa la kawaida la kutenganisha "programu zilizotolewa za seva" kutoka "programu za ukurasa mmoja". Iwapo tunataka kupata matumizi bora zaidi kutoka kwa mtazamo wa mtumiaji, hatupaswi kujiwekea mipaka kwa vikomo hivyo na kuacha njia mbadala moja kwa kupendelea nyingine.

Sababu ziko wazi kabisa. Kurasa hutumwa kupitia Mtandao, ambayo ina mapungufu ya kimwili, kama Stuart Cheshire alivyoonyeshwa kwa kukumbukwa katika insha maarufu "Ni Latency, Fool":

Umbali kati ya Stanford na Boston ni 4320 km.
Kasi ya mwanga katika utupu ni 300 x 10 ^ 6 m / s.
Kasi ya mwanga katika nyuzi za macho ni takriban 66% ya kasi ya mwanga katika utupu.
Kasi ya mwanga katika fiber ya macho ni 300 x 10 ^ 6 m / s * 0.66 = 200 x 10 ^ 6 m / s.
Kuchelewa kwa njia moja wakati wa kutuma hadi Boston 4320 km / 200 x 10^6 m/s = 21.6 ms.
Muda wa kusubiri kwa safari ya kwenda na kurudi 43.2 ms.
Ping kutoka Stanford hadi Boston kwenye Mtandao wa kisasa ni takriban ms 85 (...)
Kwa hivyo, vifaa vya kisasa vya mtandao vinasambaza ishara kwa kasi ya mara 0.5 ya kasi ya mwanga.
Matokeo yaliyoonyeshwa ya 85 ms yanaweza kuboreshwa (na tayari ni bora kidogo), lakini ni muhimu kuelewa kwamba kuna kikomo cha kimwili juu ya kuchelewa wakati wa kusambaza habari kwenye mtandao, bila kujali ni kiasi gani cha bandwidth kwenye kompyuta za watumiaji huongezeka. .

Hebu fikiria hali ambapo mtumiaji anafikia app.com/orders moja kwa moja. Kufikia wakati ombi lako linapokea na kushughulikia ombi hili, tayari lina muhimu habari kuhusu kile kinachohitajika kuonyeshwa kwenye ukurasa. Inaweza, kwa mfano, kupakia agizo kutoka kwa hifadhidata na kuiongeza kwenye jibu. Lakini SPA nyingi katika hali hii zinarudisha ukurasa tupu na lebo. Kisha utalazimika kubadilishana maombi tena ili kupokea yaliyomo kwenye hati, na tena kupokea yaliyomo.

Kuchanganua HTML iliyotumwa na seva kwa kila ukurasa wa SPA

Hata hivyo, hata kwa kuzingatia cache, kuna hasara fulani katika utendaji ikiwa tutazingatia wakati wa kuchanganua na utekelezaji wa hati. Katika makala "Je, jQuery ni kubwa sana kwa simu ya mkononi?" inasema jinsi jQuery pekee inaweza kupunguza kasi ya baadhi ya vivinjari vya rununu kwa mamia ya milisekunde.

Utaratibu wa kudhibiti msongamano unaoitwa Anza Polepole umejengwa ndani ya itifaki ya TCP kutuma data kwa nyongeza sehemu. Hii ina maana mbili kubwa kwa SPA:

1. Maandishi makubwa huchukua muda mrefu kupakia kuliko inavyoonekana. Kama ilivyoelezwa katika kitabu "Mitandao ya Kivinjari yenye Utendaji wa Juu" na Ilya Grigorik, inachukua "mabadilishano manne ya pakiti (...) na mamia ya milisekunde ya latency kufikia 64 KB ya kubadilishana data kati ya mteja na seva." Kwa mfano, katika hali ya muunganisho wa haraka wa Intaneti kati ya London na New York, inachukua ms 225 kabla ya TCP kufikia ukubwa wake wa juu wa pakiti.

Seva inaweza kutuma KB ngapi katika kila hatua ya unganisho, kwa sehemu

Tovuti zinazosimamia kuwasilisha maudhui (hata lebo ya msingi bila data) katika dirisha hili huonekana kuitikia kwa njia ya kipekee. Kwa kweli, waandishi wengi wa utumizi wa haraka wa upande wa seva wanaona JavaScript kama kitu kisichohitajika au kitu cha kutumiwa kwa uangalifu mkubwa. Mtazamo huu unaimarishwa zaidi ikiwa programu ina urejeshaji wa haraka na hifadhidata, na seva zake ziko karibu na watumiaji (CDN).

Jukumu la seva katika kuharakisha uwasilishaji wa yaliyomo inategemea moja kwa moja kwenye programu ya wavuti. Suluhisho haichemki kila wakati ili "kutoa kurasa nzima kwenye seva."

Muhimu sana tathmini ya ubora maandishi na mitindo, kwa kuzingatia habari ambayo seva inayo kuhusu kipindi, mteja na URL. Maandishi ambayo yanapanga maagizo bila shaka yatakuwa muhimu zaidi kwa / kuagiza kuliko mantiki ya ukurasa wa mipangilio. Labda si dhahiri, lakini kuna tofauti katika upakiaji "CSS miundo" na "styling CSS". Ya kwanza inaweza kuhitajika kwa msimbo wa JavaScript, kwa hivyo inahitajika kuzuia, na ya pili imepakiwa asynchronously.

Uthibitisho wa dhana ya SPA kutumia inline kwa CSS na JS kuondoa safari zisizo za lazima.

Mfumo unaonyumbulika kwa usawa unaogawanya uwasilishaji kati ya kivinjari na seva na kutoa zana za kupakia hati na mitindo hatua kwa hatua unaweza kutia ukungu kati ya mstari kati ya. tovuti Na maombi ya mtandao. Wote hutumia URL, urambazaji, na kuonyesha data kwa mtumiaji. Hata programu ya lahajedwali ambayo kwa kawaida hutegemea utendakazi wa upande wa mteja lazima kwanza ionyeshe mteja taarifa inayohitaji kuhaririwa. Na kufanya hivi katika idadi ndogo zaidi ya kurudi na kurudi ni muhimu sana.

Kwa maoni yangu, hasara kubwa ya utendaji katika mifumo mingi maarufu siku hizi inatokana na mkusanyiko unaoendelea wa ugumu kwenye rafu. Baada ya muda, teknolojia kama JavaScript na CSS ziliongezwa. Umaarufu wao pia ulikua polepole. Ni sasa tu tunaweza kufahamu jinsi zinaweza kutumika tofauti. Pia tunazungumza kuhusu kuboresha itifaki (hii inaonyeshwa na maendeleo ya sasa ya SPDY na QUIC), lakini manufaa makubwa zaidi yanatokana na kuboresha programu.

Huenda ikafaa kukumbuka baadhi ya mijadala ya kihistoria inayozunguka muundo wa HTML wa mapema na WWW. Kwa mfano, orodha hii ya barua kutoka 1997 inapendekeza kuongeza lebo katika HTML. Marc Andreessen anasisitiza umuhimu wa kutoa habari haraka:

"Ikiwa hati inahitaji kuunganishwa kwa haraka, inaweza kuwa ngumu kama tunavyotaka, na hata kama utata ni mdogo, bado tutakuwa na matatizo makubwa ya utendakazi kutokana na muundo wa hati kwa njia hii. Kwanza kabisa, hii inavunja mara moja kanuni ya WWW ya hop moja (vizuri, IMG inaivunja pia, lakini kwa sababu maalum sana na kwa maana ndogo sana) - tuna uhakika tunataka hili? 2. Jibu la haraka kwa vitendol vya mtumiaji;DR: JavaScript hukuruhusu kuficha kabisa muda wa kusubiri wa mtandao. Kwa kutumia hii kama kanuni ya muundo, tunaweza hata kuondoa karibu viashiria vyote vya upakiaji na ujumbe wa "kupakia" kutoka kwa programu. PJAX au TurboLinks zinakosa fursa za kuongeza kasi ya kiolesura cha kibinafsi.
Lengo letu ni kuongeza kasi ya kukabiliana na vitendo vya mtumiaji. Haijalishi ni juhudi ngapi tunazoweka katika kupunguza idadi ya humle tunapofanya kazi na programu ya wavuti, kuna mambo yaliyo nje ya uwezo wetu. Hii ni kikomo cha kinadharia cha kasi ya mwanga na ping ya chini kati ya mteja na seva.

Jambo muhimu ni ubora usiotabirika wa mawasiliano kati ya mteja na seva. Ikiwa ubora wa uunganisho ni duni, basi pakiti zitatumwa tena. Ambapo maudhui yanahitaji kupakiwa katika safari kadhaa za kurudi na kurudi, unaweza kuhitaji mengi zaidi.

Wacha tufikirie tena kwamba hii ni HTML wazi. Nyaraka zimeunganishwa na viungo au lebo . Ikiwa unabonyeza yoyote kati yao, kivinjari hufanya ombi la mtandao, ambalo huchukua muda mrefu bila kutabirika, kisha hupokea na kusindika data iliyopokelewa na hatimaye huingia katika hali mpya.

Ukurasa wa nyumbani wa Google ni mfano mzuri kwa sababu unaonyesha kanuni mbili za kwanza kutoka kwa nakala yetu kwa uwazi sana.

Mwishoni mwa 2004, Google ilianzisha matumizi ya JavaScript kutoa mapendekezo ya wakati halisi wakati wa kuandika hoja ya utafutaji (kipengele hiki kiliundwa na mfanyakazi katika muda wake wa 20% bila malipo, kama vile Gmail). Hii hata ikawa msingi wa kuibuka kwa Ajax:

Angalia Pendekezo la Google. Tazama maneno yako ya utafutaji yakisasishwa unapoandika, karibu mara moja... bila kuchelewesha upakiaji upya wa ukurasa. Mapendekezo ya Google na Ramani za Google ni mifano miwili ya mbinu mpya ya kuunda programu za wavuti ambayo sisi katika Njia ya Adaptive tunaita "Ajax."
Na mnamo 2010, walianzisha Utafutaji wa Papo hapo, ambapo JS ina jukumu kuu, kuondoa viburudisho vya ukurasa wa mwongozo kabisa na kubadili lebo ya "matokeo ya utafutaji" kwenye kibonye cha kwanza cha vitufe, kama inavyoonekana kwenye mchoro hapo juu.

Mfano mwingine maarufu wa urekebishaji ghafi unaweza kuwa kwenye mfuko wako. Kutoka kwanza kabisa Siku za iPhone Mfumo wa uendeshaji ulihitaji watunzi wa programu kutoa picha default.png, ambayo inaweza kuonyeshwa mara moja kwenye skrini wakati programu yenyewe inapakia.

iPhone OS hulazimisha default.png kupakia kabla ya kuzindua programu

Aina nyingine ya kitendo kando na mibofyo na uwasilishaji wa fomu ambayo imeimarishwa sana na JavaScript ni uwasilishaji wa upakiaji wa faili.

Tunaweza kusajili jaribio la mtumiaji kupakua faili kwa njia tofauti: buruta-n-dondosha, kubandika kutoka kwa bafa, kuchagua faili. Kisha, kutokana na API mpya za HTML5, tunaweza kuonyesha maudhui kana kwamba tayari yamepakuliwa. Mfano wa aina hii ya kiolesura ni kazi yetu na vipakuliwa katika Cloudup. Angalia jinsi kijipicha cha picha kinatolewa na kutolewa papo hapo:

Picha hutolewa na kuonyeshwa hadi upakiaji ukamilike

Ushauri wa wakati wa majibu ya kimsingi umebaki sawa kwa miaka thelathini Miller 1968; Kadi et al. 1991:
*Sekunde 0.1 ndio kikomo cha mtumiaji kutambua jibu mara moja, hakuna haja ya kuonyesha maelezo yoyote ya ziada isipokuwa matokeo ya operesheni.
* Sekunde 1.0 ndio kikomo cha mwendelezo wa mawazo ya mtumiaji, ingawa ataona kuchelewa. Kwa kawaida, hakuna dalili ya ziada inayohitajika kwa ucheleweshaji wa zaidi ya sekunde 0.1 lakini chini ya sekunde 1.0, lakini mtumiaji hupoteza hisia ya kufanya kazi moja kwa moja na data.
* Sekunde 10 ndio kikomo cha kuweka umakini wa mtumiaji kwenye mazungumzo. Kwa muda wa kusubiri wa juu, watumiaji watataka kufanya kazi nyingine huku wakisubiri jibu kutoka kwa kompyuta.
Mbinu kama vile PJAX au TurboLinks kwa bahati mbaya hukosa vipengele vingi vilivyoelezwa katika sehemu hii. Msimbo wa upande wa mteja "haujui" kuhusu hali ya baadaye ya ukurasa hadi ubadilishanaji wa data na seva ufanyike.3. Majibu ya data changetl;DR: Data inaposasishwa kwenye seva, mteja anapaswa kuarifiwa bila kuchelewa. Hii ni aina ya uboreshaji wa tija wakati mtumiaji ameachiliwa kutoka kwa hitaji la kufanya vitendo vya ziada (bonyeza F5, onyesha ukurasa upya). Masuala mapya: (re) usimamizi wa muunganisho, kurejesha hali.
Kanuni ya tatu inahusiana na majibu ya UI kwa mabadiliko ya data kwenye chanzo, kwa kawaida seva moja au zaidi ya hifadhidata.

Muundo wa kupitisha data ya HTML ambao hubakia tuli umepita hadi mtumiaji atakapoonyesha upya ukurasa (tovuti za kawaida) au kuingiliana nao (Ajax).

UI yako inapaswa kusasishwa kiotomatiki.

Hebu fikiria Mlisho wa Habari wa Facebook mara tu baada ya kuanzishwa kwake, wakati maelezo yalipochapishwa hasa kutoka kwa kompyuta za kibinafsi za watumiaji. Utoaji tulivu haukuwa bora, lakini ilieleweka kwa watu ambao walionyesha upya mipasho yao, tuseme, mara moja kwa siku.

Programu ya mtumiaji mmoja pia inaweza kufaidika kutokana na utendakazi tena.

Inasaidia kufikiria zote habari ambayo inatumwa kwa mtumiaji kama "tendaji". Kusawazisha kikao na hali ya uidhinishaji ni mfano mmoja wa mbinu ya jumla. Ikiwa watumiaji wa programu yako wana vichupo kadhaa vilivyofunguliwa kwa wakati mmoja, basi kumalizia kipindi cha kazi kwenye mojawapo yao kunapaswa kulemaza mara moja uidhinishaji kwa vingine vyote. Hii bila shaka husababisha kuboreshwa kwa usalama na ulinzi bora wa taarifa za siri, hasa katika hali ambapo watu wengi wanaweza kufikia kifaa kimoja.

Kila ukurasa humenyuka kwa hali ya kipindi na hali ya uidhinishaji

Mara baada ya kuanzisha sheria kwamba habari kwenye skrini inasasishwa moja kwa moja, ni muhimu kufanya kazi kwenye kazi mpya: kurejesha hali.

Mfano wa kile kinachotokea ikiwa muunganisho haujasasishwa kwa usahihi

4. Udhibiti wa kubadilishana data na seva tl;DR: Sasa tunaweza kurekebisha ubadilishanaji wa data na seva. Hakikisha kushughulikia hitilafu, jaribu tena maombi kwa mteja, kusawazisha data chinichini, na kuweka akiba nje ya mtandao.
Wakati wavuti ilipoundwa, mawasiliano kati ya mteja na seva yalipunguzwa kwa njia kadhaa:

Kubofya kiungo kutatuma GET ili kuleta ukurasa mpya na kuutoa.

Kuwasilisha fomu itatuma POST au GET ikifuatiwa na utoaji wa ukurasa mpya.

Kuingiza picha au kitu kutatuma GET isivyolingana ikifuatiwa na utoaji.

Unyenyekevu wa mtindo huu unavutia sana, na sasa mambo yamekuwa magumu zaidi linapokuja kuelewa jinsi ya kupokea na kutuma habari.

Labda kisanii cha kuudhi zaidi cha wavuti ya zamani

Hii ndiyo sababu wavuti kama jukwaa la programu ilibaki bila kukamilika bila JavaScript. Ajax iliwakilisha hatua kubwa mbele katika suala la urahisi wa uchapishaji wa watumiaji.

Onyo kabla ya kupakua

5. Usivunje historia, iboreshe tl;DR: Ikiwa kivinjari hakidhibiti URL na historia, tutakuwa na matatizo mapya. Hakikisha unakidhi tabia inayotarajiwa ya kusogeza. Hifadhi akiba yako mwenyewe kwa maoni ya haraka.
Kando na kuwasilisha fomu, wakati wa kutumia viungo tu katika programu ya wavuti tutakuwa nayo kabisa urambazaji wa kazi"Mbele/Nyuma" kwenye kivinjari.

Ndiyo maana ninatumia neno "kuvunja". Kwa mfano rahisi wa mtandao wa awali, hali hii haikuwezekana. Kila mabadiliko ya hali yalitokana na mabadiliko ya URL.

Lakini pia kuna upande mwingine wa sarafu - fursa kuboresha historia ya kuvinjari, ambayo sasa tunadhibiti kwa kutumia JavaScript.

Uwezekano mmoja kama huo uliitwa Kurudi Haraka na Daniel Pipius:

Kitufe cha nyuma kinapaswa kufanya kazi haraka; watumiaji hawatarajii mabadiliko mengi ya data.
Ni kama kutibu kitufe cha nyuma kama kitufe kutoka kwa programu ya wavuti na kutumia kanuni #2 kwake: jibu mara moja kwa hatua ya mtumiaji. Jambo kuu ni kwamba una nafasi ya kuamua jinsi ya kuweka cache ukurasa uliopita na kuionyesha mara moja kwenye skrini. Kisha unaweza kutumia kanuni #3 na kisha kumjulisha mtumiaji data mpya inapofika kwenye ukurasa huo.

Uendeshaji usio sahihi wa kitufe cha "Nyuma".

Njia nyingine ya kuvunja urambazaji ni kupuuza kumbukumbu ya hali ya kusogeza. Kwa mara nyingine tena, kurasa ambazo hazitumii JS na usimamizi wa historia ya mwongozo huenda zisiwe na tatizo hapa. Lakini kutakuwa na kurasa zenye nguvu. Nilijaribu milisho miwili maarufu ya habari inayotegemea JavaScript kwenye Mtandao: Twitter na Facebook. Wote wawili walikuwa na amnesia ya kusogeza.

Kugeuza ukurasa bila mwisho ni kawaida ishara ya amnesia ya kusogeza

Baada ya yote, kuwa mwangalifu na mabadiliko ya hali ambayo yanafaa tu wakati wa kutazama historia. Kwa mfano, kesi hii na kubadilisha hali ya subtrees na maoni.

Kubadilisha aina ya maoni lazima kuhifadhiwa katika historia

Ikiwa ukurasa ulitolewa tena baada ya kubofya kiungo ndani ya programu, mtumiaji anaweza kutarajia maoni yote kupanuliwa. Wakati hali inabadilika, lazima ihifadhiwe katika historia.

6. Kusasisha msimbo kupitia push messagestl;DR: Haitoshi kutuma data pekee kupitia ujumbe wa programu, unahitaji pia msimbo. Epuka hitilafu za API na uboreshe utendakazi. Tumia DOM isiyo na uraia kuunda upya programu yako bila uchungu.
Ni muhimu sana kwamba programu yako ijibu mabadiliko katika msimbo.

Kwanza, inapunguza idadi ya makosa iwezekanavyo na huongeza kuegemea. Ikiwa ulifanya mabadiliko muhimu kwa API ya nyuma, basi lazima sasisha msimbo wa programu za mteja. Vinginevyo, wateja wanaweza wasikubali data mpya au wanaweza kutuma data katika umbizo lisilopatana.

Sababu muhimu sawa ni kuzingatia kanuni Nambari 3. Ikiwa kiolesura chako kitajisasisha, basi kuna sababu ndogo kwa watumiaji kuamua kupakia upya ukurasa wao wenyewe.

Baada ya hayo, baadhi ya programu za wavuti hupakia upya ukurasa kwa niaba ya mtumiaji. Kwa mfano, ikiwa ukurasa hauko katika eneo linaloonekana la skrini na hakuna fomu zilizokamilishwa za kuingiza.

Kwa kweli, tunapaswa kuwa na uwezo wa kubadilisha msimbo kila wakati. Hakutakuwa na haja ya kuanzisha tena uunganisho kwenye tundu, kwa mfano, ikiwa inawezekana tu kusasisha msimbo wa sehemu inayohitajika. Usanifu bora wa sasisho za nambari ya kushinikiza kwa hivyo ni msimu.

Lakini tatizo linatokea mara moja jinsi ya kutathmini modules bila madhara zisizohitajika. Usanifu kama ule unaotolewa na React unafaa zaidi hapa. Ikiwa msimbo wa kijenzi utasasishwa, mantiki yake inaweza kutekelezwa tena na DOM itasasishwa. Soma maelezo ya Dan Abramov kuhusu dhana hii.

7. Utabiri wa tabia tl;DR: Ucheleweshaji hasi.
Programu ya kisasa ya JavaScript inaweza kuwa na njia za kutabiri vitendo vya mtumiaji.

Mbinu ya juu zaidi ya kufuatilia ufuatiliaji wa kipanya huchanganua mwelekeo wa kipanya kwa "migongano" ya baadaye na vipengele wasilianifu kama vile vitufe. :

jQuery programu-jalizi inatabiri njia ya panya

Hitimisho Mtandao unasalia kuwa chombo chenye matumizi mengi zaidi cha kusambaza habari. Tunaendelea kuongeza mienendo kwenye kurasa zetu, na kabla ya kuzitekeleza, ni lazima tuhakikishe kwamba tunahifadhi kanuni muhimu za wavuti tulizorithi.

Kurasa zilizounganishwa ni vizuizi vyema vya ujenzi kwa programu yoyote. Kupakia msimbo, mitindo na alama taratibu kadri mtumiaji anavyoingiliana huhakikisha utendakazi bora bila kuacha mwingiliano.

Vipengele vipya vya kipekee vinatolewa na JavaScript. Ikiwa teknolojia hizi zinatumika sana, zitatoa hali bora ya matumizi kwa watumiaji wa jukwaa huria zaidi kuwepo - WWW.

Lebo:

utulivu
utendaji
PJAX
Viungo vya Turbo

Ongeza lebo kwenye nakala hii

IMECHAPISHWA NA

Idara ya Wasanidi Programu wa Microsoft, timu za maendeleo za NET na Studio ya Visual Kitengo cha Wasanidi Programu wa Microsoft, .NET, na timu za bidhaa za Visual Studio

Sehemu ya Microsoft Corporation

Njia Moja ya Microsoft Njia Moja Njia ya Microsoft

Redmond, Washington 98052-6399

Haki zote zimehifadhiwa. Haki zote zimehifadhiwa. Kitabu hiki hakiruhusiwi kunaswa tena au kusambazwa, chote au sehemu, kwa namna yoyote au kwa njia yoyote bila idhini ya maandishi ya mchapishaji. Hakuna sehemu ya yaliyomo katika kitabu hiki inayoweza kunaswa tena au kusambazwa kwa njia yoyote au kwa njia yoyote bila idhini ya maandishi ya mchapishaji.

Kitabu hiki kimetolewa "kama kilivyo" na kinaelezea maoni na maoni ya mwandishi. Kitabu hiki kimetolewa "kama ilivyo" na kinaelezea maoni na maoni ya mwandishi. Maoni, maoni na maelezo yaliyomo katika kitabu hiki, ikijumuisha URL na viungo vingine vya tovuti, vinaweza kubadilika bila taarifa. Maoni, maoni na maelezo yaliyotolewa katika kitabu hiki, ikijumuisha URL na marejeleo mengine ya tovuti ya mtandao, yanaweza kubadilika bila taarifa.

Baadhi ya mifano iliyotolewa katika kitabu hiki ni kwa madhumuni ya kuonyesha tu na ni ya kubuni. Baadhi ya mifano iliyoonyeshwa hapa imetolewa kwa vielelezo pekee na ni ya kubuni. Ulinganifu wote kwa majina halisi, watu na vitu vingine vyovyote ni vya kutokusudiwa na kwa bahati mbaya. Hakuna uhusiano halisi au muunganisho unaokusudiwa au unapaswa kukisiwa.

Microsoft na chapa za biashara zilizoorodheshwa kwenye ukurasa wa Alama za Biashara katika https://www.microsoft.com ni chapa za biashara za kundi la kampuni za Microsoft. Microsoft na chapa za biashara zilizoorodheshwa katika https://www.microsoft.com kwenye ukurasa wa tovuti wa “Alama za Biashara” ni chapa za biashara za kundi la kampuni za Microsoft.

Mac na macOS ni alama za biashara za Apple Inc. Mac na macOS ni alama za biashara za Apple Inc.

Nembo ya nyangumi ya Docker imesajiliwa alama ya biashara Docker, Inc. Imetumika kwa ruhusa. Nembo ya nyangumi Docker ni chapa ya biashara iliyosajiliwa ya Docker, Inc. Inatumika kwa ruhusa.

Majina mengine yote na nembo ni mali ya wamiliki wao. Alama zingine zote na nembo ni mali ya wamiliki wao.

Steve Smith - Mbunifu wa Programu na Mkufunzi - Ardalis.com Steve "ardalis" Smith - Mbunifu wa Programu na Mkufunzi - Ardalis.com

Wahariri: Wahariri:

Maira Wenzel Maira Wenzel

Utangulizi

NET Core na ASP.NET Core zina faida kadhaa juu ya ukuzaji wa jadi wa .NET. NET Core na ASP.NET Core hutoa faida kadhaa juu ya ukuzaji wa jadi wa .NET. Unapaswa kutumia .NET Core kwa programu-tumizi za seva yako ikiwa baadhi au yote yafuatayo ni muhimu kwa mafanikio ya programu yako:

Msaada kwa majukwaa tofauti. Usaidizi wa jukwaa la msalaba.

Kwa kutumia microservices. Matumizi ya microservices.

Kutumia vyombo vya Docker. Matumizi ya vyombo vya Docker.

Mahitaji ya utendaji wa juu na uzani. Utendaji wa juu na mahitaji ya scalability.

Utoaji sambamba wa programu ya .NET kwenye seva moja. Matoleo ya kando kwa upande ya matoleo ya .NET kwa programu kwenye seva hiyo hiyo.

Mahitaji haya yanaauniwa na programu nyingi za kawaida za .NET, lakini mifumo iliyoboreshwa ya ASP.NET Core na NET Core hutoa usaidizi ulioimarishwa kwa hali zilizo hapo juu. Programu za jadi za .NET zinaweza na kuauni mengi ya mahitaji haya, lakini ASP.NET Core na NET Core zimeboreshwa ili kutoa usaidizi ulioboreshwa kwa hali zilizo hapo juu.

Mashirika zaidi na zaidi yanachagua kupangisha programu zao za wavuti katika wingu kwa kutumia huduma kama vile Microsoft Azure. Mashirika zaidi na zaidi yanachagua kupangisha programu zao za wavuti katika wingu kwa kutumia huduma kama vile Microsoft Azure. Unapaswa kuzingatia kupangisha programu yako katika wingu ikiwa yafuatayo ni muhimu kwa programu au shirika lako:

Kupunguza uwekezaji katika kituo cha data (vifaa, programu, majengo, huduma za umma, usimamizi wa seva, n.k.) Uwekezaji uliopunguzwa katika gharama za kituo cha data (vifaa, programu, nafasi, huduma, usimamizi wa seva, n.k.)

Bei zinazobadilika (malipo ya kutumika kweli, sio rasilimali zisizo na kazi). Bei nyumbufu (kulipa kulingana na matumizi, si kwa uwezo wa kutofanya kitu).

Kuegemea kipekee. Kuegemea sana.

Uhamaji wa programu ulioboreshwa, urahisi wa kubadilisha mahali na jinsi unavyozipeleka. Kuboresha uhamaji wa programu; badilisha kwa urahisi mahali na jinsi programu yako inatumiwa.

Uwezo nyumbufu, unaoweza kuongezeka kulingana na mahitaji halisi. Uwezo wa kubadilika punguza juu au chini kulingana na mahitaji halisi.

Kuunda programu za wavuti na ASP.NET Core inayopangishwa kwenye Azure ina faida nyingi za ushindani juu ya njia mbadala za jadi. Kuunda programu za wavuti na ASP.NET Core, iliyoandaliwa Azure, inatoa faida nyingi za ushindani juu ya njia mbadala za jadi. Msingi wa ASP.NET umeboreshwa kwa mazoea ya kisasa ya ukuzaji wavuti na hali za upangishaji wa wingu. Msingi wa ASP.NET umeboreshwa kwa mazoea ya kisasa ya ukuzaji wa programu za wavuti na hali za upangishaji wa wingu. Katika somo hili, utajifunza jinsi ya kuunda programu-tumizi za ASP.NET Core ili kufaidika kikamilifu na uwezo huu. Katika mwongozo huu, utajifunza jinsi ya kusanifu programu zako za ASP.NET Core ili kufaidika vyema na uwezo huu.

Kusudi

Hati hii ni mwongozo kamili juu ya uumbaji monolithic programu za wavuti kwa kutumia ASP.NET Core na Azure. Mwongozo huu unatoa mwongozo wa mwisho hadi mwisho juu ya ujenzi monolithic programu za wavuti kwa kutumia ASP.NET Core na Azure. Katika muktadha huu, monolithic inamaanisha kuwa programu hizi hutumwa kama kitengo kimoja, badala ya kama mkusanyiko wa huduma na programu zinazoingiliana. Katika muktadha huu, "monolithic" inarejelea ukweli kwamba programu hizi zinatumwa kama kitengo kimoja, si kama mkusanyiko wa huduma na programu zinazoingiliana.

Mwongozo huu ni nyongeza ya huduma ndogo ndogo" .WAVU. Usanifu wa programu za NET"kwa kuzingatia Docker, huduma ndogo ndogo, na uwekaji wa kontena kwa ajili ya kupangisha programu za biashara. Mwongozo huu ni nyongeza kwa " NET Microservices. Usanifu wa Programu za NET" ambayo inazingatia zaidi Docker, Microservices, na Usambazaji wa Vyombo ili kukaribisha maombi ya biashara.

NET Microservices. NET Microservices. Usanifu wa NET kwa Kontena. Maombi ya NET

e-kitabu
https://aka.ms/MicroservicesEbook
Sampuli ya Maombi
https://aka.ms/microservicesarchitecture

Nani anapaswa kutumia mwongozo huu

Mwongozo huu kimsingi unakusudiwa wasanidi programu, wasimamizi wa uendelezaji, na wasanifu wanaotaka kujenga programu za kisasa za wavuti kwa kutumia teknolojia na huduma za Microsoft katika wingu. Hadhira ya mwongozo huu ni watengenezaji, viongozi wa uendelezaji, na wasanifu ambao wana nia ya kujenga programu za kisasa za wavuti kwa kutumia teknolojia na huduma za Microsoft katika wingu.

Watazamaji wa pili ni wale wanaohusika na kuasili ufumbuzi wa kiufundi ambao tayari wanafahamu ASP.NET au Azure na wanataka taarifa kuhusu kupata toleo jipya la ASP.NET Core ili kuendeleza miradi mipya na kusaidia miradi iliyopo. Hadhira ya pili ni watoa maamuzi wa kiufundi ambao tayari wanaifahamu ASP.NET au Azure na wanatafuta maelezo kuhusu kama inafaa kupata toleo jipya la ASP.NET Core kwa miradi mipya au iliyopo.

Jinsi unavyoweza kutumia mwongozo huu

Mwongozo huu umefupishwa kuwa hati fupi ambayo inalenga katika kujenga programu za wavuti kwa kutumia teknolojia za kisasa za NET na Windows Azure. Mwongozo huu umefupishwa kuwa hati ndogo ambayo inalenga katika kujenga programu za wavuti kwa teknolojia za kisasa za NET na Windows Azure. Kwa hivyo, ili kupata uelewa wa kimsingi wa programu hizi na kuelewa mapendekezo ya kiufundi yanayohusiana, tafadhali soma hati nzima. Kwa hivyo, inaweza kusomwa kwa ukamilifu ili kutoa msingi wa kuelewa maombi kama haya na masuala yao ya kiufundi. Mwongozo huu, pamoja na utumizi wa mfano, unaweza kuwa mahali pazuri pa kuanzia au hati muhimu ya kumbukumbu. Mwongozo, pamoja na utumizi wake wa sampuli, unaweza pia kutumika kama sehemu ya kuanzia au marejeleo. Tumia mfano wa programu iliyotolewa kama kiolezo cha programu zako mwenyewe, au kuona jinsi unavyoweza kupanga vipengele vya programu. Tumia sampuli ya programu inayohusishwa kama kiolezo cha programu zako mwenyewe, au kuona jinsi unavyoweza kupanga sehemu za sehemu ya programu yako. Unapoamua kama utatumia chaguo hizi kwa programu yako, unaweza kurejelea kanuni na maelekezo ya usanifu yaliyofafanuliwa katika mwongozo wakati wowote. na uwezo wa kiteknolojia. Rejea kwenye kanuni za mwongozo na ushughulikiaji wa chaguzi za usanifu na teknolojia na masuala ya maamuzi unapopima chaguo hizi kwa matumizi yako mwenyewe.

Ikibidi, unaweza kupendekeza mwongozo huu kwa washiriki wa timu yako ili wao pia wafahamu vipengele vyote muhimu. Jisikie huru kusambaza mwongozo huu kwa timu yako ili kusaidia kuhakikisha uelewa wa pamoja wa masuala haya na fursa. Ikiwa yote watu wanaopendezwa itatumia seti ya kawaida ya istilahi na kuzingatia kanuni za kimsingi, miundo ya usanifu na mazoea yatatumika kwa uthabiti zaidi. Kuwa na kila mtu kufanya kazi kutoka kwa seti ya pamoja ya istilahi na kanuni za msingi husaidia kuhakikisha matumizi thabiti ya mifumo na mazoea ya usanifu.

Marejeleo