Modern Web Apps

To have The Understanding of Modern Web Apps Working We Will take The Example of the example app .

Open The Example App on Your Browser , and Open The Developer Console Section . You can do this by Right Clicking and Selecting the Inspect Option and Going to Console Tab or Directly by Ctrl + Shift + I .
We Will be Seeing the Network tab and Console tab in This Article .
Check the Disable Cache Option For Now .
The Console tab is the Most Important , Remember to Keep it open At All Times .

HTTP GET

The Server and the Web browser communicate via the HTTP(HyperText Transfer Protocol) . The Network tab of Inspect mode Tells us How The Browser and Server Communicate . For Example ,

This Means The Browser has fetched the exampleapp and the kuva.png image from the server .
Clicking on it , reveals more Information about it , Such as The Request Type , Status Code .

The Response tab shows the response data , a regular HTML Page .

The Sequence of Opening The Link of Example App is as Follows :

Till now , You might have understood That The Get Request is used to get the resources from the Server .
There Are Other Types of HTTP Request Such as POST , PUT , DELETE , which we will see them later in Backend .

Go to The notes page and see The Network Tab , The Browser makes 4 HTTP Requests , first is the HTML Document , we can see The Response By Clicking on the Response Tab .

Take a Look at main.js code , It Looks like this :

var xhttp = new XMLHttpRequest()

xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    const data = JSON.parse(this.responseText)
    console.log(data)

    var ul = document.createElement('ul')
    ul.setAttribute('class', 'notes')

    data.forEach(function(note){
      var li = document.createElement('li')

      ul.appendChild(li);
      li.appendChild(document.createTextNode(note.content))
    })

    document.getElementById("notes").appendChild(ul)
  }
}

xhttp.open("GET", "/exampleapp/data.json", true)
xhttp.send()

The xhttp method is used instead of modern fetch because we do not want to go into promises just yet .

The Chromium based Browsers are not too good in displaying JSON-data . USe JSONView Extension to display it in a good format .

the last line of the code :
xhttp.open("GET", "/exampleapp/data.json", true) xhttp.send()
This uses the “GET“ method and fetches the data from data.json and sends it

This line :
var ul = document.createElement('ul')
creates a ul element , and then following this line of code :
var li = document.createElement('li')
ul.appendChild(li);
li.appendChild(document.createTextNode(note.content))
}) document.getElementById("notes").appendChild(ul)
creates a li tag , where new li tag is created everytime we create a new note and is added to the DOM, where it is displayed .

Now , Click on the console tab, and by clicking on the small triangle we can expand and see the notes , this is because we added console.log(data) .

xhttp.onreadystatechange

Document Object Model (DOM)

We can think of HTML as a tree-like structure .

Even the console Elements Tab shows it .

You can expand it further by clicking smal triangles .

How Server Loads Javascript in the Browser :

• The Browser first makes a request to server to fetch the HTML File , server returns the HTML File .

• Then fetches the main.css file ,

• Then in a similar way the Javascript main.js File .

• Browser makes a HTTP GET Request to the data.json file , which returns the JSON data .

  FORMS AND HTTP POST .
  Take a look at HTML file , it contains a form element .
  When the form is submitted , the browser will send input to the server . the new_note is the newly creates note created by user .
  When a new note is been added to the notes a 302 , we can see that it has a 302 Code and Its Method is POST .

A 302 Status Code is a URL Redirection , Which means the the target is available at a different URL temporarily , which you can see on the Location in Headers .

Further we will See how Express helps creates server and use Methods more Smoothly .

Single Page App .
Our example app works like a traditonal web app . It stores all of the logic on the server , and browser only renders HTML .
Recently , the trend of creating Single-Page-Applications (SPA) has been preferred .
The SPAs do not fetch all of the pages sepearately from the server ,instead it only sends one HTML file , without reloading the page .
Think of Traditional web app as books , on each page content is changed and new data is fetched from the server , and SPA as tablet , same screen but only the content changes .
The Example we can take of SPA is https://studies.cs.helsinki.fi/exampleapp/spa ,it might look like it is a SImple web App , but open the Network tab , empty it and add a new note . Only one request is made to the server .
The form has no action or method to define how to send the data .

The Content type tells that the format is of json format . It Also tells us the request method is 201 Created

Javascript Libraries :
The sample app is done using vanilla javascript , using the DOM to manipulate the Pages
There are various libraries that are used such as jQuery , React , Vue , etc .
React is the most popular one which us developed by Facebook , Though Vue is also getting popular .

We Will be Sheding Light On React in further Articles .

Source - FullStackOpen By University of Helsinki