This is an article for beginner developers and those who want to get a little more familiar with the terms and technologies of modern
web applications. The article describes how web applications differ from websites, what types of web applications exist, what they consist of,
and how they work.
1. How web applications differ from websites
For me, a website is primarily something informational and static: a business card of a company, a site of recipes, a city portal or a wiki. A
set of pre-prepared HTML files that lie on a remote server and are given to the browser on request.
Sites contain various static files, which like the HTML file are not generated on the fly. Most frequently these are images, CSS files, JS scripts, but
can also be any other files: mp3, mov, csv, pdf.
For simplicity, I also refer to blogs, business cards with a contact form, landing pages with bunch of effects as sites.
Blogs, business cards with a contact form, landing pages with a bunch of effects, I also refer to as websites for simplicity. Although unlike
completely static sites, they already contain some business logic.
A web application is something technically more complex. Here HTML pages are generated on the fly depending on the user’s
request. Email clients, social networks, search engines, online stores, online business software, are all web applications.
2. What type of web application exist
Web applications can be divided into several types, depending on the different combinations of its main components:
- The Backend (server part of the application) runs on a remote computer that can be located anywhere. It can be written in different programming languages: PHP, Python, Ruby, C#, and others. If you create an application using only the server part, the server will generate a new HTML file and the page in the browser will be reloaded on any transition between sections, form sending, and data updates.
- Frontend (the client part of the application) is executed in the user’s browser. This part is written in the Javascript programming language. The application can only consist of the client part if there is no need to store user data longer than one session. These can be, for example, photo editors or simple games.
- Single page application (SPA). A more exciting option is when both the backend and the frontend are used. Using their interaction, you can create an application that will work entirely without reloading the page in the browser. Or in a simplified version of this type of app, transitions between sections cause reloads, but any actions in the section don’t.
3. Python-framework Django – Backend
In development, a framework is a set of ready-made libraries and tools that help you create web applications. For example, I will describe the principle workings of the Django framework, written in the Python programming language.
First, a request from a user hits the router (URL dispatcher), which decides which function to call to process the request. The decision is made on the basis of a list of rules consisting of regular expressions and function names: if it’s such and such URL, then it’s this function.
The function that is called by the router is called a view. Any business logic can be contained inside, but most frequently it’s one of two things: either data is taken from the database, prepared and returned to the front; or a request came with data from some form, this data is checked and saved to the database.
Application data is stored in a database (DB). Most frequently, relational databases are used. This is when there are tables with predefined columns, and these tables are linked through one of the columns.
Data in the database can be created, read, modified, and deleted. Sometimes the abbreviation CRUD (Create Read Update Delete) is used to denote this. A special SQL language (structured query language) is used to query the data in the database.
In Django, models are used to work with the database. They allow you to describe tables and make queries using Python, which is much more convenient for a developer familiar with it. There is a price to pay for this convenience: these queries are slower and more limited than using pure SQL.
The data received from the database is prepared in the view for sending to the front. They can be inserted into a template and sent as an HTML file. But in the case of a single-page application, this happens only once, when an HTML page is generated, to which all JS scripts are connected. In other cases, the data is serialized and sent in JSON format.
4. Javascript-frameworks – frontend
The client part of the application consists of scripts written in the Javascript programming language (JS) and executed in the user’s browser. Previously, all client logic was based on the use of the jQuery library, which allows you to work with DOM, animation on the page and make AJAX requests.
The DOM (document object model) is the structure of an HTML page. Working with the DOM is about finding, adding, changing, moving, and deleting HTML tags.
AJAX (asynchronous javascript and XML) is a common name for technologies that allow you to make asynchronous (without reloading the page) requests to the server and exchange data. Since the client and server parts of a web application are written in different programming languages, it is necessary to convert the data structures (for example, lists and dictionaries) in which it is stored to JSON format in order to exchange information.
JSON (JavaScript Object Notation) is a universal format for exchanging data between a client and a server. It is a simple string that can be used in any programming language.
Serialization is the conversion of a list or dictionary to a JSON string. For example:
Dictionary:
{
'id': 1,
'email': 'mail@example.com'
}Serialized string:
'{"id": 1, "email": "mail@example.com"}'Deserialization is the reverse conversion of a string to a list or dictionary.
Using DOM manipulation, you can fully control the content of pages. Using AJAX, you can exchange data between the client and the server. With these technologies, you can already create an SPA. But when creating a complex application, the jQuery-based frontend code quickly becomes confusing and difficult to maintain.
Fortunately, JQuery was replaced by Javascript frameworks: Backbone Marionette, Angular, React, Vue, and others. They have different philosophies and syntax, but they all allow for much more convenient data management on the frontend, and have templates and tools for creating navigation between pages.
An HTML template is a “smart” HTML page that uses variables instead of specific values and has various operators available: if, cycle for, and others. The process of getting an HTML page from a template, when variables are substituted and operators are applied is called template rendering.
The page resulting from the rendering is shown to the user. Going to another partition in a SPA is applying a different template. If you want to use other data in the template, it is requested from the server. All form data submissions are AJAX requests to the server.
5. How the client and server communicate with each other
Communication between the client and the server takes place via the HTTP protocol. The basis of this protocol is the request from the client to the server and the server’s response to the client.
For queries, we usually use the GET methods if we want to get the data, and POST if we want to change the data. The request also specifies the Host (site domain), the request body (if it is a POST request), and a lot of additional technical information.
Modern web applications use the HTTPS Protocol, an extended version of HTTP that supports SSL/TLS encryption. Using an encrypted data channel, no matter how important the data is, has become a good practice on the Internet.
There is another request that is made before HTTP. This is a DNS (domain name system) request. It is needed to get the ip address to which the requested domain is bound. This information is then stored in the browser and we no longer waste time on it.
When a request from the browser reaches the server, it does not immediately get to Django. It is first handled by the Nginx web server. If a static file is requested (for example, a picture), Nginx itself sends it in response to the client. If the request is not static, then Nginx should proxy (pass) it to Django.
Unfortunately, it can’t do it. Therefore, another program-layer is used – the application server. For example, for Python applications, it can be uWSGI or Gunicorn. And it is these apps that pass the request to Django.
After Django has processed the request, it returns a response with an HTML page or data, and the response code. If all is well, the response code is 200; if the page is not found, it is 404; if an error occurred and the server could not process the request, it is 500. These are the most common codes.
6. Caching in web applications
Another technology that we constantly encounter, which is present both in web applications and software, and at the processor level in our computers and smartphones.
Cache is a concept in development where frequently used data, instead of being retrieved from the database every time, calculated, or otherwise prepared, is stored in a quickly accessible location. A few examples of using the cache:
- Django has received a request to retrieve data for a graph in a report. We get the data from the database, prepare it and put it in a database with fast access, memcached for example, for 1 hour. At the next request, we will immediately get it from memcached and send it to the frontend. If we find out that the data is no longer relevant, we disable it (delete it from the cache).
- CDN (content delivery network) providers are used to cache static files. These are servers located all over the world and optimized for static distribution. Sometimes it is more effective to put pictures, videos, JS-scripts on CDN instead of the server.
- Static file caching is enabled by default in all browsers. Thanks to this, opening a site not for the first time, loads everything much faster. The disadvantage for the developer is that with the cache enabled, changes made in the code are not always immediately visible.
Written by Dmitry Tiunov, translated from here