Introduction to web 1
applications
Schedule
1. Structure of applications
2. Most popular technologies for creating web applications
3. Client-server applications
4. Web Services
5. Introduction to HTML and CSS
6. Web browsers 2
Structure of 1
applications
Structure of applications
Each application, whether it is web-based or of any other kind, is organized in a certain structure.
This depends on the programming language that is used for creating it or some other technology. It's
not always constant and we can di erentiate between two types of approaches:
opinionated – meaning, that the structure is known upfront before the application is written and
it is recommended to all developers within the given technology;
un-opinionated – this approach provides for a higher degree of exibility (which has its upsides
and its downsides). The choice of structure in this case belongs to the architect, and in part to 2
software developers.
You can think about structure as if it referred to elements of an application. It includes the way
catalogs and les are arranged.
What does the structure depend on
Structure may depend on many di erent factors, including:
the choice of technology used (the so-called stack) – architects and programmers choose
technologies that best match business requirements.
webserver for the chosen programming language – di erent languages and technologies have
di erent requirements. E.g. in order to launch an application written in PHP you need a web
server, such as nginx or Apache . In order to launch a Java , you need another type of web
server, e.g. JBoss , Tomcat , Jetty . For applications written in .NET you can use the IIS web 3
server, while [Link] does not require an external web server at all.
In a moment we will discuss the main elements of structure found in internet applications, which are
most common.
Database server
A database allows for storing, modifying, and removing some types of information.
An application may use a database to store information in an organized and continuous way
(regardless of whether the application or server keeps running). You will learn more about this later
in the course.
We distinguish between many di erent types of databases: relational, non-relational, graph-
based, and others, as well as between many speci c database technologies: MySQL, MS SQL,
Postgresql, SQLite, MongoDB, and others.
4
Have you noticed how many of these names include the abbreviation SQL? We will explain it a bit
later :)
A database is one of the most commonly occurring elements of web-based applications. Usually, it is
represented by the icon below.
Web app server
We have already discussed this element. This is how a particular type of application can e ciently
communicate with the external world (i.e. a client, which we will speak about in a moment). The type
of web server may depend on the programming language that is used.
This is where the code written by programmers is stored.
On the right-hand side you can see an example
of the con guration of the so-called LAMP:
L = stands for Linux, 5
A = is the web server Apache,
M = database MySQL,
P = programming language PHP.
This con guration is complete and it can work
just as we have drawn it.
Reverse-proxy server and a load balancer
In order to optimize and balance tra c between web servers in some cases, we use such elements
as reverse-proxy servers or load balancers.
They allow us to manage tra c better, and even to overtake some tasks (like HTTP negotiations or
establishing a secure connection) – they are just more e cient at that.
While this is not a required element of a web application, it is often used when building larger
services.
6
Reverse-proxy server and a load balancer
On the right-hand side, you can see an example
of the use of a load balancer.
If you think this scheme is somewhat
complicated - you're right :)
Using a reverse-proxy or a load balancer is not
always simple.
7
Static le server
There is one other element that is characterized by the aim to increase the speed of larger services.
Serving static les, i.e. those which are independent of the code and always look the same.
This type of le includes e.g. images, sounds or videos. Instead of taking care of sending those les
through a web server (which should be busy processing code), we can set up a separate server,
which will only deal with this purpose.
By limiting its functionality like that we can make it very quick. For this purpose, we can use e.g. an
nginx server.
8
Static le server
Example: LAMP + static le server.
9
Most common web
application 1
technologies
Most common web application technologies
Source: [Link]. The data is only illustrative. Those statistics are not exactly accurate (not every technology is represented).
PHP
PHP is certainly the most popular web
application technology in the world.
It owes it's popularity to:
its long presence in the market,
very simple syntax, which is the so-called low
barrier of entry for developers,
a huge community of supporters, 3
as one of the rst programming
languages, PHP o ered the most advanced
possibilities built into the language itself.
It is very often used in the previously mentioned LAMP, accompanied by a MySQL database.
Java
Is one of the most popular languages and web
technologies. Created by Sun Microsystems, it
currently belongs to Oracle.
Java is mostly used by corporations, banks, etc. -
wherever systems have to work according to
strict, unchangeable rules. It is used for writing
Android applications, and it can be used in
many other places. 4
Java was originally used with MySQL databases. We should note that Java was one of the rst
technologies which supported many di erent types of databases. This gave it outstanding popularity
in environments with multiple databases.
.NET
.NET is a Microsoft technology, which allows for
writing code e.g. in C#. It is in direct competition
with Java.
A good structure and a lot of Microsoft's e orts
(like moving this technology to open source)
made it the most popular one, not only for web
applications. 5
.NET is most often combined with an MS SQL
database (also a Microsoft solution).
Other technologies
There are very many technologies in use. Including a few others worth mentioning:
Ruby (or actually Ruby on Rails, because while using Ruby we also use Rails) – is a technology
which due to its simplicity and vast possibilities bloomed around 2006 - 2008. To date, many
startup web applications is written in this technology.
Python – is a technology with a broad range of applications, not only for web use but also for big
data and arti cial intelligence. Those possibilities brought Python enormous fame.
[Link] – is a technology that allows for the use of JavaScript known from the browsers for 6
writing backend applications. Its great throughput and huge e ciency made it very popular.
[Link] is very often used by startups.
Client-server 1
applications
Client-server applications
This may sound complicated, but it really is not :)
The client-server application is the most common type of architecture among web applications.
From our perspective, it represents a connection between a client (such as a web browser - a so-
called client agent) and a server (a general collection of applications). Most often this type of
connection is executed through the internet.
2
Client-server applications
The below illustration presents such architecture. Notice that we have replaced all of the solutions
on the application side with an image of a cloud - as a general server. This is because from the
client's perspective it does not matter what servers or databases are used inside.
3
Who is a client?
We use the word client to describe a connection (or a bundle of connections) to a server.
The client is most often represented by the user's device, and on the device by the so-called user
agent. A web browser is a user agent.
As you are well aware, a single person may use many devices, and on those devices, they can use
many di erent browsers - it's true. One device can use many di erent agents – with each being a
separate client for the server.
A user agent usually has a short string of characters which it uses to identify itself, e.g.: 4
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
From this string of characters we can extract the following information:
the connection was established using a computer-based on 64-bit Windows 7,
the browser it used was Firefox version 47,
the browser used the JavaScript Gecko engine.
How does the standard communication look like when you're
browsing the web?
Typical communication when a web browser is used to browse through websites looks as follows.
The browser (user agent) sends a request. The server responds. Then the browser ends loading the
page or element and renders it. The process is repeated each time a new element of the website is
obtained.
We will speak further about this process at the end of the presentation.
How does the connection work?
It looks a little di erent with an ongoing connection. We do not operate with requests from a client
and responses from a server. The exchange of information is exible, it is simply sent in any
direction necessary. This means the server can also send information to the client, even when the
client isn't asking for any. This allows for creating dynamic games, VPNs, and many other things.
Such connection is often related to TCP or UDP sockets. For websites, this technology is called
WebSockets. Below is a diagram which presents it.
6
Introduction to 1
HTML and CSS
Where's HTML and CSS in all of this?
Speaking about web applications, there's no way to omit HTML and CSS. Those are the two
languages, which allow for giving structure and layout to any application viewed by the user in their
web browser. In that order.
This tells us where HTML and CSS are located:
the information is sent from the server (through a programming language or as static les) to the
client, that is the web browser.
Only the browser can read HTML and CSS – and it translates it into a working website. The best way
to explain it the meme below :) 2
Source: [Link]/webdevmemes
HTML
HTML is a ( HyperText Markup Language ), which describes the structure of a website. This means
that it tells the browser what data is located in which places (like that there is an image below an
article etc.).
What's interesting is that HTML is also used by search engines such as Google.
Thanks to the proper structure of documents they know what is where on a site
and – as a consequence – they allow for searching through the internet.
Below is an example of HTML – oh the irony – it's actually this particular slide :)
3
What does HTML markup look like?
Most HTML elements include an opening marker and a closing marker. Which cannot be empty, i.e.
there must be a closing marker. They can also include attributes. Take a look at the image below.
Source: [Link]/wyklady/tin/scb/wyklad02/[Link]
CSS
CSS allows for transforming a dry HTML grid into a nicely presented website. Its sole purpose is to
serve the user. It allows for de ning the position of particular elements, their size, and colors.
Currently, CSS even allows for creating animations, 3D e ects, and shades.
The two images below include pure HTML on the left, and the same HTML after applying some CSS
magic on the right.
5
JavaScript
Another language that is often added to a website is called JavaScript.
It allows for di erent types of interactions, smoother data reading, or using WebSockets. It enriches
and animates a website.
Let's sum up. HTML, CSS i JavaScript – What questions do they answer?
6
HTML: what does it include, what does it mean?
CSS: what does it look like?
JavaScript: what does it do?
Web Services 1
What is a Web Service?
A Web Service is a special type of web application, to which another application can send a
request.
Within this de nition, we can see the di erence between a standard web application - to which we
can also send a request. A Web Service is not meant to be read by humans (while naturally, it is
possible), but by another application. Why?
Applications very often are build from bricks. Those bricks can include other Web Services. Their
2
foundation is the application to which the user has access.
This application overtly communicates with others - the Web Services – to take advantage of the
possibilities they o er.
There are many di erent types of data that applications use to "talk" among themselves.
This includes e.g. XML, JSON, or more speci cally REST, SOAP.
Communication between applications usually takes place on the basis of the client-server
architecture.
Example of a Web Service
You must have had some experience with using
an online store :)
When you click on fast payment, you actually pay
through something like PayU, DotPay,
Przelewy24 etc. – the way this works is that the
e-commerce application communicated with
the Web Service of the payment application 3
letting it know that you will be making the
payment.
Another example is logging into di erent portals
using your Facebook account. Take a look at the
diagram below. This is the real flow of that
operation using Facebook.
Internet browsers 1
Internet browsers – review
We have said before, that the internet browser is a user agent (so it represents you), with the
purpose of downloading websites and accessing web applications.
You also know that another job the browser does is translating HTML, CSS, and JavaScript into the
website which you see on your screen (rendering).
On the market today we have several di erent web browsers. On the following slide, you will see
what market share each of them represents and we will discuss the most commonly used ones.
2
Internet browsers - review
Source: Stat Counter
Google Chrome
Google Chrome is most certainly the most
popular internet browser in the world.
As the name implies it is made by Google.
It is developing very quickly and supports the
development of internet technologies.
4
Google Chrome
One look at this map is enough to understand that in many countries this is the most commonly
used web browser (marked with green):
Source: Stat Counter
Safari
Safari is the default web browser for macOS and
iOS devices (including Macs, iPhones, iPads etc).
This is why the Apple browser is in the second
place of the most popular web browsers today.
6
Mozilla Firefox
Firefox is the browser made by the Mozilla
foundation.
It used to be no. 1, now it's still one of the most
popular.
Mozilla also largely supports the development
of the internet and web-based technologies.
7
Edge
Edge is the newest version of the browser
o ered by Microsoft.
It is the default browser for Windows devices.
It replaced Internet Explorer, which didn't have
the most favorable opinion in the market.
Edge is a modern browser that promotes new 8
technologies.
Other browsers
There are very many browsers out there. We should mention a few other ones:
UC Browser – this is a very popular browser (in third place), especially in Africa and China. Not
very popular in Europe and the US. Created by the Chinese company UCWeb. It is available for a
wide range of devices - especially mobile ones.
It is popular mainly due to the high level of compression and the fact that it makes websites load
faster.
Internet Explorer – the old browser from Microsoft. Subject to critique for how slowly it was
developed, for the errors it caused, and security issues it was associated with. Currently, it is not 9
being developed any longer. Still popular among corporations that often use older equipment.
Opera – used to be a premium browser. Currently, in its most recent version, it is based on the
Google Chrome engine and is actively promoted throughout the world.
Vivaldi – an interesting browser created, among others, by the former creator of Opera. It
supports many engines and it has a minimalistic design.
Brave – another interesting browser, which declares that it signi cantly increases the speed of
browsing. One of the interesting features it o ers is the possibility to make micro-payments on
the services we browser through in exchange for cleaning them up of and adverts.
What does a browser do when it downloads a site?
Here's a list of the basic steps taken by browsers in order to present content:
a request is sent to a server, and response is obtained,
as above – it is then translated into di erent additional resources (JavaScript, images, fonts...),
the structure is displayed using HTML,
styling is applied based on CSS,
JavaScript scripts are initiated.
10
This is only a basic list - you should know that today's browsers are very advanced tools. They have
the capability to perform those activities simultaneously, postpone them, change their order, etc.
E.g. the JavaScript V8 engine, which is included in the Google Chrome browser, includes smart
algorithms for processing code.
To summarize: the job of the browser is to make websites work as conveniently and as
e ciently as possible..