Enkeltsidet applikation
da spaen er en udvikling væk fra den statsløse side-redra. – model, som bro .sere oprindeligt var designet til, er der kommet nogle nye udfordringer. Mulige løsninger (af varierende kompleksitet, fuldstændighed, og forfatter kontrol) omfatter:
- Client-side JavaScript biblioteker.
- Server – side frameworksebrammer, der specialiserer sig i SPA-modellen.
- udviklingen af bro .sere og HTML5-specifikationen, designet til SPA-modellen.,
Search-engine optimizationEdit
på Grund af manglende udførelse af JavaScript på crawlere af nogle populære søgemaskiner, SEO (Search engine optimization) historisk set har præsenteret et problem for de offentlige står over websites, der ønsker at indføre SPA-model.
Mellem 2009 og 2015, Google Webmaster Central foreslået og derefter anbefalede en “AJAX-gennemgangssystemet” ved hjælp af en indledende udråbstegn i fragment identifikatorer for stateful AJAX sider (#!)., Særlig adfærd skal gennemføres af SPA – site for at tillade udvinding af relevante metadata af søgemaskinen”s CRA .ler. For søgemaskiner, der ikke understøtter denne URL-hash-ordning, forbliver SPA ‘ s hashed-Urebadresser usynlige. Disse “hash-bang” uri ‘ er, der har været betragtet som problematisk af en række forfattere, herunder Jeni Tennison i W3C fordi de laver sider er utilgængelige for dem, der ikke har JavaScript aktiveret i deres browser. De bryder også HTTP referer-overskrifter, da bro .sere ikke har tilladelse til at sende fragmentidentifikatoren i Referer-overskriften., I 2015 udgav Google deres hash-bang aja.CRA .ling-forslag.
Alternativt kan programmer gengive den første sidebelastning på serveren og efterfølgende sideopdateringer på klienten. Dette er traditionelt vanskeligt, fordi gengivelseskoden muligvis skal skrives på et andet sprog eller rammer på serveren og i klienten. Brug af logiske skabeloner, krydskompilering fra et sprog til et andet eller brug af det samme sprog på serveren og klienten kan hjælpe med at øge mængden af kode, der kan deles.,
I 2018, Google indført dynamisk gengivelse som en anden mulighed for websteder, der ønsker at tilbyde crawlere, et ikke-JavaScript-tung udgave af en side til indeksering formål. Dynamisk gengivelse skifter mellem en version af en side, der gengives klientsiden og en pre-renderet version for specifikke brugeragenter. Denne tilgang indebærer din serverebserver afsløre CRA .lere (via user agent) og dirigere dem til en renderer, hvorfra de derefter serveres en enklere version af HTML-indhold.,da SEO-kompatibilitet ikke er triviel i kurbade, er det værd at bemærke, at kurbade ofte ikke bruges i en sammenhæng, hvor søgemaskineindeksering enten er et krav eller ønskeligt. Brugssager inkluderer applikationer, der overflader private data skjult bag et godkendelsessystem. I de tilfælde, hvor disse applikationer er forbrugerprodukter, bruges ofte en klassisk “sideredigering” – model til applikationens destinationsside og marketing siteebsted, som giver nok metadata til, at applikationen vises som et hit i en søgemaskineforespørgsel., Blogs, supportfora, og andre traditionelle side gentegne artefakter sidder ofte omkring spaen, der kan frø søgemaskiner med relevante udtryk.
en anden tilgang, der bruges af servercentriske webebrammer som den Java-baserede ItsNat, er at gengive enhver hypertekst på serveren ved hjælp af det samme sprog og templating-teknologi. I denne tilgang kender serveren med præcision DOM-tilstanden på klienten, enhver stor eller lille sideopdatering, der kræves, genereres på serveren og transporteres med Aja., den nøjagtige JavaScript-kode for at bringe klientsiden til den nye tilstand, der udfører DOM-metoder., Udviklere kan beslutte, hvilken side stater skal kunne gennemsøges af spiderseb spiders for SEO og være i stand til at generere den krævede tilstand på load tid generere almindelig HTML i stedet for JavaScript. I tilfælde af itsnat-rammen er dette automatisk, fordi ItsNat holder klienten DOM-træet på serveren som et Java .3c DOM-træ; gengivelse af dette DOM-træ på serveren genererer almindelig HTML ved indlæsningstid og JavaScript DOM-handlinger til Aja. – anmodninger., Denne dualitet er meget vigtig for SEO, fordi udviklere kan bygge med den samme Java-kode og ren HTML-baseret templating den ønskede DOM-tilstand i server; på sideindlæsningstid genereres konventionel HTML ved at gøre denne DOM-tilstand SEO-kompatibel.
fra version 1.,3, ItsNat giver en ny statsløs tilstand, og kunden DOM er ikke holdes på serveren, fordi, med de statsløse mode klient, DOM staten er helt eller delvist rekonstrueret på serveren, når en behandling af Ajax anmodning på grundlag af de nødvendige data, der sendes af kunden informere den server af den aktuelle DOM stat; de statsløse-tilstand, kan være også SEO-kompatibel, fordi SEO kompatibilitet sker ved at indlæse den første side upåvirket af stateful eller statsløse tilstande., En anden mulig valg er rammer, som PreRender, Dukkefører, Rendertron, som let kan integreres i ethvert websted, som middleware med web-server konfiguration giver bot anmodninger om tjenester (google-bot og andre) til at blive betjent af middleware, mens ikke-bot anmodninger, der serveres som sædvanlig. Disse rammer cache de relevante hjemmesider med jævne mellemrum for at tillade nyeste versioner være tilgængelige for søgemaskiner. Disse rammer er officielt godkendt af google.
Der er et par løsninger for at få det til at se ud som om webebstedet kan gennemgås., Begge involverer oprettelse af separate HTML-sider, der afspejler indholdet af spaen. Serveren kunne oprette et HTML-baseret version af hjemmesiden, og at levere til crawlere, eller det er muligt at bruge en hovedløs browser såsom PhantomJS til at køre JavaScript-program, og den resulterende HTML-output.
begge disse kræver en hel del indsats og kan ende med at give en vedligeholdelseshovedpine for de store komplekse steder. Der er også potentielle SEO faldgruber. Hvis servergenereret HTML anses for at være for forskellig fra SPA-indholdet, straffes siteebstedet., At køre PhantomJS for at udsende HTML kan bremse sidernes responshastighed, hvilket er noget, som søgemaskiner – især Google – nedgraderer placeringerne.
Client/server-kode partitioningEdit
En måde at øge mængden af kode, der kan deles mellem servere og klienter, er at bruge en logisk-mindre skabelon-sprog, som Overskæg eller Styr. Sådanne skabeloner kan gengives fra forskellige værtssprog, såsom Ruby på serveren og JavaScript i klienten., Imidlertid kræver blot deling af skabeloner typisk duplikering af forretningslogik, der bruges til at vælge de rigtige skabeloner og udfylde dem med data. Gengivelse fra skabeloner kan have negative ydelseseffekter, når kun opdatering af en lille del af siden—såsom værdien af en tekstindtastning i en stor skabelon. Udskiftning af en hel skabelon kan også forstyrre en bruger ” s valg eller markør position, hvor opdatering kun den ændrede værdi måske ikke., For at undgå disse problemer kan applikationer bruge UI-databindinger eller granulær DOM-manipulation til kun at opdatere de relevante dele af siden i stedet for at gengive hele skabeloner igen.
Browser historyEdit
Med en SPA, der, per definition, “en enkelt side”, den model, der bryder browser”s design til sidens historie navigation ved hjælp af “fremad” eller “tilbage” knapperne., Dette giver en usability hindring, når en bruger trykker på knappen tilbage, forventer den forrige skærm stat i SPA, men i stedet, programmet”s single side, losser og den forrige side i browseren”s historie er præsenteret.
den traditionelle løsning til kurbade har været at ændre bro .serens URL”s hash fragment identifier i overensstemmelse med den aktuelle skærmtilstand. Dette kan opnås med JavaScript, og forårsager URL historie begivenheder, der skal bygges op i Bro .seren., Så længe spaen er i stand til at genoplive den samme skærmtilstand fra Oplysninger indeholdt i URL-hashen, bevares den forventede back-button-adfærd.
for yderligere At løse dette problem, HTML5-specifikationen har indført pushState og replaceState give programmeringsmæssig adgang til den faktiske URL-adresse, og browser-historikken.
AnalyticsEdit
analyseværktøjer som Google Analytics er stærkt afhængige af, at hele nye sider indlæses i Bro .seren, initieret af en ny sideindlæsning. Kurbade fungerer ikke på denne måde.,
efter den første sideindlæsning håndteres alle efterfølgende sideændringer internt af applikationen, som blot skal kalde en funktion for at opdatere analytics-pakken. Undlader at ringe til den nævnte funktion, udløser bro .seren aldrig en ny sideindlæsning, intet tilføjes til bro .serhistorikken, og analytics-pakken har ingen ID.om, hvem der gør hvad på siteebstedet.
tilføjelse af sideindlæsninger til en SPAEdit
det er muligt at tilføje sideindlæsningshændelser til en SPA ved hjælp af HTML5 history API; dette vil hjælpe med at integrere analytics., Vanskeligheden kommer i at styre dette og sikre, at alt bliver sporet præcist – dette indebærer kontrol for manglende rapporter og dobbelte poster.Nogle rammer giver open source analytics integrationer adressering de fleste af de store analytics udbydere. Udviklere kan integrere dem i applikationen og sørge for, at alt fungerer korrekt, men der er ikke behov for at gøre alt fra bunden.
hastighed for indledende indlæsningrediger
enkeltsidede applikationer har en langsommere første sidebelastning end serverbaserede applikationer., Dette skyldes, at den første belastning skal nedbringe rammen og applikationskoden, før den ønskede visning gengives som HTML i Bro .seren. En serverbaseret applikation skal bare skubbe den krævede HTML til bro .seren, hvilket reducerer latenstiden og Do .nloadtiden.
hurtigere sideindlæsningdet
Der er nogle måder at fremskynde den indledende belastning af en SPA, såsom en tung tilgang til caching og dovne indlæsningsmoduler, når det er nødvendigt., Men det er ikke muligt at komme væk fra det faktum, at det er nødvendigt at hente den ramme, i det mindste nogle af programmets kode, og vil sandsynligvis ramt af en API for data, før du viser noget i browseren. Dette er et “betal mig nu, eller betal mig senere” afvejningsscenarie. Spørgsmålet om ydeevne og ventetider forbliver en beslutning, som bygherren skal tage.