How do these sites load your HTML?

Question

I ended up looking at source code from sites like Gmail.com and Secret.ly and noticed that HTML is embedded in Javascript, what is this technology that they use?

Stay this way:

<script>var codes = {"AutoControlHeader":true,"CanSubscribe":false,"Collection":{"Description":"Popu‌​lar secrets from across the world that our community has loved.","ItemCount":272,"Slug":"popular","Title":"Popular"},"CountryCodes":[{"Co‌​de":"al","PhonePrefix":"+355","Name":"Albania"},{"Code":"dz","PhonePrefi

Answer 1

This is not HTML, this is Javascript. This is object notation. It is only a data structure with relevant information that can be processed at any given time. This data presented is a serialized (textualized) notation of a Javascript object with properties (before the :) and values (after it). Each key is an object. As it is possible to perceive some values are other objects forming a data tree. Actually this is inside the Javascript code that is inside the HTML.

It’s essentially the same format as JSON which was created with syntax similar to that found in Javascript to describe objects. You may have this notation within your code but the most common is to carry this data in calls to the server requesting only data. A common technique for doing this without loading the page again is the AJAX. See more about the differences between these objects and JSON in that question. The question is not very good because the AP does not know the subject but the answers show well.

With this data you can mount other parts of HTML by manipulating the GIFT. jQuery made this handling easier. And today has a profusion of frameworks doing the same. it seems that none is good enough so it always comes a new.

Techniques like this are often used on pages that should serve as applications. But be careful not to apply it in wrong places. This is bad for websites common:

• You become very dependent on Javascript and if you don’t know what you’re doing it will prevent many people from seeing your website correctly or completely.
• Hides the information from the searchers. And creates a single entry where there could be several specialized ones (it is possible to solve but not simple).
• If you don’t know what you’re doing, you’ll create security issues more easily. And believe me, most people who do this, they create security problems.
• It takes a lot more work than it seems to maintain a consistent state.

Gmail, for example, even today has problems. It was worse. They have several of the best engineers on the planet and the thing is still bad.

I love SPA, if I were Webdev I would prefer to use this technique but I know it is not suitable in many scenarios.

If you really want to delve into this, do it with dedication. Don’t stop us links you found on this page.

About SPA. More.

Answer 2

Dynamically built interface

What you’re seeing are sites whose interfaces are built entirely or partially via Javascript, i.e., code that runs in your browser.

Usually you get a very basic HTML when you go to the page, plus a set of data, plus a few scripts.

Later, more data can be loaded over time in asynchronous requests using Ajax.

What good is

This type of technique escapes a little from the standards of the web, being generally adopted to improve the user experience, not making it wait for page after page loading.

This feels like using a conventional program instead of a web site.

Problems

On the other hand, developing such web applications is more laborious and more prone to errors.

Examples

Single page Applications (single-page applications), by their very nature, generally adopt this type of strategy.

This is the case, for example, of Gmail. It loads all the necessary code and structures as soon as you access it. Then, you can perform a series of tasks without transferring data from the server.

In Google apps in general, there is even partial support for working offline.

How this is done in practice

In general there are two strategies for dynamic generation of elements:

Creation of elements programmatically

Dog created instances of objects that represent the HTML tags and then they are added somewhere on the page.

This is done with the function createElement of Javascript. Example:

//cria tag <p>
var minhaDiv = document.createElement("p"); 

//adiciona um texto
var conteudo = document.createTextNode("Olá!"); 
minhaDiv.appendChild(conteudo);

//adiciona tag na página
document.body.appendChild(minhaDiv); 

Creation based on an HTML template

You can also inject a chunk of HTML code somewhere on the page.

This can be done using the attribute innerHTML of an existing element in the page. Example:

//substitui todo o conteúdo da página por "Olá"
document.body.innerHTML = "Olá";

There is some difference in performance between the two forms, but in the end the result is the same.