Chapter 4
Front-end and Back-end

The IT field, especially the web, is constantly evolving. Every month, new technologies emerge or get updated. Techs, meaning those working in the technical direction, continuously train to maintain an overview and at least understand the basics of each subject.

With increasingly advanced technologies, more specific business needs, and organizations pushing for rapid delivery, it's nearly impossible for a tech to stay up-to-date on the entire production chain. Thus, they specialize in technological or even business domains. We have experts in Android, cloud, advertising, email delivery, data processing, streaming...

For my part, I've been working in e-commerce for 11 years now, focusing on payment processes and subscription management. 🚀

This segmentation is all the more visible as the company is large. Smaller structures, on the other hand, are composed of all-rounders we call “fullstack”. They call in specialist consultants for specific needs.

Regardless of their size, most technical departments distinguish between front-end and back-end profiles.

The Front-end

The front-end is all the code executed by the user's device: web browser, mobile app, connected TV, watch... It ensures the user's navigation in your product.

It's the graphical part!

Not only. In fact, the world of the front is divided into several professions.

Web Integrators

They convert the design/product team's mockups into code. They ensure that the graphic rendering is consistent across all types of devices, screen resolutions, browsers…

Believe me, it's far from being a walk in the park 😅.

The W3C (World Wide Web Consortium) is an organization that sets web standards. All players, including web browsers, must comply with them.

In practice, Chrome, Firefox, Safari… all have subtleties: different display rules, features not yet implemented...

Integrators are historically equipped with HTML to structure content and CSS for styling. HTML and CSS are not programming languages; they are static content description syntaxes incapable of complex logic.

It looks like this:

<h1>A first-level title (header)</h1>
<p>
    A paragraph.
<p>

h1 {
    color: red; // Make first-level titles red.
}

Today, few integrators produce raw CSS directly. They use overlays, such as SASS, introducing programming concepts: conditions, loops, variables... These allow for better organization of graphic components, improved maintainability, and time-saving.

Dark mode, display compatible with all languages, right-to-left reading, accessibility for all, search engine content optimization... the integration world is full of challenges. Integrators are in constant contact with product and marketing teams.

Integration, although being an area of expertise in itself, is often underestimated and entrusted to developers.

Front-end Developers

In the front-end, it's important to distinguish between the worlds of browser and native mobile. They have mostly the same responsibilities, but the techniques and constraints are completely different. That's why there are developers specialized in iOS, Android, and the web.

All these developers bring the product to life. They energize the user experience: interpretation of events (clicks, form submissions…), real-time communication with the back-end, navigation without reloading the page…

Each platform has its preferred language. Web projects mainly use JavaScript, iOS uses Swift, and Android uses Kotlin.

The front web is a jungle 🤯. Blink, and you'll miss the emergence of 3 new technologies. It's one of the IT domains that has evolved the most in recent years.
React, Vue, Angular, their components, and their overlays... there's always a new development in the JavaScript ecosystem.

These evolutions allow today's front-end projects to be solid, maintainable in the long term, and decoupled from the back-end.

The Back-End

The back-end is simple; it's everything that's not part of the front-end. It's the collection of all systems that allow the front-end to function and that execute business logic.

Even though it's sometimes unavoidable, we prefer not to put business logic in the front-end. Simply because it would need to be duplicated across all platforms: difficult to maintain and evolve. For example: a customer's credit card is about to expire, and you want to display a message encouraging them to update it. To not pressure the customer too much, you decide to display this info only once a day. It's better to centralize this "once a day" capping in the back-end. This makes it very easy to change this rule across all platforms at the same time just by updating the back-end. On the front-end, we will have pure technical implementation specific to each platform: cookies, local databases…

A payment page is a good counter-example. A non-certified back-end is not allowed to handle banking details. The front-end will thus directly interact with the payment partner and set up the various processes (bank form, 3DS challenge…). The partner provides non-sensitive data to the back-end to allow it to follow the payment status.

The back-end is super vast. Its organization greatly depends on the company's business areas.

For instance, when I worked for the music streaming website Deezer, there were back-end teams working directly on features accessible to customers, but also teams dedicated to a business domain:

• Importing music catalogs from labels.
• Financial payouts to artists.
• Interconnection with telecom partners.
• Payment and subscription management (best team 🫶).

The back-end is composed of many professions including:

• Developers: they write the code that runs on servers.
• Ops / Infra engineers: they set up all the hardware and software infrastructure to run the network. This is an extremely vast field composed of an infinity of technologies. Some ops specialize: databases, cloud… DevOps is the movement that brings closer the responsibilities and knowledge of devs and ops. Silos are broken down, favoring the delivery and the production monitoring.
• Data engineers: they structure the entire data feed chain. It will be used by data scientists for supervision and decision-making (marketing, product, business strategy), by production for certain features (fraud prevention, recommendations…), for communications with the customer, etc...

Front + Back = <3

Let's go back to 2010 to better understand the links between front-end and back-end.

1. The browser sends a request to the web server.
2. The server analyzes the request and delegates it to a program to execute business intelligence. The code is written in a back-end language: PHP, Java, Ruby…
3. During its processing, the back-end code prepares its response for the browser. This response contains HTML, Javascript, CSS… In other words, the back-end code dynamically writes the front-end code.
4. The browser receives the response and executes the front-end code.

At that time, a newcomer was about to break everything: Node.js.
Node.js is a technology that opens the doors of back-end to the JavaScript language.

• A single language to master for both front and back.
• A highly scalable technology for high-traffic websites.

Node.js triggered an explosion of JavaScript (JS).

In 2010, JavaScript was not great: strange syntaxes, incoherent technologies, a cruel lack of libraries… Hence the rise of a whole new ecosystem over the last decade:

• Language revolution with new versions and overlays like TypeScript.
• Tools combining front and back.
• Catalog of open-source projects.

The web is constantly renewing itself. Who knows what I will write in The Tech Guide in 2030.