Module 2
Introduction to a web-app
Introduction to Modern Application Dr Gaurav Raina (IIT Madras), Tanmai Gopal
Contents
Objective:
1. Get familiar with the basic terminology of webapps and development
2. Convert basic understanding into more technical understanding
Topics:
3. Using a web app
4. Webapps - A detailed look
Introduction to Modern Application Dr Gaurav Raina (IIT Madras), Tanmai Gopal
1.Using a webapp
Introduction to Modern Application Dr Gaurav Raina (IIT Madras), Tanmai Gopal
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 Dr Gaurav Raina (IIT Madras), Tanmai Gopal
1.Using a webapp - browsing
Introduction to Modern Application Dr Gaurav Raina (IIT Madras), Tanmai Gopal
1.Using a webapp - The Steps
1 O
p
e
n
b
r
o
w
s
e F
r i
r
a e
p f
p o
l toxModern Application
Introduction Dr Gaurav Raina (IIT Madras), Tanmai Gopal
2. Webapps - a detailed look
Introduction to Modern Application Dr Gaurav Raina (IIT Madras), Tanmai Gopal
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 Dr Gaurav Raina (IIT Madras), Tanmai Gopal
2.1 Browser
Browsers can make requests to servers using URLs and render the response data
Cont Fil Example
ent e
Type ext
en
sio
n
text/p .txt http://www.flipkart.com/robots.tx
lain t
text/h . http://www.cenlib.iitm.ac.in/docs/
tm l ht library/ejnls-iitm.html
ml
Computer programs that can make requests to servers and fetch responses are called clients. When these programs
https://hasura.io/img/hasura-sa
im ag .
make requests
e/png pn to web
nd.pngservers, they are called web clients. A browser is a web client.
g
Introduction to Modern Application Dr Gaurav Raina (IIT Madras), Tanmai Gopal
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 Dr Gaurav Raina (IIT Madras), Tanmai Gopal
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
h ttp s://w w w .f l
ip kart.com /b ooks/p r?
Purpose: Find a resource onks&
sid = b theqInternet
= w eb + ap p
Introduction to Modern Application Dr Gaurav Raina (IIT Madras), Tanmai Gopal
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 Dr Gaurav Raina (IIT Madras), Tanmai Gopal
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 Dr Gaurav Raina (IIT Madras), Tanmai Gopal
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
Com puter/devic ISP Core router
e
1.2.3.4
Server (com puter)
A program can send a request 5.on
6.7.a
8 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 Dr Gaurav Raina (IIT Madras), Tanmai Gopal
2.5 Server - Web Server
A web server can listen to requests and respond back with data on the same connection
W eb server
N etw ork
resp on se Brow ser
(w eb client)
req u est
Com puter (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 Dr Gaurav Raina (IIT Madras), Tanmai Gopal
Summary
Introduction to Modern Application Dr Gaurav Raina (IIT Madras), Tanmai Gopal
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
Introduction to Modern Application You can watch the module video on Youtube:Dr Gaurav Raina (IIT Madras), Tanmai Gopal
