ZANA ZA KISASA ZA KUENDELEZA TOVUTI ZA MTANDAO NA MAOMBI YA WAVUTI
Krupina Tatyana Aleksandrovna 1, Shcherbakova Svetlana Mikhailovna 1
1 Moscow Pedagogical Chuo Kikuu cha Jimbo, mwanafunzi wa bwana
maelezo
Makala hii imejitolea kukagua njia za kisasa uundaji wa tovuti na programu za Wavuti. Shida za kufundisha wanafunzi na watoto wa shule teknolojia hizi pia zinajadiliwa.
TOVUTI ZA KISASA ZA MAENDELEO MTANDAONI NA MATUMIZI 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 jamii ya kisasa kuhusishwa na kuanzishwa kwa zana na njia za habari na teknolojia za mawasiliano(TEHAMA) katika maeneo mbalimbali ya shughuli za binadamu. Jukumu maalum katika mchakato huu bila shaka ni mali ya maendeleo teknolojia za mtandao na mawasiliano, ambayo, kati ya mambo mengine, inajidhihirisha katika kuundwa kwa mifumo ya habari ya automatiska ya ushirika na miradi ya mtandao biashara ya mtandaoni. 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 kuendeleza tovuti rahisi, ikiwa ni pamoja na tovuti ya kadi ya biashara yenye maelezo na maelezo ya mawasiliano, unaweza kutumia njia tofauti:
- kuunda hati ya HTML, i.e. ukitumia kihariri cha Notepad, chapa msimbo ndani Lugha ya HTML V hali ya mwongozo 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 Mhariri wa Adobe Dreamweaver, kuchukua faida ya anuwai ya huduma na urahisishaji;
- 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. Lugha inayotumika kutengeneza programu za Wavuti ni PHP programu, na pia haiwezi kufanya bila, kwa mfano, seva ya ndani Hifadhidata za Apache na MySQL.
Wacha tuangalie zana zingine zaidi za programu ya programu ya Wavuti:
- lugha Upangaji wa JavaScript kutumika kuunda nyaraka za HTML zinazoingiliana;
- VBScript inatumika kwa uandishi wa mteja na pia uandishi wa seva;
- Perl hutumiwa kwa maendeleo ya zana utawala wa mfumo, na vile vile katika ukuzaji wa hati za CGI, mifumo ya usindikaji wa barua pepe kiotomatiki na usaidizi wa Tovuti.
Ili kuunda programu za Wavuti kwa uhuru, unaweza kutumia rasilimali ya Denwer iliyosambazwa kwa uhuru.
Denwer (kutoka kwa kifupi DNVR - seti ya muungwana Web developer) ni seti ya vifaa vya usambazaji na shell ya programu ambayo imeundwa kwa ajili ya kuunda na kutatua programu za Wavuti na maudhui mengine yanayobadilika ya kurasa za Wavuti kwenye Kompyuta inayoendesha OS.
Seti ya Denwer ni pamoja na:
- mtaa Seva ya Apache kuendesha programu kwenye kompyuta ya mtumiaji, kuiga utendakazi seva ambapo mtoa huduma atasakinisha programu iliyotengenezwa. Apache ni programu ya jukwaa la msalaba, inasambazwa 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 maombi") iliundwa na Michael Widenius kutoka 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.
Programu za muundo wa wavuti zimebadilisha jinsi wabunifu wamekuwa wakiunda tovuti kwa muda mrefu. Kutumia zana za kisasa hurahisisha mambo na kwa haraka zaidi, kwa mfano ikiwa unatumia programu za kukamilisha kiotomatiki na makro. Leo, wabunifu wanaopendelea kubuni kwa kuonekana wanaweza kutumia baadhi ya programu hizi kutengeneza miundo ambayo inaweza kugeuzwa kuwa msimbo ambao utabandikwa mtandaoni.
Ukweli ni kwamba majukwaa mengi ya ukuzaji wa wavuti siku hizi hurahisisha zaidi kwa wataalamu kukuza tovuti zao. Kwa mfano, ikiwa uko nje ya anuwai ya muunganisho wa Mtandao na unataka kuendelea kufanya kazi kwenye mradi wako, programu kama hizi zitasaidia sana katika hili.
Kuna idadi kubwa programu kubwa kwa ukuzaji wa wavuti, na hapa kuna zingine bora ambazo unaweza kufikiria kutumia.
Hii ni programu ambayo inaweza kukusaidia kuunda tovuti zako za kitaalamu za kawaida kwa dakika chache. Hii programu bora, ambayo unapaswa kuzingatia ikiwa unatafuta zana ya ukuzaji wa wavuti ambayo itakufanyia kila kitu, haswa ikiwa uko Mtumiaji wa Windows. Kuna matoleo mawili - ya bure na ya juu ( toleo la kulipwa), lakini zote mbili zinavutia kwa usawa. Programu inachanganya muundo wa WYSIWYG na kuweka msimbo, hukupa zana ambayo haifanyi kazi haraka sana, lakini pia ni rahisi sana kujifunza. Toleo la bure linaweza kukosa baadhi ya vipengele vinavyopatikana katika toleo la kulipwa, lakini bado ni programu ya kushangaza ambayo inastahili tahadhari yako.
Hii ndiyo programu bora zaidi kutumia, tovuti zinazoitikia ambazo pia zitaonekana kuwa za kupendeza kama kuwashwa kompyuta rahisi, na kuendelea vifaa vya simu. Ukiwa na Mobirise, kuunda tovuti kunaweza kufurahisha sana. Chombo kinakuja na vitalu tofauti, ambayo wasanidi wa wavuti wanaweza kuchagua na kuburuta mahali ambapo wangependa kuziweka, na kisha kubadilisha mipangilio chaguo-msingi ili kukidhi mahitaji yao.
Ni kwa wote mhariri wa maandishi, ambayo inakuja na zana nyingi za kushangaza kwa watengenezaji wa wavuti. Labda asiwe bora, lakini yeye ni mzuri. Hii Kiolesura cha Windows, ambayo hutoa kihariri bora cha programu ambacho kinajumuisha violezo vya lugha za kawaida za programu kama vile HTML, VBScript, mteja wa FTP, PHP.
Programu sikivu sana ya ukuzaji wa wavuti ambayo unapaswa kuzingatia kama moja ya zana za miradi yako. Inapatikana toleo la bure na vizuizi kwa vipengele unavyoweza kutumia, na toleo la kulipia ambapo unapewa utendakazi kamili ambao unaweza kutumia katika uundaji wa wavuti yako. TOWeb ni programu rahisi sana kutumia ambayo ina violezo vya ajabu ambavyo vinaweza kubinafsishwa kulingana na mahitaji yako. Kama zana iliyotangulia, TOWeb inasaidia lugha nyingi za programu.
Hii ndiyo programu bora zaidi unayoweza kutumia ikiwa unataka kuunda uhuishaji wa ajabu wa tovuti zako. Mara nyingi hutumiwa na wabunifu wanaohusika katika uhuishaji na utangazaji, kwa hivyo ikiwa wewe ni aina ya mbuni ambaye huunda vipengee vya uhuishaji kwa matumizi katika programu zingine ambazo zinaweza kupatikana kwenye majukwaa yote, basi programu tumizi hii ndio unayohitaji. Kuna idadi ya vipengele ambavyo una hakika kupenda kuhusu programu hii, ikiwa ni pamoja na ushirikiano wa Hifadhi ya Google, matukio, vipengee vya 3D, safu, na zaidi.
Kihariri rahisi sana cha kuburuta na kudondosha, kinachofaa zaidi kwa wanaoanza wanaotengeneza tovuti zao za kwanza. Programu hii inakuja na upangishaji bila malipo na kurasa zisizo na kikomo, kati ya vipengele vingine vyote vyema. Ikiwa unataka kuunda tovuti ya ajabu bila kutumia muda mwingi kuunda, basi mpango huu utakuja kwa manufaa.
Programu nzuri ambayo unaweza kuanza kutumia sasa hivi. Chombo kinatokana na Firefox na matoleo mbinu ya kisasa kuunda tovuti kubwa. Ina vipengele bora, na ingawa vingi vinakuhitaji kununua leseni ya kutumia, kuna baadhi ambayo hutolewa kwako bila malipo, pamoja na matumizi machache.
Huu ni programu ya wavuti ambayo ni nzuri kwa ukuzaji wa wavuti, hata hivyo, kwa sababu ya ugumu wake, haifai kabisa kwa Kompyuta. Hata hivyo, licha ya ukweli kwamba chombo si rahisi kutumia, hutoa fursa nzuri kwa wale ambao tayari wana uzoefu fulani katika maendeleo ya mtandao.
Kihariri cha maandishi ambacho kimekusudiwa tu kwa wasanidi wa wavuti waliobobea zaidi. Ukweli kwamba ni zana ya msingi wa maandishi hufanya kuwa haifai kabisa kwa wanaoanza, lakini ikiwa una uzoefu kidogo wa usimbaji, basi ni programu inayofaa kuzingatiwa kwa miradi ya ukuzaji wa wavuti. Ni ndogo na nyepesi, unaweza hata kubeba kwenye gari la flash. SynWrite ni zana iliyoangaziwa kamili, iliyo na rekodi kubwa, historia ya ubao wa kunakili, programu-jalizi, usaidizi wa usimbaji, uhakiki na palette. Pia huruhusu wasanidi programu kutafuta na kubadilisha katika faili nyingi pamoja na mifumo ya msimbo. Labda hii ndiyo programu bora zaidi ambayo itatumika katika mradi mzima - kutoka kwa kuunda mpangilio hadi kuandika nambari.
Ni programu maridadi ya ukuzaji wavuti ambayo inaweza kukusaidia kuunda tovuti nzuri na za kupendeza. Programu ya mtandaoni ambayo inatoa fursa kubwa, ikiwa unawalipa, yaani, unaweza kutarajia kidogo vipengele zaidi, ikiwa uko tayari kutengana na dola chache za ziada. Pia kuna toleo la bure, hata hivyo halina vipengele vingi kama toleo lililolipwa.
Programu za ukuzaji wa wavuti zimeundwa ili kurahisisha kazi yako kwa kutoa baadhi ya vipengele na zana ambazo utahitaji kama msanidi. Chaguo lako linapaswa kutegemea vipengele unavyotafuta na aina ya tovuti ambayo ungependa kuunda.
Maendeleo ya programu ya wavuti ni nini?
Uundaji wa programu ya wavuti ni neno la jumla kwa mchakato wa kuunda kurasa za wavuti au tovuti. Kurasa za wavuti zinaundwa na kwa kutumia HTML, CSS na JavaScript. Kurasa hizi zinaweza kuwa na maandishi rahisi na michoro, inayofanana na hati tuli. Kurasa pia zinaweza kuingiliana au kuonyesha habari inayobadilika. Kuunda kurasa zinazoingiliana ni ngumu zaidi, lakini hukuruhusu kuunda tovuti zenye maudhui. Leo, kurasa nyingi zinaingiliana na hutoa habari mpya huduma za mwingiliano, kama vile mikokoteni ya ununuzi mtandaoni, taswira inayobadilika na hata mitandao changamano ya kijamii.
Maendeleo ya maombi ya kompyuta za kisasa hufanywa kwa kutumia lugha maalum za programu. Nyenzo hizi za utangulizi zitakusaidia kuzifahamu.
Video | Dakika 15 | Lugha za programu
Ripoti hii inazungumza kuhusu kwa nini lugha za programu zinahitajika, ni nini, na ni madhumuni gani zimekusudiwa. Lugha za alama (HTML), uwakilishi wa data (XML), na lugha za maswali (SQL) pia zimetajwa kwa ufupi.
Video | Dakika 23 | Lugha za programu
Ripoti hii inatoa mapitio mafupi lugha ya programu ya C #, sifa zake kuu na miundo, inaonyesha mifano ya kuunda kiweko rahisi na programu tumizi za Windows katika Visual Studio 2010.
Chunguza uwezo tajiri wa chumba cha upasuaji Mifumo ya Windows, ambayo inaweza na inapaswa kutumika wakati wa kuunda programu za wavuti.
| 4 | zana za maendeleo |
Video | Dakika 10 | WebMatrix
Hadithi fupi kuhusu WebMatrix - mazingira ya kukuza tovuti. WebMatrix hukuruhusu kuunda tovuti za ugumu tofauti: kutoka ukurasa wa nyumbani hadi mdogo portal ya ushirika. Mazingira ni pamoja na seti ya violezo vya tovuti ambavyo vinaweza kutumika kama msingi wa kuunda tovuti yako mwenyewe. WebMatrix hukuruhusu kuunda na kuhariri alama na msimbo wa tovuti, na pia kudhibiti hifadhidata na kuchapisha tovuti zilizotengenezwa tayari kwa upangishaji.
Video | Dakika 11 | Internet Explorer
Mazungumzo haya yanatoa muhtasari mfupi wa teknolojia ya Sites Zilizobandikwa iliyoletwa katika Internet Explorer 9. Inaonyesha jinsi ya kufanya kazi na Orodha za Rukia, Aikoni za Uwekeleaji, na Vifungo vya Upau wa Vijipicha.
Nyenzo zilizo hapa chini zitakusaidia kupata ujuzi wa ziada katika eneo lako linalokuvutia.
Katika suala hili, swali ni - ni nini kingine unahitaji kujua?Kwa hali yoyote, unahitaji backend 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 maendeleo ya mbele, na kwa hakika imeunganishwa 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, mwisho wa mbele umeandikwa katika JS na wengi wanavutiwa na ukweli kwamba unaweza kusakinisha NodeJS kwenye sehemu ya nyuma na kuunda tovuti kwa kutumia lugha moja, basi 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, programu za kisasa zinaweza kutumia kadhaa, au hata mamia, ya mwisho. Kwa kuongezea, hizi zinaweza kuwa lugha tofauti za 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 hakika, ninafanya kazi ndani ya 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, toa ufikiaji wa data kwa wahusika wengine maombi ya washirika, na kupitia API moja.
Ni nini kingine kinachohitajika kujifunza? Au ujuzi ulioorodheshwa unatosha?Sidhani hiyo inatosha. 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 ndani 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.
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 imekuwa bila shaka chombo cha lazima kwa watengenezaji wa mbele. Sasa wigo wake unapanuka hadi maeneo mengine kama vile seva na vidhibiti vidogo. Lugha hii ya programu imechaguliwa na vyuo vikuu vya kifahari ili kuwafundisha wanafunzi misingi ya sayansi ya kompyuta.
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, nyuma 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, alilipa Tahadhari maalum wazo la kupunguza muda unaomchukua mtumiaji kupata data anayopenda. Kuanzia misingi ya teknolojia ya mtandao na kuishia na kutabiri tabia ya mtumiaji wa siku zijazo.
1. Kutoa kurasa kwenye seva ni hiaritl;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, 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 moja badala ya 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 kilomita 4320.
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 kupeleka Boston 4320 km / 200 x 10^6 m/s = 21.6 m/s.
Kuchelewa kwa safari ya kwenda na kurudi 43.2 m/s.
Ping kutoka Stanford hadi Boston kwenye Mtandao wa kisasa ni takriban ms 85 (...)
Kwa hiyo, vifaa vya kisasa Mtandao hupeleka 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. .
Hii ni muhimu hasa kwa kuongezeka kwa umaarufu wa programu za JavaScript, ambazo kwa kawaida huwa na alama na sehemu tupu karibu nayo. Kinachojulikana kama 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 kupata yaliyomo kwenye hati, na tena kupata yaliyomo.
Kuchanganua HTML iliyotumwa na seva kwa kila ukurasa wa SPA
Watengenezaji wengi kwa uangalifu hufanya dhabihu kama hiyo. Wanajaribu kuhakikisha kuwa mtandao wa ziada humle itatokea mara moja tu kwa mtumiaji, kutuma vichwa sahihi kwa caching 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 - ukurasa mtupu 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 maandishi, ubadilishanaji wa pakiti mbili za ziada hufanyika (moja ikiwa mteja atarejesha kikao). 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 athari 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.
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 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."
Katika baadhi ya matukio, haina maana katika wakati huu Kwa mtumiaji, ni bora kuwatenga sehemu ya ukurasa kutoka kwa majibu ya awali na kuiacha 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 inatoa mwitikio bora hata katika hali iliyo na nyuma polepole, iliyopitwa na wakati. Kwa baadhi ya kurasa chaguo nzuri Ni sehemu inayoonekana tu ya ukurasa itatolewa.
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 kiasi unaofaa ambao hugawanya uwasilishaji kati ya kivinjari na seva na kutoa zana za kupakia hati na mitindo hatua kwa hatua unaweza kutia ukungu kati ya mstari. 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 wa mapema matoleo ya HTML 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 kukusanywa kuwa sehemu moja kwa kuruka, basi inaweza kuwa ngumu kama inavyotarajiwa, na hata ikiwa ugumu ni mdogo, bado tutakuwa na shida. matatizo makubwa na utendaji kutokana na muundo wa nyaraka 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 hii?
2. Jibu la haraka kwa vitendo vya mtumiajitl;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.
Kazi yetu 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.
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 kwa sifuri.
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 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."
Aina nyingine ya kitendo isipokuwa mibofyo na mawasilisho ya fomu ambayo yanaboresha sana kwa kutumia JavaScript, ni utoaji 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
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 uliotajwa mara kwa mara:
Ushauri wa wakati wa majibu ya kimsingi umebaki vile vile 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 kwa 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 datatl;DR: Wakati data inasasishwa kwenye seva, mteja anapaswa kuarifiwa bila kuchelewa. Hii ni aina ya uboreshaji wa tija ambapo mtumiaji ameachiliwa kutoka kwa kulazimika 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.
Mtindo wa maambukizi unakuwa kitu cha zamani. Data ya HTML, ambayo hubaki tuli 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.
Hebu fikiria Mlisho wa Habari wa Facebook mara tu baada ya kuonekana kwa mara ya kwanza, wakati maelezo yalipotumwa kimsingi kutoka 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 kipindi na hali ya uidhinishaji ni mfano mmoja wa mbinu ya ulimwengu wote. Ikiwa watumiaji wa programu yako wana vichupo kadhaa vilivyofunguliwa kwa wakati mmoja, basi mwisho kikao cha kazi kwa mmoja wao anapaswa kulemaza mara moja idhini kwa wengine wote. Hii inasababisha usalama bora na ulinzi bora habari za siri, hasa katika hali ambapo watu kadhaa wanapata 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 katika kesi hiyo sasisho lisilo sahihi mawasiliano
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 sevatl;DR: Sasa tunaweza kurekebisha ubadilishanaji wa data na seva. Hakikisha kushughulikia makosa, maombi yanayorudiwa kwa mteja, maingiliano ya data ndani usuli na kuhifadhi akiba nje ya mtandao.
Wakati wavuti ilipoundwa, mawasiliano kati ya mteja na seva yalipunguzwa kwa njia kadhaa:
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.
Fikiria uwezekano wa kuisha na makosa wakati wa kutuma data hali kama hizo zinapaswa kutatuliwa kwa niaba ya mteja. Ikiwa muunganisho umerejeshwa, jaribu kutuma data tena. Lini kosa la kudumu, mjulishe mtumiaji kuhusu hili.
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 kuelekea kwenye ukurasa mwingine, kama vile kubofya kiungo. Katika kesi hii, programu inaweza kusimamisha mtumiaji kutumia njia zingine, kwa hiari ya msanidi programu.
5. Usivunje hadithi, iboreshetl;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 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.
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 kutakuwa na kurasa zenye nguvu. Nilijaribu mbili maarufu zaidi mipasho ya habari Mtandao wa JavaScript: 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 programutl;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 yanayowezekana 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.
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 nyingi maombi yaliyopo Ni vigumu sana kubadilishana msimbo motomoto. 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 umesasishwa, mantiki yake inaweza kutekelezwa tena na DOM itasasishwa. Soma maelezo ya Dan Abramov kuhusu dhana hii.
Kimsingi, wazo ni kwamba usasishe DOM (au uipake rangi upya), ambayo kimsingi husaidia na 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 tabiatl;DR : Ucheleweshaji hasi.
Programu ya kisasa ya JavaScript inaweza kuwa na njia za kutabiri vitendo vya mtumiaji.
Utumizi 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 ufuatiliaji wa ufuatiliaji wa panya huchanganua mwelekeo wa kipanya kwa "migongano" ya baadaye na vipengele wasilianifu kama vile vitufe. :
jQuery programu-jalizi inatabiri njia ya panya
Mtandao unasalia kuwa njia inayotumika zaidi ya kusambaza habari. Tunaendelea kuongeza mienendo kwenye kurasa zetu na lazima tuhakikishe kwamba tunadumisha kanuni muhimu mtandao, ambao tulirithi.
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.
Mpya fursa za kipekee hutoa JavaScript. Ikiwa teknolojia hizi zinatumiwa sana, zitatoa uzoefu bora kazi kwa watumiaji wa jukwaa huru zaidi kuwepo - WWW.
