MGA MODERNONG TOOL PARA SA PAGBUO NG MGA INTERNET SITES AT WEB APPLICATIONS
Krupina Tatyana Aleksandrovna 1, Shcherbakova Svetlana Mikhailovna 1
1 Moscow Pedagogical Pambansang Unibersidad, mag-aaral ng master
anotasyon
Ang artikulong ito ay nakatuon sa pagsusuri modernong paraan pagbuo ng mga site sa Internet at mga Web application. Ang mga problema ng pagtuturo sa mga mag-aaral at mga mag-aaral sa mga teknolohiyang ito ay tinalakay din.
MODERN DEVELOPMENT TOOLS ONLINE SITES AT WEB-APPLICATIONS
Krupina Tatiana Aleksandrovna 1 , Shcherbakova Svetlana Mikhajlovna 1
1 Moscow State Pedagogical University, Graduate ng Department of Applied Mathematics at IT
Abstract
Ang artikulong ito ay nagbibigay ng pangkalahatang-ideya ng pagbuo ng mga modernong website at Web-based na application. Tinatalakay din nito ang problema ng pagsasanay sa mga mag-aaral at mag-aaral ng mga teknolohiyang ito.
Impormasyon modernong lipunan nauugnay sa pagpapakilala ng mga kasangkapan at pamamaraan ng impormasyon at teknolohiya ng komunikasyon(ICT) sa iba't ibang larangan ng aktibidad ng tao. Espesyal na tungkulin sa prosesong ito ay walang alinlangan na kabilang sa pag-unlad mga teknolohiya ng network at mga komunikasyon, na, bukod sa iba pang mga bagay, ay nagpapakita ng sarili sa paglikha ng mga corporate automated information system at mga proyekto sa network ecommerce. Sa katunayan, ang mga aktibidad ng anumang modernong negosyo, isang paraan o iba pa, ay nauugnay sa paglikha at pagpapanatili ng isang corporate website.
Ang Modern Federal State Educational Standards (FSES) sa marami hindi lamang sa engineering kundi pati na rin sa humanitarian na mga lugar ay nangangailangan ng mga nagtapos na magkaroon ng mga kasanayan upang bumuo at pamahalaan ang mga site sa Internet.
Ang mga pamamaraan at tool para sa pagbuo ng mga Internet site at Web application ay dynamic na umuunlad mula sa kakayahang lumikha ng mga simpleng business card site hanggang sa pagbuo ng mga server application na nagpoproseso at nag-iimbak ng malalaking halaga ng data.
Upang bumuo ng isang simpleng website, kabilang ang isang website ng business card na may paglalarawan at impormasyon sa pakikipag-ugnayan, maaari mong gamitin iba't ibang paraan:
- paglikha ng HTML na dokumento, i.e. gamit ang Notepad editor, i-type ang code sa HTML na wika V manu-manong mode at ipatupad ito gamit ang isang browser sa workstation ng kliyente, at pagkatapos ay i-publish ito kasama ng provider gamit ang mga serbisyo sa pagho-host nito;
- paggawa ng parehong HTML na dokumento gamit ang Adobe editor Dreamweaver, sinasamantala ang malawak na hanay ng mga tampok at kaginhawahan;
- gumamit ng mga nakahandang shell site para sa pagbuo ng mga Web site ng iba't ibang mga temang lugar at disenyo at i-publish din ang site sa Internet gamit ang libre o bayad na mga serbisyo sa pagho-host.
Hindi tulad ng pagbuo ng simple at hindi interactive na mga site, para sa pagbuo ng mga Web application na nagpapatakbo at nagpoproseso ng data sa server, kinakailangan ang mga pamamaraan at tool na umakma sa mga ipinahiwatig sa nakaraang talata. Ang pagbuo ng mga Web application ay nagsasangkot, bilang karagdagan sa paglikha ng HTML code, programming sa isang espesyal na wika. Ang wikang ginagamit sa pagbuo ng mga Web application ay PHP programming, at hindi rin magagawa nang wala, halimbawa, lokal na server Mga database ng Apache at MySQL.
Tingnan natin ang ilan pang mga tool sa programming ng Web application:
- wika JavaScript programming ginagamit upang lumikha ng mga interactive na HTML na dokumento;
- VBScript ay ginagamit para sa client scripting pati na rin ang server scripting;
- Ang Perl ay ginagamit para sa pagbuo ng tool pangangasiwa ng sistema, pati na rin sa pagbuo ng mga CGI script, awtomatikong sistema ng pagproseso ng email at suporta para sa mga Web site.
Upang independiyenteng bumuo ng mga Web application, maaari mong gamitin ang malayang ipinamamahaging mapagkukunan ng Denwer.
Denwer (mula sa abbreviation na DNVR - set ng maginoo Web developer) ay isang set ng mga distribution kit at isang software shell na idinisenyo para sa paggawa at pag-debug ng mga Web application at iba pang dynamic na content ng mga Web page sa isang PC na nagpapatakbo ng OS.
Kasama sa Denwer set ang:
- lokal Apache server upang magpatakbo ng mga application sa computer ng user, na ginagaya functionality server kung saan i-install ng provider ang binuong application. Ang Apache ay cross-platform software, malayang ipinamamahagi at sinusuportahan ng iba't ibang operating system;
- Ang PHP programming system ay isang C-like na wika para sa pagbuo ng mga program code na naka-embed sa HTML code ng isang site at ini-execute sa server para sa layunin ng pagproseso ng data na natanggap mula sa mga user ng isang partikular na site. PHP (Hypertext Preprocessor - "Hypertext Preprocessor", orihinal na Personal Home Page Tools - "Mga tool para sa paglikha mga personal na web page") – wika ng script Pangkalahatang layunin, na ginamit para sa pagbuo ng mga Web application, ay nilikha ni Rasmus Lerdorf noong 1994;
- Ang MySQL ay malayang magagamit na software para sa pagproseso ng mga database, kabilang ang kapag nagtatrabaho sa data na natanggap mula sa mga browser ng kliyente. MySQL (Structured Query Language - " Nakabalangkas na wika requests") ay nilikha ni Michael Widenius mula sa kumpanyang Swedish TcX noong 1995.
Itakda Mga programa sa Denwer o ang mga bahagi nito nang paisa-isa ay malawakang ginagamit ng mga baguhan at propesyonal upang lumikha at mag-debug ng mga Web application at site. Ang hanay na ito ay malawak ding ginagamit para sa mga layuning pang-edukasyon upang magturo ng Web programming sa mga mag-aaral at mag-aaral.
Binago ng mga application sa disenyo ng web ang paraan ng pagdidisenyo ng mga taga-disenyo ng mga website sa mahabang panahon. Ang paggamit ng mga modernong tool ay ginagawang mas madali at mas mabilis ang mga bagay, halimbawa kung gumagamit ka ng auto-completion na mga app at macro. Sa ngayon, maaaring gamitin ng mga designer na mas gustong magdisenyo nang biswal ang ilan sa mga app na ito para gumawa ng mga disenyo na maaaring gawing code na pagkatapos ay mai-pin online.
Ang katotohanan ay ang karamihan sa mga platform ng web development sa mga araw na ito ay ginagawang mas madali para sa mga propesyonal na bumuo ng kanilang mga website. Halimbawa, kung wala ka sa saklaw ng isang koneksyon sa Internet at nais na magpatuloy sa paggawa sa iyong proyekto, ang mga naturang application ay lubos na makakatulong dito.
Mayroong isang malaking bilang mahusay na apps para sa web development, at narito ang ilan sa mga pinakamahusay na maaari mong isaalang-alang na gamitin.
Ito ay isang application na makakatulong sa iyo na lumikha ng iyong sariling propesyonal na karaniwang mga website sa loob ng ilang minuto. Ito pinakamahusay na app, na dapat mong isaalang-alang kung naghahanap ka ng tool sa web development na gagawin ang lahat para sa iyo, lalo na kung ikaw ay Gumagamit ng Windows. Mayroong dalawang bersyon - libre at advanced ( bayad na bersyon), ngunit pareho silang kahanga-hanga. Pinagsasama ng app ang disenyo at coding ng WYSIWYG, na nagbibigay sa iyo ng tool na hindi lamang gumagana nang napakabilis, ngunit napakadaling matutunan. Maaaring kulang ang libreng bersyon ng ilan sa mga feature na makikita sa bayad na bersyon, ngunit isa pa rin itong kamangha-manghang app na nararapat sa iyong pansin.
Ito ang pinakamahusay na app na gamitin, tumutugon na mga website na magmumukha ring aesthetically kasiya-siya tulad ng sa mga simpleng kompyuter, at sa mga mobile device. Sa Mobirise, ang paggawa ng mga website ay maaaring maging napakasaya. Kasama ang tool iba't ibang mga bloke, na maaaring piliin at i-drag ng mga web developer kung saan nila gustong ilagay ang mga ito, at pagkatapos ay baguhin ang mga default na setting upang umangkop sa kanilang mga kinakailangan.
Ito ay pangkalahatan text editor, na may kasamang maraming kamangha-manghang tool para sa mga web developer. Maaaring hindi siya ang pinakamahusay, ngunit tiyak na magaling siya. Ito Windows interface, na nag-aalok ng mahusay na programming editor na may kasamang mga template para sa pinakakaraniwang mga programming language gaya ng HTML, VBScript, FTP client, PHP.
Isang napaka-tumutugon na web development application na dapat mong isaalang-alang bilang isa sa mga tool para sa iyong mga proyekto. Available libreng bersyon na may mga paghihigpit sa mga feature na magagamit mo, at isang bayad na bersyon kung saan inaalok sa iyo ang buong functionality na magagamit mo sa iyong web development. Ang TOWeb ay isang napakadaling gamitin na application na naglalaman ng mga kamangha-manghang template na maaaring i-customize ayon sa iyong pangangailangan. Tulad ng nakaraang tool, sinusuportahan ng TOWeb ang maraming mga programming language.
Ito ang pinakamahusay na application na maaari mong gamitin kung nais mong lumikha ng mga kamangha-manghang mga animation para sa iyong mga website. Ito ay kadalasang ginagamit ng mga taga-disenyo na kasangkot sa animation at advertising, kaya kung ikaw ang uri ng taga-disenyo na lumilikha ng mga animated na elemento para magamit sa iba pang mga programa na maaaring ma-access sa lahat ng mga platform, kung gayon ang application na ito ang kailangan mo. Mayroong ilang feature na siguradong magugustuhan mo tungkol sa app na ito, kabilang ang pagsasama ng Google Drive, mga kaganapan, 3D na bagay, layer, at higit pa.
Isang napakasimpleng drag-and-drop na editor, pinakaangkop para sa mga baguhan na bumubuo ng kanilang mga unang website. Ang app na ito ay may kasamang libreng pagho-host at walang limitasyong mga pahina, bukod sa lahat ng iba pang magagandang feature. Kung nais mong lumikha ng isang kamangha-manghang website nang hindi gumugugol ng masyadong maraming oras sa paglikha nito, kung gayon ang program na ito ay magiging kapaki-pakinabang.
Isang mahusay na app na maaari mong simulan ang paggamit ngayon. Ang tool ay batay sa Firefox at mga alok modernong diskarte upang lumikha ng magagandang website. Mayroon itong natitirang mga tampok, at habang karamihan sa mga ito ay nangangailangan sa iyo na bumili ng lisensya para magamit, may ilan na inaalok sa iyo nang libre, kahit na may limitadong paggamit.
Ito ay isang web application na mahusay para sa web development, gayunpaman, dahil sa pagiging kumplikado nito, hindi ito ganap na angkop para sa mga nagsisimula. Gayunpaman, sa kabila ng katotohanan na ang tool ay hindi napakadaling gamitin, nagbibigay ito ng magagandang pagkakataon para sa mga may karanasan na sa web development.
Isang text editor na inilaan lamang para sa mga pinaka advanced na web developer. Ang katotohanan na ito ay isang text-based na tool ay ginagawang hindi ito eksaktong angkop para sa mga nagsisimula, ngunit kung mayroon kang kaunting karanasan sa coding, kung gayon ito ay isang app na nagkakahalaga ng pagsasaalang-alang para sa mga proyekto sa web development. Ito ay maliit at magaan, at maaari mo ring dalhin ito sa isang flash drive. Ang SynWrite ay isang ganap na tampok na tool, na may macro recording, kasaysayan ng clipboard, mga plugin, toneladang tulong sa coding, mga preview, at mga palette. Pinapayagan din nito ang mga developer na maghanap at magpalit sa maraming file pati na rin sa mga pattern ng code. Ito marahil ang pinakamahusay na application na gagamitin sa buong proyekto - mula sa paggawa ng layout hanggang sa pagsusulat ng code.
Ito ay isang naka-istilong web development application na makakatulong sa iyo na lumikha ng makikinang, aesthetically kasiya-siyang mga website. Online na application na nag-aalok magagandang pagkakataon, kung magbabayad ka para sa kanila, iyon ay, maaari kang umasa ng kaunti higit pang mga tampok, kung handa kang makibahagi sa ilang dagdag na dolyar. Mayroon ding libreng bersyon, gayunpaman, wala itong kasing daming feature gaya ng bayad na bersyon.
Ang mga web development application ay idinisenyo upang gawing mas madali ang iyong trabaho sa pamamagitan ng pagbibigay ng ilan sa mga feature at tool na kakailanganin mo bilang isang developer. Ang iyong pagpili ay dapat depende sa mga tampok na iyong hinahanap at ang uri ng website na gusto mong gawin.
Ano ang pagbuo ng web application?
Ang pagbuo ng web application ay isang pangkalahatang termino para sa proseso ng paglikha ng mga web page o website. Ang mga web page ay nilikha gamit ang gamit ang HTML, CSS at JavaScript. Ang mga page na ito ay maaaring maglaman ng simpleng text at graphics, na kahawig ng isang static na dokumento. Ang mga pahina ay maaari ding maging interactive o magpakita ng nagbabagong impormasyon. Ang paglikha ng mga interactive na pahina ay medyo mas kumplikado, ngunit pinapayagan ka nitong lumikha ng mga website na mayaman sa nilalaman. Ngayon, karamihan sa mga page ay interactive at nagbibigay ng up-to-date mga interactive na serbisyo, gaya ng mga online shopping cart, dynamic na visualization at maging ang mga kumplikadong social network.
Ang pagbuo ng mga aplikasyon para sa mga modernong computer ay isinasagawa gamit ang mga dalubhasang programming language. Ang mga panimulang materyales na ito ay tutulong sa iyo na maging pamilyar sa kanila.
Video | 15 minuto | Mga wika sa programming
Ang ulat na ito ay nagsasalita tungkol sa kung bakit kailangan ang mga programming language, kung ano ang mga ito, at kung ano ang layunin ng mga ito. Ang mga markup language (HTML), data representation (XML), at query languages (SQL) ay binanggit din sa madaling sabi.
Video | 23 minuto | Mga wika sa programming
Nagbibigay ang ulat na ito maikling pagsusuri ang C# programming language, ang mga pangunahing tampok at disenyo nito, ay nagpapakita ng mga halimbawa ng paglikha ng mga simpleng console at window application para sa Windows sa Visual Studio 2010.
Galugarin ang mayamang kakayahan ng operating room Mga sistema ng Windows, na maaari at dapat gamitin kapag bumubuo ng mga web application.
| 4 | mga kasangkapan sa pagpapaunlad |
Video | 10 minuto | WebMatrix
Isang maikling kwento tungkol sa WebMatrix - isang kapaligiran para sa pagbuo ng mga website. Binibigyang-daan ka ng WebMatrix na lumikha ng mga website na may iba't ibang kumplikado: mula sa home page hanggang sa maliit portal ng korporasyon. Kasama sa kapaligiran ang isang hanay ng mga template ng website na maaaring magamit bilang batayan para sa paglikha ng iyong sariling website. Binibigyang-daan ka ng WebMatrix na lumikha at mag-edit ng markup at code ng website, gayundin ang pamahalaan ang mga database at mag-publish ng mga handa na website sa pagho-host.
Video | 11 minuto | Internet Explorer
Ang talk na ito ay nagbibigay ng maikling pangkalahatang-ideya ng teknolohiyang Pinned Sites na ipinakilala sa Internet Explorer 9. Nagpapakita kung paano gumana sa Jump Lists, Overlay Icons, at Thumbnail Toolbar Buttons.
Ang mga mapagkukunan sa ibaba ay tutulong sa iyo na makakuha ng karagdagang mga kasanayan sa iyong lugar ng interes.
Sa bagay na ito, ang tanong ay - ano pa ang kailangan mong malaman?Sa anumang kaso, kailangan mo ng backend Kung naiintindihan ko nang tama, ang Angular, Vue at iba pang mga framework ay frontend lamang.
Tama iyan. Kahit saan ka lumingon, ang web development ay binabanggit sa lahat ng dako bilang front-end development, at tiyak na konektado ito sa Node.js (upang magsulat ng isang bagay sa Angular, hindi mo magagawa nang wala ito). Hindi ko maintindihan kung paano nakakonekta ang frontend sa Node.js, dahil... Ang Node.js ay mahalagang paraan upang patakbuhin ang JS sa labas ng browser.
Malamang, nagbabasa ka ng mga artikulo tungkol sa frontend, dahil walang tungkol sa backend sa kanila. Tulad ng alam mo, ang front end ay nakasulat sa JS at marami ang nabighani sa katotohanan na maaari mong i-install ang NodeJS sa backend at lumikha ng mga website gamit ang isang wika Kung gusto kong magpatakbo ng isang application sa isang browser, kung gayon bakit kailangan ko ng node ? Ang lahat ng ito ay nakalilito sa akin;
Huwag malito. May mga teknolohiyang ginagamit sa proseso ng aplikasyon at may mga teknolohiyang ginagamit sa proseso ng pagbuo ng aplikasyon. Ang lahat ng Gulp, Grunt, Babel, Webpack at iba pa ay mga tool sa pag-unlad. Pinapabilis, pinapasimple, at pinapabuti nila ang kalidad ng trabaho. Sa oras na iyon, ang jQuery, Angular, React ay ang mga aklatan at balangkas kung saan gagana ang application.
Kung ang mga dating website ay ginawa gamit ang ilang teknolohiya, ang mga modernong application ay maaaring gumamit ng dose-dosenang, o kahit na daan-daan, sa huli. Bukod dito, maaaring iba ang mga programming language, library, frameworks, serbisyo, atbp. Ang lahat ng ito ay madalas na tinatawag na "zoo" ng teknolohiya.
Dito maaari ko lamang ipagpalagay na ang server, sa halip na html, ay dapat makipagpalitan ng data sa application sa pamamagitan ng json o iba pa.Oo, ang JSON ang pinakakaraniwan. Kailangan mo ng backend framework kung saan maaari mong i-deploy ang REST API. Sa pagkakaalam ko, karamihan sa mga modernong balangkas ng mga modernong programming language na ginagamit para sa web development ay kayang gawin ito. Hindi ko masasabing sigurado, nagtatrabaho ako sa loob ng parehong wika Gayunpaman, ang server ang batayan ng anuman aplikasyon sa network, at una sa lahat kailangan mong bumuo ng bahagi ng server.
Siguradong. Ang mga modernong single page application (SPA) ay binubuo ng dalawang magkahiwalay na bahagi - frontend at backend. Maaari silang ganap na malikha nang hiwalay ng iba't ibang developer, ang pangunahing bagay ay sumang-ayon sa format ng paglilipat ng data at lahat ng mga nuances.
Ang kagandahan ng isang SPA ay nasa paghihiwalay ng mga bahaging ito. Ang alinman sa mga ito ay maaaring palitan ng isa pa nang walang anumang espesyal na kahihinatnan. Ang isang backend ay maaaring maghatid ng mga site, mga mobile application, magbigay ng access sa data para sa mga third party mga aplikasyon ng kasosyo, at lahat sa pamamagitan ng isang API.
Ano pa ang kailangang pag-aralan? O sapat na ba ang nakalistang kaalaman?Hindi pa yata sapat. Tiyak mong tutukuyin ang mga gawain na dapat lutasin ng iyong proyekto at pumili ng mga teknolohiya para sa kanila. Kailangan mong tumuon sa isang bagay, hindi mo magagawang pag-aralan ang lahat ng moderno, hindi magkakaroon ng sapat na oras upang hindi gamitin ang Node.js at, nang naaayon, npm kung JS (TS) ay kinakailangan lamang ang browser? Kasabay nito, kinakailangan din ang pagsubok.
Oo, ito ay medyo. Sa panig ng kliyente, halimbawa, JS+Angular. At sa backend side, halimbawa, PHP + Laravel. Ngayon ay mayroong maraming mga wika at higit pang mga balangkas para sa kanila. Piliin kung ano ang mas madali para sa iyo.
Kamakailan, pangunahin dahil sa UX at pagganap.
Gusto kong magpakita ng 7 naaaksyunan na prinsipyo para sa mga website na gustong gumamit ng JavaScript para kontrolin ang UI. Ang mga prinsipyong ito ay resulta ng aking trabaho bilang isang web designer, ngunit bilang isang matagal nang gumagamit ng WWW.
Ang JavaScript ay hindi maikakailang naging isang kailangang-kailangan na kasangkapan para sa mga front-end na developer. Ngayon ang saklaw nito ay lumalawak sa iba pang mga lugar tulad ng mga server at microcontroller. Ang programming language na ito ay pinili ng mga prestihiyosong unibersidad upang ituro sa mga mag-aaral ang mga pangunahing kaalaman sa computer science.
Kasabay nito, mayroong ilang mga katanungan tungkol sa papel at partikular na paggamit nito, na mahirap sagutin ng marami, kabilang ang mga may-akda ng mga balangkas at aklatan.
- Dapat bang gamitin ang JavaScript bilang kapalit ng mga function ng browser: history, navigation, rendering?
- Namamatay ba ang backend? Kailangan bang mag-render ng HTML?
- Totoo ba na ang Single Page Applications (SPAs) ang kinabukasan?
- Dapat bang bumuo ng mga pahina ang JS sa isang website at mag-render ng mga pahina sa mga web application?
- Dapat ba akong gumamit ng mga diskarte tulad ng PJAX o TurboLinks?
- Ano ang eksaktong pagkakaiba sa pagitan ng isang website at isang web application? Dapat bang mayroong isang bagay na natitira?
Ang susunod ay ang aking mga pagtatangka na sagutin ang mga tanong na ito. Sinubukan kong magsaliksik kung paano gumamit ng JavaScript mula sa pananaw ng karanasan ng gumagamit (UX). Sa partikular, siya ay nagbayad Espesyal na atensyon ang ideya ng pagliit ng oras na aabutin ng gumagamit upang makuha ang data na interesado siya. Simula sa mga pangunahing kaalaman sa mga teknolohiya ng network at nagtatapos sa paghula sa gawi ng user sa hinaharap.
1. Ang pag-render ng mga pahina sa server ay opsyonaltl;DR: Ang pag-render ng server ay ginagawa hindi para sa SEO, ngunit para sa pagganap. Isaalang-alang ang mga karagdagang kahilingan para sa mga script, istilo, at kasunod na mga kahilingan sa API. Sa hinaharap, isaalang-alang ang paggamit ng HTTP 2.0 Push na paraan.
Una sa lahat, kailangan kong ituro ang karaniwang pagkakamali ng paghihiwalay ng "server rendered applications" mula sa "single page applications". Kung gusto nating makamit ang pinakamahusay na karanasan mula sa pananaw ng user, hindi natin dapat limitahan ang ating sarili sa mga naturang limitasyon at iwanan ang isang alternatibo pabor sa isa pa.
Ang mga dahilan ay medyo halata. Ang mga pahina ay ipinapadala sa Internet, na may mga pisikal na limitasyon, gaya ng hindi malilimutang inilarawan ni Stuart Cheshire sa sikat na sanaysay na "It's Latency, Fool":
Ang distansya sa pagitan ng Stanford at Boston ay 4320 km.
Ang bilis ng liwanag sa isang vacuum ay 300 x 10^6 m/s.
Ang bilis ng liwanag sa optical fiber ay humigit-kumulang 66% ng bilis ng liwanag sa isang vacuum.
Ang bilis ng liwanag sa optical fiber ay 300 x 10^6 m/s * 0.66 = 200 x 10^6 m/s.
One-way na pagkaantala kapag nagpapadala sa Boston 4320 km / 200 x 10^6 m/s = 21.6 m/s.
Round trip delay 43.2 m/s.
Ang ping mula Stanford hanggang Boston sa modernong Internet ay humigit-kumulang 85 ms (...)
Kaya, makabagong kagamitan Ang Internet ay nagpapadala ng signal sa bilis na 0.5 beses ang bilis ng liwanag.
Ang ipinahiwatig na resulta ng 85 ms ay maaaring mapabuti (at mas mahusay na ng kaunti), ngunit mahalagang maunawaan na mayroong pisikal na limitasyon sa pagkaantala kapag nagpapadala ng impormasyon sa Internet, gaano man kalaki ang bandwidth sa mga computer ng mga gumagamit ay tumaas. .
Ito ay lalong mahalaga sa pagtaas ng katanyagan ng mga application ng JavaScript, na karaniwang naglalaman lamang ng markup at isang blangkong field sa tabi nito. Tinatawag na single page applications (SPA) - ang server ay nagbabalik ng isang page, at lahat ng iba ay tinatawag sa pamamagitan ng code sa client side.
Isipin ang isang senaryo kung saan direktang ina-access ng user ang http://app.com/orders/. Sa oras na matanggap at maproseso ng iyong aplikasyon ang kahilingang ito, mayroon na itong mahalaga impormasyon tungkol sa kung ano ang kailangang ipakita sa pahina. Maaari itong, halimbawa, mag-load ng isang order mula sa database at idagdag ito sa tugon. Ngunit karamihan sa mga SPA sa sitwasyong ito ay nagbabalik ng isang walang laman na pahina at isang tag. Pagkatapos ay kailangan mong makipagpalitan muli ng mga kahilingan upang matanggap ang mga nilalaman ng script, at muli upang matanggap ang nilalaman.
Pag-parse ng HTML na ipinadala ng server para sa bawat pahina ng SPA
Maraming mga developer ang sinasadyang gumawa ng ganoong sakripisyo. Sinusubukan nilang tiyakin na ang karagdagang network hops isang beses lang mangyayari para sa user, ang pagpapadala tamang heading para sa pag-cache sa mga tugon na may mga script at CSS. Ang tradisyonal na karunungan ay na ito ay isang magandang deal dahil kapag ang lahat ng mga file ay na-download sa computer, karamihan sa mga aksyon ng user (tulad ng pag-navigate sa iba pang mga seksyon) ay nangyayari nang hindi nangangailangan ng karagdagang mga pahina o script.
Gayunpaman, kahit na isinasaalang-alang ang cache, mayroong isang tiyak na pagkawala sa pagganap kung isasaalang-alang namin ang oras para sa pag-parse at pagpapatupad ng script. Sa artikulong "Napakalaki ba ng jQuery para sa mobile?" sinasabi nito kung paano maaaring pabagalin ng jQuery lamang ang ilan mga mobile browser para sa daan-daang millisecond.
Ang masama pa nito, karaniwang hindi nakakatanggap ng anumang feedback ang user habang naglo-load ang mga script. Resulta - blangkong pahina sa screen, na pagkatapos ay biglang nagiging isang ganap na na-load na pahina.
Ang pinakamahalaga, madalas nating nakakalimutan na ang pinakakaraniwang Internet data transport (TCP) ay bumabagal sa pagsisimula. Ito ay halos tiyak na ginagarantiya na ang karamihan sa mga script bundle ay hindi ililipat nang sabay-sabay, na nagpapalala sa sitwasyon sa itaas.
Nagsisimula ang koneksyon ng TCP sa pagpapalitan ng mga packet ng handshake. Kung gumagamit ka ng SSL, na mahalaga para sa ligtas na paglipat script, dalawang karagdagang palitan ng packet ang magaganap (isa kung ibabalik ng kliyente ang session). Pagkatapos lamang nito ang server ay maaaring magsimulang magpadala ng data, ngunit ipinapakita ng pagsasanay na ginagawa nito ito nang dahan-dahan at sa mga batch.
Ang isang mekanismo ng pagkontrol sa pagsisikip na tinatawag na Slow Start ay nakapaloob sa TCP protocol upang magpadala ng data, unti-unting tumataas ang halaga mga segment. Ito ay may dalawang seryosong implikasyon para sa SPA:
1. Mas matagal mag-load ang malalaking script kaysa sa tila. Gaya ng ipinaliwanag sa aklat na "High Performance Browser Networking" ni Ilya Grigorik, kailangan ng "apat na packet exchange (...) at daan-daang milliseconds ng latency upang maabot ang 64 KB ng data exchange sa pagitan ng client at server." Halimbawa, sa kaso ng mabilis na koneksyon sa Internet sa pagitan ng London at New York, aabutin ng 225 ms bago maabot ng TCP ang maximum na laki ng packet nito.
2. Dahil nalalapat din ang panuntunang ito sa paunang pag-load ng pahina, napakahalaga kung anong nilalaman ang nilo-load na unang i-render sa pahina. Bilang pagtatapos ni Paul Irish sa kanyang presentasyon na Delivering Goods, ang unang 14 KB ay kritikal. Ito ay malinaw kung titingnan mo ang graph na nagsasaad ng dami ng paglilipat sa pagitan ng kliyente at ng server sa mga unang yugto ng pagtatatag ng koneksyon.
Ilang KB ang maaaring ipadala ng server sa bawat yugto ng koneksyon, ayon sa segment
Ang mga website na namamahala sa paghahatid ng nilalaman (kahit na ang pangunahing markup na walang data) sa window na ito ay lumilitaw na lubhang tumutugon. Sa katunayan, maraming mga may-akda ng mabilis na mga application sa panig ng server ang nakikita ang JavaScript bilang isang bagay na hindi kailangan o isang bagay na dapat gamitin nang may matinding pag-iingat. Ang saloobing ito ay higit na pinalakas kung ang application ay may mabilis na backend at database, at ang mga server nito ay matatagpuan malapit sa mga user (CDN).
Ang papel ng server sa pagpapabilis ng presentasyon ng nilalaman ay direktang nakasalalay sa web application. Ang solusyon ay hindi palaging kumukulo sa "i-render ang buong mga pahina sa server."
Sa ilang mga kaso, hindi nauugnay sa sa sandaling ito Para sa user, mas mabuting ibukod ang bahagi ng page mula sa unang tugon at iwanan ito sa ibang pagkakataon. Ang ilang mga application, halimbawa, ay mas gustong i-render lamang ang "core" ng page upang matiyak ang agarang pagtugon. Pagkatapos ay humiling sila ng iba't ibang bahagi ng pahina nang magkatulad. Nagbibigay ito ng mas mahusay na pagtugon kahit na sa isang sitwasyon na may mabagal, hindi napapanahong backend. Para sa ilang mga pahina magandang opsyon Ang nakikitang bahagi lang ng page ang ire-render.
Napakahalaga kwalitatibong pagtatasa mga script at istilo, na isinasaalang-alang ang impormasyon na mayroon ang server tungkol sa session, client at URL. Ang mga script na nag-uuri ng mga order ay malinaw na magiging mas mahalaga sa /order kaysa sa logic ng pahina ng mga setting. Maaaring hindi masyadong halata, ngunit may pagkakaiba sa paglo-load " istrukturang CSS" at "CSS para sa pag-istilo". Maaaring kailanganin ang una para sa JavaScript code, kaya kinakailangan ito pagharang, at ang pangalawa ay na-load nang asynchronous.
Ang isang magandang halimbawa ng isang SPA na hindi nagreresulta sa hindi kinakailangang packet exchange ay ang 4096 byte StackOverflow concept clone, na maaaring theoretically load kasama ang unang packet pagkatapos ng handshake sa isang TCP connection! Nagawa ito ng may-akda sa pamamagitan ng pagtanggi sa pag-cache, gamit ang inline para sa lahat ng mapagkukunan sa tugon mula sa server. Sa pamamagitan ng paggamit ng SPDY o HTTP/2 server push, ito ay theoretically posible na ilipat ang lahat ng naka-cache na client code sa isang hop. Well, sa kasalukuyan, ang pag-render ng mga bahagi o ang buong page sa gilid ng server ay nananatiling pinakasikat na paraan upang maalis ang mga hindi kinakailangang round ng packet exchange.
Proof-of-concept na SPA gamit ang inline para sa CSS at JS para maalis ang mga hindi kinakailangang roundtrip
Ang isang medyo nababaluktot na sistema na naghahati sa pag-render sa pagitan ng browser at ng server at nagbibigay ng mga tool para sa unti-unting pag-load ng mga script at estilo ay maaaring maging mahusay na lumabo ang linya sa pagitan mga website At mga web application. Parehong gumagamit ng mga URL, nabigasyon, at nagpapakita ng data sa user. Kahit isang application na may mga spreadsheet, na tradisyonal na umaasa sa functionality sa panig ng kliyente, dapat munang ipakita sa kliyente ang impormasyong kailangang i-edit. At ang paggawa nito sa pinakamababang bilang ng mga roundtrip ay pinakamahalaga.
Mula sa aking pananaw, ang pinakamalaking depekto sa pagganap sa marami mga sikat na sistema sa modernong panahon ay ipinaliwanag sa pamamagitan ng progresibong akumulasyon ng pagiging kumplikado sa stack. Sa paglipas ng panahon, idinagdag ang mga teknolohiya tulad ng JavaScript at CSS. Unti-unti ding lumaki ang kanilang kasikatan. Ngayon lang natin maa-appreciate kung paano sila magagamit sa ibang paraan. Pinag-uusapan din namin ang tungkol sa pagpapabuti ng mga protocol (ito ay ipinapakita ng kasalukuyang pag-unlad ng SPDY at QUIC), ngunit ang pinakamalaking benepisyo ay nagmumula sa pag-optimize ng mga application.
Maaaring kapaki-pakinabang na alalahanin ang ilan sa mga makasaysayang talakayan na nakapalibot sa disenyo ng maaga Mga bersyon ng HTML at WWW. Halimbawa, ang mailing list na ito mula 1997 ay nagmumungkahi ng pagdaragdag ng tag sa HTML. Inulit ni Marc Andreessen ang kahalagahan ng mabilis na paghahatid ng impormasyon:
"Kung ang isang dokumento ay kailangang i-compile sa isang solong kabuuan sa mabilisang, maaari itong maging kumplikado hangga't ninanais, at kahit na ang pagiging kumplikado ay limitado, magkakaroon pa rin tayo ng mga problema. malalaking problema na may pagganap dahil sa pagbubuo ng mga dokumento sa ganitong paraan. Una sa lahat, agad nitong sinisira ang prinsipyo ng WWW na one-hop (well, sinira din ito ng IMG, ngunit para sa isang napaka-tiyak na dahilan at sa isang limitadong kahulugan) - sigurado ba tayo na gusto natin ito?
2. Agarang tugon sa mga aksyon ng usertl;DR: Binibigyang-daan ka ng JavaScript na itago ang latency ng network nang buo. Gamit ito bilang isang prinsipyo ng disenyo, maaari pa nating alisin ang halos lahat ng mga tagapagpahiwatig ng paglo-load at "naglo-load" na mga mensahe mula sa application. Ang PJAX o TurboLinks ay nawawalan ng mga pagkakataon upang taasan ang subjective na bilis ng interface.
Ang aming layunin ay i-maximize ang bilis ng pagtugon sa mga aksyon ng user. Gaano man kalaki ang aming pagsisikap na bawasan ang bilang ng mga hops kapag nagtatrabaho sa isang web application, may mga bagay na hindi namin kontrolado. Ito ang teoretikal na limitasyon ng bilis ng liwanag at ang pinakamababang ping sa pagitan ng kliyente at server.
Ang isang mahalagang kadahilanan ay ang hindi mahuhulaan na kalidad ng komunikasyon sa pagitan ng kliyente at server. Kung mahina ang kalidad ng koneksyon, ang mga packet ay muling ipapadala. Kung saan kailangang mag-load ng content sa ilang roundtrip, maaaring kailangan mo ng higit pa.
Ito ang pangunahing benepisyo ng JavaScript para sa pagpapabuti ng UX. Kung ang interface ay naka-script sa panig ng kliyente, maaari naming itago ang latency ng network. Maaari tayong lumikha ng impresyon ng mataas na bilis. Maaari naming artipisyal na makamit ang zero latency.
Kumbaga, sa harap namin simpleng HTML. Ang mga dokumento ay konektado sa pamamagitan ng mga hyperlink o tag . Kung nag-click ka sa alinman sa mga ito, ang browser ay gumagawa ng isang kahilingan sa network, na tumatagal ng hindi inaasahang mahabang panahon, pagkatapos ay natatanggap at pinoproseso ang natanggap na data at sa wakas ay pumasok sa isang bagong estado.
Binibigyang-daan ka ng JavaScript na tumugon kaagad at positibo sa mga aksyon ng user. Ang pag-click sa isang link o button ay nagreresulta sa isang agarang tugon, nang hindi kinakailangang pumunta sa Internet. Ang isang kilalang halimbawa ay ang Gmail (o Google Inbox) na interface, kung saan ang pag-archive ng isang mensaheng email ay nangyayari kaagad, habang ang kaukulang kahilingan sa server ay ipinapadala at pinoproseso nang asynchronously.
Sa kaso ng isang form, sa halip na maghintay ng ilang HTML code bilang tugon sa pagpuno nito, maaari kaming tumugon kaagad sa sandaling pinindot ng user ang "Enter". O mas mabuti, tulad ng ginagawa ng paghahanap sa Google, maaari tayong mag-react nang mas maaga sa pamamagitan ng paghahanda ng markup para sa isang bagong page nang maaga.
Ang pag-uugali na ito ay isang halimbawa ng tinatawag kong pagbagay sa markup. Ang pangunahing ideya ay "alam" ng page ang markup nito sa hinaharap, kaya maaari itong lumipat dito kapag wala pang data upang ipahiwatig ito. Ito ay "maasahin sa mabuti" na pag-uugali dahil mayroon pa ring panganib na ang data ay hindi kailanman darating at isang mensahe ng error ay kailangang iulat, ngunit ito ay malinaw na bihira.
Ang home page ng Google ay isang magandang halimbawa dahil ipinapakita nito ang unang dalawang prinsipyo mula sa aming artikulo nang napakalinaw.
Noong huling bahagi ng 2004, pinasimunuan ng Google ang paggamit ng JavaScript upang magbigay ng mga real-time na mungkahi habang nagta-type ng query sa paghahanap (kapansin-pansin, ang tampok na ito ay binuo ng isang empleyado sa kanyang 20% na libreng oras, tulad ng Gmail). Ito ay naging batayan para sa paglitaw ng Ajax:
Tumingin sa Google Suggest. Panoorin ang pag-update ng iyong mga termino para sa paghahanap habang nagta-type ka, halos kaagad... nang hindi naaantala ang mga pag-reload ng page. Ang Google Suggest at Google Maps ay dalawang halimbawa ng isang bagong diskarte sa paggawa ng mga web application na tinatawag namin sa Adaptive Path na "Ajax."
Isa pang uri ng pagkilos maliban sa mga pag-click at pagsusumite ng form na lubos na nagpapabuti sa gamit ang JavaScript, ay isang pag-render ng paglo-load ng file.
Maaari naming irehistro ang pagtatangka ng user na mag-download ng file sa iba't ibang paraan: drag-n-drop, pag-paste mula sa buffer, pagpili ng file. Pagkatapos, salamat sa mga bagong HTML5 API, maipapakita namin ang nilalaman na parang na-download na ito. Ang isang halimbawa ng ganitong uri ng interface ay ang aming trabaho sa mga pag-download sa Cloudup. Pansinin kung paano nabuo at nai-render kaagad ang thumbnail ng larawan:
Ang imahe ay nai-render at ipinapakita hanggang sa matapos ang paglo-load
Sa lahat ng mga kasong ito, nagpapabuti kami bilis ng pang-unawa. Sa kabutihang palad, mayroong maraming katibayan para sa pagiging kapaki-pakinabang ng diskarteng ito. Kumuha ng hindi bababa sa isang halimbawa kung paano pagtaas mga distansya sa conveyor ng bagahe sa Houston Airport nabawasan bilang ng mga reklamo tungkol sa nawalang bagahe, nang hindi kailangang pabilisin ang pagproseso ng bagahe.
Ang ideyang ito ay dapat na seryosong makakaapekto sa UI ng aming mga application. Naniniwala ako na ang mga tagapagpahiwatig ng pag-load ay dapat na maging isang pambihira, lalo na kapag lumipat tayo sa mga real-time na application ng impormasyon, na inilalarawan sa susunod na seksyon.
May mga sitwasyon kung saan ang ilusyon ng instant action ay talagang may masamang epekto sa UX. Ito ay maaaring isang paraan ng pagbabayad o pagtatapos ng isang session sa site. Sa pamamagitan ng pagsasagawa ng isang optimistikong diskarte dito, de facto na panlilinlang sa gumagamit, nanganganib tayong mairita siya.
Ngunit kahit na sa mga kasong ito, dapat ihinto ang pagpapakita ng mga spinner o loading indicator sa screen. Dapat lang ipakita ang mga ito pagkatapos na ituring ng user na hindi agaran ang tugon. Ayon sa isang madalas na binabanggit na pag-aaral ng Nielsen:
Ang pangunahing payo sa oras ng pagtugon ay nanatiling pareho sa loob ng tatlumpung taon Miller 1968; Card et al. 1991:
*0.1 segundo ang limitasyon para makita ng user ang tugon bilang agaran, walang kinakailangang display dito karagdagang impormasyon, maliban sa resulta ng operasyon.
* 1.0 segundo ang limitasyon sa pagpapatuloy ng pag-iisip ng gumagamit, kahit na mapapansin niya ang pagkaantala. Karaniwan, walang karagdagang indikasyon ang kinakailangan para sa mga pagkaantala na higit sa 0.1 segundo ngunit mas mababa sa 1.0 segundo, ngunit nawawala ang pakiramdam ng user na direktang nagtatrabaho sa data.
* 10 segundo ang limitasyon para mapanatili ang atensyon ng user sa diyalogo. Sa mas mataas na latency, gugustuhin ng mga user na magsagawa ng isa pang gawain habang naghihintay ng tugon mula sa computer.
Ang mga diskarte tulad ng PJAX o TurboLinks sa kasamaang-palad ay nakakaligtaan ang karamihan sa mga tampok na inilarawan sa ang seksyon na ito. Ang code sa panig ng kliyente ay hindi "alam" tungkol sa hinaharap na estado ng pahina hanggang sa maganap ang palitan ng data sa server.
3. Reaksyon sa mga pagbabago sa datatl;DR: Kapag na-update ang data sa server, dapat na maabisuhan ang kliyente nang walang pagkaantala. Ito ay isang paraan ng pagpapabuti ng pagiging produktibo kung saan ang gumagamit ay pinalaya mula sa pagkakaroon karagdagang mga aksyon(pindutin ang F5, i-refresh ang pahina). Mga bagong isyu: (muling) pamamahala ng koneksyon, pagbawi ng estado.
Ang ikatlong prinsipyo ay nauugnay sa tugon ng UI sa mga pagbabago sa data sa pinagmulan, karaniwang isa o higit pang mga server ng database.
Ang modelo ng paghahatid ay nagiging isang bagay ng nakaraan. data ng HTML, na nananatiling static hanggang sa i-refresh ng user ang page (mga tradisyunal na website) o makipag-ugnayan dito (Ajax).
Dapat awtomatikong mag-update ang iyong UI.
Ito ay kritikal sa isang mundo na may dumaraming daloy ng impormasyon mula sa iba't ibang mga mapagkukunan, kabilang ang mga relo, telepono, tablet at mga naisusuot na device na lalabas sa hinaharap.
Isipin ang News Feed ng Facebook pagkatapos nitong unang lumitaw, kapag ang impormasyon ay pangunahing nai-post mula sa mga personal na computer mga gumagamit. Hindi pinakamainam ang static na pag-render, ngunit makatuwiran ito para sa mga taong nagre-refresh ng kanilang feed, halimbawa, isang beses sa isang araw.
Nakatira kami ngayon sa isang mundo kung saan nag-a-upload ka ng larawan at halos agad-agad na nakatanggap ng mga like at komento mula sa mga kaibigan at kakilala. Ang pangangailangan para sa agarang pagtugon ay naging isang likas na pangangailangan sa mapagkumpitensyang kapaligiran ng iba pang mga aplikasyon.
Magiging mali, gayunpaman, na ipagpalagay na ang mga benepisyo ng mga instant na pag-update ng UI ay limitado sa mga application na maraming gumagamit. Kaya naman mahilig akong makipag-usap napagkasunduang mga punto ng datos, sa halip na mga gumagamit. Kumuha tayo ng karaniwang senaryo para sa pag-synchronize ng mga larawan sa pagitan ng iyong telepono at ng sarili mong laptop:
Ang isang solong-user na application ay maaari ding makinabang mula sa reaktibiti.
Nakakatulong mag-imagine lahat impormasyong ipinadala sa user bilang "reaktibo". Ang pag-synchronize sa session at estado ng awtorisasyon ay isang halimbawa ng isang unibersal na diskarte. Kung ang mga user ng iyong application ay may ilang tab na bukas nang sabay-sabay, pagkatapos ay ang dulo sesyon ng pagtatrabaho sa isa sa mga ito ay dapat na agad na i-deactivate ang pahintulot sa lahat ng iba pa. Ito ay tiyak na humahantong sa pinabuting kaligtasan at mas mahusay na proteksyon kumpidensyal na impormasyon, lalo na sa mga sitwasyon kung saan maraming tao ang may access sa parehong device.
Tumutugon ang bawat page sa status ng session at status ng awtorisasyon
Kapag naitatag mo na ang panuntunan na awtomatikong naa-update ang impormasyon sa screen, mahalagang gumawa ng bagong gawain: pagpapanumbalik ng estado.
Kapag nagpapadala ng mga kahilingan at tumatanggap ng mga atomic na update, madaling kalimutan na ang iyong application ay dapat mag-update nang normal kahit na pagkatapos ng mahabang panahon ng kawalan ng aktibidad. Isipin na isara ang takip ng iyong laptop at buksan ito makalipas ang ilang araw. Paano gagana ang aplikasyon?
Isang halimbawa ng kung ano ang mangyayari sa kaso maling update mga komunikasyon
Ang kakayahan ng application na muling kumonekta ay karaniwang nakikipag-ugnayan sa prinsipyo #1 Kung pipiliin mong magpadala ng data sa unang pag-load ng pahina, dapat mo ring isaalang-alang ang oras na lumipas bago ma-load ang mga script. Ang oras na ito ay mahalagang katumbas ng oras ng pagdiskonekta, kaya ang paunang koneksyon ng iyong mga script ay ang pagpapatuloy ng session.
4. Kontrol ng data exchange sa servertl;DR: Ngayon ay maaari na nating ayusin ang pagpapalitan ng data sa server. Tiyakin ang paghawak ng error, paulit-ulit na kahilingan sa kliyente, pag-synchronize ng data background at pag-save ng cache offline.
Noong nabuo ang web, ang komunikasyon sa pagitan ng kliyente at server ay limitado sa maraming paraan:
Ang pagiging simple ng modelong ito ay talagang kaakit-akit, at ngayon ang mga bagay ay tiyak na naging mas kumplikado pagdating sa pag-unawa kung paano tumanggap at magpadala ng impormasyon.
Ang pangunahing mga paghihigpit ay nauugnay sa pangalawang punto. Ang kawalan ng kakayahan na magpadala ng data nang hindi kinakailangang naglo-load ng bagong pahina ay isang kawalan mula sa isang pananaw sa pagganap. Ngunit ang pinakamahalagang bagay ay ganap nitong sinira ang pindutang "Bumalik":
Marahil ang pinaka nakakainis na artifact ng lumang web
Ito ang dahilan kung bakit ang web bilang isang application platform ay nanatiling hindi kumpleto nang walang JavaScript. Ang Ajax ay kumakatawan sa isang malaking hakbang pasulong sa mga tuntunin ng kadalian ng pag-publish ng user.
Mayroon na kaming maraming API (XMLHttpRequest, WebSocket, EventSource, kung ilan lang) na nagbibigay ng kumpleto at tumpak na kontrol sa daloy ng data. Bilang karagdagan sa kakayahang mag-publish ng data ng user sa pamamagitan ng isang form, mayroon kaming mga bagong pagkakataon upang pahusayin ang UX.
Direktang nauugnay sa nakaraang prinsipyo ay ang pagpapakita katayuan ng koneksyon. Kung inaasahan naming awtomatikong maa-update ang data, dapat naming ipaalam sa gumagamit ang mga katotohanan pagkawala ng koneksyon At sinusubukang ibalik ito.
Kapag may nakitang disconnect, kapaki-pakinabang na iimbak ang data sa memorya (o mas mabuti pa, sa localStorage) upang maipadala ito sa ibang pagkakataon. Ito ay lalong mahalaga sa liwanag ng hinaharap na paggamit ng ServiceWorker, na nagpapahintulot sa mga application ng JavaScript na tumakbo sa background. Kung hindi bukas ang iyong application, maaari mo pa ring ipagpatuloy na subukang i-sync ang data sa server sa background.
Isaalang-alang ang posibilidad ng mga timeout at mga error kapag nagpapadala ng data ay dapat na malutas sa pabor ng kliyente. Kung naibalik ang koneksyon, subukang ipadala muli ang data. Kailan permanenteng pagkakamali, ipaalam sa gumagamit ang tungkol dito.
Ang ilang mga pagkakamali ay kailangang hawakan lalo na nang maingat. Halimbawa, ang hindi inaasahang 403 ay maaaring mangahulugan na ang session ng user ay hindi wasto. Sa ganitong mga kaso, posibleng ibalik ang session sa pamamagitan ng pagpapakita sa user ng window para sa pagpasok ng login at password.
Mahalaga rin na tiyaking hindi sinasadyang maantala ng user ang daloy ng data. Ito ay maaaring mangyari sa dalawang sitwasyon. Ang una at pinaka-halatang kaso ay ang pagsasara ng browser o tab, na siyang sinusubukan naming pigilan gamit ang beforeunload handler.
Babala bago mag-unload
Ang isa pang (at hindi gaanong halata) na kaso ay kapag sinubukan mong mag-navigate sa isa pang pahina, tulad ng pag-click sa isang link. Sa kasong ito, maaaring ihinto ng application ang gumagamit sa paggamit ng iba pang mga pamamaraan, sa pagpapasya ng developer.
5. Huwag sirain ang kuwento, pagbutihin itotl;DR: Kung hindi namamahala ang browser ng mga URL at history, magkakaroon tayo ng mga bagong problema. Tiyaking natutugunan mo ang inaasahang gawi sa pag-scroll. I-save ang iyong sariling cache para sa mabilis na feedback.
Halimbawa, ang karaniwang "walang katapusang" na pahina ay karaniwang ginagawa gamit ang isang JavaScript button na humihiling ng karagdagang data/HTML at inilalagay ito. Sa kasamaang-palad, ilang tao ang nakakaalala na tumawag sa history.pushState o replaceState bilang kinakailangang hakbang.
Kaya naman ginagamit ko ang salitang "break". Sa simpleng modelo ng orihinal na web, hindi posible ang sitwasyong ito. Ang bawat pagbabago ng estado ay batay sa isang pagbabago ng URL.
Ngunit mayroon ding kabilang panig ng barya - ang pagkakataon mapabuti kasaysayan ng surfing, na kontrolado na namin ngayon gamit ang JavaScript.
Ang isang ganoong posibilidad ay tinawag na Fast Back ni Daniel Pipius:
Ang back button ay dapat gumana nang mabilis; hindi inaasahan ng mga gumagamit ang labis na pagbabago ng data.
Ito ay tulad ng pagtrato sa back button bilang isang button mula sa isang web application at paglalapat ng prinsipyo #2 dito: tumugon kaagad sa pagkilos ng user. Ang pangunahing bagay ay mayroon kang pagkakataon na magpasya kung paano i-cache ang nakaraang pahina at agad na ipakita ito sa screen. Maaari mong ilapat ang prinsipyo #3 at pagkatapos ay ipaalam sa user kapag dumating ang bagong data sa page na iyon.
Mayroon pa ring ilang mga sitwasyon kung saan wala kang kontrol sa pag-uugali ng cache. Halimbawa, kung nag-render ka ng page, pagkatapos ay pumunta sa isang third-party na site, at pagkatapos ay na-click ng user ang “Bumalik”. Ang mga application na nag-render ng HTML sa gilid ng server at pagkatapos ay binabago ito sa panig ng kliyente ay lalong madaling kapitan sa maliit na bug na ito:
Maling gawain Mga pindutan sa likod
Ang isa pang paraan upang masira ang nabigasyon ay huwag pansinin ang memorya ng estado ng pag-scroll. Muli, ang mga pahinang hindi gumagamit ng JS at manu-manong kontrol ang kasaysayan, malamang, ay hindi magkakaroon ng mga problema dito. Ngunit magkakaroon ng mga dynamic na pahina. Sinubukan ko ang dalawang pinakasikat mga news feed Internet na batay sa JavaScript: Twitter at Facebook. Parehong nagkaroon ng scrolling amnesia.
Ang walang katapusang pag-ikot ng pahina ay karaniwang senyales ng pag-scroll amnesia
Pagkatapos ng lahat, mag-ingat sa mga pagbabago ng estado na may kaugnayan lamang kapag tinitingnan ang kasaysayan. Halimbawa, ang kasong ito sa pagbabago ng estado ng mga subtree na may mga komento.
Ang pagbabago sa uri ng mga komento ay dapat na i-save sa kasaysayan
Kung muling na-render ang page pagkatapos mag-click sa isang link sa loob ng isang application, maaaring asahan ng user na mapapalawak ang lahat ng komento. Kapag nagbago ang estado, dapat itong i-save sa kasaysayan.
6. Mga update ng code sa pamamagitan ng mga push messagetl;DR: Hindi sapat na magpadala lamang ng data sa pamamagitan ng mga push message, kailangan mo rin ng code. Iwasan ang mga error sa API at pagbutihin ang pagganap. Gumamit ng stateless DOM upang walang sakit na muling idisenyo ang iyong application.
Napakahalaga na tumugon ang iyong aplikasyon sa mga pagbabago sa code.
Una, binabawasan nito ang bilang posibleng mga pagkakamali at pinatataas ang pagiging maaasahan. Kung gumawa ka ng mahalagang pagbabago sa backend API, kung gayon dapat i-update ang code ng mga programa ng kliyente. Kung hindi, maaaring hindi tanggapin ng mga kliyente ang bagong data o maaaring magpadala ng data sa isang hindi tugmang format.
Ang isang pare-parehong mahalagang dahilan ay upang sumunod sa prinsipyo Blg. 3. Kung ang iyong interface ay nag-a-update mismo, kung gayon walang kaunting dahilan para sa mga user na gumamit ng manu-manong pag-reload ng pahina.
Tandaan na para sa isang karaniwang site, ang pag-refresh ng page ay nagti-trigger ng dalawang bagay: isang pag-reload ng data at isang pag-reload ng code. Ang pag-aayos ng system na may mga update sa push data nang walang mga update sa push code ay hindi kumpleto, lalo na sa isang mundo kung saan maaaring manatiling bukas ang isang tab (session) sa napakatagal na panahon.
Kung gumagana ang server push channel, maaaring maabisuhan ang user tungkol sa pagkakaroon ng bagong code. Kung hindi, maaaring idagdag ang numero ng bersyon sa header ng papalabas na mga kahilingan sa HTTP. Maaaring ihambing ito ng server sa pinakabagong kilalang bersyon, sumang-ayon na iproseso ang kahilingan o hindi, at mag-isyu ng trabaho sa kliyente.
Pagkatapos nito, pilit na nire-reload ng ilang web application ang pahina sa ngalan ng user. Halimbawa, kung ang pahina ay wala sa nakikitang lugar ng screen at walang mga kumpletong form para sa input.
Ang isang mas mahusay na diskarte ay ang "mainit" na pagpapalit ng code. Nangangahulugan ito na hindi mo kailangang ganap na i-reload ang pahina. Sa halip, tiyak mga module ay pinalitan sa mabilisang, at ang kanilang code ay muling isinumite para sa pagpapatupad.
Sa maraming umiiral na mga aplikasyon Medyo mahirap mag-hot swap code. Upang gawin ito, dapat mo munang sumunod sa isang arkitektura na naghihiwalay pag-uugali(code) mula sa datos(estado). Ang dibisyong ito ay magbibigay-daan sa amin na ilunsad ang maraming iba't ibang mga patch nang mabilis.
Halimbawa, sa aming web application mayroong isang module na nagse-set up ng bus para sa pagpapadala ng mga kaganapan (tulad ng socket.io). Kapag naganap ang isang kaganapan, nagbabago ang estado ng isang partikular na bahagi at ito ay makikita sa DOM. Pagkatapos ay babaguhin mo ang pag-uugali ng bahaging iyon, halimbawa upang makabuo ito ng ibang DOM markup para sa umiiral at bagong estado.
Sa isip, dapat nating baguhin ang code sa modularly. Hindi na kailangang muling magtatag ng isang koneksyon sa socket, halimbawa, kung posible na i-update lamang ang code kinakailangang sangkap. Ang perpektong arkitektura para sa mga update ng push code ay kaya modular.
Ngunit ang problema ay agad na lumitaw kung paano suriin ang mga module nang walang hindi kanais-nais side effects. Ang isang arkitektura tulad ng inaalok ng React ay pinakaangkop dito. Kung ang code ng isang bahagi ay na-update, ang lohika nito ay maaaring muling isagawa at ang DOM ay na-update. Basahin ang paliwanag ni Dan Abramov tungkol sa konseptong ito.
Sa pangkalahatan, ang ideya ay i-update mo ang DOM (o muling kulayan ito), na lubos na nakakatulong sa pagpapalit ng code. Kung ang estado ay nakaimbak sa DOM o ang mga tagapangasiwa ng kaganapan ay na-install ng application, ang pag-update ng code ay maaaring maging isang mas mahirap na gawain.
7. Paghuhula ng pag-uugalitl;DR : Negatibong pagkaantala.
Ang isang modernong JavaScript application ay maaaring may mga mekanismo upang mahulaan ang mga aksyon ng user.
Ang pinaka-halatang aplikasyon ng ideyang ito ay ang pag-pre-download ng data mula sa isang server bago ito hilingin ng user. Ang pag-load ng isang web page na may mouse cursor na naka-hover sa ibabaw nito upang ang pag-click sa mga link ay agad na nagpapakita nito ay isang simpleng halimbawa.
Ang isang bahagyang mas advanced na paraan ng pagsubaybay sa pagsubaybay ng mouse ay nagsusuri sa tilapon ng mouse para sa hinaharap na "mga banggaan" sa mga interactive na elemento tulad ng mga pindutan. :
Hinuhulaan ng jQuery plugin ang landas ng mouse
Ang Internet ay nananatiling pinaka maraming nalalaman na daluyan para sa pagpapadala ng impormasyon. Patuloy kaming nagdaragdag ng dynamics sa aming mga pahina at dapat na tiyaking mapanatili namin mahahalagang prinsipyo web, na minana natin.
Ang mga naka-hyperlink na pahina ay mahusay na mga bloke ng gusali para sa anumang aplikasyon. Ang progresibong paglo-load ng code, mga istilo, at markup habang nakikipag-ugnayan ang user ay nagsisiguro ng mahusay na pagganap nang hindi sinasakripisyo ang interaktibidad.
Bago natatanging pagkakataon nagbibigay ng JavaScript. Kung ang mga teknolohiyang ito ay malawakang ginagamit, sila ay magbibigay pinakamahusay na karanasan gumana para sa mga gumagamit ng pinaka-malayang platform na umiiral - WWW.
