Web Programming: Frontend, Backend, How They Interact and Technologies Used

Lecture



You have almost certainly heard the buzzwords "frontend" and "backend" that are so popular in programming, but what is behind them?

What must a frontend and a backend developer know?

Frontend is the client side of the user interface to the software and hardware part of a service.

Backend is the software and hardware part of a service.

Frontend and backend are a variant of software architecture.

The terms appeared in software engineering as a result of the development of the principle of separation of concerns between the external presentation and the internal implementation.

To provide its functionality, the backend implements APIs that the frontend uses. This way, a frontend developer does not need to know the implementation details of the server, and a backend developer does not need to know the frontend implementation.

Frontend is everything that a browser can read, display on screen, and/or run. That is, HTML, CSS, and JavaScript.

HTML (HyperText Markup Language) tells the browser what the content of the page is, for example, "heading", "paragraph", "list", "list item".

CSS (Cascading Style Sheets) tells the browser how to display elements, for example, "a 20-pixel indent after the first paragraph" or "all text in the body element should be dark gray and set in the Verdana font".

JavaScript tells the browser how to react to certain interactions, using a lightweight programming language. Most sites do not actually use much JavaScript, but if you click on something and the page content changes without the screen flashing white, then JavaScript was used somewhere.

Backend is everything that runs on a server, that is, "not in the browser" or "on a computer connected to a network (usually the Internet) that responds to messages from other computers".

For the backend, you can use any tools available on your server (which is essentially just a computer configured to respond to messages). This means you can use any general-purpose programming language: Ruby, PHP, Python, Java, JavaScript / Node, bash. It also means you can use database management systems such as MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

Frontend and backend developers have different areas of responsibility and skill sets, but there is some overlap in competencies between them. Here are the main knowledge and skills that frontend and backend developers should have:

Frontend developer:

  1. Programming languages: HTML, CSS, and JavaScript - frontend developers must be proficient in these languages and be able to build interfaces, style them, and add interactivity with JavaScript.
  2. Frameworks and libraries: knowledge of popular frameworks and libraries such as React, Angular, or Vue.js will help a frontend developer build complex and scalable web applications.
  3. Mobile app development: an understanding of mobile development and the use of frameworks such as React Native or Flutter make it possible to build cross-platform mobile applications.
  4. Interface design: the ability to work with design tools such as Photoshop or Sketch will help a frontend developer create attractive and intuitive user interfaces.
  5. Layout and responsiveness: knowledge of layout techniques and of optimizing sites for different devices and screens helps in building adaptive and responsive web pages.

Backend developer:

  1. Programming languages: knowledge of programming languages such as Python, Java, PHP, Ruby, or C#, which are used to build server-side logic and process data.
  2. Database development: an understanding of how to work with databases such as MySQL, PostgreSQL, or MongoDB allows a backend developer to store and manage application data efficiently.
  3. Working with APIs: the ability to create and use APIs (Application Programming Interface) to interact with other systems and services.
  4. Knowledge of protocols and architectures: an understanding of data transfer protocols such as HTTP and REST, as well as architectural patterns such as MVC (Model-View-Controller) or Microservices, will help a backend developer build efficient and scalable applications.
  5. Security and authorization: knowledge of methods for securing applications and authenticating users, such as password hashing, access tokens, and SSL encryption.

In addition, both frontend and backend developers must have good teamwork skills, be able to figure out errors and debug code, and be ready for continuous learning and adaptation to new technologies and requirements in the development industry.

How the backend and frontend interact

Today there are several main architectures that determine how your backend and frontend will interact.

Server-side applications

In this case, HTTP requests are sent directly to the application server, and the server responds with an HTML page.

Between receiving the request and responding, the server typically looks up information in a database based on the request and embeds it into a template (ERB, Blade, EJS, Handlebars).

Once the page is loaded in the browser, HTML defines what will be shown, CSS defines how it will look, and JS handles all sorts of special interactions.

Communication using AJAX

Another type of architecture uses AJAX (Asynchronous JavaScript and XML) for communication. This means that JavaScript loaded in the browser sends an HTTP request (XHR, XML HTTP Request) from within the page and (for historical reasons) receives an XML response. Nowadays the JSON format can also be used for responses.

This means your server must have an endpoint that responds to requests with JSON or XML. Two examples of protocols used for this are REST and SOAP.

Client-side (single-page) applications

AJAX lets you load data without refreshing the page. This is used most in frameworks such as Angular and Ember. After being built, such applications are sent to the browser, and any subsequent rendering is done on the client side (in the browser).

Such a frontend communicates with the backend over HTTP, using JSON or XML responses.

Universal/isomorphic applications

Some libraries and frameworks, such as React and Ember, let you run applications both on the server and on the client.

In this case, the application uses both AJAX and server-rendered HTML to connect the frontend with the backend.

Beyond frontend and backend

Offline-first frontend

The web applications you are going to build will require a network connection less and less.

Progressive web apps load only once and work (almost) always. You can store a database in the browser. In some cases, your applications need a backend only on first load, and after that only to synchronize / secure data. This level of persistence means that most of the application logic lives directly in the client.

Lightweight backend

The backend, in turn, is getting lighter and lighter. Technologies such as document stores and graph databases reduce the number of calls to the backend to re-aggregate data. The client's job is to specify which data it needs (graph databases) or to fetch all the various pieces of data it needs (REST API).

It is now possible to build backend services that do not run all the time but only when they are needed, thanks to serverless architectures such as AWS Lambda.

Blurred boundaries

Computational tasks can now be moved between the frontend and the backend. Depending on the kind of application, you can have the computation done either on the client or on the server.

Each option has its pros and cons. The server is a more stable environment with fewer unknowns, but it always requires a network connection. Some users run the latest browser versions, and they benefit from client-side applications, which do most of the work and can boast a beautiful interface, but then you will alienate users who do not use the newest browsers and high-speed Internet connections.

In any case, it is good that there is something to choose from. The main thing is to choose exactly what suits the specific task best. I hope you have gained a better understanding of the state of web development today.

fullstack

Frontend and backend each have their own technologies and programming languages, and to work with them you need to be proficient in those languages. If a programmer is well versed in both areas and easily handles tasks related to both frontend and backend, that programmer is called a full-stack developer.
So a full-stack programmer is a generalist specialist who can lay out a site's design, set up how forms and buttons work, write the server side, and even configure the server itself. Such a programmer creates a web service single-handedly, replacing 3-4 narrower specialists. On the other hand, such a developer may lack deep knowledge of particular technologies, especially if they have little overall work experience

for frontend, backend, and DevOps.

Web Programming: Frontend, Backend, How They Interact and Technologies Used

Web Programming: Frontend, Backend, How They Interact and Technologies Used

the frontend developer's path:

Web Programming: Frontend, Backend, How They Interact and Technologies Used

And here is the backend:

Web Programming: Frontend, Backend, How They Interact and Technologies Used

Third-party APIs of payment systems such as PayPal, Privat24, Sberbank, Blockchain.com, of search engines, mapping services, SMS and email notification managers, and data analytics such as Google Analytics, Yandex Metrica, etc.

Third-party vendor libraries such as ElasticSearch,

The DevOps roadmap is a branch off the backend:

Web Programming: Frontend, Backend, How They Interact and Technologies Used

Of course, these are just tools. A web developer needs other development skills besides mastery of the tools described above.

Comments

To leave a comment

If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Lectures and tutorial on "Fundamentals of Internet and Web Technologies"

Terms: Fundamentals of Internet and Web Technologies