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.
, 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
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.
we’ve put together for you. For more resources like this check our 🚨
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.
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 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.
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.
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, with a company in the insurance or banking sector, make sure you review security before the interview. Check the 🚨
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.
.
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.
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? .
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.
🚨
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.
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!
🚨
SOCIAL SHARE CARD GENERATOR