Lesson 1

Introduction to Advanced
Web Programming

1
 Session Learning Outcomes
• At the end of this Topic, the learner should be able
to:

i. Define the term advanced web programming

ii. Differentiate between web 1, web 2and web 3
iii. Explain the principles of web services and service
oriented architecture
iv. Explain the principle of Application Programming
Intefaces
v. Describe the principles of REST as applied in web
application design

2
 Web Programming
• Web programming refers to the writing, markup
and coding involved in Web development, which
includes Web content, Client side and server
scripting.
• web programming can be divided into Client
Side and Server Side

3
 Client Side vs Server Side
Client-side scripting Server-side scripting

Source code is not visible to the user because its

Source code is visible to the user. output
of server-side is an HTML page.

Its main function is to provide the requested Its primary function is to manipulate and provide
output to the end user. access to the respective database as per the
request.

Code interpreted by the server(Apache HTTP

Code interpreted by Browser server)

It runs on the user’s computer(browser) It runs on the webserver.

Data validation provided by JavaScript Data validation provided by PHP

It is a technique used in web development in It is a technique that uses scripts on the

which scripts run on the client’s browser. webserver to produce a response that is
customized for each client’s request.

HTML, CSS, and JavaScript are used. PHP, Python, Java, Ruby are used.

4
 Web Application.
• A Web application is a program or software created
as a result of web programming and is normally
stored on a remote server.
• a web application consists of a frontend-GUI, a
middleware-business logic and a database(data
storage)

5
Web 1.0

6
 Web 1.0

• The first iteration of the web represents the web

1.0, which, according to Berners-Lee, is the
“read-only web.”
• In other words, the early web allowed us to
search for information and read it.

• There was very little in the way of user

interaction or content generation.

• An example might be a personal Web page that

gives information about the site's owner, but
never changes
7
Web 2.0

8
 Web 2.0

• Then Web 2.0 came in.

• Tim referred to it as the “read-write” web.

• Users are no longer just consumers; they become

producers or co-producers of contents.

• Examples include Wikipedia, blogs, social

networks and YouTube

9
 Web 3.0

• Web 3.0 Is The Third Stage Of Development Of The

www Also Known As “The Semantic Web” Or “The
Intelligent Web” Sometimes Also Referred To “The
Decentralized Web "Combines the virtues of Web 1.0
and 2.0.
• We Can Say, Web 3.0 Is A “Machine To User” Approach
Which Is More Connected, Open And Intelligent
• In Simple Words We Can Say A Smarter Web than Web
2.0
• Web 3.0: The Encoding Of Meaningful Knowledge On
The Web In A Manner That “The Machines” Can
Understand.
• It Is About Deploying AI On The Web Which Can Make
Decisions On Behalf Of The User Automatically.
10
Difference Between Web 1.0, Web 2.0,
Web 3.0
Web 1.0 Web 2.0 Web 3.0

The first and most reliable Because of developments in web Web 3.0 is the next break
internet in the 1990s. technologies such as Javascript, in the evolution of the
Provided limited info and HTML5, CSS3, etc., and Web 2.0 Internet, allowing it to
little to no user made the internet a lot more understand data in a
interaction, interactive. human-like manner.

Social networks and user- It will use AI technology,

Before, there was no such generated content production Machine Learning, and
thing as user pages or just have flourished because data Blockchain to provide
commenting on articles. can now be distributed and users with smart
shared. applications.

Consumers struggled to
Many web inventors, including This will enable the
locate valuable
the above-mentioned Jeffrey intelligent creation and
information in Online 1.0
Zeldman, pioneered the set of distribution of highly
since there were no
technologies used in this tailored content to every
algorithms to scan
internet era. internet user.
through websites.

11
 Web Services
• A web service is a software application that
communicates with another software for the
purposes of exchanging data between the apps
using a collection of open protocols and
standards.

• These software's are often written in various

programming languages e.g. one software can
be written in Java while the other in PHP.

• When such two software's communicate and

share data, it is called software interoperability

12
 Service Provider and Consumer

• To enable COMMUNICATION between two

applications.

• SERVICE PROVIDER-Creator of web services

• Develops and implements the application(web
service) and makes it available over the
internet.

• SERVICE CONSUMER-Client 13
 Service Provider and
Consumer(cont.)
• EXAMPLE: While speaking to your friend over
telephone, Medium is the phone and format is the
common language(e.g English) that both of you can
understand

14
 Software Interoperability
• Refers to the functionality of different programs to exchange
information, share files and use the same protocols.

• Interoperability helps close the gap created by language

barriers and varying format specifications to help public
administrations collaborate.

• Case study: TUM SIMS and SAGE: TUM SIMS uses PHP and
JavaScript while Sage ACCPAC uses C#.

• Interoperability is created via APIs using json

15
 Standards and Protocols
• Web services are built using open standards and protocols in
order to integrate with various applications.
• The different protocols that web services use include:
• Extensible Markup Language (XML) or JSON (JavaScript Object Notation) .
This is used to tag, code and decode data and transport data between apps.
• Simple Object Access Protocol (SOAP). This is used to build the App.
• Web Services Description Language (WSDL). This is used for telling the
client application what is included in the web service and how to connect.
• Universal Description, Discovery and Integration (UDDI). This is used to list
what services are available within one application. It also allows web
services to be discoverable to other services.
• Representational State Transfer (REST). This is used to build the App

16
 REST Architecture and API’s
• REST, a term coined by Roy Fielding in 2000 is an
acronym for REpresentational State Transfer.

• It is an architecture style for designing loosely

coupled applications over HTTP, that is often used in
the development of web services.

• Two web apps that communicate and exchange

information using REST APIs and principles are
called RESTful web services.

17
 REST Architecture and API’s
• REST can be used to create APIs or just web apps that allow
you to perform CRUD (create, read, update, and delete)
operations between a clients and a servers.

• APIs and REST connects your backend with your frontend so

they can communicate with each other.

• Uses HTTP methods like the GET, PUT, POST, and

DELETE to request a server perform a particular action.

18
 Rest API Examples
 Twitter: Twitter API permits third-party applications to access and write
data from Twitter. Write and post tweets, share tweets, and read profiles
using it. This API is handy for obtaining and analyzing massive quantities
of tweets regarding certain subjects.

 Instagram: The Instagram Basic Display API provides access to user

profiles, images, and videos. You may use this API and others to create
applications that pull user data and integrate it into your product.
Instagram also provides a Graph API for professional Instagram accounts
to manage online activity.

 Spotify: Spotify's web API lets customers obtain information about artists,
songs, albums, and playlists on the Spotify platform. You may also use it to
create playlists, stop and play music, shuffle tracks, and do various other
things.
19
 REST Principles
• REST defines a set of principles or constraints to be followed
while designing a service for communication or data
exchanged between two applications.

• The principles are:

• Client -Server
• Uniform interface
• Statelessness
• Cacheable
• Layered System

20
 1.Client-Server
• Both the client and the server are completely autonomous
in every way.

• Their communication will only happen using the REST.

• This improves the portability of the codebase across

multiple platforms and also helps with making the server
scalable.
o This constraint essentially means that client
application and server application MUST be able to
evolve separately without any dependency on each
other.

21
 2. Statelessness
• No client context shall be stored on the server between
requests. The client is responsible for managing the state
of the application.

• Statelessness means that every HTTP request happens in

complete isolation. When the client makes an HTTP request,
it includes all information necessary for the server to fulfill
the request.

• The server never relies on information from previous

requests from the client. If any such information is
important then the client will send that as part of the
current request.
22
 Uniform Interface
• REST API provides four interfaces to achieve uniformity.

23
 Cacheable
o Caching is the ability to store copies of
frequently accessed data in several places
along the request-response path.

• A REST API should allow caching of frequently

requested data.
• To reduce bandwidth, latency, and server load, an API
should identify cacheable resources, who can cache
them, and for how long they can remain in the cache.

24
 Layered System
• An API may have multiple layers such as proxy servers or
load balancers, and the endpoint server may deploy
additional servers to formulate a response.

• The client is unaware of which server responds to the

request. A layered system makes an API more scalable.

25
 Application Programming
Interface(API)
• Software apps written in different languages use API’s to
integrate and interoperate.

• Your ecommerce site may connect with payment software,

shipping software, and other essential integrations via their
APIs.

• REST API’’s are commonly used

26
 How REST API works
 REST APIs employ HTTP requests to communicate with
databases to do routine tasks like creating, reading, updating,
and deleting entries (also known as CRUD) within a resource.

 For example, a REST API may use a GET request to get a

record, a POST request to create one, a PUT request to
update one, and a Destroy request to remove one.

 One can make API queries using any HTTP method.

 A well-designed REST API is similar to a website that runs in a

web browser and supports HTTP.

27
 Methods of Rest API(cont.)
 It defines a set of functions (GET, PUT, POST, DELETE) that
clients use to access server data. The functions used are:

 GET (retrieve a record)

 PUT or PATCH (update a record)
 POST (create a record)
 DELETE (delete the record)

28
 Software Architecture, Design &
Benefits
• A software architecture is a structure that describes software's major
components, their relationships and how they interact with each other.

• Focuses more on the interaction between the externally visible

components of the system especially with issues beyond the data
structures and algorithms used in the system.

• Software design is a process to transform user

requirements into some suitable form, which helps the
programmer in software coding and implementation.
• A good architecture and design helps in building a
quality, maintainability, performance oriented and the
overall success of the final product.

29
 1. Client Server
• Most Architecture
of the web applications are based on
client server architecture.
 Client: Client process is requester of the service
or information.
 Example: Browser, Online chat client, Email client etc.
o Server: Server process accepts the request of
the client, performs the processing, gathers the
required information.
o Example: Print server, Web server, Database server,
chat server, FTP server etc.
 Medium of communication of client and server:
 It defines the path by which client and server
communicate with each other. E.g.-Internet, Intranet,
Bluetooth network etc.
30
 2. Layered/Tiered
 An Architecture
improvement over the client/server
architecture pattern.
 Most commonly used architectural pattern.

 comprises of three or more layers:

 presentation/user interface layer, business logic layer,
and data persistence layer.

 Uses model view controller (MVC) pattern to simplify

web applications

 Main advantage is the separation of concerns that is

each layer can focus solely on its role and
responsibility.

31
 3. Service-Oriented
Architecture (SOA)
 Service-oriented architecture (SOA) is a method of software
development that uses software components called services to
create business applications.
 Each service provides a business capability, and services can also
communicate with each other across platforms and languages.

 Developers use SOA to reuse services in different systems or

combine several independent services to perform complex tasks.
 Focuses on having different services communicating with each
other to carry out tasks.

 Thus, a web service is a basic building block in a SOA.

32
 4. Micro Services
 Micro services, or micro service architecture, is an
approach to application development in which a large
application is built as a suite of modular components or
services.

 a service-oriented architecture pattern wherein

applications are built as a collection of various smallest
independent service units.

 MSA focuses on decomposing an application into single-

function modules with well-defined interfaces.

 These modules can be independently deployed and

operated by small teams who own the entire lifecycle of
the service.
33
 SOA vs. Microservices
Parameter SOA Microservices
Design type In SOA, software components are exposed to Micro Service is a part of SOA. It
the outer world for usage in the form of is an implementation of SOA.
services.

Dependency Business units are dependent. They are independent of each

other.
Size of the Software Software size is larger than any conventional The size of the Software is always
software small in Microservices
Technology Stack The technology stack is lower compared to Microservice technology stack
Microservice. could be very large
Nature of the Monolithic in nature Full stack in nature
application
Independent and SOA applications are built to perform They are built to perform a single
Focus multiple business tasks. business task.
Deployment The deployment process is time- consuming. Deployment is straightforward
and less time-consuming.
Cost - effectiveness More cost-effective. Less cost-effective.
Scalability Less compared to Microservices. Highly scalable.
Business logic Business logic components are stored inside Business logic can live across
of single service domain Simple wire domains enterprise Service Bus
protocols(HTTP with XML JSON) like layers between services34
API is driven with SDKs/Clients Middleware
 The end
Thank you

35