The Front End Developer Roadmap 2022

In this article we are going to talk about the Front End Developer Roadmap for 2022 as the set of skills needed by a Front End for this year.

If you landed here you most probably are interested on becoming a Front End Developer or you just want to leverage your skills for this year. In the case you don't know what is a Front End Developer, I suggest you to read before the article about what does a Front End Developer do.

By the way, once you have decided to investigate a little bit more about this career, you would have noticed that it is not so easy exploring and understanding all the needs to become a Front End Developer in 2022. An year so competitive that makes you feel lost around tons of libraries and frameworks to know. I can feel your pain, dear reader.

Due to this, I decided to publish several suggestions that will help you on finding and taking the right choices on the way to become a Front End Developer. So, today I am going to introduce you the Front End Roadmap 2022 that stands out from the others Front End Roadmaps as it is updated for this 2022.

If you are ready, I would start from what is a Front End Developer Roadmap to understand better why you need it. So, let's start!

What is a Front End Developer Roadmap?

In the previous article I talked about what are Web Components and I am mentioning it as it is another new solution that is becoming more popular day by day. And as you can see, it is not the first and neither the least. Out there, every day, there is a new technology that want to stand out in the Front End world. Due to this, starting a new career as a self-taught Front End Developer is becoming very hard year by year due to this great dynamism of the market.

So, a clear path would help and a Front End Developer Roadmap is in charge of that: it gives you a clear vision of the most demanded skills that a Front End Developer should know.

Of course a Front End Developer Roadmap is not always the same and it needs to be updated every year, due to the changes that affect the Front End market. The Front End Developer Roadmap is not only composed by HTML, CSS, and JavaScript. There are much more skills and tools to consider to include in your list. Being a Front End Developer in 2022 is much more competitive than being a Front End Developer in 2010 or in 2015. The market has been evolved so much that the Front End must adapt to the changes but always thinking on having a solid backbone to rely on. And here below I am going to show you which are the most basic knowledges that a Front End Developer must know and the advanced skills a Front End Developer should know to become more senior.

Due to this, it is important to clarify that this Front End Developer Roadmap for 2022 is not only for who wants to become a Front End Developer in 2022 but it applies to anyone wants to improve own position.

The Networking in the Front End Developer Roadmap: the first step

You cannot be a mechanic without knowing about how each engine component works with the others. You cannot be a mechanic without understanding the ecosystem of an engine like where it should be used and how long it should resist.

The same is applied to a Front End Developer. No one can become a Front End Developer without knowing how the data is moved around the network and how it reaches us.

I decided to start this Front End Developer Roadmap from understanding why the network protocols are so important to know and why a Front End Developer should consider to know something about the network elements, at least at high level.

In my humble opinion, here below there are some questions a Front End Developer should be able to answer:

• What is the TCP/IP Model? How Internet works is based on this model and it helps on understanding terms like IP, HTTP, TCP, UDP, FTP, SMTP, and WiFi, just to name a few. A Front End Developer should know what are the previous mentioned protocols and systems on which Internet relies.

• What is the HTTP protocol? Do you see that little http or https keyword before any website address? A Front End Developer should be able to give to anyone a little overview of what they stand for.

• How does a browser work? We use the browsers as main access point to Internet. But do we all know how do they work?

• What is a DNS? If a Front End Developer knows about how a browser work, this is very related and relevant.

• What is a CDN? I have included it in the Front End Developer Roadmap for 2022 as mainly every website uses it to improve its performances.

• What is a REST API? A Front End Developer before or after will need to read some data from any server. Right now the most common pattern to create an API is the REST API. So, let's get the hands dirty.

• What is a CORS call? It is a protection against cross origin calls. A Front End Developer faces it so many times that is basic to know it.

This section is very underrated by many developers but it is the most important if you want really boost your position understading what is going on under the hood.

Now, the next step in the Front End Developer Roadmap is the section about the HTML and the CSS.

The HTML and the CSS in the Front End Developer Roadmap

Being a Front End Developer is not just designing a website. It is much more. It is understanding the needs of the final user and the performance needs of the platform. To do that, the Front End Developer has to master the HTML first, in order to provide a valid, performant and accessible page.

Here below you can find the most important HTML topics to know:

• What and which are the Semantic tags
• How to create, send and validate an HTML form
• What is the accessibility of a website?
• Which are the Nesting conventions to build correctly the document elements?

More than that, he/she needs to know proeficiently how to design the page with the CSS and here as following you can get the best topics to investigate:

• Rules and targets: what are and which are the most used
• Specificity: understand the priority between the targets
• Flex and Grid design: the most used design system and due to that you have to know them
• Animations: let's have fun with some animations but always keeping under control the performance

We can get into the next step of the Front End Developer Roadmap: JavaScript and ECMAScript.

Learn JavaScript and the latest ECMAScript versions

JavaScript is the programming language that makes the interaction possible in any website. A platform without JavaScript is totally static without any event or interaction handler. ECMAScript, on the other hand, is the standard on which JavaScript is based. Every year, since 2015, we have a new ECMAScript version and it brings a lot of functionalities that every browser can support.

But before a Front End Developer needs to start with JavaScript and specifically with the following points:

• The language definition: what is JavaScript and which are its characteristics?
• Which are the JavaScript data types?
• How can I manage the loops in JavaScript? A Front End Developer must master all the principal loops like for loop, do while, while.
• How can I handle the dates in JavaScript?
• How many conditional operators exist in JavaScript?
• Debugging the code: how to debug the code with the Developer Console, knowing all the tabs inside of it
• How to make the HTTP calls? Understand how to use the native fetch api and the axios library
• Which are the most important Design Patterns? In a Front End Developer Roadmap cannot miss the followings: singleton, service, factory, revealing module.
• Which is the difference between a library and a framework?
• How to write correctly unit tests and e2e tests? On this side it is pretty important to know Jest first of all as one of the best unit testing suite and Cypress for end to end tests.

Once you have covered all the previous points, you can get over the latest ECMAScript versions knowing which are the most important changes from the 2015 until now in JavaScript.

The fundamental role of TypeScript in the Front End Developer Roadmap

In the Front End Developer Roadmap 2022 we cannot forget about TypeScript. It is a strongly typed programming language that builds on JavaScript. As JavaScript it is a dynamic and weak typed programming language, TypeScript lets a Front End Developer work with types at build time delivering a better and more stable code. Since 2018 many companies have understood the importance of having TypeScript included in their tech stack.

So, it is very suggested to start working with TypeScript as soon as the Front End Developer has got a good level in JavaScript.

Most used Front End UI libraries and UI frameworks you must know

One of the hardest thing for a Front End is to understand the difference between a library and a framework.

Shortly, a library is a set of utility that hide a more complex logic, exposing shorts functions.

On the other hand a framework is defined as a more stricted way to build an application following a list of rules. For example a JavaScript framework, like Angular is, lets you build the view of the app following their rules about the lifecycle of the components, the services or the dependencies. We can talk about templates rather than small pieces of utilities.

So, to do a recap a library is a small piece of code that enables you to cover a small functionality meanwhile a framework is considered as a template to build more complex views or logics.

Now that we know which are the differences, the last thing left is decide which to use. And what if I tell you that there are thousands of libraries and dozens of JavaScript frameworks? Would you start investigating by yourself which are the most used or do you need an help? As I am very kind, here below I write some that are the most used:

• React: the most used library to build UI components handling their lifecycle
• Angular: the most spread and used JavaScript framework to build complex user interfaces
• VueJS: another great and probably the next most used JavaScript framework to build user interfaces

Learn Git as version control manager

To keep track of any project is very important to keep track of all the versions, so all the changes that we make should be recorded somehow. This is the aim of the version controls like Git. Mastering it is for any developer a must!

Any project that you do, even for yourself, should be versioned and uploaded to any platform like GitHub or Bitbucket. They work like an hosting service for your code.

I recommend to get into the following commands, executable via terminal instead of using directly the git user interfaces:

• git add, git commit, git push, git stash, git reset
• git pull, git merge, git rebase, git fetch

Then, we should have clear what is a Pull Request and how to use the .gitignore. Very basic information to get into Git as quick as possible.

The build tools that a Front End Developer must know

The Front End build tools help you on the automation of specific processes to build your app. We can include minification of your code, dependencies management or assets optimization. Out there a lot of libraries are used to perform almost the same stuff but there are some that are better than the others. Here below you can find the most trending and most used Front End build tools:

• Webpack: it has already a couple of years out and it is the most used bundler/task runner for JavaScript applications.
• Rollup: it is a very recent bundler that uses ES imports instead of CommonJS or RequireJS for module injection.
• Gulp: it is one of the oldest together with Grunt in the field of task runners. It is highly customizable and you should know at least how it works has you could easily find it in any legacy project.

Now that we have our app ready and well built, let's test its performances in the section below.

The performances tools in the Front End Developer Roadmap

There are a lot of tools to test the performances of an app. It depends a lot on the scope and on the technologies used like Angular or React or whatever. By the way, there are some common metrics to take in account that are called Core Web Vitals. These metrics include layout shift, the first byte sent to the client, the response of the server, the amount of bytes downloaded by the user, the amount of code unused, and many others.

As a Front End Developer is very important to constantly test our app against several platforms to check which are our Web Vitals scores. Here below you can checkout the most used and reliable platforms:

• PageSpeed Insight: directly from Google we have a really nice platform that can give us a lot of information about our page. There is also a local implementation called Lighthouse that can be accessed from the Developer Console while developing locally.
• WebPageTest: an highly customizable platform to test our app in several conditions: network speed, location and browser. Really suggested to consolidate with the previous metrics coming from the PageSpeed Insight.

There are much more but from my investigation, the two above are the most reliable and with enough data.

To improve the performance of a website you cannot miss the differences between the types of rendering of an application. About this we are going to call in the next section. Keep reading.

The application rendering methods: Server-Side Rendering vs Client-Side Rendering vs Static Site Generation

In the Front End Developer Roadmap for 2022 we cannot miss the importance of understanding the rendering types of an application. Each web can be rendered in several ways and deciding our final solution has an impact on the performance. So, it is very important to address the app goal and understand the differences between the available rendering methods. A Front End Developer should have clear that there are currently three main renderning methods: the Server-Side Rendering, the Client-Side Rendering, and the Static Site Generation.

Let's start analyzing what is the Client-Side Rendering.

What is the Client Side Rendering?

The Client Side Rendering is the most common rendering method for a Front End application. It means that all the code is delivered to the client and then all the HTTP calls occur in the client side. This method can be the perfect solution for internal application for example. But couldn't fit if you want your application to load instantly, for example when you deal with performance improvements for the Search Engine Optimization. Are you thinking about what I am referring to? Don't worry because there is a dedicated section to it just below.

The final result and the performance of this method rely on the client device for two main aspects:

• The cpu power to complete the instructions neeeded to build the UI
• The network speed to call the server

So, if you have a huge application where you don't know which mobile device is going to use your user, and you want always the best performance, this is not the best method to use then.

Now let's talk about the Server-Side Rendering method.

What is the Server-Side Rendering?

As you probably have understood, the first render of an app that uses this method is happening on the server. It will be in charge of build the first view in HTML format and it is delivered to the end user. So, all the first instructions and HTTP calls needed by the app to load the page requested, are done in the server. This solution is very powerful because the first render, the most important for example for SEO purposes, doesn't rely on the client device. But we still get the latest versions of our data for example. In contrast with this, we are going to analyze the last method that builds your pages at build time. It is the Static Site Generation, so let's get into it.

What is the Static-Site Generation?

All the pages that we want are built at build time. This is the Static-Site Generation. All the data that a page needs are requested at build time and then the page is statically served when requested. The main difference with the Server-Side Rendering method is that the app doesn't render the page when the user visits it. It is already built and it is just sent to the user. This is not so useful when we have many data that changes frequently in our page, unless we trigger a build everytime the data changes.

Now that we have described and understood the differences between the three main rendering methods, let's jump into another interesting section that will talk about one of the latest library and technology that is getting a lot of success now: GraphQL.

GraphQL in the Front End Developer Roadmap

In the Front End Developer Roadmap for 2022 I wanted to include the GraphQL library. Here below you can see an image to see the evolution in terms of adoption that this technology has got during the latest years.

GraphQL Trend - Last 5 years

From the image above you can notice how much is important to know it. GraphQL is a really top notch technology that let's you primarly aggregate, filter, and sort your data coming from the server.

Let's get into a practical example: your homepage is showing many different types of entities inside and to build it you have to make the same amount of calls depending on the types your entities. This is how a REST API works. Each call has a round trip that costs time. The most important metric you should always think as a Front End Developer for 2022.

So, how can I do only one call to get all those entities? GraphQL is capable of that. It stays for Graph Query Language because you practically navigates through the nodes as your server were a graph. On the other side your server will have an implementation of GraphQL too just to provide the schemas and be agree with the client about which types of data are available.

Now, without adding any more information, let's see the section talking about something I already mentioned: the Search Engine Optimization.

The Search Engine Optimization principles for a Front End Developer

We are getting very hot with this section as it is one of the most demanded skill in 2022. So, it has been easy to choose to include it into the Front End Developer Roadmap 2022.

The Search Engine Optimization, or commonly named SEO, is a set of techniques to rank better our page on the search engines. If we want to appear before our competitors in the search results we need to focus on our content and on our website performances. Unless you are willing to pay for advertisments, but that is another talk.

If the content of a page is generally managed by the Content Department, the performance side is left to the Front End Developer. In the Front End Developer Roadmap 2022 I decided to include my personal process I use when it is time to do some SEO improvements:

• Track your current page scores: you can use PageSpeed Insight and WebPageTest, get three test each and get an average. Take note and keep it for the next iteration.
• Read and apply the SEO suggestions: PageSpeed Insight provides you some ideas to improve your Core Web Vitals.
• Compare your improvements with the previous scores.

Now I can resume shortly what you should improve at more technical level based always on my routine:

• Increase the server speed: sometimes it is not possible because of the costs but it is worth to mention that this is a really good investment.
• Choose the right rendering method: the Server-Side Rendering method is the most used but you can go also with the Static Site Generation. Avoid the Client-Side Rendering method.
• Compress and resize your images: try to deliver the images compressed and resized adapted to the user device.
• Use the latest image extensions: convert your images to the latest WEBP or Avif formats that support compression without losing the quality.
• Reduce the JavaScript and CSS bundle sizes: remove unused code or transform in a more efficient way your instructions to deliver less bytes.
• Style efficiently your elements: avoid a recalculation of all the style in case an element changes suddenly its position. Everything will be propagate like a chain.
• Avoid visible swap of the font: in case you use an external font be sure you still show the content while your font is loading.
• Avoid making too many calls: if you are making too many calls, investigate why and try to aggregate them or to post-pone whenever is possible.

There should be a lot to talk about SEO and this article is mainly focused to give a general perspective on what's included in the Front End Developer Roadmap for 2022. So, I would prefer to get into the last section I see very useful when it is time to be a Front End Ninja.

Learn Figma as a Front End Developer

As last add to the Front End Developer Roadmap for 2022 we have Figma. It is a free prototyping tool that you can use directly in the official page. I decided to put it here because it is widely used in many companies and sometimes it is very useful to know how it works. I want to say that it is mainly used by the Design Departament, but as I think that a Front End should know his/her integrations with the others closed departments, I think it is worth to mention Figma.

Thanks to this tool you can design anything you want and then export the data as you prefer: svg, css, html, and many other formats. It is a bridge between a designer and a Front End and this last should be capable of navigating through the tool and export the data at least.

We have reached the end of this article. You can breathe and relax now. I hope that this Front End Developer Roadmap for 2022 hasn't scared you and that it has been useful for you to understand better what's in place for this year.

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 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, Facebook, Twitter and on Github;
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!