Are you a Frontend Developer wanting to level up?

But at the same time, you feel overwhelmed by the quantity of advice you find online. With no clear roadmap to follow towards the Senior level?

You tried online courses, you tried side-projects and you tried asking the Senior Frontend developers around you how to improve.

Only to get even more confused.

Frontend Developers reading another article telling them about 5 shinny JavaScript libraries they never heard of before.

Some tell you that to get to Senior, you need to master the basics.

Others say that it is more about being able to deliver applications end-to-end. The full stack skills. Like brushing up on your backend knowledge or getting AWS certified.

Finally, others claim technical skills alone are not enough to get to Senior. You need to work on your soft skills and leadership abilities.

All of that advice is partly right.

None of it is helping you.

You do need all those things, but what matters the most are by far technical skills. Strong Fundamentals and End-to-End Delivery are the bare minimum.

But for you to become a Senior Frontend Developer you need to be able to influence other developers around you and make technical decisions. To be seen as an expert in your field.

Technical mastery means technical depth beyond just writing code.

Having a good grasp of topics like Testing, Scalability, and Performance. Understanding basic architectural patterns beyond what comes out of the box in a standard JavaScript framework.

Yet, despite the importance of technical skills, most front-end Developers are not Senior yet because their technical skills are not deep enough.

Today I will show you exactly how to reach the Senior level of technical mastery.

I will share with you a clear step-by-step roadmap for you to get to Senior Frontend Developer and beyond. Regardless of the level you are at right now, you will know exactly what you need to do to get to the next level.

Including specific tools, frameworks, and principles needed for you to get to the Senior level.

If you are a Senior Frontend Developer already, you can use this Roadmap as a checklist to make sure you are on the right track.

Why is this Roadmap better than anything you’ve seen before?

There are tons of articles claiming to have what you need to become a Senior Frontend Developer.

But, in reality most articles only leave you more confused because:

1. Most roadmaps focus on “what to learn”, but not on “why” to learn it
2. They obsess over specific frameworks instead of principles that last for a lifetime
3. They don’t adapt to existing knowledge, technical level, and the job market
4. They haven’t been tested in the real world
5. They don’t point you to specific resources for you to study
6. The Frontend Roadmap is exactly what we used to help 250+ developers get to the Senior level and beyond. It’s been battle-tested in the real world again and again.

It’s also been built for busy developers with little time to waste on random tutorials and courses.

Developers with a full-time job, and a family or a life outside work. It contains as little as possible and as much as necessary for you to make it to Senior level.

Let’s jump right in!

We will begin by refreshing some of your existing JavaScript knowledge…

Things You Should Know Before You Proceed

Before diving in into this roadmap, I will assume you are familiar with Junior/Mid-level Frontend topics.

Things like JavaScript fundamentals, TypeScript, and basic knowledge of the frontend framework you are working with. Trying to grasp Senior Frontend concepts without prior knowledge will be much harder as you will have to fill too many gaps.

If you want to refresh your fundamentals, here is a Free JavaScript Fundamentals Roadmap we’ve put together for you. For more resources like this check our Free Community for JavaScript Developers.

You might expect me to start this Roadmap with a new brand JavaScript framework, like React or Angular. Or something more fancy, like Svelte, Next.js, or Remix.

Instead, we will focus on a fundamental piece of frontend development…

🚨P.S. Are you looking to fast-track to the Senior level with quality resources, feedback, and accountability? Click here to join our Free Community - The Senior Dev Academy.🚨

1. Frontend Tooling

The first topic we focus on is Frontend Tooling, particularly how module bundlers like Webpack work, how they are configured, and how they fit in the bigger picture.

1.1 Module Bundlers

This knowledge is crucial because Module Bundlers are at the core of most popular JavaScript frameworks. Many of the tricky console errors, edge cases, and application configs you will have to deal with as a Senior will involve them.

A good mastery of Module Bundlers will also give you a better understanding of how JavaScript works, beyond frameworks, and how the browser processes your JavaScript bundle.

It will allow you to lead your team when it comes to setting up new JavaScript applications or optimising existing ones.

You will be able to know what is the source code of your application, what’s going into your ‘build' folder, and why. And you will be able to come up with ways to improve the performance and scalability of your frontend applications.

In the case of module bundlers, Webpack is a good starting point.

That feeling when you finally understand the Webpack config you’ve been using every day for the last 3 years.

You will want to explore its inner workings, extensions, and documentation in depth(three shaking). Finally, give it a shot yourself and build a production-ready application from scratch.

1.2 Linting And Code Quality

You probably worked with tools like ESLint and Prettier. Well, it is now time to go deeper and learn how to set them up from scratch.

Part of a Senior Developer’s job is making sure the code quality of the team stays high. For that coding standards must be integrated and automated into the development process, not just talked about.

This is exactly what tools like Prettier do.

If you want to go the extra mile, you can integrate these tools into your deployment pipeline and Git hooks with tools like Husky to make sure every Git commit your team makes complies to the coding standards you agreed on.

Senior Dev Tip: Now that you are looking at bundlers, understanding the module federation pattern will make you stand out from the mass of front-end developers. We will dive deeper into this concept in the Frontend Architecture section as it is foundational to building Micro Frontends.

2. Building Frontend Apps: Component Driven Development

Most modern JavaScript frameworks are built following the same architectural patterns. Once you master these patterns you will be able to master new frameworks with ease.

One of those core patterns is encapsulating code in smaller pieces of code called Components.

This is what Component Driven Development is all about and it includes Component Design and Component Testing. I could write a full article about this, here we will focus on the major patterns and implications Components bring to the table.

Starting with…

2.1 State Management

The most important pattern when talking about Components (and any UI in general) is State. To understand the state, one needs to understand the “State Machine” pattern, as well as the concepts of Essential State and Derived state.

Moving on, you will be ready to get deeper into the “Hierarchy Of States” starting with Component State, Shared State, and Global State.

Then onto the different use cases that involve State.

They include Form State (including Input Validation), Data Fetching, and Prop Drilling, as well as the different patterns and tools to implement state.

State Management includes the Reducer Pattern in the case of Shared State with useReducer and the different libraries to manage Global State. From 3rd Party libraries to internal built-in functionality.

React Developers trying to choose the best State Management solution.

For example, in the case of React, we have Redux, Zustand, and Recoil as popular 3rd Party libraries and the Provider Pattern/Context API.

Senior Dev Tip: Senior Frontend Developers think differently. They start with a Mental Model first, then proceed with the implementation. One of those Mental Models is the Virtual Dom pattern implemented by major JavaScript frameworks, with React and Vue being their major adopters.

2.2 Frontend Design Patterns: Virtual Dom

The browser DOM, which is a representation of your web page that you need to manipulate when you make changes, is pretty slow.

The solution to this is to make a memory copy of the actual DOM called the Virtual Dom. Making changes in memory is much faster than changing the real DOM. We can change the real DOM batching changes from the Virtual DOM and so make everything much faster.

The most important concepts here are the Diffing Algorithm and the Reconciliation process. They are responsible for minimising the amount of changes and the performance gains.

The Virtual DOM pattern is used by both React and Vue.js, two major JavaScript frameworks.

Senior Dev Tip: Now that you understand the “Why” behind the Virtual DOM, you should be able to answer the million-dollar question: “Why is React so fast?”, which will come up in most React Frontend interviews.

2.2 Browser APIs

Finally, a Senior Frontend Developer is expected to know how to interact with the Web Browser directly and its more advanced features.

A critical part of any Frontend application is authentication and data storage.

A Senior Frontend Developer is required to be familiar with different authentication and storage mechanisms present in the browser. Those include cookies, local storage, and session storage.

Another very important Browser API is the History API which is used by all modern frameworks to mimic HTTP-like routing in SPAs (Single Page Applications).

Senior Dev Tip: Understanding the History API and routing will make the difference between spending 5 minutes or 5 days debugging a blank page error.

2.3 Accessibility (a11y)
Most Senior Frontend Interviews will contain some questions about Accessibility. Important if you work for the government or public institutions. They might have a very diverse user group and are heavily regulated. Matters less if you work for fast-growing startups.

Senior Frontend Developers know Grandma is checking their websites and make it easier for her to do so.

The core concepts you need to master regarding Accessibility are the WCAG(Web Content Accessibility Guidelines) and Semantic HTML.

2.4 CSS Fundamentals

You might love it or hate it, but CSS is still at the core of frontend development. The good news for you is you don’t need to be a CSS wizard to be a Senior Frontend Developer.

But you do need to master the fundamentals of working with CSS. These include core CSS concepts like Flex Box, The Box Model, CSS Specificity rules, and some CSS Frameworks. Like Tailwind CSS.

JavaScript Developers trying to center a DIV.

If we are talking about JavaScript frameworks, knowing how CSS in JS works and what is the impact of CSS on application performance (think critical CSS) will get you a long way.

2.5 Web Security & Authentication

Security might sound very confusing to front-end developers. Particularly self-taught developers most of which don’t even know what Web Security is about.

The good news is that if you master these 2 Core Fundamentals, you will have covered 80% of your web security needs.

Those are CORS and HTTPS.

For starters, memorising a few HTTP status codes like 200, 404, 500, 301, and 302 will do wonders. They are crucial while debugging. And they will make you stand out when red warnings appear in the console.

While your colleagues will be searching StackOverflow, you will already know what’s going on behind that failing request.

A Senior developer should also be familiar with modern Authentication and Authorization techniques. Most of them are based on the OAuth2 framework.

Don’t be a JavaScript Clown and learn some Web Security.

The deeper you can go into the access token lifecycle, and the different vulnerabilities that an attacker can exploit the more Senior you will come across like.

Senior Dev Tip: For status codes and headers, this Mozilla MDN section is the way to go. Yes, a Senior Frontend Developer is supposed to know the difference between the GET and POST HTTP verbs.

Senior Dev Tip: If you want to go above and beyond, knowing some HTTP headers goes a long way. In the case of responses, headers like Accept, Host, User-Agent; and in the case of responses things like Cache-Control, Content-Type, Content-Encoding.

Senior Dev Tip: If you are going to a technical interview with a company in the insurance or banking sector, make sure you review security before the interview. Check the OWASP checklist.

🚨P.S. Are you looking to fast-track to the Senior level with quality resources, feedback, and accountability? Click here to join our Free Community - The Senior Dev Academy.🚨

3. Web Performance

When your product manager comes complaining that "the Website is slow", a Senior Frontend Developer is supposed to explain why is happening, what “slow” means, and how to make it faster.

Been there, done that.

The truth is a solid mastery of Web Performance techniques will make you a much better web developer overall. It will teach you how the browser works at its core beyond the abstractions that JavaScript frameworks impose.

The challenge here is that web performance is a vast field.

And Senior Frontend Developers are required to know quite a lot about it. But at the same time, it is hard to find a unified list of what web performance entails.

For the sake of structure, we will split it into 6 main categories:

3.1 Server Optimisation

To start optimising the frontend, we need to look beyond JavaScript. Server-level optimization usually includes some form of caching, mainly HTTP caching. This is first done at Browser level.

Caching is at its core saving a copy of the data/files that your users require most often and serving them that copy, instead of making a trip to the database and back.

You could cache(save) that copy at different levels. You could save it on the browser. On a server geographically closer to your client (CDN). Or in your backend to avoid doing expensive operations again and again.

Other parts concerning server optimisation involve storing your static assets (CSS, HTML, and images) on a CDN. You should be familiar with how CDNs work and how to set one up.

Senior Dev Tip: setting up a CDN is pretty straightforward, and many cloud providers like Cloudfare do this out of the box. Now that you are there you can also read more about how CDNs work.

3.2 Images Optimisation

Big heavy images are one of the main reasons why frontend applications start getting slow.

If you are working for an e-commerce application this is even more important. You will have tons of high-quality and heavy images to deal with. Same as with CSS, you don’t need to be a guru when it comes to image optimization.

But you do need to know what are the best formats when using images on the Web.

You should be familiar with common algorithms for image compression (Gzip, Brotli), conversion to WebP, resizing, and responsive images with the srcset attribute.

3.3 Fonts Optimisation

Optimizing fonts mainly involves preloading, leveraging the preload functionality, using the "display swap" feature of the browser, and limiting the number of fonts you are using (you might have to negotiate this with your UX designer).

3.4 CSS Optimization

Optimizing CSS comes down to mostly 2 techniques. Making it smaller by minifying it and compressing it correctly.

And using it wisely. Loading only what you need to render the above the fold portion of the website a.k.a. the Critical CSS. Bonus if you know how to set this up using your JavaScript bundler.

Senior Dev Tip: remember, your CSS is a static asset, so your CDN will most likely do the heavy lifting when it comes to performance by storing it closer to the user.

3.5 JavaScript Optimization

Optimizing your JavaScript gets us back to the beginning of this article: module bundlers. A lot of JavaScript performance optimizations will be done around your JavaScript Bundle.

Frontend Developer life in 2024 and beyond.

Once again, JavaScript can be faster by minifying and compressing it correctly as well as chunking it and serving it to the browser in an optimized way.

First, you want to focus on minimization, uglification, and compression techniques.

Afterward, move on to more advanced features like Code Splitting (including PRPL Pattern and Static Imports) as well as Server Side Rendering. In the case of SSR, I will dive deeper into it in the architecture section of this article.

The whole process of rendering on the server is quite new and complex. So it deserves a full article by itself. Let me know if you want me to write one in the comments :)

3.6 Framework Optimization

Finally, optimizing at the framework level will be specific to the framework you use.

Even though Angular, React, and Vue share many patterns, performance optimization is quite different from framework to framework.

In the case of React, being familiar with the following concepts and their implementation, from React.Lazy, to React.Memo, to the useMemo and useCallback hooks.

Funny because is true.

Those are quite complex features and I won’t dive deep into them here, but if you want me to write a concept strictly on the topic of React framework optimization, let me know in the comments.

🚨P.S. Are you looking to fast-track to the Senior level with quality resources, feedback, and accountability? Click here to join our Free Community - The Senior Dev Academy.🚨

4. CI/CD: Complete Software Lifecycle

Deploying with a one-click deployment to services like Netlify or Vercel might be very rewarding but it doesn’t teach you much about how the Cloud works.

What’s worse, not understanding the deployment lifecycle of your applications will make you look like a Junior Developer in most technical interviews.

A Senior Frontend Developer knows how to set up a deployment pipeline on an established cloud Platform like AWS. Ideally, they also know how to scale it, using services like CloudFront.

Do you need to get AWS certified as a front-end developer?
Not really.

I mean, if you have the time and resources, then go ahead and do it. Just be ready for a 3 to 6 months commitment.

A quicker way frontend developers can master CI/CD is by trying to deploy your frontend applications to a production-like environment on one of those platforms.

AWS for example offers plenty of free tutorials on how to deploy on their platform and a very generous free tire plan so you can do it for free.

Senior Dev Tip: If you want to go even further into Senior level topics, get a good grasp of Containerization, with tools like Docker and Infrastructure as Code. This will get you closer and closer to the back and full stack development skills. You might have to decide if you want to stay a Frontend Developer or move into Backend and FullStack Engineering.

5. Frontend Architecture

Now that you have a solid understanding of JavaScript and its frameworks as well as common browser APIs, you are ready to tackle a more abstract topic: Frontend Architecture.

Current software architecture topics in the frontend usually come up around two main topics, Micro Frontends and Server Side Rendering.

5.1 Micro Frontends

As Frontend Applications scale, so do the developer team that builds them. Yet, big teams are harder to manage and slower. The bigger the developer team, the more effort in making sure everyone is on the same page.

Frontend developers inspired themselves in how backend teams deal with scaling issues, via micro-services architecture, and created micro frontends. In this way, developers can split frontend applications into smaller ones and manage them independently.

5.1.2 How Micro Frontends Work

Micro Frontends allows you to scale your frontend team by breaking big monolithic frontend applications into smaller ones.

Every Frontend Developer in 2024 and their team jumping on the Micro-frontends hype train.

You can then have small frontend teams managing each of those smaller applications. These smaller applications can be deployed individually, which allows teams to be relatively independent.

5.1.2 Technical Challenges Of Micro Frontends: Monorepos & Design Systems

Despite the huge progress made in the last years in Micro Frontends, they still represent one of the biggest technical challenges for frontend developers right now.

Having different applications means different repositories and deployment pipelines.

It also means different coding styles. Different teams will need to agree on the kind of interfaces, coding standards, and philosophies they want to share.

On the technical side, micro-frontends entail many challenges. First of all, CSS is a global language, a solution will be needed for different teams to avoid class naming conflicts.

Second, integrating each Micro Frontend into a root application which will be responsible for routing, authentication, and service discovery is already a huge technical challenge.

Finally, sharing data between different Micro Frontends (from global state to internationalization) as well as unifying interfaces for different teams won’t be easy.

This is why MicroFrontends are generally considered a Senior-level topic in the frontend community.

Senior Dev Tip: MicroFrontends will push the knowledge of everything you know about frontend development, its pros and cons, its current state of the art, and its current limitations. This is what makes it a must to understand for any frontend developer aiming to become a Senior.

Senior Dev Tip: No matter how fancy the Architecture, if it is JavaScript, it will still be based on core browser features like "import maps". Module federation for example, which is at the core of micro frontends uses imports maps under the hood.

Monorepos: Most companies that use MicroFrontends will also implement a Monorepo pattern to manage their code. The bare minimum here will be for you to understand how the Monorepo is structured and how you can contribute. Also, get an idea of how the Monorepo is being deployed. Knowing Docker even at the basic level will be a lifesaver here. You can check build tools like I think it was Turborepo to dive deep into monorepos.

Design Systems: Packaging components for another team to use. For this, you will need to be familiar with the NPM package life-cycle, how to publish, and how to consume an NPM package, and how semantic versioning works.

🚨P.S. Are you looking to fast-track to the Senior level with quality resources, feedback, and accountability? Click here to join our Free Community - The Senior Dev Academy.🚨

5.2 Server-Side-Rendering (SSR)

Server Side Rendering allows you to render your JavaScript application on the server before sending it to the browser, increasing web performance and SEO. This is not easy as SPAs were built with CSR (client-side rendering) in mind.

5.2.1 How SSR Works

With SSR you render your SPA on the server first, generating a static HTML page. Now the user will fetch the complete HTML, which will be displayed instantly.

This is much faster than the CSR way. Fetching a JavaScript bundle, waiting for it to be parsed and interpreted, and manipulating the DOM to paint the page.

Those good old days when CSR was still a thing.

Your pre-rendered HTML page you sent has no functionality yet. To add functionality, you need JavaScript. So you kind of render twice. That’s a big technical challenge (like making sure what you are rendering on the server is the same as what will be rendered on the client).

And you will still have to wait for that JS Bundle to arrive and be parsed to be able to have any functionality (like clicking buttons). That is one pitfall of SSR that any front-end developer using it should be aware of.

Some might even call server-side rendering an anti-pattern.

Yet, understanding how to render JavaScript server-side will teach you so much about how the language works and the browser as well.

5.3 BFF: Backend for Frontend

Having a MicroFrontend Architecture or having different types of clients(mobile app, web app) consuming data from the backend means the backend REST APIs will need to adapt to all those different requirements.

A mobile app might need the same data as the web app but in a different format. This adds a lot of complexity to the backend.

To solve this problem, the BFF(backend-for-frontend pattern) has been invented. It basically means having a backend layer close to the frontend.

This backend layer belongs to the frontend. The BFF does the necessary data fetching and other functions (like Authentication and Authorization).

If that's how your Backend For Frontend looks like, better look for a new developer job.

The funny part is that in most companies, the frontend team is responsible for the BFF. Which makes a lot of sense because they are the ones who understand the specific needs each and every client application has.

As a Senior Frontend Developer, you will be supposed to know how to extend API Endpoints or GraphQL Resolvers.

You must understand authentication in machine-to-machine communication and basic API Design patterns. Ideally, you will also need to have a solid understanding of HTTP, which is the blood of the web.

This will involve getting a bit deeper into the backend than you are used to. Yet, it might be the best thing you’ve done so far as I will open the door for you to step into full-stack engineering with more and better job opportunities.

This is it!

If you are looking to become a Senior Frontend Developer in 2024, this is a proven Roadmap you can follow.

Now that you know the steps to the next level, it is only a matter of taking action.

So go get them future Senior Dev!

I will see you in the next one,

Take care,

Dragos

🚨P.S. Are you looking to fast-track to the Senior level with quality resources, feedback, and accountability? Click here to join our Free Community - The Senior Dev Academy.🚨