1

First of all, sorry for the bad terminology used here. I have no clues on what the thing I try to explain is called. Let me try:

I recently see a lot of nice websites being build with a "seamless hyperlink" system -- when hyperlinks are clicked it does not visit a url but it somehow switches to it seamlessly (no page reloading or such). Some websites do this in such a good way that it looks like the website is done as a single piece such as the flash websites of early 2000's.

I'm aware of this topic:

Here is an example to explain what I mean: http://www.thenerodesign.com/

I'm aware of this thread: How does GitHub change the URL without reloading a page?

What I'm asking here is not pnly the "change of the url" part ut also "loading of the clicked content" part. I can modify the address bar, no problems with that. However, I have no clues on how to display different websites when a certain url is visited, or how to load a clicked hyperlink in a seamless way like the website example above.

Therefore, the question exceeds the "history api"

If my question is unclear please let me know so that I can modify it accordingly to make it more clear.

Thank you.

Community
  • 1
  • 1
Mia
  • 6,220
  • 12
  • 47
  • 81
  • 1
    This is done using AJAX - http://www.w3schools.com/ajax/default.asp – Sean Murrin Nov 01 '15 at 11:18
  • @SeanMurrin how about loading the correct content when the hyperlink is clicked directly? Do I have to read the address bar and load the content via ajax? – Mia Nov 01 '15 at 11:19

2 Answers2

-1

What you're looking for is called Single Page Application (SPA). Start digging around about this concept.

At the end of the day, most SPA implementations render views entirely in the client-side and they switch from one view to other loading data as JSON and binding it also in the client-side.

Take a look at the home page of Angular UI Router and you'll get a good idea about what you need to make your first steps on SPA world.

OP said:

I beleve I understand the core concept of a spa, even if it's a little bit --- what I don't really get is - how to display the correct content when the href link is directly visited (instead of a click)

This is also done in the client side. When the SPA is first accessed it reads the path in the URL and opens up the right view with the desired state automatically. Imagine that the action that would get you to some view using a click handler can be also triggered programatically.

When I say automatically I mean that some JavaScript code must handle this scenario. Usually you use a SPA UI framework like Angular UI Router or any other one since they already handle this issue for you.

Answering to wrong Quentin concerns...

@Quentin said:

"When the SPA is first accessed it reads the path in the URL and opens up the right view … When I say automatically I mean that some JavaScript code must handle this scenario." — Don't do that. That completely misses the point of using the history API which is that you build a hybrid client-side/server-side app so that when JS fails it still works, and the URLs work for search engines, etc. If you make the whole thing depend on JS you might has well use hashbangs

  1. Not all SPA are SEO aware.
  2. Not all SPA are hybrid.
  3. Not all SPA have a public surface. The SPA can be entirely accessed using authentication and authorization. For example, does a 100% SPA private social network or an administration panel would be partially loaded from the server-side? Wrong!.
  4. Not all SPA are browser-oriented. No one should miss the point of a SPA when developing a mobile hybrid application using a SDK like Apache Cordova.
  5. If the server fails, it's fine that the client application continue working. Since the advent of local storage, Indexed DB and other HTML5-related APIs, and the chance to run an HTML5 app in offline mode, a SPA can still work with the server down and synchronize data or queue server actions until the server goes up again.
  6. This approach doesn't defeat the purpose of HTML5 History API. How it does? If the history is still there, the SPA can restore its state entirely in the client-side and request the missing data to the server if it's available!.
  7. Final point: how do you open up a SPA from the server side in the right state if it's not an hybrid SPA like you said? If you develop a true Web app, the server mightn't be required in all operations and if the server is required, I would double-check my 5th point.
  8. A true SPA/Web app defines that the server (i.e. a RESTful API) is a dependency rather than an integral part of the application. The application is just a mix of client-only operations plus server-side ones.

It seems like both @Quentin and who thought that my answer address the issue in the wrong way, while I believe that it's out of question that current and future HTML5 Web app development goes beyond just working with dynamic views that can be both server from the browser or server.

Let's put here a simple sample. If Adobe ports Photoshop to HTML5 (using canvas' 2D/3D rendering), and it requires the server for heavy graphic filter processing and storing files in the cloud, would you use the server to open up the last edited file or the client would access its client-side history using History API, local storage and/or IndexedDB to request the server the latest version of the file or maybe a saved draft?

For me SPA isn't just parallax scrolling or loading content in containers dynamically: it's the new era of Web apps.

Matías Fidemraizer
  • 63,804
  • 18
  • 124
  • 206
  • 1
    I believe I understand the core concept of a spa, even if it's a little bit --- what I don't really get is - how to display the correct content when the href link is directly visited (instead of a click) – Mia Nov 01 '15 at 11:21
  • @Mia No problem, you're welcome ;) – Matías Fidemraizer Nov 01 '15 at 11:21
  • @Mia — The server serves the page in the state you want it, same as URLs always work. – Quentin Nov 01 '15 at 11:22
  • @Quentin can you feed me a basic example? It's hard to search for something if you want to learn about it but you have absolutely no clue what you're looking for or where to start. Thank you for the answers – Mia Nov 01 '15 at 11:23
  • Err. `http://example.com/foo` is a page which contains the word *foo*. When the browser requests `/foo` from `http://example.com`, the server sends back an HTML document containing the word *foo*. – Quentin Nov 01 '15 at 11:25
  • @Mia Check my updated answer, I believe it should get you in the right track about understanding how it works.. – Matías Fidemraizer Nov 01 '15 at 11:25
  • "When the SPA is first accessed it reads the path in the URL and opens up the right view … When I say automatically I mean that some JavaScript code must handle this scenario." — **Don't do that**. That completely misses the point of using the history API which is that you build a hybrid client-side/server-side app so that [when JS fails](http://kryogenix.org/code/browser/everyonehasjs.html) it still works, and the URLs work for search engines, etc. If you make the whole thing depend on JS you might has well use [hashbangs](http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs) – Quentin Nov 01 '15 at 11:27
  • (You can use JavaScript do to that right, but it should be server side JavaScript. See also Isomorphic JavaScript apps). – Quentin Nov 01 '15 at 11:30
  • @Quentin this seems wrong to me as well as it won't work if the js is not enabled. I mean, I don2t know if I should consider this scenerio in my case, but it feels like the page should load correctly in all cases. – Mia Nov 01 '15 at 11:30
  • @Mia — That's why I said the server needs to deliver the page in the right state, and that the client side code should not be responsible to loading the content for the initial view. – Quentin Nov 01 '15 at 11:31
  • @Quentin I see - that makes sense. In this case what I don't get is this: in your foo example if the page contains only the word "foo" but nothing else then as far as I understand it can be loaded as the data into the actual page.. as the clicked page's content. But then when the directly visited it does not contain the necessary bits of the html which makes the design. I'm sorry if I'm asking too much about this but I'm new to these concepts, and google didn't bring me the right answers as I couldn't feed her the right words. – Mia Nov 01 '15 at 11:33
  • "in your foo example if the page contains only the word "foo" but nothing else then as far as I understand it can be loaded as the data into the actual page" — That was a heavily simplified example. It would also include all the JS needed to load the other pages dynamically when links and so on were clicked. You would need a sensible API so you could request both full pages (for initial loads and non JS clients) and pure data (for JS to process). – Quentin Nov 01 '15 at 11:35
  • @Quentin I see, thank you very much! Please answer the question simply so I can mark it as an answer. – Mia Nov 01 '15 at 11:41
  • @Mia I don't care about the downvotes. It's not wrong what I provided in my answer. Not all pages require SEO and most SPA are private. In the other hand, the server won't be able to provide the right state in the client side, as the entire application is initialized using JavaScript. – Matías Fidemraizer Nov 01 '15 at 11:56
  • @MatíasFidemraizer İ didn’t downvote you – Mia Nov 01 '15 at 12:02
  • @Mia I was pointing the comment to Quentin and any other who could think that my answer is wrong. – Matías Fidemraizer Nov 01 '15 at 12:11
  • @Mia See the updated answer which addresses a lot of concerns. – Matías Fidemraizer Nov 01 '15 at 12:11
  • @Quentin Read my updated answer. – Matías Fidemraizer Nov 01 '15 at 12:12
  • @MatíasFidemraizer — The response to all 8 of those points is the same: Use hashbangs instead of real URLs. There is no point is mapping the SPA states onto real URLs if the server isn't going to deliver the app in the right state for them. The fragment ID is handled entirely client side, so if you are going to make all your state logic client side only, then put the data for it client side only too. – Quentin Nov 01 '15 at 12:30
  • @Quentin This is your point and is 100% subjective... If you've downvoted my answer just because your point, I would say that you should provide your own answer to provide your knowledge instead of just saying "the anwser is *hashbangs*... BTW, it's wrong that there's no point of using real URLs when the history API doesn't enforce URLs to exists but **just to provide state info** and leaves to the app the responsibility of implement soft hyperlinks or not... – Matías Fidemraizer Nov 01 '15 at 13:33
  • @MatíasFidemraizer I'm sorry but I agree with Quentin here - google visibility is important. JS can't be executed for search engines or social media which makes it not so useful for a website. For a single page web app it might be the opposite. – Mia Nov 01 '15 at 15:07
  • @Mia Google Bot can be legally trampered to serve static content when visits your SPA. BTW, it seems like you don't have very clear what you're asking for in your own question. If you're looking for dynamic page loading, then I doubt that it will fit with SEO and viceversa. For the question you asked, probably my answer fits well, now it's up to you to go this way or go another depending on your own requirements. – Matías Fidemraizer Nov 01 '15 at 15:48
  • @Mia You can lie the Google Bot unless you serve a different content when users visit your page using an actual web browser. – Matías Fidemraizer Nov 01 '15 at 15:49
-2

what you see is probably, an ajaxified page, the page is using ajax to load the data at that url and use JavaScript to change the page.

zola
  • 5,737
  • 8
  • 33
  • 48