The Senior Frontend Developer Roadmap: 5 Proven Steps

Okay, so to get the senior in 2025, we need three things. Number one, you want to be able to deliver at the senior level. And we will see what that means in a second. And number two, you want to be able to prove that by getting a senior developer job. So you want to make sure people invite you for an interview at senior level, so your resume is relevant and you can go past all the behavioral interviews. And then go into a technical interview for the senior level and pass those two. And to enable all this, you will need the senior developer mindset. Now, all these things are very complex in each town and we will make other videos about it, about number two and three. But in this video, we're going to focus on number one, which is delivering at that senior level. And for the purpose of this video, we will focus on delivering at the senior front-end level. So, we will need to know a lot of front-end. But that's not enough, that's not going to cut it for the senior front-end. You'll also need a bit of back-end, we'll see in a second, what does that mean? You'll need to be able to deploy, so continuous integration and delivery, CI, CD. And you need to know about front-end architecture, all this will be evaluated in .2. Yeah, folks and uh this is very important. Bug and I were actually looking at uh certain jobs, we were looking at senior analyzing senior level jobs, we looked at, I would say, at least, at least 50 job postings that we've been analyzing a few days ago. And what we realized is there are two main trends right now in the front-end. Number one, front-end jobs are mostly senior jobs, right? So you have no choice but to become a senior front-end. And number two, like, Bugden says, there is a um a trend in the market which the front-end developer is becoming also a full-stack engineer. Front-end engineers need to have full-stack skills, if you want to find this out by yourself, just pull up your LinkedIn profile, look at the search for front-end jobs and you will see those two trends emerging in 2025 and beyond. Bugden, back to you. Exactly, and the reason for that is because front-end, it's the entry point for many entry level candidate, so it's slightly overcrowded right now. Uh there's a lot of candidates, a lot of boot camp graduates, everybody kind of starts their journey in the front-end. So, you want to learn these three things to also

difference. Now let's go into the front end and we will start with the fundamentals, then we'll move on to how we build the web today, which is basically using components and components frameworks and finally, what enables us to do that, which is the underlying front end tooling. Now this all these three things are not enough. You also will need to know about web performance and how to optimize your application and solve performance problems by design before they even happen. Yeah, and everybody on the web, you need to talk about fundamentals, you need to master the fundamentals. But what does that really mean? What what are the fundamentals for a front end engineer? Sure, so let's go straight in. When it comes to fundamentals, fundamentals, um, remember that we run JavaScript in the browser. So mostly it will be about JavaScript and the browser itself. Um, we see there's the DOM, uh, and I did the document object model. That's something you want to be very familiar with, and every abstraction in modern web dev like the virtual DOM, the reconciliation algorithm of React, state management, it's all based on this idea of a tree. So this is your the basis of pretty much everything you build on the web. And then we have JavaScript as a language where you want to be able uh to really master JavaScript. Really read JavaScript code like you read plain English. Without those things, you will not be able to abstract your way efficiently into component frameworks or solve bugs fast. And so uh the problem with the fundamentals is that it's extremely hard to diagnose where exactly the gap is, because it's not visible. Nobody uh nobody goes ahead and is like, oh, I don't know closures, but what usually happens is uh they cannot figure out things. They read a component that they don't understand what the problem was, or um you know, they have an unexpected box in the browser and they don't understand the event handling there. So these are the three things uh so basically the browser, understanding the browser and then understanding JavaScript very well. To going into the DOM itself, you want to be able uh to at least know some basic DOM manipulation. A lot of people that know this because they never had to do it.

If you started your, um, your journey after 2015, you probably started with React or one of those frameworks, you probably always never had to do a documents select by or get element by ID. But those things are important because every modern JavaScript framework relies on this. They use these APIs to actually create things and paint things on the screen. So your list one on the others and at the basic level how to use them to just create a simple form and interact with it, let's say.

After that, you want to move into understanding event handling. This is extremely important because a lot of the software you will build, even in 2025, is going to contain buttons and forms. This is probably 90% of a modern application. And of course, we have this on scroll events because we are building feeds, we are building infinity scrolls. So these three things are the the three things you want to master when it comes to going deep into how the browser works without any React, just plain HTML and JavaScript.

The next thing it's Dom APIs and I'm going to move this right here because it's really the third thing you want to look at. When I talk about Dom APIs, you can split this in two things. There's a lot of things in there, but you can basically split it into. There's ways to store data in the browser and then there's ways to fetch data. When it comes to storing, you have, uh, cookies, which is what everybody probably used and it's familiar with, and then local storage.

These are the two things you're going to use 99% of the time. But there's also session storage. You might never use session storage, but in an interview, a very common question is, can you tell me the difference between these three? So make sure you know the difference and you know for which should you use what. So where do we store our tokens? Or if you have a form and you want to implement an auto complete and you want users to you want the form to remember things if if the user close the window and they come back, they don't need to complete everything again, where would you store it?

Would you put that in cookies, local storage or session storage? So you really want to bring this knowledge down to the application design. And after that, there's data fetching. So you're probably familiar with the fetch API, if you are somewhere in the mid level junior, you use this. But you also want to know what course is and what is a preflight request, for example, and how to debug that in the browser using the network tab. And also for each request, how does browser caching actually works? How does the browser, how do can we tell the browser to cache a specific asset? What is the response when you cache an asset? How long are they cached? How do we indicate that with HTTP headers? And we'll get to HTTP in a moment, too. Finally, this is the year of AI and most AI chat applications, they work with server sent events, they do not do web hooks, even if it looks like they're actually using web hooks. So, um this is a native API supported by most browsers, make sure you know why this means and why would you use this over web hooks? The answer is because you use server sent events when the communication is mostly the server sending events to the browser, which is the case for these LLMs because they keep sending tokens to as an answer to a to a specific query. As opposed to web hooks where the communication is usually um very symmetric, you have the client sending a lot of requests and the server answering with the with a lot of requests too, that will be a chat application. And on what I see it's a lot of developers I know they they see themselves as react developers or Angular developers, but so far there's a lot of knowledge that a front engineer should have that goes beyond frameworks, right? And this includes those fundamental APIs. 100%, and the stronger your fundamentals are, the faster you will get very good at react or angular. So, people ask us sometimes, well, how how long does it take to be a senior in react or a senior in angular? Well, if if you if your fundamentals are really strong, you can take as little as two weeks. If they're not, you will never feel like you really know what you're doing. Um everything in a modern application is built on top of this. And whenever there's a gap here, it will propagate and and it will even be amplified by um framework like React. So if you have a gap here, we don't know what course is, you add react on top.

The gap will be magnified. Um that's why a lot of people have imposter syndrome and all that. Now, just to wrap this up, you'll need to look at accessibility, especially if you are targeting finance or insurance companies, like if you want to work for a bank. And I know people usually say it's boring to work for a bank, but from what we've seen, they have the best compensation packages, they have really good lifetime balance because they're not startups, they're quite established in the market.

So, yes, um 100% the work sometimes can be dull or maybe boring, but they pay really well. And you know, it's the kind of job you can get a mortgage with and sustain a family. Uh startups are usually not. Inside accessibility, you want to look into semantic HTML and area attributes. These will be interview questions. So, a typical interview question, it's okay, how do you take care of accessibility or can you tell me what an area attribute is?

When should we use one? And next up, it's CSS. A very common question from our mentees, it's, well, how much CSS should I know? And a lot of people think, well, I'm not a web designer. Do I need to know how to design like beautiful pages? It definitely helps, but you don't need to. What you need to know is sizing, how do you size elements and look into the box model. Uh very common interview question also about the box model.

It's, um how can you make sure that inside the width of an element, you actually you actually also account for the padding? And then you need to know positioning. So we know how to play how to make elements, you know, of the size we want, but then how do we position them on the screen? It used to be back in the days that we only had block as uh positioning or in line block. But now we also have flexbox and grid, make sure you can move things around and place them on the screen using the three of them.

the better the the more proficient you are at this, the easier it will be to to be fast when you build UIs. And finally, there's the aesthetics part. And that's all your, you know, fonts, scene. Um, but again, they come and go. So, you want to dedicate your most energy here and very little energy here, which is the opposite of the advice you'll find here on YouTube. Everybody's talking about Tailwind, most people don't know how to use Flexbox proficiently or they're good. And then I added here color theory and as a senior front end, you really want to invest in developing a taste for what make thing what makes things look good. You don't need to be a designer, but anything about composition and color theory will help you. And it will help you when there's no designer around, it will help you encoding interviews to make things look good without a lot of effort. It doesn't really take a lot, but most people just don't know it. And making things look good, it's a skill for life. We are interface developers and an interface used by a human. So, the more minimalistic, the more beautiful you can make things, uh the most opportunities you'll have to get hired. People judge a book by your by a cover and when you hire a senior front-end developer, you do expect them to have certain skill in making things look good and be able to slightly improvise when there's no designer around, make the right decision in a visual context. And the good news here is AI is very bad at this. So, that's one of the reasons why people still need an engineer. Because someone that can combine all the technical depth, the Dom APIs, the data structures with a decent good-looking interface, uh that's someone won't be replaced in the near future. There's all these examples where you can give a sketch to AI and it will come up with the component structure or the HTML markup. But that's not actually what you need for a senior front end, what you need, it's someone that understands should we show a notification here or a model? Or what are the different ways to actually visualize this kind of, you know, concept and the better you get at that, um, the more ahead you'll be and then you can use AI to actually help you implement that. But you will be given the and AI is pretty bad at that. Even if people claim is really good, AI is maybe good at listing different kind of um formats, but it's not really good at discriminating

again making a decision on okay in this context we're going to have a human user looking at this. Should we show just a number for this notification? Should we show an image? Should we go into a model or should we just show something inline? Should we do inline validation of the form? Should we validate at the end? It all depends on the context. And you want to get good at that. And that would be it for the fundamentals.

Now, moving on to JavaScript. There are thousands of JavaScript road maps. So I'll go reasonably fast over this. You want to know first of all scope and variables. Scope it's extremely important. We've seen a second that in frameworks like React or Angular scope it's used on at any level. And so you want to know what scope is. You want to understand with your knowledge of scope, what it's a closure.

And what does closure means for memory management and specifically for garbage collection in the browser. And then you want to move on to data types. Now, you can split data types into two in JavaScript, which is primitives, you have your numbers, your strings and your booleans. And then objects. And surprisingly, functions and arrays are objects. So, um, if you split it like this, it it'll be very easy for you to remember that.

You know, functions are callable objects. And arrays at prototypic level are also objects. And one thing I did not add it here, it's the prototypic inheritance, but it will come down the road. Right when we speak about objects, prototype inheritance, it's top of mind. And then we move on to the different programming paradigms in JavaScript. And JavaScript is a language that mixes both object-oriented programming with functional programming.

So you'll see them mixed up and use interchangeably in all the frameworks. When it comes to object-oriented, we mentioned prototype inheritance. And then reference versus value. So, remember objects are compared by reference in JavaScript and that has many implications. We'll see what does implies, for example, when we use React memo. And then this class design, which is the number one topic that most developers are weak in, because we hardly ever have to work with classes.

You probably never had to write a class and if you did, it in the end compiled so function. Because JavaScript doesn't natively support classes. This is totally different from Java where even to do a hello world, you need a class. And um if you're going into the back end or you want to write back end code or when we used to have class components into uh into react, you need classes. You need to know what the constructor is, what it's class inheritance, what are static methods, why are type private methods and public methods and so and so forth. The more you know of that, the more you'll be able to access jobs that go beyond JavaScript. And a lot the senior level will tell you all, JavaScript is our main language, but we will also like you to touch a C sharp codebase every once in a while. We have some legacy or we like you to migrate our Java app to TypeScript and for that you need class design knowledge. And finally, the beloved uh functional programming, which is everywhere if you if you type JavaScript. Um and here, well, you have your higher order functions and we have curing as a pattern. This is a preferred live coding interview. They will ask you how to make a recursive curry function. We might add an example of that to our to our channel, just because it's very common. And we we see a lot of your folks running into that and uh and this immutability, which is a technique uh combined with functional programming. That is beyond Redux and even beyond react. You cannot do pretty much anything today in the modern uh codebase without understanding very well immutability. The why behind it, the advantages and the disadvantages of it today was uh that was basically JavaScript. We've seen scope and variables and programming paddings. And then we move on to a sync programming. A lot of the things in the browser happen asynchronously, they do not happen consecutively one after the other. But they might happen as a response to different events, either user events or network actions like a response came in from the server. The easiest way to understand sync programming is to understand the event loop. And how the different components of the event loop work together to make things run asynchronously. And once you know this, it will be extremely easy to understand how promises work, which is the modern way which

right? A sync code, and then how a sync await work, which is just sugar syntax on top of promises. There is something I did not add it here, which was a callback hell. It used to be a very common interview question. It's not, we haven't seen it so much in 2024, but you want to make sure that you know what callback hell is, especially in more of the node.js kind of side. And finally, we need to know about the module system.

So, yes, we are building modern applications, but that's only because JavaScript introduced a module system. Back in the days, you drop a script in your HTML page and that was it. Nowadays, we are building full SAS applications, what used to be the traditional software into the browser, but JavaScript wasn't ready for it. So, we've been adding more and more systems to help us uh tackle it and to help us basically bundle or put together a application of thousand lines of codes into a single module, which is what JavaScript used to understand.

Things have changed and we now have decent modules in the in the browser. So, we started with common JS, that used to be the the old require syntax, but now we have ES6. And ES6 enables for static code checking. It enables us to do tree shaking. All that wasn't possible with common JS. A senior developer knows very well the difference between these two, and they know what are the different advantages and disadvantages between both.

And finally, we have script types. So, whenever you add a script into HTML, you will have your a different tag you can add, and I added here four of them, there's one more, but it's not very common, so I decided to skip that one. We have synchronous one, which are your default modules. You have a sync modules that will be loaded in parallel and basically parsed as soon as they are they've been downloaded.

We have defer, which will actually be interpreted at the end. And then we have module, which works like defer, it can fetch dependencies. Make sure you check all those, right? Uh the core of your bundle splitting in a modern application, there it's dynamic inputs which are based on this right here. We'll we'll get into that. Okay, and finally, you want to get into testing and we want to learn testing without your jest, without React testing library.

We want to learn testing, plain testing of a JavaScript function. You want to know what test coverage is, what line coverage, function function coverage, and branch coverage are and how to obtain them from your testing library. You want to know what the A pattern is. And a lot of people are saying, oh, testing pyramid is dead and so on. But it's still one of the most useful way to organize tests mentally in an application.

And you want to know what the A pattern is in order to basically structure our tests. And so you have basically a recipe that you can use in the backend, in the front end, or if you're testing a library, you'll see that is the same pattern we always use. So make sure you have decent experience here. Do not go to an interview if you cannot explain the test coverage you have on your kind project or on your last job, or what how did your testing pyramid look like for you and what kind of test you're writing and why?

It's worthless. If you cannot answer this question, you'll be immediately disqualified. And that was it for our JavaScript fundamentals, right? Uh fundamentals in general. Now, you see it's a lot, but as I mentioned, the more we know here, the stronger you are here, the easier it will get down the road with React. So, 1 hour learning the fundamentals, I will avoid, you know, 5 hours of going in C-Calls and debugging React code we don't understand.

And now, finally, moving on to what most people talk about, which are component frameworks. And in this case, React is still the most popular one in 2025. People have been saying React will be dead for years. Uh, it's becoming now 10-year-old. I've been working with React for 10 years. There's been several changes to it, but it's still the the powerhouse of component frameworks. On the second place, you're going to see Vue, which is very close to React in their philosophy, mentality and how it works.

So, don't be worried if you are a React developer, you can learn Vue very fast. And finally, you have Angular, which is more into uh again, banks or corporate or uh yeah, kind of established organizations, you know, like big corporate. They prefer Angular because it's more standardized. but I think Angular in the last year surveys around 4 to 5% of the market share. So again, you want to focus your efforts on React if you are the biggest opportunities.

Uh to be on your way in the in the job market. The problem with React is that most people also know React. So you'll have to get really good at it. Writing a functional component using some state, it's not enough. We have to go very deep. And so going into React, we will start with the main idea of React, which is state. We have a component and there's a certain state, the users take actions, they modify the state, in the end the UI will be updated.

And inside the state you want to know what reconciliation means. And there is different common state patterns. Like when you organize state in an application, the most important one is know everything you can about component state, and in that case you have basically prop drilling. Right that's the first way to share state between components when you just have your state, it's using prop drilling.

Which is not as bad as people claim. And then you have shared state that you might want to be able to put in a user reducer or in a state library. So whenever you have many components at different places in the component tree, using the same state, it's much easier to move. And then we have global state, things like authentication or dark team, light team, all that goes into global state. In React, you'll do that with React context.

There's different state libraries. I wouldn't be a fan boy or girl of any of them. I know people, you know, they go in and they say, wow, this year you have Redux or Zustand, Redux is back, Redux is dead. Zustand is now the best thing or X state or whatever. They all do the same, they're all based in the same pattern. Don't spend too much time procrastinating, you know, switching from one to the other, to the other. Uh Zustand, Recoil and React Query, surprisingly, it's a state library, even if it does data fetching.

Decided the three most important ones, I'll take a look. And of course, you're good old Redux, which I didn't add it to the list because it's being faced out. But a lot of companies are still using Redux, Redux toolkit these days. So that's everything for state, and then we move on to, okay, we have state, but how does the component life cycle actually works? the old class components are also very valuable because Latin yet still happens according to the life cycle that class components used to have and a very common interview question is can you tell me what can you do with class components that you cannot do with functional components nowadays?

So make sure you can answer that one. I'm not going to give you an answer in this video, but we will make other videos on the channel. We have plenty of videos about react and interview questions, so make sure you check those ones out. And then we move on to performance. So how do you make a React application faster? And the first thing you want to know here is how does the sync react, basically the new architecture of React works under the hood. We have a video about that one and how does the fiber works.

And basically to explain, you know, what is the new role of the virtual DOM and fiber? Most React videos are still talking about the virtual DOM, but what you'll see is that the virtual DOM in 2025 in the React architecture has almost a secondary role and fiber is the main abstraction. So make sure you check that video out. We'll maybe add it in the description. The next is knowing the performance, the different performance hooks and in React we have use memo and use callback to make re renders faster, and then we have React memo to avoid re render.

Now, we also have suspense in React lazy for code splitting and we'll see in a second what that is. So keep this in mind. We'll come back to this. But as you see, there's at least five native API methods for performance only in React. Make sure you know each one of them. When to use them and ideally make sure you use those or find an example in your current code base where you use those. And next up there's code splitting. I mentioned that with React lazy and suspense. Basically this is your ability to load only parts of your JavaScript based on where the user is or what they do. So instead of bringing in all your component tree,

you just bring in part of it and it can be route based, so based on the URL the route, the React router will split your application in different chunks. and autonomously, based on the path, or user interaction-based. This is not so common, but basically imagine you have a very expensive chunk or very heavy JavaScript that you need to load, you can just load that when the user does something, depending on your use case.

And finally, moving on to server-side rendering, which is something that's been added to React in the last 5 years. We have, okay, how do we render server-side? How do we render React in Node.js? What is re-hydration? What are server components and what are React server functions or actions? Um, everybody kind of jumped to React server actions as, oh, well, this is so cool. You want see too many use cases for it in real life, because it really couples your back end with your front end, in a way that looks like the old PHP we were building in the 2000s.

You're really building an MVC app with React. I do not think it's a good idea, but make sure you understand what they do and how they work. Don't jump into the ship too fast, you might see them being rolled back or not used, just like so many other features. And then we have our meta frameworks. You'll see Next.js is the most popular one. You should at least know what's the philosophy behind it, what's the company behind it, and what are the typical features.

You don't need to necessarily build something with Next, but you'll see a lot of startup companies or new software companies using Next out of the box. We also see companies rolling back from Next, because it was too complex and not fit for their use case. So again, don't jump into the hype machine. You're going to see people going back and forth with these decisions. Perfect. Now, that was the main thing about React, but there's also styling, which nowadays is done with style components and CSS modules.

Make sure you understand how style components actually work, not just use them, everybody can use them. Very few people can understand where is the CSS when you write a style component? How can you optimize style components, and what are the implications for performance that they have? So make sure you go deeper, don't stay on the surface. That's what seniors do. And then we have tooling and debugging.

So we have our React debugger. First tool, make sure you have this set up, you know how to use it. If you use this in a technical interview, you get extra points. And then the React profiler, which is harder to use, you get even more extra points on this one. There's also library specific debugging tools like Redux has its own. If you're using Redux, make sure you use the Redux debugger. Make it part of your everyday workflow.

These tools will are lifesavers in interviews. They show you are you are an expert and you are a professional. And then we have design patterns, design patterns, I may spell this one, patterns in React. You probably know the HOC if you are mid or junior, um, but there's also the early return pattern to handle error and loading case, the presenter container, again, a very common one, and then a bunch of them on optimistic UI.

Make sure you try to implement those. Don't just read about them. If you have an application right now, you're working at work, try to see where where can I add them? Because the best way to learn something is to actually do it in production, not on a side project. That doesn't count, because the stakes are not there on your side project. And uh is not something you can confidently sell as a senior.

Seniors then going to interviews and say, well, I did this in a side project. That's not expertise. You want to try to add this as much as you can to your actual experience, work experience. And that was React. Now, you want to take all those if you're doing Vue or Angular and bring them and see how they are done in that framework. And again, you can take a look at Astro, Svelte and Solid, understand the ideas behind those frameworks, but don't rush to jump in.

React is 80% of the market right now, and it's been like that for the last five years. And you don't want to waste your energies into the new solid or svelte when no one is using it. We've been working with, I think is is it around 310 at a senior dev? And I think we have two of them that actually do svelte, um working for, you know, some major startup. Most people work with React or angular. That's the commercial value.

And that's those are the people that are going to pay you a nice salary and that are going to give you lifetime balance. Now, moving on to front end tooling. Everything we've seen, it's based on Webpack. Webpack is still the number one module bundler that we use to package all this React code or Angular code. We use it to transpile it and package it into something that the browser can understand. And I know Vite's out, and roll up was out and everybody was saying Webpack is dead and they were hating on Webpack, but again, Webpack, it's around 78% of the market share right now.

It's the one that's implementing the latest features very fast, is the most supported one. So if I have to put my eggs into one basket basket, it will be the Webpack one. But okay, make sure you check out also Vite and roll up roll up just to know how they work. Inside Webpack, make sure you understand tree shaking and code splitting, I already mentioned both of them. Uh, but make sure you understand, okay, what do I need to tell Webpack in order to do this boat?

Um, how does Webpack knows what the dynamic import is and how do they handle it? Crucial knowledge for a senior. And then we have your code quality tools, it's usually prettier, slint and TypeScript. All of you probably worked with those, but make sure you know how to set them up. Or how to change the configuration of, you know, the TS config file, depending on what you need, not just consume it. Okay, and finally, web performance, this is the one topic that will actually make you stand out as a senior.

Not just someone that can write components. And inside web performance, we have basically diagnosis and optimization. But the main mental model you want to use here is the critical rendering path, which is, okay, when the browser receives an HTML file, what are all the different steps it goes to to interpret and finally render something? Based on those steps, we can come in as engineers and work at the different checkpoints or milestones of the browser to make things more efficient.

But if we don't know the critical rendering path, we're literally shooting in the dark. It's like trying to go somewhere without really knowing what are the different routes that get you there. It's impossible to really optimize. And going into that, you want to know what it's a blocking resource versus a non blocking resource when the browser loads our Java HTML, JavaScript and CSS. The first way to make things faster is to do a diagnosis diagnosis, and that's where our metrics, right, how do we measure if something is slow or fast come in.

And that's basically the core web vitals, which you can measure with uh Lighthouse. There's two types loading speed, which are usually the LCP, the Last Contentful Paint, the FCP, and the CLS. And there's the ones that measure responsiveness to input, which has the INTP. This it's a new one, it was released in May 2024. It's very important in single-page applications, because when users do something, we usually re-render a lot.

And if you haven't optimized your re-renders in React, for example, use callback with memo, you will have a very low score or in INP. And that's something that the senior understands. They know this ahead of time. That's why they can prevent those kind of issues. I will not go in depth into those. It's way too much and it's out of the scope of this video. But if you want us to make a video especially about web performance, diagnosis and how do you apply that to your single-page application with React, let us know in the comments.

We really appreciate those comments and we take them into account when we build our YouTube roadmap. And finally, there's the tooling, so I mentioned Lighthouse before in dev. But there's also real user monitoring RUM tools and um the most common ones are Sentry and highlight.io. Most of them do the same things, which is basically measure what you get with Lighthouse from real users. So, not only you know how the application runs on your machine, but you know how your users are actually experimenting it.

And basically what they do is they send back to you um what the user core web vitals are. And we mentioned the core web vitals, they gather that for all your users. And they give you statistical answers, so you actually know what's the reality, not only the measurement you got on your machine. Make sure you check those out. Sentry, it's one of the best. We use that as a senior dev. But there's also a lot of open source that appear because Sentry just got so expensive lately and people start building open source alternatives.

And finally, there's the optimization part. So we are into web performance, we got our diagnosis. When it comes to optimizing, uh the mental model, it's you want to go over your static assets first. That's images, CSS and JavaScript. You want to make sure you compress your images, that they have the WebP format, which is a special format for the web. It has 25 less size the same image quality compared to PNG developed by Google. All your images should be web. If they are not, you're wasting user time and data.

And what does the set attribute does? How it allows you to load different images based on the browser, like based on the device. And then you have CSS optimization with critical CSS and CSS coverage. We talk a lot about critical CSS on the channel. Make sure you check that out. And finally, optimizing your JavaScript. I mentioned bundle splitting before, but you can also have a bundle analysis, you can do code splitting and lazy load.

Uh you can also minify your JavaScript and uglify. Make sure you know what that means. And you can implement caching for your common chunks. So, whenever you are releasing your application, there's a part that doesn't change, which is usually the node modules, or the bundle that contains React and React router. You're most likely never change those. You can have a more aggressive caching policy on that bundle and make it be cached for seven days or a month. And so, if a user returns to your website, they they need to load all those heavy libraries again.

There's other optimizations you can make about the CLS by adding a skeleton library. There's font optimizations you can make to have a backup native font that has exactly the same same size. So, loading the fonts later doesn't cause cumulative layout shift and basically web workers. I won't dive into them, but a senior, it's supposed to at least know about them. And that would be all our optimization.

So, we've seen basically web performance, we've seen modern, uh front end tooling, we've seen component frameworks and we've seen our fundamentals. I think we are 80% there, but as we mentioned, there's a bit more that a senior front end needs to know, which is basically a bit of backend. If you don't know any backend at all, or you don't know deployment, you will still not add too much value to your team.

So, they won't consider your senior, even if you are very good at like you can be the best person in the browser, as much as API yourself, plug it into a database. Not to the level of a back end dev, but you do know about it and you can get it done. That's because a lot of front end devs will work with a team that is also responsible for your back end uh for back end for front end. And so that's a back end that's built for your front end application and you're usually responsible for extending that.

You also want to know what HTPPS is, uh the fundamentals behind it. What's TLS and what is symmetric and asymmetric encryption, especially if you are going for banking or insurance or healthcare, which are the other companies that better pay, they care about security a lot because they had security breaches in the past and it cost them a lot of money. And also make sure you know what content negotiation is, how you can actually ship compressed version of an asset and how it works.

And if you, you know, if you can use the network tab and understand the headers there, you'll get a lot of bonus in interviews. And finally, how authentication works, Oauth, it's the number one framework we all use today. Um basically you've probably heard of access tokens and um refresh tokens. But how do users obtain them? What it's an identity server? And ideally, if you can know how to implement Octa or Ozio with your react application and know how to debug that, you're really a senior. Um and that was basically the back end for you as a front end dev.

But then moving on, you also want to be able to deploy a front end application, you want to start out with a build pipeline. That basically can, you know, NPM run build and ships your JavaScript bundles and everything, you know, packaged by Webpack, but then also code quality. So how do you introduce, you know, Linters and unit test as part of your release? Once we have our built, we have our artifact, which is CSS JavaScript that we need to upload somewhere.

If it's a static website, you can just deploy it with a static deployment and the cloud AWS version for that it's S3. If you're using Azure, it's probably the Azure block storage, but most tech companies are using AWS. So make sure you know how to deploy your website to S3 and if you're using view if you're using decide. So say we're setting it again. You actually need compute. You need somebody to execute that NodeJS application to render on the server and then ship the assets. For that, you'll need either a virtual server with EC2, if we're speaking about AWS, or lambda, very common. AWS has a one click deployment, which is amplify. I will add it here, it might be a very easy way to start. But um, you want to work your way up to lambdas and EC2s, because that's what the enterprise is using. And finally, know how to set up a CDN for your application. You can use Cloud Fair or just Cloud Front in AWS, your front end developer and if we want web performance, we need a CDN. Remember the core web vitals, one of the easiest way to improve them is by adding a CDN. Okay, we are 95% there, so congratulations if you're still here. Finally, to really stand out as a senior, you need the final uh the final ingredient, which is knowing how to put together everything we talked about into a coherent architectural view. And for that, we need frontend architecture. Now the most common patterns today's for frontend architecture are the back end for frontend. I already mentioned that you need to know backend because you might be responsible for extending the backend for frontend. You need micro front ends, so how we split a big front end application in different independent applications that can be deployed, how they come together into a shell. What are the challenges and what are the different ways to do that? The most common one, if you know Webpack, it's module federation. It's one of the most supported and it's one of the easiest way to make your React application um split into micro front ends. But you also have single SPAs. You want to know the advantages of micro front ends and the disadvantages. Everybody these days talks about the advantages, but it comes with a serious amount of drawbacks. And you are responsible to help your company or your team make the good decision there. And finally, how does a monopo work? So usually when we have micro front ends, we still want to put everything in one place because it's easier for us to manage a huge code base if it's all together. Like we can unify, list our build process or our code quality process. So check out turbo.

is one of the newest way to manage Monorepo, but also Leona, which is older. I think Facebook uses Leona, and you'll see this, especially when you go in and you want to work for a big tech company. And I think that's pretty much it. So as you see, um it's quite a lot, but to sum it up, you want to make sure you have very strong fundamentals, which is JavaScript and the browser. But then finally, you also want to make sure that you're bringing that to 2025 and also know a bit of the latest stuff and how they combine together.

Yes, Bug has quite a bit and this only involves the part of delivering at the senior level, right? We haven't talked about interviewing skills, which which you know, part of this will overlap with skills that you need to stand out as a senior front end engineer in an interview. But there are other skills such as performing in live coding interviews, bit of data structures, a bit of algorithms, things that you need to know to pass the technical interview and of course, things you need to do to get the technical interview.

So folks, if you want and I to dive deeper into any of those aspects, including the how to get a senior front end job, everything from the beginning of the job search up to how to go about interviews, how to stand out and how to get an offer and negotiate it. We can put that in the next video, let us know in the comments. Also, third part is the senior developer mindset, because, you know, you can have all this.

If you take no action, if you just chill and when it's time to actually upskill yourself and apply to jobs, you are watching Netflix, that's as good as nothing. So if you are interested to get a senior JavaScript developer position, a senior developer position, senior front end position in 2025, you need to be aware of these three dimensions. Number one, deliver at senior front end level. Going to the things that just mentioned.

Number two, being able to get senior level interviews and pass the senior level interviews. And number three, having a winner mindset, right to keep you going through this and to keep you persisting even if things don't go your way. With that being said, check out the description of this video. We will drop you the road map. .5 and finally, if you're looking to find out your knowledge gaps, your technical gaps, check out the free assessment. The comments. Thank you balancing so much. And we will see you folks the next one. Let's make 2025 your best tier as a software engineer. Just it. See you in the next one.