Frontend Developer Roadmap 2024: 6 Clear Steps To Senior
Summary
TLDRThis 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
🚀 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.
🛠️ 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.
🔨 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.
🎯 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.
🌐 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.
Mindmap
Keywords
💡Frontend Developer
💡Mental Models
💡Fundamentals
💡Object-Oriented Programming (OOP)
💡Functional Programming
💡CSS Fundamentals
💡Module Bundlers
💡CSS-in-JS
💡TypeScript
💡Debugging
💡Performance Optimization
💡Micro Frontends
💡Server-Side Rendering (SSR)
💡Backend for Frontend (BFF)
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
Посмотреть больше похожих видео
The Complete Web Development Roadmap [2024]
The Complete Frontend Developer Roadmap [2024]
No-Nonsense Frontend Engineering Roadmap
Beginner to Hired in 2024: Niche Front-End Developer Roadmap
🤔 High-Salary Job with this Django Roadmap? | Advanced Django Developer roadmap || Code with SJ
Tổng hợp Full Lộ Trình và các Công Nghệ Web nên học năm 2024
5.0 / 5 (0 votes)