Frontend Developer Roadmap 2024: 6 Clear Steps To Senior

Summary

This video script outlines a comprehensive roadmap for aspiring senior frontend developers. It emphasizes the importance of mastering JavaScript, CSS, and HTML fundamentals, understanding modern JavaScript features, and learning programming paradigms like OOP and FP. The guide also covers essential frontend tooling, debugging techniques, testing strategies, and design patterns. Advanced topics include frontend security, performance optimization, deployment, and architectural concepts like micro frontends, SSR, and BFF. The script warns against chasing trends without a solid foundation and encourages building on strong fundamentals to achieve senior developer status.

Takeaways

• 🚀 **Fundamentals First**: Before mastering senior-level topics, ensure you have a solid grasp of JavaScript, programming, CSS, and DOM APIs.
• 🧠 **Mental Models**: Understanding the mental models and principles behind frameworks is crucial for a senior developer, not just chasing the latest libraries.
• 🔧 **Frontend Tooling**: Proficiency in tools like module bundlers, CSS preprocessors, and TypeScript is essential for a senior frontend developer.
• 🛠️ **Debugging Skills**: Move beyond 'console.log' and learn to use browser debugging tools, IDE debuggers, and framework-specific debuggers.
• 📝 **Testing Proficiency**: A senior developer should be well-versed in unit, integration, and end-to-end testing, adhering to the testing pyramid.
• 🏗️ **Design Patterns**: Familiarity with design patterns like component-based architecture, state management, and the virtual DOM is key for building scalable applications.
• 🔐 **Security and Authentication**: Knowledge of web security fundamentals, common attacks, and modern authentication techniques is necessary.
• 🌐 **Performance Optimization**: Senior developers should understand client-side and server-side optimization techniques to improve application speed.
• 📦 **Deployment and CI/CD**: Knowing how to set up deployment pipelines and use cloud services for scaling is a mark of a senior developer.
• 🌟 **Advanced Architectures**: Understanding micro frontends, server-side rendering, and backend-for-frontend architectures is crucial for senior roles.

Q & A

What is the main issue with most frontend roadmaps found on YouTube?

Most frontend roadmaps found on YouTube are anti-senior, focusing on chasing shiny libraries and frameworks without explaining the mental models and fundamentals behind them, which is crucial for developers to advance to a senior level.

Why do many frontend developers struggle to reach the next level despite taking numerous courses and working on side projects?

Many frontend developers struggle to reach the next level because they try to master senior-level topics without first having a strong grasp of the fundamentals, leading to a scattered knowledge base without depth.

What are the four main types of fundamentals in frontend development according to the script?

The four main types of fundamentals in frontend development are JavaScript fundamentals, programming fundamentals, CSS fundamentals, and DOM APIs.

Why is it important for frontend developers to understand object-oriented programming (OOP) concepts?

Understanding OOP concepts is important because they are fundamental to JavaScript's prototypal inheritance, which is a core concept in the language, and they apply to other programming languages as well.

What are the three key concepts in CSS that a senior frontend developer should understand?

A senior frontend developer should understand the Box model, CSS specificity and inheritance, and modern layout techniques like Flexbox and Grid.

Why is networking knowledge important for frontend developers?

Networking knowledge is important for frontend developers because it helps them understand how data is transferred over the internet, which is crucial for building efficient and effective web applications.

What is the significance of mastering module bundlers like Webpack for a senior frontend developer?

Mastering module bundlers is significant because it allows senior developers to navigate the source code within applications, understand the build process, and configure JavaScript applications from scratch.

Why should a senior frontend developer be cautious about using Tailwind CSS without first mastering plain CSS?

Senior frontend developers should be cautious about using Tailwind CSS without mastering plain CSS because it's important to understand the fundamentals of styling before leveraging utility-first CSS frameworks, which can obscure underlying CSS principles.

What are the key areas a senior frontend developer should focus on for frontend testing?

A senior frontend developer should focus on unit tests, integration tests, and end-to-end tests, understanding the testing pyramid and utilizing framework-specific libraries for effective testing.

How does the understanding of design patterns like component-based architecture benefit a senior frontend developer?

Understanding design patterns like component-based architecture allows senior developers to quickly learn new frameworks, understand the pros and cons of components, and work efficiently with them in building UIs.

Why is server-side rendering (SSR) becoming popular in the frontend community, and what challenges does it pose?

Server-side rendering is becoming popular for improving performance and SEO by sending a pre-rendered version of the application to the client. The challenge it poses is ensuring that the server-rendered output matches the client-rendered output, as JavaScript applications were not originally designed for server-side rendering.

Outlines

00:00

🚀 Kickstarting the Journey to Senior Frontend Developer

The paragraph introduces a roadmap for aspiring frontend developers to advance from junior to senior levels. It emphasizes the importance of mastering fundamental concepts rather than chasing the latest frameworks and libraries. The speaker shares personal experience and mentions that the roadmap has been effective for 250 software engineers. The focus is on understanding mental models and principles behind advanced frontend topics such as micro frontends, server-side rendering, and backend-for-frontend. The paragraph also warns against the common mistake of building expertise on shaky foundations, advocating for a strong grasp of frontend fundamentals including JavaScript, programming principles, CSS, and browser APIs.

05:01

🛠️ Mastering Frontend Fundamentals and Tooling

This section delves into the core frontend fundamentals that are essential for any senior developer. It starts with JavaScript basics such as variables, data types, functions, and control structures, then progresses to modern JavaScript features like promises, async/await, modules, and classes. The paragraph also covers programming paradigms like object-oriented and functional programming, including JavaScript's unique approach with prototypal inheritance. CSS fundamentals are discussed, highlighting the box model, specificity, inheritance, flexbox, and grid. The importance of understanding browser APIs for tasks like authentication and storage is stressed. Networking basics like DNS, IP protocols, HTTP, and REST APIs are also mentioned as crucial for a well-rounded senior developer.

10:02

🔨 Advanced Frontend Tooling and Testing

The focus shifts to frontend tooling, which is critical for any developer working on modern web projects. The paragraph discusses the importance of understanding module bundlers like Webpack and Vite, CSS preprocessors and postprocessors, and CSS-in-JS libraries. It also touches on the necessity of knowing how to debug effectively using browser dev tools and IDE-specific debuggers. The importance of frontend testing is introduced, emphasizing the testing pyramid, which includes unit, integration, and end-to-end tests. The paragraph encourages developers to explore testing libraries and frameworks that are specific to the technologies they use, such as React Testing Library.

15:03

🎯 Design Patterns and Advanced Frontend Concepts

This section explores design patterns commonly used in frontend development, which are essential for senior developers to understand. It starts with component-based architecture, a pattern used by most modern frontend frameworks, emphasizing the benefits of reusability and separation of concerns. State management and its impact on UI behavior is discussed, along with design patterns like the state pattern and finite state machines. The virtual DOM pattern, crucial for performance in frameworks like React and Vue, is also covered. The paragraph concludes with a brief introduction to advanced frontend topics like security, performance optimization, and modern authentication techniques.

20:04

🌐 Frontend Architecture and Production Readiness

The final paragraph addresses the architectural knowledge required for senior frontend developers. It discusses micro frontends, an approach similar to microservices for backend, allowing for more manageable and scalable frontend applications. Server-side rendering (SSR) is introduced as a technique to improve performance and SEO by rendering JavaScript on the server. The paragraph also mentions backend-for-frontend (BFF), a pattern that involves creating specialized backend services for different frontend needs. The importance of understanding cloud platforms, CI/CD pipelines, and Docker for deployment is highlighted. The roadmap concludes with encouragement for developers to use this knowledge to advance their skills and prepare for the next steps in their careers.

Keywords

💡Frontend Developer

A frontend developer is a software engineer who specializes in the client-side of applications, focusing on the user interface and user experience. In the video, the speaker shares a roadmap to help frontend developers level up to senior positions, emphasizing the importance of mastering frontend fundamentals and advanced concepts to lead projects for top tech companies.

💡Mental Models

Mental models are conceptual frameworks that help developers understand and solve complex problems by relating new information to existing knowledge. The video stresses that understanding the mental models and principles behind frontend technologies is crucial for becoming a senior developer, rather than just chasing the latest libraries and frameworks.

💡Fundamentals

In the context of the video, fundamentals refer to the core knowledge areas that every frontend developer should master, such as JavaScript, programming principles, CSS, and DOM APIs. The speaker argues that building a strong foundation in these areas is essential before attempting to master more advanced topics.

💡Object-Oriented Programming (OOP)

OOP is a programming paradigm based on the concept of 'objects', which can contain data in the form of fields (often known as attributes or properties) and code in the form of procedures (often known as methods). The video mentions OOP as one of the programming fundamentals that frontend developers should understand, with concepts like encapsulation, inheritance, and polymorphism.

💡Functional Programming

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. The video discusses functional programming in the context of JavaScript, highlighting the use of pure functions and the shift of computational pressure from memory to the CPU.

💡CSS Fundamentals

CSS fundamentals include essential concepts like the box model, CSS specificity and inheritance, and layout techniques such as flexbox and grid. The video emphasizes that a solid understanding of these fundamentals is necessary for frontend developers to debug and build layouts efficiently.

💡Module Bundlers

Module bundlers like Webpack, Vite, and gulp are tools that bundle JavaScript code into one or more bundles, transpile, minify, and prepare it for the browser. The video explains that mastering at least one module bundler is crucial for senior frontend developers to navigate source code, understand build processes, and configure applications from scratch.

💡CSS-in-JS

CSS-in-JS refers to a technique where CSS is written directly within JavaScript files, allowing for scoped and component-based styling. The video mentions CSS-in-JS as a powerful approach that provides modularity and flexibility, with style components being a popular library implementing this pattern.

💡TypeScript

TypeScript is a superset of JavaScript that adds static types to the language. The video highlights TypeScript as an essential skill for senior frontend developers, especially when working in production environments, and emphasizes understanding interfaces, types, and advanced features like Union and Intersection types.

💡Debugging

Debugging refers to the process of identifying and fixing errors or bugs in code. The video underscores the importance of mastering debugging tools and techniques for senior frontend developers, including browser debugging tools, IDE debuggers, and framework-specific debuggers.

💡Performance Optimization

Performance optimization in frontend development involves strategies to improve the speed and efficiency of web applications. The video discusses various optimization techniques, such as image optimization, JavaScript minification, and server-side rendering, which are critical for senior developers to ensure fast and responsive user experiences.

💡Micro Frontends

Micro Frontends is an architectural approach that breaks down a large frontend application into smaller, independent pieces that can be developed, tested, and deployed separately. The video explains that understanding micro frontends can help senior developers manage complexity and scale teams effectively.

💡Server-Side Rendering (SSR)

SSR is a technique where the frontend application is rendered on the server before being sent to the client. The video mentions SSR as a way to improve performance and SEO, as it allows for faster content delivery and better content indexing by search engines.

💡Backend for Frontend (BFF)

BFF is a pattern where a dedicated backend service is created specifically for a particular frontend application, allowing for tailored APIs that fit the frontend's needs. The video briefly touches on BFF as a way to increase flexibility and complexity in frontend development.

Highlights

The roadmap to becoming a senior frontend developer involves mastering frontend tooling, testing, design patterns, deployment, and architecture.

Avoid chasing shiny libraries and frameworks without understanding the fundamentals.

Mental models and principles behind technologies are crucial for senior developers.

Mastering the fundamentals is essential before diving into advanced topics.

Four key frontend fundamentals include JavaScript, programming principles, CSS, and DOM APIs.

JavaScript fundamentals encompass variables, data types, functions, and control structures.

Modern JavaScript concepts like promises, async/await, modules, and classes are important.

Object-oriented programming principles such as encapsulation, inheritance, and polymorphism apply to JavaScript's prototypal inheritance.

Functional programming focuses on using pure functions and immutable data.

SOLID principles are useful for refactoring and maintaining code quality.

CSS fundamentals include the box model, specificity, inheritance, flexbox, and grid.

Understanding browser APIs like cookies, local storage, fetch API, and session storage is necessary.

Networking knowledge, including DNS, IP protocols, HTTP, and REST APIs, is vital for frontend developers.

Frontend tooling like module bundlers, CSS preprocessors, and TypeScript is essential for building modern web applications.

Linting and formatting tools like ESLint and Prettier ensure code quality and consistency.

Debugging skills are critical, including using browser debugging tools, IDE debuggers, and framework-specific tools.

Frontend testing involves understanding unit, integration, and end-to-end tests, and using libraries like React Testing Library.

Design patterns like component-based architecture, state management, and the virtual DOM are fundamental to modern frontend development.

Advanced frontend topics include security, performance optimization, and understanding the importance of accessibility.

Deployment skills, such as setting up CI/CD pipelines and using cloud services, are necessary for senior frontend developers.

Frontend architecture topics like micro frontends, server-side rendering, and backend for frontend are important for scaling applications and teams.

Transcripts

imagine what you could achieve if you

stopped wasting time on shiny Frameworks

and used a proven road map to level up

to senior frontend developer today I'm

going to share with you the exact road

map I used to go from struggling Junior

to Leading projects as a senior Dev for

a top tech company and it not only

worked for me but for 250 other software

Engineers who used it to level up now we

will cover front end tooling testing

design patterns Advanced front end

deployment and front-end architecture

now the problem with most frontend road

maps you will find here on YouTube is

that they are anti- senior they have you

chasing shiny libraries and Frameworks

ending up like this little hamster right

here but they don't explain the mental

models and fundamentals behind those

Frameworks which is why after thousands

of courses and side projects most

frontend developers still struggle when

trying to get to the next level so even

if today you will hear me talking about

some fancy terms like micr front ends

surface side rendering or back end for

front end what I want you to get out of

this road map are the mental models and

principles behind those fancy terms

that's what makes a senior developer

senior but before we dive in what's the

biggest mistake fronting developers make

when trying to get to the senior level

they try to build castles on Sand yes

they try to master senior level topics

without having Masters the fundamentals

first so after the ini excitement is

gone they find themselves surrounded by

hundred of things they know about but

none too deep because what they really

doing is they keep adding gaps to their

knowledge which is why before you start

working so wasse getting to senior level

you should make sure that that your

fundamentals are strong because

fundamentals are the Lego pieces

everything else in this road map will be

building upon in the front end there are

mainly four types of fundamentals

JavaScript fundamentals programming

fundamentals CSS fundamentals and D apis

let's dive deep into each one of them

many of the JavaScript fundamentals you

probably already know but let's refresh

first you want to start with variables

data types functions and control

structures like conditionals and for

Loops they might seem very basic but you

will need these things in life coding

interviews you should be able to write

them out of your head even if GitHub

co-pilot can do it for you I know six

years experienced G developers who can't

get a job because they cannot write a

simple for Loop don't be those people

then you will move on with modern

JavaScript with Concepts like promises a

syn we the module system and JavaScript

classes everything we will see down the

road Builds on these things so make sure

you master them first on to programming

fundamentals these are principles that

apply to other programming language that

JavaScript kind of stole from them the

first one is op or objectoriented

programming this is probably the most

most popular programming Paradigm and it

is based on programming by using objects

which is cool because humans can

understand objects very well I mean most

humans here you should get a handle of

Concepts like encapsulation inheritance

and polymorphism in op if you want to

change something you just assign it to a

new value and you keep that stuff in

memory a key concept from op that it's

at the core of JavaScript it's

prototypal inheritance which is like o

but without classes prototypal

inheritance deserves a video on its own

so let me know and I will will make one

the second programming Paradigm that

JavaScript employs it's functional

programming which tries to do everything

using functions pure function in

functional programming if you want to

change something you recalculate again

so your whole application is kind of

constantly recalculating things which

moves the pressure from your memory of

course to the CPU if you want to dive

deeper into these programming paradigms

then let me know below and I'll also

make a video about them and finally

there are the solid principles and while

I know that Uncle Bob and cing code and

all that stuff it's totally overhyped

these principles will come in hand

if you're being asked for example to

refactor a big chunk of your code check

them out and try to implement them in

your own code base onto CSS fundamentals

you do not need a PhD in CSS to get to

senior frontend developer but you should

have a solid understanding of the

following three concepts number one the

Box model this is the model that's at

the core of effing and CSS and once you

master it you will be able to debug CSS

with E and build layouts faster you can

see it in the image then you want to

check out CSS specificity and

inheritance CSS is a very Global

language conflicts between classes are

unavoidable this means uh which class

applies to what will help you figure out

box faster again and design your CSS

classes properly and finally you should

check out flexbox and grid those are

basically modern JavaScript wonders and

they will help you build complex

interfaces much much faster by this time

you will be able to finally Center a div

which will put you in the top 1% of

frontend developers or at least give you

some temporary feeling of satisfaction

just enough to get you to our next top

finally a senior front developer it's

expected to know how the main browser

apis work and how to interact with like

basic authentication and basic storage

mechanisms these are things like cookies

local storage the fet API and session

storage best learning materials for this

are the official docks from mosa MDM

finally networking if data is the blood

of the internet networking are the veins

make sure you check out the DNS and IP

protocols so you don't go blank when

we're going to ask you what happens when

I type www Kitty cats.com in my browser

bar knowing a bit of http will also go a

long way things like headers status

codes content negotiation and of course

cashing in the case of request headers

like accept host user agent and in the

case of responses heads like cash

control content type and content

encoding will come in handy memorizing a

few HTP status codes like 200 4004 500

3001 and 3002 will also do wonders while

your colleagues will be searching stack

Overflow or asking chat GPT you will

already know what's going on behind that

not found request to add on top of your

HTTP knowledge make sure you understand

rest apis and restful design I know you

are going to tell me that this is a

backend topic but in my experience about

four out of five front end interviews

include questions about HTTP and rest

apis if you are working in a realtime

environment check out web sockets don't

worry we will get back to http later

when we talk about frontend security

optionally you can check out things like

trpc graph and HTTP 3 depending on which

company are you planning to interview

with the good news is that htttp barely

changed in the last 20 years or

something and it willon probably change

in the next 20 so go learn it you're

safe with a solid grasp of the

fundamentals we are ready to start with

front end tooling tooling is like the

glue stitching everything else together

if you work on frontend projects and you

don't know the tooling around them

you'll startle configuring them

debugging them and understanding how to

get them to production which brings us

to module bunders these are tools like

weback Vite and gulp they are at the

core at most JavaScript Frameworks I

mean what's a JavaScript framework in

the end it's just bundled code that has

to be transpiled compressed and sent to

the browser that's exactly what these

tools do you should Master at least one

of them and I personally recommend

weback because come on V is way too

simple and it won teach you much knowing

how to work with modu BS will allow you

to navigate The Source Code inside your

application understand what's going on

in your build folder and why you'll also

be able to set up JavaScript application

from scratch and configure them which is

a super useful skill specifically for

senior frontend Engineers now nobody

writes plain CSS these days anymore so

you'll have to learn at least one CSS

pre-processors or postprocessors like

SAS orless which helps you do cool

things like more flexible use of CSS

variables nesting and reusability Via

mixings and function talking about CSS

if weback and SAS had a baby it would be

CSS injs with style components being the

most popular Library implementing it so

make sure you check that out if CSS

pre-processors were cool CSS injs is

that to the square it gives you the

modularity of components driven

development and the flexibility of

JavaScript given that we are talking

senior developer here you should be able

to understand the pros and the cons as

well as the best use case for using

something like CSS injs one last note on

CSS I know Tailwind CSS is trendy and it

comes by default with nextjs now and

every second YouTuber is hyping about

how great it is however it is mostly

startups that use Tailwind in production

and although there is nothing wrong with

it make sure you get good at writing

plain CSS before you get into Tailwind I

know of developers getting ejected in

tle interviews because they use Tailwind

in the take-home task chaining 15 CSS

classes to make an input field look good

which can be done with plain CSS much

much faster now moving on with

typescript typescript makes JavaScript

look more like Java so corporates love

it jokes aside if you are working with

JavaScript in production these days you

will most likely be writing typescript

typescript is kind of the new JavaScript

without a solid understanding of

typescript you won't be able to call

yourself a senior Dev pay attention to

things like interface types and the

tooling around it and Advance features

like Union and intersection types and

for God's sake don't use any type under

any circumstances moving on to linting

and formatting every professional

environment you will work in as a

frontend developer will use tools like

es lint and prettier to lint and format

the code these tools automate your

coding standards into the development

process and you got to think of it like

gram my checking for your emails but for

your code it's a must have a Senor

developer tip here if you want to go the

xmi you can integrate these tools in

your deployment Pipeline and get hooks

with tools like husky oh this husky not

the real one finally one of the most

underrated skills a senior developer can

have it's debugging many developers

struggle with debugging because they

don't even know the tools that they can

use for debugging trust me you are

better than console log the first set of

debugging tools you want to get on your

hand are the browser debugging tools and

you want to pay special attention to the

GS debugger present in your sources tab

like you see can see in the image after

that every IDE comes with its own

debugger like the vs code debugger you

want to know how to use that and set

that up too then there are framework

specific debuggers react has its own Dev

tools and profiler for example and

Library specific debuggers like the

Redux toolkit when using Redux and

here's another senior developer tip to

make your debugging life easier make

sure you emit Source maps in the

devopment you are debugging you know

this little MJS files you should see in

your build folder they will allow you to

understand what's going wrong in your

code even when it looks like this now

that we are done with tooling time for

us to move on with front-end testing

senior developers understand that

testing is a lot more than just an

organize their test according to the

testing pyramid unit integration and

endtoend tests in the front end unit

test and end to end test are more

predominant include at least each one of

those tests when doing your next

stayhome challenge that's if you want to

pass the testing pyamid it's one of

those senior frontend mental models that

I told you about before starting this

video on top of that you should make

make sure you check out Tess for

endtoend testing how to mock the Dom

apis and framework specific libraries

like react testing library in react if

you were so adventurous get into mocks

stops and spies well not this spy and

look out for that code coverage it

usually comes up in technical interview

time to move on with frontend design

patterns whether you use angular

reactors felt at its core frontend

Frameworks are just standard tooling

which we already talked about and a

bunch of common design patterns once you

learn those patterns you can quickly

learn new Frameworks just like senior

developers do the first pattern here

it's component based architecture which

is used by most if not all major front

end Frameworks out there component

driven architecture it's actually

objectoriented programming that we

talked about applied to building uis as

a senior developer you should be able to

understand and be able to explain the

pros and cons of components Pros such as

reusability clear separation of concerns

testability and a few more cons such as

added complexity overall components are

quite cool and it should become quite po

efficient at working with them the

second most common design pattern you

will use in modern frontend is State and

State Management the state of an

application is basically the stuff you

have in the memory and state matters

because your job as a frontend developer

is to make uis that reflect that state

or manipulate that state and change the

UI that can be data you get from the

back end data inputed by the user or

simple UI interactions State it's a

behavioral design pattern which allows

you to change the behavior of your

object based on its state think about

State like the driving wheel of your car

and the pedals to change the behavior of

your car you'll have to change the

position of your driving wheel and

controls the state pattern is closely

related to the concept of a finite State

machine it might sound fancy but a

finite State machine it's anything that

has a finite number of states like a

traffic light who has three different

states red yellow and green which makes

it very predictable which is something

that programmers and Engineers overall

love when it comes to state pay

attention to the hierarchy of states

starting with component State shared

State and Global State State Management

includes the reducer pattern in the case

of shared state with use reducer and

different libraries to manage Global

state from third party libraries to

internal build functionality like the

context API Redux or T and in case you

get confused by libraries like Redux

Swit stand and recoil or whatever chill

out and keep in mind that they all

basically do the same they manage state

with their own pros and cons the third

pattern you will want to dive deep into

is the virtual Dome pattern developers

realize that the real do is quite slow

so they decided to create a copy in

memory want to change something in the

real Dome make your changes in the

virtual Dome then run a different

algorithm to find the difference it is

used by both react and View and it is

the reason why react it's so fast ACC to

the virtual D are the reconciliation

process and the diffing algorithm that I

mentioned both might come up in

interviews particularly at the senior

level so make sure you check them out

now let's move on to the next step in

this road map Advanced front end by this

time you able to build small

applications and features in the front

end and to understand why they are built

in the way they are built but simply

delivering features won't be enough to

be considered a senior developer it is

time to get deeper into the details

security might sound very confusing to

frontend developers particularly to

self-thought developers the good news is

that if you master two core fundamentals

you will have covered 80% of your web

security needs those are course and

https you will also need to be familiar

with the most common attacks like xss

cross site request forgery and how to

prevent them finally if you're going to

a teal interview with a company in the

insurance or financial sector make sure

you refresh these knowledge because they

like to focus on these things a lot I

mean they have no choice a senior front

end developer should also be familiar

with modern authentication and

authorization techniques most of them

are based on the O2 framework getting

deep into O2 is not the goal of this

video so we will leave that for some

other time but just make sure you don't

get lost in those tokens way too long

senior front developers also know that

Grandma is cheing their website and make

it easier for her by sticking to

accessibility standards important if you

want to work for government or big

institutions make sure you check out the

VC AG web content accessibility

guidelines and of course semantic HTML

and now that you are done with Grandma

your product manager comes complaining

that the website is too slow and as a

senior F developer you are supposed to

explain why that's happening and you are

supposed to make it faster well I guess

it must be the fonts I don't want you to

guess I want you to know which brings us

to the point number three in advance

front and development performance

optimization now if we think of the

internet as a dysfunctional relationship

between clients computers asking for

things and servers computers giving them

things if you want your website to be

fast then you want your servers to serve

fast and you want the clients to digest

what the server is actually sending

usually a JavaScript bundle in a fast

way which brings us to client

optimization if we are talking about

front end we're talking about client

side optimization where you'll have to

optimize your images fonts CSS and of

course your JavaScript yes that's about

everything that goes in a front end app

these days let's start with images big

heavy images will make your frontend

application slow senior developers know

how to optimize them this is most

important for certain use cases like

e-commerce besides proper caching you

can optimize images by using compression

with algorithms like gzip and broadly

converting them to Performance friendly

formats like webp resizing them into a

smaller size and providing different

image sizes using the source set

attribut optimizing your JavaScript gets

us back to the beginning of this article

module bondless you want to focus on

minification uglification and

compression techniques afterwards move

on to more advanced features like code

splitting including the prpl pattern and

static inputs as well as serers side

rendering in the case of SSR the process

of rendering JavaScript on the server

it's quite new and complex I want dive

deeper into Concepts like rehydration

for now but let me know if you want me

to make a specific video about it

finally optimizing at fre level will be

specific to the framework you use even

though angular reac and view share many

patterns performance optimization is

quite different from framework to

framework I know you've been told that

these Frameworks are built for

performance but many times they come

with hundreds of additional tools and

libraries that slow them down fter

optimization is needed in the case of

react get familiar with react lazy and

react memo as well as the used memo and

use callback hooks okay for now I w't go

deeper into CSS optimization and fonts

optimization just use a CDN it works for

almost everything here is a so you can

remember that and I know by now you

probably have a lot on your plate but

wait there's more senior frontend

developers are also required to know how

to take their applications to production

which brings us to the next point in

this video deployment also called

continuous integration and continuous

delivery deploying with a oneclick

deployment to services like netlify or

verel might be very rewarding and give

you a dopamine shot but it doesn't teach

you much about how the cloud actually

works a senior front developer should

know how to set up a deployment Pipeline

on one of the Lish Cloud platforms

providers like AWS ideally they should

also know how to scale it using services

like cloudfront do you need to get AWS

certified as a frontend engineer not

really I mean if you have the time and

resources then go ahead and do it just

be ready for a three to six months

commitment only for that a quicker way

frontend developers can Master cicd is

by trying to deploy your frontend

application to a production like

environment on one of those Cloud

platforms bewind the AWS console can be

quite intimidating because it looks like

that just make sure you shut down those

instances after you finish to avoid

going back to living with your mom

because of one AWS Bill and here's

another senior developer tip most

companies these days use Docker to

package and deploy their applications

knowing how to dockerize your react

application will help you stand out in

tangle interviews finally the last top

in this road map front end architecture

senior frontend developers know how to

avoid their application becoming

terrible spaghetti code monsters current

software architecture Topics in the

front end gather around two main topics

Micron end and server side rendering oh

there's actually a third one but you'll

find it out at the end of this video

let's get going with micro front ends

micro front ends are to the front end

what microservices are to the back end

they break up big monolithic front end

applications into smaller ones which

looks like this our monolith is first

split between front end and back end

then the back end splits into

microservices they know how to do that

they've been doing it forever and

finally our front end application will

have to split into small tiny front end

application which sounds great because

now you can scale your team micr front

ends can become very very complex they

can become a hey integrating different

apps in the same browser window it's

hard on top of that you'll have to make

sure the user experience is consistent

across those different application check

out iframes and web components microf

fronts are a very cool topic for you as

a frontend developer because they will

push your knowledge to the Limit and

given that when you build microservices

you operate at the edge of Frameworks

your understanding of the fundamentals

will really pay off here let's move on

with Ser side rendering because hey the

javascri community decided client side

rendering spa and 155 tools were not

enough and we actually want to party

paron render Like It's 1999 Ser side

rendering is the new cool kid in town

and it means like the name indicates

rendering your JavaScript application on

the server first there's one big problem

with that your JavaScript application

was not meant to be rendered on the

client so why the heck do we want to

render on the server first well

performance and SEO sending a

pre-rendered version of your application

to the client means that the user won't

have to wait for that big JavaScript

bundle to be passed by the browser to

see something on the screen and that

Google will be able to easily understand

what your app is about sounds cool but

rendering on the server is quite hard

because nodejs was not buil for

rendering which is an intense CPU task

but even the harder part is to make sure

that what your rendering on the server

matches what you're rendering on the

client again I don't have the time to

rant about SSR and sjs and all that

stuff in this video so for now let's

move on to the next thing finally the

third frontend architecture topic you

want to look into it's backend for

frontend having one API for all your

front needs can be quite limiting that's

because your mobile app might require

different data than your web app in a

different format and different depth to

fix that let's break that API layer into

multiple smaller layers so which front

end will have the own back end now you

have more flexibility but of course this

comes at the cost complexity will

increase the BF F pattern will come up

pretty often in senior frontend

interviews and it will allow you to

deepen your understanding of the back

end and think about maybe you should

give full stack a try of course this

pattern has its pros and cons but that's

not the point of this video so for now

we're going to keep it short okay this

is it for today use this senior frontend

road map to take your skills to the next

level and I will see you in the next one