Hoe werkt de navigatie van de nieuwe Telegraaf site?

[dev000]

Wat mij opvalt aan de nieuwe Telegraaf site is dat je kunt navigeren zonder dat de menubalk opnieuw laadt (hij werkt heel snel zoals een app). Ik dacht: dat moet dus iets met ajax zijn, maar wat ik dan niet snap: als je het netwerkverkeer vervolgens gaat bekijken, zie je vervolgens de html-inhoud niet langskomen (tenminste, ik kon het zo gauw niet vinden).

Het is volgens mij geen PWA-app, want ik vind geen service worker.

Wat ik niet snap:
- hoe wordt die inhoud geladen als je switcht van pagina's?
- en hoe kan dat vervolgens de url ook nog eens wijzigt, naar bijv. https://www.telegraaf.nl/sport/ ? Volgens mij kun je met ajax toch alleen hashes wijzigen (dus telegraaf.nl#sport) en niet de volledige url.

Kan iemand mij uitleggen hoe ze dit voor elkaar gekregen hebben?

[g1n0]

Ik verwacht dat het gewoon een SinglePageApplication is.
Als je naar bijvoorbeeld Angular en React kijkt, worden daar ook alleen componenten in en uitgeladen, terwijl de URL ook mee veranderd. Volgens mij gebruiken ze zelf trouwens React.

Even over de html, de data komt vanuit de graphql-endpoint. (JSON-formatted data)

[jelmervos]

URL aanpassen kan dmv pushState: https://developer.mozilla.org/en-US/docs/Web/API/History_API

Uitleg en voorbeeld: https://css-tricks.com/using-the-html5-history-api/

[ Voor 29% gewijzigd door jelmervos op 16-02-2018 09:15 ]

[Woy]

De meeste moderne JS frameworks voor SPA's ( Single Page Applications ) werken op deze manier. Kijk bijvoorbeeld eens naar Angular (>2) en React. Het is gewoon een complete client-side applicatie die zijn views los van de data laad. Het is dus mogelijk dat bij het starten van de applicatie alle views/templates al geladen worden, en dat de invullen van de data daarna via een API opgehaald worden. De client rendert dan vervolgens zelf de HTML.

[Verwijderd]

-

[ Voor 100% gewijzigd door Verwijderd op 19-10-2019 15:16 . Reden: Leeg ivm privacy ]

[0stone0]

Volgens mijn React Dev tool gebruiken ze React ;