Single-page application
Koska SPA on kehitys päässä kansalaisuudettomien sivu-piirtää malli, että selaimet on alun perin suunniteltu, joitakin uusia haasteita on syntynyt. Mahdollisia ratkaisuja (vähemmän monimutkaiset, ymmärrettävyys, ja tekijän valvonta) ovat:
- Client-side JavaScript-kirjastoja.
- SPA-malliin erikoistuneet Palvelinpuoleiset verkkokehykset.
- selainten kehitys ja KYLPYLÄMALLIIN suunniteltu HTML5-eritelmä.,
Haku-moottorin optimizationEdit
Koska ei ole JavaScript toteutus on telaketjuilla joidenkin suosittujen Web-hakukoneet, SEO (Search engine optimization) on perinteisesti esitetty ongelma julkiseen päin sivustot, jotka haluavat ottaa SPA-malli.
vuoden 2009 ja 2015, Google Webmaster Central ehdotettu ja sitten suositellaan ”AJAX indeksoinnin järjestelmä” käyttäen alkuperäisen huutomerkki fragmentti tunnisteiden stateful AJAX-sivut (#!)., Erityistä käyttäytymistä on pantava täytäntöön SPA-sivuston, jotta louhinta liittyvien metatietojen haku moottori”s crawler. Hakukoneille, jotka eivät tue tätä URL hash-järjestelmää, kylpylän hashed-URL-osoitteet pysyvät näkymättömissä. Nämä ”hash-bang” Uri on pidetty ongelmallisena useat kirjoittajat kuten Dewayne Tennison klo W3C, koska ne tekevät sivuista saavuttamattomissa niille, joilla ei ole JavaScript käytössä selaimessa. He myös rikkoa HTTP referer otsikot kuten selaimet, joita ei saa lähettää fragmentti tunniste Referer otsikon., Vuonna 2015 Google vähätteli hash-bang AJAX crawling-ehdotustaan.
vaihtoehtoisesti sovellukset voivat tehdä palvelimelle ensimmäisen sivun lataamisen ja sen jälkeiset page-päivitykset asiakkaalle. Tämä on perinteisesti vaikeaa, koska rendering koodi ei välttämättä tarvitse olla kirjoitettu eri kielellä tai kehys, palvelimen ja asiakkaan. Käyttää logiikka-vähemmän malleja, cross-kääntäminen kielestä toiseen, tai käyttämällä samaa kieltä palvelimella ja asiakas voivat auttaa lisäämään määrä koodia, joka voidaan jakaa.,
vuonna 2018 Google otti käyttöön dynaamisen renderoinnin toisena vaihtoehtona sivustoille, jotka haluavat tarjota telaketjuille sivun Ei-JavaScript-raskasta versiota indeksointitarkoituksiin. Dynaaminen mallinnus vaihtaa version sivun, joka on sulatettu client-side ja pre-sulatettu versio käyttäjän erityisiä aineita. Tämä lähestymistapa liittyy web-palvelimen havaita indeksoijat kautta (user agent) ja reititys ne renderer, josta ne on sitten tarjoillaan yksinkertaisempi versio HTML-sisältöä.,
Koska SEO yhteensopivuus ei ole vähäpätöinen Kylpylöissä, se on syytä huomata, että Kylpylät ovat usein ei käytetä tilanteessa, jossa hakukoneen indeksointi on joko vaatimus tai toivottavaa. Käyttötapaukset sisältävät sovelluksia, jotka nostavat esiin tunnistusjärjestelmän taakse Piilotettua yksityistä tietoa. Tapauksissa, joissa nämä sovellukset ovat kulutustavaroita, usein klassinen ”sivulla piirtää” mallia käytetään sovellukset aloitussivun ja markkinointi sivusto, joka tarjoaa riittävästi meta tietoja sovellus näkyy hit hakukoneen kyselyn., Blogit, tukea foorumeilla, ja muut perinteiset sivu piirtää esineitä usein istua SPA, joka voi seed hakukoneet, asiaankuuluvat ehdot.
Toinen lähestymistapa käyttää server-centric web puitteet kuten Java-pohjainen ItsNat on tehdä mikä tahansa http-palvelimelle käyttäen samaa kieltä ja sivupohjamoottori-tekniikkaa. Tämä lähestymistapa, palvelin tietää tarkasti DOM valtion asiakas, mikä tahansa iso tai pieni-sivun päivitys tarvitaan, on luotu palvelimelle, ja kuljetetaan Ajax, tarkka JavaScript-koodi, joka tuo asiakkaan sivu uuteen täytäntöönpanovaltion DOM menetelmiä., Kehittäjät voivat päättää, millä sivulla valtioiden on oltava indeksoitavissa web hämähäkkejä SEO ja pystyä tuottamaan tarvittava valtion latausajan tuottaa HTML-sen sijaan, että JavaScript. Jos ItsNat framework, tämä on automaattista, koska ItsNat pitää asiakas DOM puu-palvelin Java W3C DOM-puu; tekee tämän DOM puu-palvelin generoi HTML-tällä latausaikaa ja JavaScript-DOM toimet Ajax-pyyntöjä., Tämä kaksinaisuus on erittäin tärkeää SEO, koska kehittäjät voivat rakentaa samalla Java-koodia ja puhdas HTML-pohjainen sivupohjamoottori haluttu DOM valtion server; tällä latausaikaa, perinteisen HTML syntyy ItsNat joten tämä DOM valtion SEO-yhteensopiva.
versiosta 1.,3, ItsNat tarjoaa uuden kansalaisuudettomien tilassa, ja asiakas DOM ei säilytetään palvelimella, koska valtiottomien tilassa asiakas, DOM valtio on osittain tai täysin rekonstruoitu palvelimelle, kun käsitellään tahansa Ajax-pyynnön perusteella tarvittavat tiedot lähetetään asiakkaalle tiedottaminen server nykyisten DOM valtion; valtiottomien tilassa voi olla myös SEO-yhteensopiva, koska SEO yhteensopivuus tapahtuu latausajan ensimmäisen sivun vaikuta stateful tai kansalaisuudeton tilaa., Toinen mahdollinen vaihtoehto on puitteet, kuten Esihahmonna, Nukketeatterin, Rendertron, joka voidaan helposti integroida minkä tahansa sivuston, kuten middleware web-palvelimen kokoonpano mahdollistaa bot pyynnöt (google bot ja muut) palvelevan middleware kun taas ei-bot pyynnöt eivät toimi kuten tavallista. Nämä puitteet välimuisti asiaa verkkosivuilla sivuja ajoittain, jotta uusimmat versiot ovat saatavilla hakukoneita. Google on virallisesti hyväksynyt nämä puitteet.
on pari työkoiraa, jotka saavat sen näyttämään siltä kuin sivusto olisi ryömivä., Molemmissa on kyse erillisten HTML-sivujen luomisesta, jotka peilaavat kylpylän sisältöä. Palvelin voi luoda HTML-pohjainen versio sivustosta ja toimittaa, että indeksoijat, tai se”s mahdollista käyttää päätön selaimen, kuten PhantomJS ajaa JavaScript-sovellus ja lähtö tuloksena HTML.
Molemmat vaativat melko vähän vaivaa, ja voi päätyä huolto päänsärky suuri monimutkainen sivustoja. On myös mahdollisia SEO sudenkuoppia. Jos server-luotu HTML katsotaan myös erilaiset SPA-sisältöä, niin sivusto rangaistaan., Käynnissä PhantomJS lähtö HTML voi hidastaa vasteaikaa sivua, joka on jotain, josta hakukoneet – Google, erityisesti downgrade rankingissa.
Asiakas/palvelin-koodi partitioningEdit
Yksi tapa lisätä määrä koodia, joka voidaan jakaa palvelimien välillä ja asiakkaita on käyttää logiikka-vähemmän malli, kieli kuten Viikset tai Ohjaustankoon. Tällaisia malleja voidaan tehdä eri isäntä kieliä, kuten Ruby palvelimella ja JavaScript asiakkaan., Pelkkä mallien jakaminen edellyttää kuitenkin yleensä kaksinkertaista liiketoimintalogiikkaa, jota käytetään oikeiden mallien valitsemiseen ja niiden kansoittamiseen tiedoilla. Renderöinti malleja voi olla kielteisiä suorituskyky vaikutuksia, kun vain olet päivittänyt pieni osa sivu—kuten arvo tekstinsyöttö sisällä suuri malli. Kokonaisen mallin korvaaminen saattaa myös häiritä käyttäjän valintaa tai kohdistimen asentoa, jossa vain muuttuneen arvon päivittäminen ei välttämättä onnistu., Välttää nämä ongelmat, sovellukset voivat käyttää UI tiedot siteet tai rakeinen DOM manipulointi päivittää vain tarvittavat osat sivusta sen sijaan, että re-mallinnus koko malleja.
Selain historyEdit
SPA on, määritelmän mukaan, ”yhden sivun” malli rikkoo selaimen”s design-sivun historia navigointi käyttäen ”eteenpäin” tai ”taakse” – painikkeita., Tämä esittelee käytettävyyden esteitä, kun käyttäjä painaa takaisin-painiketta, odottaa edelliseen näyttöön valtion sisällä SPA, mutta sen sijaan, sovellus”s yhden sivun purkaa ja edellinen sivu selaimessa”s historia on esitetty.
perinteinen ratkaisu Kylpylät on ollut muuttaa selaimen URL”s hash fragment identifier sopusoinnussa nykyisen näytön tilassa. Tämä voidaan saavuttaa JavaScript, ja aiheuttaa URL historia tapahtumia rakennetaan selaimen sisällä., Niin kauan kuin SPA pystyy herättää samalla näytöllä valtion tiedot sisältyvät URL hash, odotettu takaisin-painiketta käyttäytymistä on säilytetty.
edelleen käsitellä tätä asiaa, HTML5 erittely on ottanut käyttöön pushState ja replaceState tarjoaa ohjelmallisen pääsyn todellinen URL-osoite ja selaimen historia.
AnalyticsEdit
Analytiikan työkaluja, kuten Google Analytics luottaa raskaasti koko uutta sivua ladattaessa selain, aloitti uuden sivun kuormitus. Kylpylät eivät toimi näin.,
ensimmäisen sivun lataamisen jälkeen sovellus käsittelee kaikki myöhemmät sivu-ja sisältömuutokset sisäisesti, minkä pitäisi yksinkertaisesti kutsua toiminto analytiikkapaketin päivittämiseksi. Ei kuulemma toimi, selain ei koskaan laukaisee uuden sivun, ladata, mitään ei saa lisätä selaimen historia, ja analytics-paketti ei ole aavistustakaan, kuka tekee, mitä sivuston.
Lisäämällä sivulatauksia on SPAEdit
on mahdollista lisätä sivun lataus tapahtumia SPA käyttää HTML5 historia API; tämä auttaa integroida analytics., Ongelmana on tämän hallinta ja sen varmistaminen, että kaikkea seurataan tarkasti – tämä edellyttää puuttuvien raporttien ja kaksinkertaisten merkintöjen tarkistamista.Jotkin puitteet tarjoavat avoimen lähdekoodin analytiikkaintegraatioita, jotka kohdistuvat useimpiin tärkeimpiin analytiikan tarjoajiin. Kehittäjät voivat integroida ne sovellukseen ja varmistaa, että kaikki toimii oikein, mutta kaikkea ei tarvitse tehdä tyhjästä.
alkuvaiheen loadeditin nopeus
yhden sivun sovelluksissa on hitaampi ensimmäisen sivun kuormitus kuin palvelinpohjaisissa sovelluksissa., Tämä johtuu siitä, että ensimmäinen kuorma on tuoda alas kehys ja sovellus koodi, ennen kuin tekee tarvittavat tarkastella HTML-selaimessa. Palvelinpohjaisen sovelluksen on vain työnnettävä tarvittava HTML selaimeen, mikä vähentää latenssia ja latausaikaa.
Nopeuttaa sivun loadEdit
On olemassa joitakin keinoja nopeuttaa alkuperäisen ladata SPA, kuten raskas lähestymistapa välimuistia ja laiska-kuormaus-moduulit tarvittaessa., Mutta se”s ei ole mahdollista saada pois siitä, että se tarvitsee ladata framework, ainakin osa sovelluksen koodi, ja todennäköisesti osuma API-tietoja, ennen kuin näyttää jotain selaimessa. Tämä on” maksa nyt tai maksa myöhemmin ” -skenaario. Kysymys suorituskyvystä ja odotusajoista jää ratkaisuksi, joka rakennuttajan on tehtävä.