Module 2

Introduction to a web-app

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Contents
Objective:

1. Get familiar with the basic terminology of webapps and development

Topics:

1. Using a web app

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 1. Using a webapp

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 What is a webapp?
A web app is a client-server application that runs in a web browser.

Wikipedia Gmail

For the rest of this course: webapps ≈ web applications + websites + webpages

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 1. Using a webapp - browsing

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 1. Using a webapp - The Steps
1 Open a browser application Firefox

2 Enter the web address www.wikipedia.org

3 The browser fetches the data from the server

4 The browser displays the webpage

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2. Webapps - a detailed look

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2.1 Browser - Web Client
A browser is a software which needs to be installed on a device to use webapps.

Common browsers

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2.1 Browser
Browsers can make requests to servers using URLs and render the response data

Content Type File Example

text/plain .txt http://www.flipkart.com/robots.txt

text/html .html http://www.cenlib.iitm.ac.in/docs/library/ejnls-iitm.html

image/png .png https://hasura.io/img/hasura-sand.png

application/pdf .pdf https://www.iitm.ac.in/sites/default/files/uploads/calendar-revised-jul-nov_2016.pdf

Computer programs that can make requests to servers and fetch responses are called clients. When these programs
make requests to web servers, they are called web clients. A browser is a web client.
Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2.1 Browser
● Modern browsers can interpret and run code written by the application author (Javascript)
● Purpose: Make page interactive or dynamic.

Clicking on the icon shows the pending friend Facebook newsfeed keeps automatically fetching new
requests (facebook) content
Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2.2 URL
● A URL identifies both the server and the resource (webpage or content)
● URL stands for: Uniform Resource Locator
● Also informally called ‘web address’
● Purpose: Find a resource on the Internet

https://www.flipkart.com/books/pr?sid=bks&q=web+app

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2.2 URL
https://www.flipkart.com/books/pr?sid=bks&q=web+app

Protocol Hostname Path Query string

Protocol: It defines the mode/rules of communication between the client and server for the request.

Hostname: It identifies the server which will serve the request. It may contain the domain name. In this
case “flipkart.com”

Path: It defines the resource which is being requested. It typically points to a webpage. (in this case list of
books)

Query String: It typically contains any additional parameters that is typically used to add more context to
the same path (in this case books that are about “web app”)
Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2.3 DNS - Domain Name System
● DNS is like a directory which links the domain name to the IP address of the server
○ google.com <> 216.58.197.78
○ facebook.com <> 173.252.89.132
● Every server must have a unique IP address which clients can use to connect with it over the
internet.
● This IP address is mapped to a human friendly domain name to make it easy to remember.
● The directory is maintained by “name servers”. Programs can exchange the domain-name for the
registered IP address by requesting the name server. This is called a “DNS lookup”

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2.4 Network
● Your computer connected to your router connected to your ISP, connected to other ISPs, finally
connected to another computer (the server)

Router
ISP
connection
Computer/device ISP Core router
1.2.3.4

Server (computer)
5.6.7.8

● A program can send a request on a network by mentioning the IP of the other computer and the
network (meaning the entire systems of hardware and software) will route your request to the
computer that has that IP.

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 2.5 Server - Web Server
● A web server can listen to requests and respond back with data on the same connection

Web server

Network
response Browser
(web client)
request
Computer (host)

● Very commonly, a server is also used to refer to the actual computer (also called a
host) on which the “server” software is installed.

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 Summary

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)
 What we covered
Using webapps

We examined how we use typical webapps

Webapps - A detailed look

We examined the technical components that come together when a webapp works

Web apps & websites

Browser, URL, DNS, Network, Web server

Client - server architecturehttps

You can watch the module video on Youtube:https://www.youtube.com/watch?v=n5CQK1knRko

Introduction to Modern Application Development Dr Gaurav Raina (IIT Madras), Tanmai Gopal (Hasura)