Frontend and Backend. You’ve probably already heard these buzzwords in the field of web-programming, but what is behind them? I propose to figure it out.
Let’s start with the definitions.
HTML (Hyper Text 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, “after the first paragraph, there is a 20-pixel indent” or “all text in the element
bodyshould be dark gray and written in Verdana font."
If you want to become a Frontend Developer (or at least try yourself in that role 😉) you can start with writing a real web application, that is actually working:
How to Become a Web Developer — Writing Your First Web Application
Where to begin? This is perhaps the most common question asked by all newcomers to IT. There are so many sites around…
A backend is anything that runs on a server, that is, “not in a browser” or “on a computer connected to the network (usually the Internet) that responds to messages from other computers.”
Structure of interaction between backend and frontend
There are several major architectures today that determine how your backend and frontend will interact.
In this case, HTTP requests are sent directly to the application server, and the server responds with an HTML page.
Between receiving a request and a response, the server usually searches the database for information on the request and embeds it into the template (ERB, Blade, EJS, Handlebars).
When the page is loaded in the browser, HTML determines what will be displayed, CSS determines how it looks, and JS determines any special interactions.
Communication using AJAX
This means that 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 (single page) applications
AJAX allows you to load data without refreshing the page. This is most used in frameworks like Angular and Ember. Once built, such applications are sent to the browser and any subsequent rendering is done on the client-side (in the browser).
This frontend communicates with the backend over HTTP using JSON or XML responses.
Generic / isomorphic applications
Some libraries and frameworks, like React and Ember, allow you to run applications on both the server and the client.
In this case, the application uses both AJAX and server-rendered HTML to communicate between the front-end and the back-end.
Outside the frontend and backend
The web applications that you are going to create will require less and less Internet connection.
Progressive Web Apps only load once and work (almost) always. You can store the database in the browser. In some cases, your applications only need a backend on first load, and then only to sync / protect data. This level of persistence means that most of the application logic resides directly in the client.
11 Examples of Progressive Web Apps
Explore this outstanding collection of progressive web apps for a healthy dose of inspiration.
The backend, in turn, becomes lighter and lighter. Technologies such as document stores and graph databases result in fewer calls to the backend to re-aggregate data. The client’s task is to clarify what data he needs (graph databases), or retrieve all the different pieces of data he needs (REST API).
It is now possible to create backend services that don’t run all the time, but only when needed, thanks to serverless architectures like AWS Lambda.
Frontend and Backend — Blurred boundaries
Computing tasks can now be moved between frontend and backend. Depending on the type of application, you can make the calculations happen either in the client or on the server.
Each of the options has its own pros and cons. Server — the environment is more stable, has fewer unknowns, but it constantly needs a network connection. Some users are using the latest browsers, and they benefit from client applications that do most of the work and boast a beautiful interface, but then you will alienate users who are not using the latest browsers and high-speed Internet connections.
In any case, it’s good that there is plenty to choose from. The main thing is to choose exactly what is best for a specific task. I hope you have a better understanding of the state of web development today.
If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.
More my stories about Web Development: