How web applications work
This article is for novice developers and those who want to navigate a bit in the terms and technologies of modern web applications. The article is written about how web applications differ from sites, what web applications are, what they consist of and how they work.
For me, a site is first of all something informative and static: a company business card, a recipe site, a city portal or a wiki. A set of pre-prepared HTML files that are on a remote server and are given to the browser upon request.
Sites contain various statics, which, like the HTML file, is not generated on the fly. Most often these are images, CSS files, JS scripts, but there can be any other files: mp3, mov, csv, pdf.
Blogs, business cards with a contact form, landing pages with a bunch of effects, I also attribute to websites for simplicity. Although, unlike completely static sites, they already include some kind of 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 programs for businesses, these are all web applications.
Web applications can be divided into several types, depending on the different combinations of its main components:
In development, a framework is a collection of ready-made libraries and tools that help you create web applications. For example, I will describe the principle of operation of the Django framework written in the Python programming language.
The first step is the request from the user gets into the router (URL dispatcher), which decides which function to process the request should be called. The decision is made on the basis of a list of rules consisting of a regular expression and the name of the function: if such and such a URL, then this is the function.
The function that is called by the router is called a view. Inside there can be any business logic, but most often it is one of two things: either data is taken from the base, 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). The most commonly used relational database. This is when there are tables with predefined columns and these tables are interconnected through one of the columns.
Data in the database can be created, read, modify and delete. Sometimes to denote these actions you can find the abbreviation CRUD (Create Read Update Delete). To query the data in the database uses a special language SQL (structured query language).
In Django, models (model) are used to work with the database. They allow you to describe tables and make queries on a familiar python developer, which is much more convenient. You have to pay for this convenience: such queries are slower and limited in capabilities compared to using pure SQL.
The data obtained from the database are prepared in a twist to be sent to the front. They can be substituted 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.
The client part of the application is 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 an HTML page structure. Working with the DOM is searching, adding, modifying, moving, and deleting HTML tags.
AJAX (asynchronous javascript and XML) is a generic name for technologies that allow you to make asynchronous (without reloading the page) server requests and share data. Since the client and server parts of the web application are written in different programming languages, to exchange information, it is necessary to convert the data structures (for example, lists and dictionaries) in which it is stored into the JSON format.
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:
Vocabulary:
Serialized string:
Deserialization is the inverse transformation of a string into a list or dictionary.
Using DOM manipulations, you can completely control the contents of the pages. With AJAX, you can exchange data between a client and a server. With these technologies you can already create a SPA. But when creating a complex application, jQuery-based front-end code quickly becomes confusing and difficult to maintain.
Fortunately, JQuery has been replaced by Javascript frameworks: Backbone Marionette, Angular, React, Vue, and others. They have different philosophy and syntax, but they all allow you to manage data on the front end with much greater convenience, they have template engines and tools for creating navigation between pages.
An HTML template is a “smart” HTML page, in which instead of specific values ​​variables are used and various operators are available: if , for loop and others. The process of getting an HTML page from a template when variables are inserted and operators are applied is called template rendering.
The resulting rendering page is shown to the user. Moving to another section in the SPA is the application of another template. If you need to use other data in the template, they are requested from the server. All data form submissions are AJAX requests to the server.
The client communicates with the server via HTTP. The basis of this protocol is a request from the client to the server and the response of the server to the client.
For requests, the GET methods are usually used if we want to receive data, and POST if we want to change the data. The request also indicates 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 advanced version of HTTP with SSL / TLS encryption support. The use of an encrypted data transmission channel, regardless of the importance of this data, has become a good tone for 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 attached. This information is stored in the browser and we no longer spend time on it.
When a request from the browser reaches the server, it does not immediately fall into Django. It is first processed 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, he does not know how. Therefore, another application program is used - the application server. For example, for applications on python, it could be uWSGI or Gunicorn. And now they send a request to Django.
After Django has processed the request, he returns a response with the HTML page or data, and the response code. If all is well, the response code is 200; if the page is not found, then 404; if an error occurred and the server was unable to process the request, then it is 500. These are the most common codes.
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, when frequently used data, instead of getting it out of the database each time, calculating it or preparing it in another way, is stored in a quickly accessible place. Some examples of using the cache:
1. How are web applications different from sites?
For me, a site is first of all something informative and static: a company business card, a recipe site, a city portal or a wiki. A set of pre-prepared HTML files that are on a remote server and are given to the browser upon request.
Sites contain various statics, which, like the HTML file, is not generated on the fly. Most often these are images, CSS files, JS scripts, but there can be any other files: mp3, mov, csv, pdf.
Blogs, business cards with a contact form, landing pages with a bunch of effects, I also attribute to websites for simplicity. Although, unlike completely static sites, they already include some kind of 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 programs for businesses, these are all web applications.
2. What are web applications?
Web applications can be divided into several types, depending on the different combinations of its main components:
- Backend (backend or server side of the application) runs on a remote computer, which can be 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, then as a result of any transitions between sections, form submissions, data updates, the server will generate a new HTML file and the page in the browser will reload.
- Frontend (frontend or client side of the application) runs in the user's browser. This part is written in the Javascript programming language. An application can consist only of the client part, if you do not need to store user data for longer than one session. These can be, for example, photo editors or simple toys.
- Single page application (SPA or single page application). A more interesting option when using both the backend and the frontend. Using their interaction, you can create an application that will work completely without reloading the page in the browser. Or in a simplified version, when transitions between sections cause reboots, but any actions in the section do without them.
3. Pyhon-framework Django aka backend
In development, a framework is a collection of ready-made libraries and tools that help you create web applications. For example, I will describe the principle of operation of the Django framework written in the Python programming language.
The first step is the request from the user gets into the router (URL dispatcher), which decides which function to process the request should be called. The decision is made on the basis of a list of rules consisting of a regular expression and the name of the function: if such and such a URL, then this is the function.
The function that is called by the router is called a view. Inside there can be any business logic, but most often it is one of two things: either data is taken from the base, 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). The most commonly used relational database. This is when there are tables with predefined columns and these tables are interconnected through one of the columns.
Data in the database can be created, read, modify and delete. Sometimes to denote these actions you can find the abbreviation CRUD (Create Read Update Delete). To query the data in the database uses a special language SQL (structured query language).
In Django, models (model) are used to work with the database. They allow you to describe tables and make queries on a familiar python developer, which is much more convenient. You have to pay for this convenience: such queries are slower and limited in capabilities compared to using pure SQL.
The data obtained from the database are prepared in a twist to be sent to the front. They can be substituted 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 framework aka frontend
The client part of the application is 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 an HTML page structure. Working with the DOM is searching, adding, modifying, moving, and deleting HTML tags.
AJAX (asynchronous javascript and XML) is a generic name for technologies that allow you to make asynchronous (without reloading the page) server requests and share data. Since the client and server parts of the web application are written in different programming languages, to exchange information, it is necessary to convert the data structures (for example, lists and dictionaries) in which it is stored into the JSON format.
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:
Vocabulary:
{ 'id': 1, 'email': 'mail@example.com' } Serialized string:
'{"id": 1, "email": "mail@example.com"}' Deserialization is the inverse transformation of a string into a list or dictionary.
Using DOM manipulations, you can completely control the contents of the pages. With AJAX, you can exchange data between a client and a server. With these technologies you can already create a SPA. But when creating a complex application, jQuery-based front-end code quickly becomes confusing and difficult to maintain.
Fortunately, JQuery has been replaced by Javascript frameworks: Backbone Marionette, Angular, React, Vue, and others. They have different philosophy and syntax, but they all allow you to manage data on the front end with much greater convenience, they have template engines and tools for creating navigation between pages.
An HTML template is a “smart” HTML page, in which instead of specific values ​​variables are used and various operators are available: if , for loop and others. The process of getting an HTML page from a template when variables are inserted and operators are applied is called template rendering.
The resulting rendering page is shown to the user. Moving to another section in the SPA is the application of another template. If you need to use other data in the template, they are requested from the server. All data form submissions are AJAX requests to the server.
5. How the client and server communicate with each other
The client communicates with the server via HTTP. The basis of this protocol is a request from the client to the server and the response of the server to the client.
For requests, the GET methods are usually used if we want to receive data, and POST if we want to change the data. The request also indicates 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 advanced version of HTTP with SSL / TLS encryption support. The use of an encrypted data transmission channel, regardless of the importance of this data, has become a good tone for 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 attached. This information is stored in the browser and we no longer spend time on it.
When a request from the browser reaches the server, it does not immediately fall into Django. It is first processed 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, he does not know how. Therefore, another application program is used - the application server. For example, for applications on python, it could be uWSGI or Gunicorn. And now they send a request to Django.
After Django has processed the request, he returns a response with the HTML page or data, and the response code. If all is well, the response code is 200; if the page is not found, then 404; if an error occurred and the server was unable to process the request, then 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, when frequently used data, instead of getting it out of the database each time, calculating it or preparing it in another way, is stored in a quickly accessible place. Some examples of using the cache:
- In Django came a request for data for the schedule in the report. We retrieve data from the database, prepare it and put it into the database with quick access, for example, memcached for 1 hour. With the next request we will immediately get them from memcached and send them to the frontend. If we find out that the data has ceased to be relevant, we invalidate them (delete from the cache).
- CDN (content delivery network) providers are used to cache static files. These are servers located around the world and optimized for the distribution of statics. Sometimes it is more efficient to put pictures, videos, JS-scripts on CDN instead of your server.
- In all browsers, static file caching is enabled by default. Because of this, opening the site is not the first time, everything loads much faster. The minus for the developer is that with the cache turned on, the changes made in the code are not always immediately visible.
Source: https://habr.com/ru/post/450282/
All Articles