In the previous article we talked about the new React framework called Remix and if you haven't had time to read it, I suggest you do it by clicking [here](https://www.flaco.dev/blog/what-is-react-remix). In case you fell in love with it and are thinking of migrating a project developed with Angular, for example, you will realize how long and tedious it would be to develop all the interface components already created. But don't worry because today's goal will be to understand **what are Web Components** and how they can help **outsource the visual part** of an application to be agnostic to the technology used in the Front End.

Our reading will start from **understanding the needs** to arrive at the **final solution** that will allow us to understand in detail what the Web Components are.

## What are Web Components: the needs

There are several JavaScript frameworks or libraries that allow us to develop the logic and interface of an application. And very often within a company, especially if it is large, several technologies can coexist at the same time. This causes the **duplication** of some **components** that are used to build the **UI**, such as the following elements: buttons, inputs, tables, etc.

Consequently, if two incompatible technologies are adopted, to maintain the same style, the component code is rewritten, adapting it to the technology used. This results in:

- **waste of money** and of time;
- **redundant maintenance** of the code;
- **duplication** of the **development** of new features.

Also, in case we want to change the technology of a platform, we will always have to rewrite the entire application if the code is not compatible.

These are the needs and therefore the problems that currently exist. Now let's try to understand in more detail the **why to use the Web Components** and so we will have a more general picture of what are the Web Components.

## Why use Web Components?

The **Web Components** was born as **solution** to these problems, which are not a very recent technology and that they were discussed for the first time in 2011. Even if their first implementation is much more recent. This indicates immediately the need to have **visual components** that could be **reused transversally** from project to project.

To give a more concrete example, to develop a _Button_ type element, having two applications built with two different technologies, we can use a Web Component and import it as if it were a normal HTML element. So we don't build a duplicate element for each technology but we outsource it, building our UI component library in a separate project.

From a small example, we can already evaluate the **advantages** we get from a **Web Components** library:

- **centralized** management (new features, updates).
- the components are **reusable** from project to project.
- **independence** from the technology used.
- **single source of truth** (in one place, we have all the components we need).

This underlines why to use the Web Components and how they are decisive for a **cost saving** and **energy** linked to the reusability of the visual elements of an application.

Now, having to answer the question what are the Web Components, we can state the following:

> **Web Components are reusable visual elements that do not depend on a specific technology**

After the most boring part, that is the theory, let's move on to the development of a Web Component, and its integration within a project developed with NextJS.

## How to implement the Web Components

Before we begin, I will introduce you to three fundamental concepts that will help us understand how Web Components work and which we will review in the example below:

- **customElements**: the JavaScript API to build the component.
- **shadow dom**: allows you to isolate the execution of the component (style, etc).
- **HTML templates**: HTML API to show the element.

Moving on to the practice, I remind you that you can consult the final code on my project Github page [here](https://github.com/flaviocolonna/nextjs-webcomponent).

The goal is to create an HTML tag that can independently manage the typography style of our platform based on the component we want to show. Below is an example of its future use:

```html
<web-typography component="h1" data-text="I am an h1 tag" />
<web-typography component="p" data-text="I am a paragraph" />
```
In this case, we can already see an advantage: we **don't define** the style because the Web Component itself will handle it. Let's see below how to create a Web Component that allows us to do this.

First I created a class, called * Typography *, which will handle the element of type text based on two main attributes:
- **component**: defines the type of tag to show (h1, h2, h3, p, etc).
- **data-text**: defines the textual content.

Finally, within the same class I define the style that each type of text element will have, so as to avoid the redundancy that I would get by adding the classes every time I go to create a tag individually.

```javascript
// Create a class for the element
class  Typography  extends  HTMLElement {
	constructor() {
		// Always call super first in constructor
		super();
		/* With mode === closed, you cannot access to the shadow dom from outside */
		const shadow = this.attachShadow({ mode: 'closed' });
		// Get tag type
		const tag = this.getAttribute('component') || 'span';
		const wrapper = document.createElement(tag);
		// Take attribute content and put it inside the tag
		const text = this.getAttribute('data-text');
		wrapper.textContent = text;
		// Create some CSS to apply to the shadow dom
		const style = document.createElement('style');
		style.textContent = `
			h1 {
				font-size: 3rem;
				font-weight: 700;
			}
			h2 {
				font-size: 2rem;
				font-weight: 600;
			}
			p {
				font-size: 1.2rem;
				font-weight: 400;
			}
		`;
		// Attach the created elements to the shadow dom
		shadow.appendChild(style);
		shadow.appendChild(wrapper);
	}
}
// Define the new element (name must contain hyphens)
customElements.define('web-typography', Typography);
```

The **constructor** function will be invoked as soon as the HTML component is rendered. Inside we access the **attributes**, define **the style** and finally insert the elements created to the assigned DOM, the **shadowDom**. The latter is an isolated DOM that we can access or not, based on the **mode** parameter.

Once the basic behavior has been defined, we use the **customElements** API present in most browsers to define a Web Component and thus make it possible to use it as a normal HTML tag.

We have just seen the basic concepts of a Web Component and we just have to use it.

In the next example I integrated a Web Component into an application built with NextJS, which then uses ReactJS.

First we need to import the JS file:
```javascript
useEffect(() =>  import('../components/Typography/index.js'), []);
```
Here I used the **useEffect**, since it is an application in ReactJS, and I used the **dynamic import**, to avoid putting the component inside the _public_ folder of NextJS.
In another article we will see how to use Web Components as JSX tags by importing and using them directly. So, stay tuned!

Then we move on to the actual use of our component which will be shown as any HTML tag with the style we have defined inside it:
```html
<web-typography data-text="I am a Web Component" component="h1" />
```

We can also use this component in an application written with Angular, VueJS or in pure JavaScript.

The result will be the following:

![What are Web Components - Example](https://res.cloudinary.com/flaco-dev/image/upload/v1642002678/what_are_web_components_png_63d8ea979e.png)

## Browser compatibility

Most browsers currently support Web Components. To check the compatibility matrix you can refer to this [link](https://caniuse.com/?search=customElements). If you want to support a browser that is not natively compatible with the Web Components, you can always install a polyfill following the procedure described [here](https://www.webcomponents.org/polyfills).

Unfortunately, for the moment, we have finished our journey which has made us understand what are Web Components. In a later article we will talk about how to use them as simple ES6 imports, and I will introduce you to the **StencilJS library**. This is a very powerful tool for creating Web Components. If you want to get ahead of the times, I suggest you take a look at the documentation on the [official page] (https://stenciljs.com/).

Now it is time to hear your voice. If you liked this article and you want to support me, just follow these simple, easy and free steps:

1. Leave a like by clicking on the heart icon below.
2. Share this post on your social accounts or with your friends.
3. Follow me on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) and on [Github](https://github.com/flaviocolonna).
4. Subscribe to the newsletter below to not miss any articles, discounts or gossip (there will be many).

Thank you so much for your attention and have a nice day!

small_cosa-sono-i-web-components.jpg

thumbnail_cosa-sono-i-web-components.jpg

small_cosa-sono-i-web-components.png

thumbnail_cosa-sono-i-web-components.png

small_what-are-web-components.webp

thumbnail_what-are-web-components.webp

Discover what are Web Components, a tool to build UI elements independently from the Front End stack.

What are Web Components and how to use them

Recently a new React framework has been launched and its name is [Remix](https://remix.run). The founders of React Router have been working hard to develop and present this new framework to the entire community and in this article I am so pleased to answer the question "What is React Remix?".

I tried Remix on my own, after getting impressed by the video presentation and I can confirm that it is going to be a nice player among the others React frameworks, like NextJS and Gatsby. For sure I will give it a chance for my next projects.

Now it's time to start analyzing the specs of React Remix but before read what the founders say about Remix:

> Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

## React Remix story

Everything started last year when two developers announced a new React Framework that was going to be a new player in the web development sector. They called it **Remix**, even if they disappeared for a while, without disclosing any interesting information, and keeping everything top secret. Until now.

On **Monday 22nd of November of 2021** they released it officially and presented it on streaming to show off the power of React Remix as a new React Framework. You could think that we probably don't need another framework as there is already a wide range of solutions. By the way, they didn't care about this and here we are: **Remix is the new React Framework**.

When I talk about two developers I am not talking about two random guys. They are the creators behind **React Router**!

Let's discover now in deep what is React Remix, its features and how to use React Remix in an application.

## What is React Remix?

**React Remix is a new React Framework** which develop started on 2019. The developers behind it are Michael Jackson (Co-Founder, CEO) and Ryan Florence (Co-Founder), the same developers behind **React Router**. Any software engineer that has been working with React, a little bit knows React Router, so we know what we are talking about. In case you don't know React Router, it is "simply" the most used routing library in React, capable of working everywhere that React runs: on the web, on the NodeJS, and on React Native. It is also the core of others most well-known routing libraries like **react-router-dom** and **react-router-native**.

So starting from React Router, they have built a framework based on it: Remix. Now, to answer the question "What is React Remix?" we can assert that **React Remix is a React Framework based on React Router**, that faces some of the issues of Client Side Rendering and many others. If you know a little bit **NextJS**, it is going to be very similar, but with several important differences that we are going to see in the next section. So, keep reading!

## React Remix goal
But wait a moment. Before starting listing all the features, we need to understand why a web developer should need it. Answering this question helps us on understanding **what is React Remix for**.

The main **goal** of React Remix is to provide a new web development tool to **boost** the **build time**, **performance** on runtime and **development fluidity**. Moreover, it is focused on **SEO** improvements and **accessibility**. All of this thanks to a new **Server Side Rendering** approach and a new **build tool**.

As you can notice, we are not talking anymore about a library as React is already. Here we are talking about a **framework**, as it provides a 360 degree platform to **build better websites**, as they say.

In my humble opinion, they wanted to create a union between NextJS and React Router. The goal is to provide an easy **Server Side Rendering** website builder but better, including some cool features of **React Router** and some faster approach to develop some heavy parts of an app. To check which are those, keep reading!

Now we are ready to start discovering the new features included in React Remix, finally one step closer to answering the question "What is React Remix?".

## React Remix features
As I mentioned before, React Remix seems to be similar to NextJS or to GatsbyJS at a first glance. If you know them, you can think they are equal. But you should change your mind as I did. And let's see why.

### React Remix Routing, Nesting Routes, Suspense Cache, Scroll Restoration
If we think on NextJS, it builds the routes based on the project structure. We declare inside the **pages** folder the files we want and the framework uses the names to build all the application **routing system**. The same does React Remix, using a folder called **routes**. React Remix builds the **routes based on the File System** too. And this is the biggest innovation in **React Router**.

By the way, instead of just replicating NextJS or GatsbyJS, they added **Nesting Routes**! It means that we can have **nested routes** where children inherit the parent layout without replicating in the code the container component. And still using only the File System. So cool!

![What is React Remix - Project structure](
https://res.cloudinary.com/flaco-dev/image/upload/v1638375663/remix_folder_structure_75defbbbe4.png)

And what about **React Suspense**? In **React Router** is used to provide a loader for a component and then will cache the rendered component. By the way, it doesn't take care of browser history. It means that if we change the order to get to a specific page, the cache will pick the rendered component as usual. In **React Remix** they want to change this approach, enabling a **Suspense Cache** based on **Location**. Every time we push a page to the **history state**, it becomes **unique** and Suspense caches the component based on the Location and not on the properties. If we navigate back and forward, or if we push again the same page by visiting it from a navigation link, it will be another **unique** record.

And to conclude with the routing features, they included a great functionality called **scroll restoration**. Each page will cache the scroll position in case we get back to it and can continue from where we stop. And a big role here is played by the **Suspense** that can store same pages but with different scrolls, if they are part of different Location in the history state.

I think a big improvement on this side. Now let's see what's left.

### React Remix Faster Build and Refresh Time

Did I mention **faster build time**? Yeah, you are right! To achieve it they integrated **esbuild**.

Don't worry if you don't know it, as you should only know that is the **fastest JavaScript bundler** (you can read more about it [here](https://esbuild.github.io/ "esbuild bundler")). And I can confirm it! While watching the preview, I have seen how fast it is, even when doing the **Fast Refresh**. And while testing it on my own, I can see a really big difference with previous bundlers like Webpack or Browserify. This is going to be a real nice advantage to reduce builds locally and in CI.

### Remix Form optimization

Another great improvement has been done when we talk about forms. User data submission always needs some extra development by our side. We need to manage at least the **form data** and the **submission state**. So, we would use useState and we would have some instruction to access to the form data.

But how does Remix manage a form? It can't be easier. First of all we talk about **actions**. You can export a function called **action** on the same file and it would be the handler of the post received by the form present in that page. It is a real post to a Back End, to the Remix Server. It is great because you don't need to access to the form elements to get every input and to extract their values. Moreover, we can use an hook, **useTransition**, to manage the form submission state without performing any set state as we are doing right now. We have now a really clean flow to manage a form. This is one of the best features I have seen by far in Remix.

![What is React Remix - Form optimization](https://res.cloudinary.com/flaco-dev/image/upload/v1638380100/remix_form_submission_1ec6122093.png)

### React Remix Error Handling

Another great feature that Remix has is about **Error Boundaries**. In React we can catch app errors having a top level component with some function like **componentDidCatch**. But in Remix we have a different approach. We can use Nested Error Boundaries and once more it is an export function, as for the others before. It is great how Remix is making everything easier. So look at the following image:

![What is React Remix - Error Handling](https://res.cloudinary.com/flaco-dev/image/upload/v1638380790/remix_error_boundaries_9b79163e30.png)

We can export **ErrorBoundary** for general runtime errors. And we can use **CatchBoundary** for loaders or actions errors. Amazing! But the features haven't stop here.

### React Remix Server Side Rendering

One of the first answer to "What is React Remix for" is **Server Side Rendering**. Introducing this new system helps on building better website as they are more performant at runtime, specially for the first user visit. This can boost our **SEO** as NextJS properly is doing. Furthermore, **SSR** can run also in development mode. And there is one little difference more and it is related with the **data loading**. Let's see below what's happening.

### React Remix Data Loading

React Remix is going to use the full **HTTP Cache** to manage the way it should get the data again from the **original source**. If we export the **loader** function in a React Remix page, the value returned is accessible by the component that will be server side rendered. Great! But what about if I want fresh data, without taking it from the cache? Well, they built an hook for it. It sounds impressive how it will be easy to clean the cache and to get newly generated data.

![What is React Remix - Data Loaders](https://res.cloudinary.com/flaco-dev/image/upload/v1638378408/remix_data_loader_896afa8e9c.png)

### React Remix Search Engine Optimization tags

One of the goals of React Remix is the SEO improvement and they achieved it. Thanks to Server Side Rendering, React Router can be used easily to build performant apps. And to improve the SEO without using other libraries to change meta tags or the page title, React Remix uses an export to set **meta tags**. It is possible to set the page **description** and **title**. It sounds great for me for example that I am used to install **Helmet**.

![What is React Remix - SEO Meta Tags](https://res.cloudinary.com/flaco-dev/image/upload/v1638378733/remix_seo_meta_tags_7676641c26.png)

With this latest feature we finished our list. Here below there is a little recap to see a nice overview.

## What is React Remix: features recap

Now it is time to make a recap of "What is React Remix?". I did a list of some of the most known features here below:

- File system routes
- Route layout nesting
- Suspense cache based on Location
- Scroll restoration
- ESBuild:
	- Automatic code splitting
	- Faster refresh
	- Faster build
	- Zero config
- Form optimization
- Production and development Server Side Rendering mode
- Data-driven meta tags
- Built-in data loading

By the way, the features don't stop here, as the founders said. They are going to implement many more stuff to make Remix more complete.

## How to use React Remix  
Before launching Remix we didn't know if it was free or not. There were rumors about a license to buy in order to get the code but then they confirmed that is going to be **completely free** and **open source**.

And thanks to that I had the chance to try out Remix. The following command will start a guided procedure to create your app:

```bash
npx create-remix@latest
```

![What is React Remix - Start](https://res.cloudinary.com/flaco-dev/image/upload/v1638375656/medium_remix_start_216666d262.png)

Once you run the command, it asks you some questions:
- The name of your Remix app
- How you want to deploy (many options here, but I have selected Remix App Server)
- If you are going to use Typescript or plain JavaScript
- If you want to run a npm install just after

Once the process has been finished, you are ready to go with the following command (you can also use **yarn**):

```bash
npm run dev
```

![What is React Remix - Start](https://res.cloudinary.com/flaco-dev/image/upload/v1638376992/remix_start_app_2a94a75c93.png)

The starter contains a lot of features to look at. It can be useful to understand how Remix works. At the end, the app built will look like this:

![What is React Remix - Starter Homepage](https://res.cloudinary.com/flaco-dev/image/upload/v1638376717/remix_homepage_b17ac6dc1d.png)

And it's simple as it is.

If you want to start using Remix more in deep, you can read the documentation available in the official website at [https://remix.run](https://remix.run).

## When React Remix is out

React Remix has been launched on **Monday 22nd of November of 2021**. The presentation is available on the Remix [YouTube Channel](https://www.youtube.com/watch?v=wsJaUjd1rUo). The video has been presented by Kent C. Dodds, the Director of Developer Experience, Michael Jackson (Co-Founder, CEO) and Ryan Florence (Co-Founder).

Now it is time to hear your voice. If you liked this article and you want to support me, just follow these simple, easy and free steps:

1. Leave a like by clicking on the heart icon below;
2. Share this post on your social accounts or with your friends;
3. Follow me on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) and on [Github](https://github.com/flaviocolonna);
4. Subscribe to the newsletter below to not miss any articles, discounts or gossip (there will be many).

Thank you so much for your attention and have a nice day!

thumbnail_what-is-react-remix.jpg

thumbnail_what-is-react-remix.png

thumbnail_what-is-react-remix.webp

Let's find out what is React Remix, a new React Framework based on React Router and developed by top developers to improve SEO, build times and performances.

What is React Remix? A new React Framework

Let's find out what is React Remix, a new React Framework based on React Router and developed by the same React Router creators to improve SEO, build times and performances.

If you landed here it means that you have some doubts about the differences between Front End and Back End and in this  article you will find all the answers you are looking for. For this  I will try to explain these two aspects of the world of web programming, analyzing the objectives of each, the languages ​​used, the skills required and the most common tasks that are carried out.

In case you want to learn more about what a Front End developer does and what a Back End developer is, I suggest you to read the previous article in which I describe these two areas ([What does a Front End Developer do?](https://www.flaco.dev/blog/what-does-a-front-end-developer-do "What does a Front End Developer do?")).

After this  brief introduction it's time to get started.

## Differences between Front End and Back End: goals

The main differences between Front End and Back End can be found in the goals they set for themselves. Each area has its  **purpose** and its  **protagonist**. Let's see the details:

### Front End goals

If we have been good and have done our homework, such as reading the article on what a Front End developer does, we will already know that the main protagonist is the  **user**  and the goal is  **to guarantee the best usability**. In this  case we refer to a web application that is usable by all types of target users thanks to acceptable performance and a user interface in line with the purpose of the application. In fact, as we analyzed in the previous article, we know that not all applications are the same and this  depends on the type of user and the nature of the application itself.

### Back End goals

On the other hand, the  **protagonist in the Back End**  side will no longer be the user but the  **data**. Consequently, the goal also changes and shifts to guaranteeing efficient data processing. But what does it mean? The Back End area deals with  **storing**,  **processing**  and  **supplying data**  to the Front End. It will therefore have to do with data persistence systems, such as a database, and with the configuration of requests to the server, to allow a client to request resources.

If this  process slows down, the Front End has to "entertain" the user somehow. But as we all know, too much waiting affects the user experience!

Below you will find a  **summary**  of the **goals for each area**  to better understand one of the differences between Front End and Back End.

In the development of the Front End:

-   **Protagonist**: the user;
-   **Goal**: to guarantee the best usability.

In developing the Back End:

-   **Protagonist**: the user.
-   **Goal**: to ensure efficient data processing.

Now let's move on to the languages ​​used to discover another of the differences between Front End and Back End.

## Languages ​​used

The differences between Front End and Back End include languages ​​that are mistakenly referred to as programming languages. Not everyone falls into this  category and now let's see why.

Let's start first by understanding what a language is. This  comes as a well-defined form of passing information to the code execution environment to perform a certain instruction.

There are several and they differ according to the following factors:

-  **Execution environment**: server, browser or mobile;  
-  **Type of language**: programming language, markup language, style sheets language and language for structured requests (there are many others);  
-  **Purpose and functionality**: final use of the language and functionality.

We can argue that each programming area, based on the execution environment and purpose, will adopt one or more languages. And now let's see which ones and what they are used for.

### Front End languages

The languages ​​used in the Front End will be executed by the browser, which we can define as a container. Among these we identify:

-  **HTML**: is a markup language used to create the skeleton of a web page.  
-  **CSS**: is a style sheet language that describes the style of the elements of a web page.  
-  **JavaScript**: is a programming language that makes a website interactive, allowing the user to interact with the components of the layout and allowing the web page to perform other operations when the user navigates.

As you can see I have used several categories, and  **not all languages ​​are programming**. This  is because a programming language must be  **compiled**  or  **interpreted**  to be called one. Maybe I'll write some articles on the different types of languages ​​to learn more.

For now we need to know that not all languages ​​in the world of programming and software development are called programming languages. Sounds strange but it is!

### Back End languages

As far as the  **Back End**  is concerned, the most popular languages ​​are the programming ones and the most used ones are the following:  **Java, Python, PHP, .Net, C #, C ++, Ruby and JavaScript**! Yes, even JavaScript is a server-side language if executed within NodeJS. We will elaborate on this in another article!

**Languages**  ​​that run on the  **server side can access the resources of the system**  that runs the code, that is, the execution environment, unlike languages ​​that run from the browser which do not have the same functionality.

But there are also other types such as  **SQL**  used to make  **structured requests**  to a relational database, when we have to query the database to get stored data.

After the analysis of the  **languages**, we can confirm that they are among the main  **differences between Front End and Back End**, based on their  **type**  and  **purpose**: access the file system, create a server, define the style of a page or manage the interaction with the user.

Having explored the differences between the types of languages, let's now move on to the skills that every developer must have in  his  area to add another piece to the differences between Front End and Back End.

## Front End and Back End skills

As we have just seen, objectives and languages ​​are already two important variables when we analyze the differences between Front End and Back End. The combination of these two factors makes us understand that the skills required in each area are a little different.

Due to the nature of the Front End, the following will be required:

-   **Intuition**: understanding if a feature works well from the point of view of  the user;
-   **Patience**: you will need it when dealing with browser compatibility;
-   **Flexibility**: new technologies updates are just around the corner;
-   **Algorithms**: knowledge of the main search and sorting algorithms is required. Don't worry because it will be a basic level and then it depends a lot on the type of application;
-   **Networks**: a good knowledge of how the Internet works and the main protocols never hurts even if a basic level (in my opinion wrong) is required to undertake this  type of career. However, you need to recognize the different types of APIs, the main server responses, and know the fundamentals of the Internet. In my course to become Front End I dedicated some videos to all this.

The  **Back End**, on the other hand, will be for those who want to devote themselves more to  **data manipulation**  and will require:

-   **Database**: know the main database models (relational, non-relational, etc) and which languages ​​they use;
-   **Algorithms**: knowledge of the main sorting and search algorithms is fundamental for data manipulation;
-   **Networks**: exploring this  issue is very important. A Back End Developer recognizes the different types of APIs for a more precise choice when designing communication with a client;
-   **System**: knowing the major operating systems is equally important because they are the server-side code execution environment. So a knowledge of Linux commands for example will help a lot.

  
Many other skills could be included but these allow you to identify which are the main requests from each area.

However, I don't like categorizing so much and when it comes to knowledge I consider myself more transversal, avoiding the so-called silos. In fact, a developer should also be interested in the spheres that are not  his  competence, even if he will limit himself to a more superficial approach. For example, a Front End developer needs to know the main databases even if a Back End developer will have more experience and more skills.

This  concept is very important both when dealing with informal topics and when designing an application, a moment in which the two developers must interact and be able to understand each other.

We have just added another piece to our puzzle called "differences between Front End and Back End", although I prefer transversal knowledge to vertical ones.

Now let's move on to the activities that perform the two areas to complete this  analysis.

## Which are the tasks of a Front End and a Back End developer?  

It is not easy to identify the activities carried out by each single area because everything changes depends on the type of application and many other factors. For this  I will limit myself to a more general approach.

From what we have learned, from the nature of each area, it is possible to identify the following activities for the Front End developer:

-   **Design**: a better usability of the platform is constantly sought, identifying new developments to improve the interface and make it more usable;
-   **Performance**: the key to the success of most applications lies in speed. Quick execution of the instructions makes the user experience less stressful.
-   **Search Engine Optimization (SEO)**: the constant updating of the SEO rules forces the developer to search for new solutions for a better positioning of the web page within the search engines. This  as long as it is a web page!
-   **Design**: a very important part during which the candidate technologies are studied for the development of a new application or for an update;
-   **Maintenance**: each application needs to be updated to improve its stability following bug fixes for example;
-   **Research and development**: there is no progress without innovation. Every good developer must keep up in order to be able to contribute positively to the success of the application they are developing, integrating new solutions or improving existing ones.

  
Regarding the Back End developer:

-   **Performance**: data processing must be efficient, with the shortest possible execution time. There is therefore a constant search for how to improve algorithms;
-   **Design**: when talking about a new application, for example, the Back End developer must provide  his/her experience to identify the best architecture for client-server communication, for the database and for data processing;
-   **Maintenance**: in this  case the activity is the same as for any other developer: updating the application as a result of bugs or new versions of the technologies.
-   **Research and development**: here too, we can refer to what was said in the Front End part: search for new solutions to improve the final product.
  
And with this we conclude our adventure in analyzing the differences between Front End and Back End. We have analyzed the  goals, the languages ​​used, the skills and finally the tasks that these two areas carry out.

If you are looking for an answer to the question "which area is right for me?", you have to know that unfortunately there is no sure answer but I can guide you through the image below:

![Differences Between Front End and Back End: Personality](https://res.cloudinary.com/flaco-dev/image/upload/v1637080024/chart_differences_between_front_end_back_end_016dc18f43.png)


If you think the Front End can do for you, you are in the right place because the FrontendPills section aims to introduce you to the world of Front End programming. Just go to the contact page [here](https://www.flaco.dev/contact "Contact me") and send me a request selecting "Become a Front End Developer" as subject. I will contact you in the shortest time possible.

Also in this  case I remind you that if you liked this  article and want to support me, you can follow these simple, easy and free steps:

1. Leave a like by clicking on the heart icon below;  
2. Share this  post on your social accounts or with your friends;  
3. Follow me on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) and on [Github](https://github.com/flaviocolonna);  
4. Subscribe to the newsletter below to not miss any articles, discounts or gossip (there will be many).

Thank you so much for your attention and have a nice day!

Differences between Front End and Back End

large_differences-between-front-end-back-end.jpg

medium_differences-between-front-end-back-end.jpg

small_differences-between-front-end-back-end.jpg

thumbnail_differences-between-front-end-back-end.jpg

large_differences-between-front-end-back-end.png

medium_differences-between-front-end-back-end.png

small_differences-between-front-end-back-end.png

thumbnail_differences-between-front-end-back-end.png

large_differences-between-front-end-back-end.webp

medium_differences-between-front-end-back-end.webp

small_differences-between-front-end-back-end.webp

thumbnail_differences-between-front-end-back-end.webp

Find out the differences between Front End and Back End: goals, the languages used, the skills and the tasks they do.

Differences between Front End and Back End: find them out!

Differences between Front End and Back End: objectives, languages, skills and tasks.

Often, when I have to explain my job to someone who isn't techie, I usually answer saying: I build websites. The result? The other person thinks I create blogs and other easy stuff. A little reductive by my point of view.  
So, I have decided to explain in this article what does a Front End developer do, basically my job, in the easiest way.

By the way, before starting, I will explain what is a website, otherwise it would be like understanding what is a mechanic without knowing what is a car at all.

## What is a website?

There are so many websites out there but are you sure to know who builds them and what are his or her tasks? Do you know which are the programming languages used to build a website and how is a website structured?

A  **website**  is a  **collection**  of interlinked  **web pages**  and related content  **identified**  under a common  **domain name**. It can be public or private.

For example, this blog is a  **public** website in which you can find articles, images, and other web pages. They are all available under the domain name  **flaco.dev**.

Now, we have clear what a website is but there is still one step before understanding what does a Front End developer do: look at how a website is structured.

## How is a website structured?

A website is composed by two main sides: the Front End and the Back End.

The  **Back End**  is in charge of  **processing**,  **storing**  and  **serving**  the  **data**  of a website. You can think about login forms or registrations forms. In this case, your email and your password are managed by the Back End.

Meanwhile the  **Front End**  is in charge to  **represent**  the  **data**  to the end user, building the  **layout**  and make the  **user interface**  nicer (at least for some websites). It is pretty easy to understand the difference at high level. I am not going to explain now other differences like programming languages and so on. Our focus today is on the Front End.

![Front End vs Back End](https://res.cloudinary.com/flaco-dev/image/upload/v1636123151/front_end_vs_back_end_cropped_1b37588b09.png)

So, now we know how a website structure is, let's finally see what does a Front End developer do during his or her routine.

## What does a Front End developer do?

As we said a Front End developer mainly create the layout of a website to represent the data to the end user.

So the basic process will be explained as following: get the data from the Back End, build the layout and make the page interactive to the user. But it is not easy as you may think.

There are three main languages used to build a website:  

-   **HTML**: is a  **markup language**  used to create the  **skeleton**  of a layout.
-   **CSS**: is a  **stylesheet language**  that describes the  **style** of the elements in the web page.
-   **JavaScript**: is a  **programming language** in charge of making a website  **interactive**, managing the user interaction with the layout components.

![Difference between HTML, CSS, and JavaScript](https://res.cloudinary.com/flaco-dev/image/upload/v1636123151/html_css_javascript_description_cropped_b68aa408c9.png)

So to answer to the question what does a Front End developer do we can say that: a Front End developer **is the person who builds the layout of a website to present the information requested by the user in the best way**. But what does in the best way  mean? To understand this, I am going to talk about what are the Front End developer tasks now.

## What are the Front End developer tasks?

It is not easy to answer to this question straightforward because there are several websites, and they all are built differently depending on some variables.  
Here we can list two of the most important:

-   **The client**: is it a private or a company website? My blog for example is totally different compared with the Amazon e-commerce.
-   **The end user**: Who is my end user? Understanding this is absolutely important because it can give information if the website should be  **multilanguage**, if it must be **accessible** to anyone. Moreover, which are the devices used by the user? Which screens do they have? Are they fast or do they have a poor internet connection? This can affect the user experience of course.

As you can now probably understand, the websites aren't all equals.  
So, depending on those factors, what does a Front End developer do is dealing with several tasks, described here below:

-   **Performance**: every millisecond counts and every delay can cause big losses to companies. You have to tweak your app to have your client performance requirements, dealing with heavy images, heavy code or high time consuming operations.  
    
-   **User experience and User interface**: one of the most important tasks is to deliver an understandable and  **easy to use** website. The end user shouldn't read a manual to use the  website. So, a Front End developer has to build a clear layout, respecting all the  **user experience principles**  (buttons dimensions, text dimension, and many many others). This  is  aligned with a good look and feel of the website, called  **user interface**. Designing is one of the process that a Front End developer could be often involved in.
-   **Search Engine Optimization (SEO)**: does the website need to be ranked before its competition? Yeah! Let's deal with it too! A Front End developer should know some SEO techniques to boost the visibility of the website he or she is building.
-   **Compatibility**: is the end user going to use Firefox, Chrome, Safari, Microsoft Edge, Opera, or Internet Explorer (I hope no)? Just to list a few, those are some browsers used worldwide and they could render the page differently. A Front End developer should check for each browser its version and the device used. The developer has to be sure the website is running smoothly on each browser, and on each device, that is included in a  **compatibility matrix.** It should be delivered by the client, if it is a company. Otherwise a Front End developer should choose depending on the most used browsers and devices in the country where the website is published.
-   **Reusability**: a Front End developer, a good one, should deliver an understandable and reusable code. If at some point the developer is not going to work anymore with his or her client, the next Front End developer should be easily develop on top of your code. Otherwise, the first Front End developer will not have a good reputation.
-   **Internationalization**: a website can be delivered localized in a single language or it can be multilanguage. The Front End developer must deal with routing and content translation. Is there any Arabic around? In this case the layout should change too, to right to left. I can tell you it is not easy at all.
-   **Accessibility**: imagine a shop that would like to be opened to everyone but than it doesn't have a ramp for a person with disabilities. It is limiting the service that is offering. A website works the same. A Front End developer should check that the website can be accessed by people who can't read well, that are using screen readers, and so on. For example, government sites must be  **accessibles**.
-   **Pricing**: in case of being a freelance, the developer should find cost efficient solutions depending on the client. For example, don't use top notch technologies for a simple blog. A client must be satisfied of your work even at price level. I would say absolutely important in case of freelancing.

Now that you know what does a Front End developer do, which are the tasks that he or she could be involved in, and the Front End languages used to build a website, you are ready to go with the differences between Back End and Front End in a more specific way explained in [this](https://www.flaco.dev/blog/differences-between-front-end-and-back-end) other article.

And  if someone asks me what does a Front End developer do, I will introduce her or him to this article. You can do the same!

In case you have been fascinated by the Front End developer job and you are interested on starting a new career as a Front End developer, I can help you with that. Just go to the contact page [here](/contact) and send me a request selecting "Become a Front End Developer" as subject.

Now it is time to leave. I would remember you that if you liked this article and you want to  **support me**, follow these simple  **easy and free**  steps:

1. **Leave a like**  clicking on the heart icon below
2. **Share**  this post on your social accounts or with your friends
3. **Follow me**  on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR), and on [Github](https://github.com/flaviocolonna)
4. **Subscribe to the newsletter**  below to don't miss any article, discount or gossip (there will be a lot)

Thanks a lot for your attention and I wish you a good day!

large_what-does-a-front-end-developer-do.jpeg

medium_what-does-a-front-end-developer-do.jpeg

small_what-does-a-front-end-developer-do.jpeg

thumbnail_what-does-a-front-end-developer-do.jpeg

large_what-does-a-front-end-developer-do.png

medium_what-does-a-front-end-developer-do.png

small_what-does-a-front-end-developer-do.png

thumbnail_what-does-a-front-end-developer-do.png

large_what-does-a-front-end-developer-do.webp

medium_what-does-a-front-end-developer-do.webp

small_what-does-a-front-end-developer-do.webp

thumbnail_what-does-a-front-end-developer-do.webp

Discover what does a Front End developer do, which programming languages are used, the daily tasks the developer is involved and which skills are needed.

What does a Front End developer do?

Hi and welcome to my Front End blog!

In this article I am pleased to announce my new **writing adventure**.

But before talking about what you are going to find in this new Front End blog, why you should read it and why you shouldn't, I am gonna take 1 minute to introduce myself.

## About me

I am Flavio and I am an Italian **Software Engineer**, most exactly a FullStack JavaScript developer, based in Barcelona.

Apart from that, I am also a **digital content creator** and a **course publisher**.

During my career I have developed several **JavaScript** based apps: **web**,  **mobile**, and **servers**.

In 2020 I wanted to share all my experiences and some Front End anecdotes to the entire developer's community. So, I decided to create my **Instagram channel** called [**@frontendpills**](https://www.instagram.com/frontendpills/). I would suggest you to take a look at it to read some examples of what I usually post about.

In the same time I was also working on creating my first **online course**. A very challenging adventure which goal still is helping people on becoming a Front End Developer. The course is in Italian and it is available in the [frontendpills website](https://www.frontendpills.it/corso-front-end-developer-2021).   
I also create **masterclasses**, live workshops which aim is to learn a specific topic in the shortest time.

Now let's stop talking only about me as it is time to focus on the blog. By the way, if you still want to read more, you can have a look at the [about section](/about).

## Why a new Front End blog

This blog has been created to share a more international and varied content, ranging from technical content to soft-skills information.
I will try to use a technical language but that will be comprensible even to the newbies.

I want to give a 360-degree content. So, it wouldn't be only a Front End blog but it will contain also other topics. Due to this it will include **mentoring**, news about new **developer tools**, or about **software updates** used by developers, in addition to the standard technical articles.

You can find contact forms to book a **private consultancy** about several topics, even if you want to **hire me** to build or to optimize any website. You could use it also to ask me something more general.

My main goal is to provide the best tools to **start a new Front End career** and to continue on this way, following the path to get your first job or to improve your skills.

## What's the content of this Front End blog

In summary, here is roughly what we will talk about in this Front End blog:
- How to start a career in the Front End: secrets and tips
- The world of JavaScript: anecdotes and how to create web, mobile and server applications based on this programming language
- Insights and updates on ECMAScript, development environments, browsers and so on
- How to set up a project in the Front End and how to manage it
- How to write your own technical resume and how to present yourself for an interview
- How to improve your skills as a programmer and advance your position

At this point I have explained to you the main points of this blog and what it offers. You will have already understood if it can come in handy and if you will continue reading it.
If not, focus on what I'm about to tell you in the next paragraph.

## Why you shouldn't follow this blog

It could be strange but sometimes it's easier to reflect on the negative sides to understand if something fit our needs. There are so many Front End blogs out there and you may be wondering how this can be different. Below you will find many good reasons why this blog would not be for you:

- If you think you can find a direct solution to what you are looking for, by doing a simple copy and paste. In my articles you will find first of all the explanation of the implementations. My goal is to make people understand the *why* and not provide a code without a any consideration
- If you think everything is due and free, this place is not for you. The effort is there, I will not always be punctual with the publications, the courses are paid and the articles need a simple *like* to keep me going;
- The content can be challenging at times. There is no shortcut. It takes time, patience and persistence to learn. If you don't have these qualities, then I guess, again, this place is not for you.

I hope you don't fall within the points listed. In this case you are a person who wants to learn and above all who wants to improve. Read on to find out why I chose * flaco.dev *.

## Why flaco.dev

It is called *flaco* mainly because I am skinny and *flaco* is its spanish translation, as I live in Barcelona. But it could be also the partial merge of my name and my surname as I am called Colonna as surname. I let you decide!

## How to support me

In case you decided to start reading my Front End blog, it would be great if you could support me just doing at least one of the following actions:
- Leave a like
- Leave a comment
- Share the article
- Spread the voice with your friends

## Let's connect

If you want to connect with me just look at my [LinkedIn profile](https://www.linkedin.com/in/flaviocolonnaromano/), and you can find me also on [Instagram](https://www.instagram.com/frontendpills/) or on [Facebook](https://www.facebook.com/frontendpills/).

## Let's start

Now it is time to start! I will wait you on the platform and to don't miss any new article just subscribe to the newsletter, also to receive discounts for the published or next courses.

It has been a pleasure to introduce you to my Front End blog and many thanks for reading!

Cheers,\
The Flaco

large_first-article-image.jpg

medium_first-article-image.jpg

small_first-article-image.jpg

thumbnail_first-article-image.jpg

large_first-article-image.png

medium_first-article-image.png

small_first-article-image.png

thumbnail_first-article-image.png

large_first-article-image.webp

medium_first-article-image.webp

small_first-article-image.webp

thumbnail_first-article-image.webp

Let's discover the content that flaco.dev offers in this new blog. It will not be the classic Front End blog but it will contain other interesting topics.

A new Front End blog: why you should read it and why not

Too many blogs around, and here there is one more. But this is gonna change your mindset.

large_JavaScript-frameworks-rafiki.jpg

medium_JavaScript-frameworks-rafiki.jpg

small_JavaScript-frameworks-rafiki.jpg

thumbnail_JavaScript-frameworks-rafiki.jpg

large_JavaScript frameworks-rafiki.png

medium_JavaScript frameworks-rafiki.png

small_JavaScript frameworks-rafiki.png

thumbnail_JavaScript frameworks-rafiki.png

large_JavaScript-frameworks-rafiki.webp

medium_JavaScript-frameworks-rafiki.webp

small_JavaScript-frameworks-rafiki.webp

thumbnail_JavaScript-frameworks-rafiki.webp

Build your own blog with this live masterclass exploring NextJS, Strapi, Typescript, Tailwind and GraphQL.

Masterclass of NextJS, GraphQL, Typescript, Tailwind and Strapi

NextJS, Graphql, Tailwind and Strapi. The most important technologies in a single masterclass.

Building a scalable app with NextJS and GraphQL

medium_reactMasterclass.jpg

small_reactMasterclass.jpg

thumbnail_reactMasterclass.jpg

medium_reactMasterclass.png

small_reactMasterclass.png

thumbnail_reactMasterclass.png

medium_reactMasterclass.webp

small_reactMasterclass.webp

thumbnail_reactMasterclass.webp

Build your own portfolio with this live masterclass exploring NextJS, ReactJS, Typescript, and Tailwind.

Build your portfolio with ReactJS and Typescript

Master ReactJS and Typescript by building your own portfolio with NextJS in only 12.5 hours.

Welcome to Flaco's house

Latest Articles

What are Web Components and how to use them

What is React Remix? A new React Framework

Differences between Front End and Back End: objectives, languages, skills and tasks.

What does a Front End developer do?

A new Front End blog: why you should read it and why not

Categories

Available Courses

Building a scalable app with NextJS and GraphQL

Build your portfolio with ReactJS and Typescript

Newsletter

What is React Remix? A new React Framework

What are Web Components and how to use them

A new Front End blog: why you should read it and why not

Differences between Front End and Back End: objectives, languages, skills and tasks.

What does a Front End developer do?

Newsletter