from website loading to modern tools
Hi all!
I am Daria Kasyanenko, an expert and teacher of Python courses at the Center for Continuous Education of the Faculty of Computer Science at the National Research University Higher School of Economics.
The frontend is what every internet user sees and interacts with, but how does it actually work?
Not long ago, my colleague Andrey Sukhov, a Frontend developer at Evocargo and an expert at the Center for Continuous Education at the Faculty of Computer Science, held a webinar entitled “How the Frontend Works: From Website Loading to Modern Tools.”
During the webinar, the audience learned what lies behind the usual implementation of the transition to a page in the browser. They figured out how the frontend is structured and what main technologies it works on. Moreover, they got acquainted with modern tools that can simplify the life of frontend developers.
What the webinar consisted of:
What parts does a browser consist of?
How a Web Page Loads: Client-Server Interaction and Front-End Rendering in the Browser
Overview of Basic Technologies: HTML, CSS, and JavaScript
Modern Tools: An Overview of React, Vue, and Angular
Basic Concepts of React
How does a browser work?
Browser — is an application for displaying content from web resources, such as HTML pages, PDF files, and images. Popular browsers: Chrome, Safari, Firefox, Opera, and Edge. Here are the main components of the browser:
User interface — this is what the user sees: the address bar, navigation elements, menus, etc.
Browser engine — is responsible for the interaction between the user interface and the display module.
Display module — is important for developers, as it is responsible for displaying data on the page.
Network components — process network requests and interact with the display module.
JS Interpreter — an interpreter that executes JavaScript code in the browser.
UI Backend — is responsible for drawing the interface and working with elements on the screen.
Data warehouse – used to store data such as cache and user settings.
How a browser loads a web page
When a user clicks on a link, the browser starts interacting with the server to get the required data. Web applications work on a client-server architecture, where the client is the user's device (for example, a computer or smartphone), and the server is a remote computer that processes requests.
Internet connection — for transferring data between the client and the server.
TCP/IP — a protocol that controls the transmission of data.
DNS — “notebook” for finding the real IP address of a site.
HTTP — hypertext transfer protocol, the language in which the client and server “communicate”.
When a user enters a URL into a browser, the following happens:
The browser sends a request to the server via DNS to obtain the IP address of the site.
After receiving the IP address, the server sends an HTTP response to the browser with the site files.
The browser receives the HTML, CSS and JavaScript files and begins the process of processing them and displaying the page.
Critical Rendering Path
Once the browser receives the HTML, CSS and JavaScript files, the rendering process begins. There are several stages:
Loading resources
Reading and parsing
Drawing the result
The browser's first step is to build a DOM tree from the HTML and a CSSOM tree from the CSS. These two trees are then combined to render the page. If there is JavaScript on the page, it blocks further rendering until it is executed. Once the scripts are executed, the browser determines how the elements are laid out on the page and performs layout.
HTML: The Foundation of the Web
HTML is a markup language that defines the structure of web pages. Without it, it would be impossible to display the content of a page. Here is a simple structure of an HTML document:
HTML is a flexible and robust language. Even if we forget to close a tag, the browser will still try to display the page. However, for proper display, it is important to follow the document structure. Block elements in HTML occupy the entire width of the parent container, while inline elements are arranged in a row. This knowledge helps to create a clear page structure.
CSS: Styling Web Applications
CSS (Cascading Style Sheets) is a language that allows you to control the visual design of web pages. It allows you to set colors, fonts, indents, and animations, separating styles from the HTML structure.
CSS works because the styles we describe are applied to html elements on the page. A CSS rule consists of:
Selectors are the name of an element that determines what styles will be applied to.
Property is the name of the property, for example, background is the way we style an element.
Property value – depending on the property, one of the available values; different types of values are available for different CSS properties.
Example CSS rule:
CSS uses selectors to find elements on the page and apply styles to them. Selectors come in different types: by tag, class, ID. The specificity of the selectors and the order in which they are applied play an important role. For example, if the same property is defined several times, the browser will apply the last one in order.
JavaScript: The Magic of Interactivity
JavaScript is a programming language that makes web pages interactive. In the early days of the web, interfaces were static, but JavaScript made it possible to respond to user actions: open pop-up windows, change content without reloading the page.
JavaScript is also used in modern frameworks such as React and Vue to build dynamic web applications. These tools allow you to manage application state and components, making it much easier to develop complex interfaces.
Component approach and modern tools
Modern web application development has changed significantly with the emergence of new approaches and tools such as React, Vue, and Angular. One of the key principles that unites these frameworks is the component approach. This approach allows you to divide applications into independent, reusable parts – components, which simplifies the development, maintenance, and scaling of applications.
What is a component approach?
The component approach is a method of organizing code in which each user interface (UI) element is represented as a separate, self-contained component. These components can be nested and reused in different parts of the application. For example, a button, product card, or modal window can be designed as components that can be easily embedded in other parts of the interface.
The main advantage of the component approach is complexity management. Modern web applications can be very complex, especially if they need to be maintained and developed over a long period of time. Separating into components allows you to reduce the amount of code and simplify its maintenance, since each component is responsible for a separate task.
Components are also dynamic, they can change depending on the state of the application or the data that comes in. For example, a product card component can update stock information depending on data from the server.
Now let's look at three major frameworks that are widely used in modern application development and how each of them implements the component approach.
React: A Library for Building User Interfaces
React is a JavaScript library developed by Facebook that has become popular due to its flexibility and simplicity. React uses a declarative programming style that allows developers to describe what the interface should be based on the state of the application, and React automatically updates the interface when that state changes.
The main task of React is to render the user interface and update it when data changes. It is a very powerful and flexible tool that does not dictate strict rules for the application structure. Developers can choose the auxiliary libraries and tools they want to use with React, which makes it suitable for applications of any complexity.
One of the main features of React is that it works not with the real DOM, but with the virtual DOM — its own lightweight copy of the browser's DOM tree. This allows for a significant speedup in the process of updating the interface, since changes are first applied to the virtual model, and only then the real DOM is updated.
Another important aspect is that React uses JSX (a JavaScript extension), which allows developers to write interface code similar to HTML, but in the context of JavaScript. This makes working with components convenient and natural for those already familiar with web development.
React is ideal for building complex single-page applications (SPAs) that require a lot of user interaction with the interface without reloading the page.
Vue: A Progressive Framework for Building Interfaces
Vue is a progressive JavaScript framework developed by Evan Yu that focuses on simplicity and flexibility. Vue combines the benefits of React and Angular, offering an easy-to-learn and powerful tool for building user interfaces.
Vue is positioned as a framework rather than a library because it includes many ready-made solutions for the most common tasks. This allows developers to create applications without resorting to additional libraries, as is often required in React.
One of the key features of Vue is the use of templates that resemble regular HTML, making it very understandable for beginners. Unlike React, which uses JSX, Vue uses pure HTML in its components, making it easier to migrate existing projects to Vue. The logic of components and their styles are also separated, allowing for better code structure.
Vue also provides tools for working with routing (Vue Router) and state management (Vuex), making it a good choice for more complex applications that require multi-layered interaction and data management.
The Vue ecosystem offers a wide range of tools, such as the CLI (Command Line Interface), that help quickly generate ready-to-use projects with minimal configuration. Vue is ideal for small and medium-sized applications, as well as for projects where speed of development and ease of entry are important.
Angular: A rigorous framework for complex applications
Angular is one of the most popular and powerful frameworks for creating web applications. It is especially in demand in the development of complex enterprise systems and is often used to build large-scale applications such as banking systems or internal corporate platforms.
One of the main features of Angular is its strict architecture and enforcement of certain standards and structures. This makes it ideal for large development teams, as the code becomes easy to maintain, understand, and error-resistant. However, this strictness can be difficult for beginners, and the learning curve of Angular is often higher than that of other frameworks.
Key features of Angular:
Strong typing with TypeScript. Angular uses TypeScript, which is a superset of JavaScript and adds static typing. This allows data types to be defined in advance, making the code safer and reducing the likelihood of runtime errors. Thanks to typing, developers can immediately see where problems may arise, which significantly improves the readability and maintainability of the code.
MVVM architecture. Angular follows the Model-View-ViewModel (MVVM) architecture pattern. This means that the application logic is separated from the view, which improves the modularity of the code and simplifies maintenance. Angular manages the data binding process between the model and view using two-way data binding.
RxJS. Angular makes extensive use of the RxJS library to work with asynchronous data streams. It is a powerful tool for managing events and asynchronous processes in an application, which is especially important in complex systems with a lot of interactions with the server.
In addition, we discussed imperative and declarative approaches, SPA applications, the choice between React, Vue, Angular, what is good about JSX, State, Props, UseEffect. We answered the question: “Why is the component re-rendered?” and discussed how to create the first application. All about this is in the attached webinar recording.
