Dynamically Built Interface

What you are seeing are websites whose interfaces are fully or partially built using JavaScript, that is, code that runs in your browser.

Usually you get very basic HTML when you access the page, plus a set of data, plus some scripts.

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

What is the purpose

This kind of technique runs somewhat out of web standards, and is generally adopted to improve the user experience, not making it wait for page load after page.

This gives the feel of using a conventional program rather than a web site.

Problems

On the other hand, developing web applications of this type is more laborious and error prone.

Examples

Single page applications (single-page applications) on its own generally adopt this type of strategy.

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

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

How this is done in practice

In general there are two strategies for dynamic element generation:

Creating elements programmatically

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

This is done with the createElement JavaScript function. 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 piece of HTML code somewhere on the page.

This can be done by using the innerHTML attribute element on 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.

This is not HTML, this is JavaScript. This is the notation of objects. It is just a data structure with relevant information that can be processed at any given time. This data is a serialized (textual) notation of a JavaScript object with properties (before : ) and values (after it). Each key is an object. As you can realize some values are other objects forming a data tree. By the way this is within the JavaScript code that is within HTML.

Essentially it's the same format as the JSON that was created with syntax similar to that found in JavaScript to describe objects. You can have this notation inside your code but the most common is to transport this data in calls to the server requesting only data. A common technique for doing this without reloading the page is the AJAX . See more about the differences between these objects and JSON on this question . The question is not very good because the AP does not know the subject but the answers show it right.

With this data you can instead assemble other HTML parts by manipulating the DOM . JQuery made this manipulation easier. And today it has a profusion of frameworks doing the same. it seems that none is good enough so there is always a new one.

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

• You become very dependent on JavaScript and if you do not know what you are doing, it will prevent many people from seeing your site correctly or completely.
• Hide search engine information. And create a single entry where there could be several specialized (you can solve it but it's not simple).
• If you do not know what you are doing, it will create security problems more easily. And believe me, most people who do this create security issues.
• It gives a lot more work than it seems to maintain a consistent state.

Gmail, for example, has problems so far. It was already worse. They have many of the best engineers on the planet and the thing is still captious.

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 dig deeper into it, do it with dedication. Do not stop at links found on this page.

About SPA .