TOC:
Why system design for FE
What do interviewers look for
Important Topics
UI/UX
Frameworks, and technologies choices
Example
Strategy
Why system design for Front-End?
Front-End is getting complex day by day.The line between Backend and Front-End is fading out. As well as, it is expected that Front-End should contribute to the design decisions of the project. Front-End developers should flag in the design meetings if Backend/APIs folks are ignoring any important aspect in the design.
What interviewers are looking for?
As a Front-End developer do you understand
How the application should be designed E2E?
What are the important parts of any application?
Do you understand which resource is the right fit and why
Do you understand the pros-cons of the design decisions
Do you understand what is required from the backend/APIs folks to make your Front-End
Do you understand the cost (price) of designing an application and how to optimize it?
Are you able to design a micro-service
Are you able to design micro-frontends
How to create and scalable repos
What are the important topics?
Database
CDN
APIs
Storage - S3, EC2, EBS
Deployment
Route53
Certificates
Analytics
Monitoring
Logs
Data Recovery
Performance
accessibility
cross-browser
SPoF (Single Point of Failure)
Scalable
Security
Micro-frontends
SEO
Reliability
Maintainability
Is UI/UX is part of the system design? If yes, then what to talk about
Yes, as a Front-End developer you should talk about UI/UX. Talk about how the UX would be?
It is important to talk about
- Performance: How your design decision is going to improve performance
- Accessibility: This will come when you will talk about UI and UX.
- Cross-browser: If any tech decision is going to impact any browser (do call out)
- SPoF: Single point of failure: How to avoid it
- Scalable: How scalable your solution is
- Security: Most important aspect, how you are going to take care of security
- Data State: How to maintain the data consistency between mobile and desktop
Shall we talk about the frameworks choices and technology choices?
Yes, it is important to talk about it. But your all decision should not be based on the frameworks you are aware of. You should focus on the solution not based on what frameworks you know.
Also, this is an important aspect of the interview. So, you should be well versed with the pros-cons of all the technology decisions you are taking.
Eg: why a non-relational database over a relational database? Why EC2 and not Lambda function? ReactJS vs Angular? SSR vs CSR etc.
How deep-dive one should go?
- At first, focus on solving the problem (not on the BEST solution).
- Then focus on optimising the solution. Talk about - BEST solution and why (pros and cons, what area would be impacted? Eg: performance will increase, SPoF will be avoided, etc.
- Now, go deep dive into the modules related to the front-end. For example: do talk about APIs endpoints, cache or local storage or DB, which DB, deployment and storage of the web app.
- An interviewer will stop you in between to ask questions. Give them time and space to them to ask the questions.
Example
You need to design a chat application.
- A user can do multiple chats with multiple users
- A user can be added to a group
- A user can be able to react with emojis on the chat(s)
- A user can be able to reply to the chat 1:1
- and a few more requirements
Step 1: Define the Scope:
- How many users are we expecting?
- How many chats in parallel can be done?
- How long is the History of chats to be maintained?
- Which emojis are to be used, and their functionality? eg: toggle, or how they will be viewed, do we need to maintain in the history of chat etc.
- Do we support multiple user chats?
- Come with numbers to know the scalability, performance, resources required etc.
OUTCOME: You should be aware of the scope and scale of the problem
Step 2: Think about solutions, Features, and Resources
- Start from web or mobile (where you feel comfortable or as per the ask of the interviewer)
- What problem we are solving here? You can’t solve all the problems in one go. So, think about the top 2-3 and start focusing on that.
- Think about resources that will be used to make a useable system
OUTCOME: You should be clear with 2-3 top requirements and what resources you will be requiring
Step 3: Let's start with the High-level design (Front-End + Back-End)
- Web interaction
- Endpoints
- Database
- Authentication
- Storage
OUTCOME: You should have a useable working design solving the top 2-3 problems.
Step 4: Let’s, deep dive, and optimize
Question: What will happen when the user is offline for a month. How you will design the experience for it? (talk about UX and UI)
- accessibility
- Performance
- Scalability
- How to scale the design
- How the older chats will be retrieved
- API design etc.
OUTCOME: An optimised design of the problem with clear pros and cons.
Strategy:
- The system design round is 60 mins approx.
- 5 mins to share problem statement
- 40 mins to solve questions
- 5 mins for Q&A.
You must do practice to place everything in 40 mins. Before the interview does practice as much as you can. You should use either whiteboard, paper, or any application such as draw.io
- Make your 40 mins interactive. Keep talking and thinking aloud. It is important talk aloud about what you are thinking and why?
- There is no correct or incorrect answer. System design is all about knowing you and your design decision skills.
- As a Front End developer, the scope would be vast. So, better to talk about scope. Ask - where do you want me to focus? Eg: Shall I just skip the FE part in detail and get into the deep of the backend, or infra or deployment etc.
- Go in the details of connecting the modules and user-journey. Eg: Where the user’s data would be stored, which API endpoint will be used to get the data, how the scalability of the storage of the user’s data if the user will increase from 10x to 100x
Happy Learning!!
You can follow me at Twitter
Top comments (11)
Wow! That was very insightful. Thanks so much for this.
I've one query though, I'm a junior dev right know. I'm starting to hear these terms around me, but how do I try to gain more understanding about these topics rather than only relying on experience..
great write up
Nice post
Great article 👍🏽🙌
This is so helpful, tks a million~
Great content, Learned a lot
Very nicely articulated article , great job
Great writeup, really liked the way things are put together.
Sharing Front-end System Design YouTube Series: youtube.com/playlist?list=PL4CFloQ... , hoping it will be useful for folks who want to dive deeper into Frontend and learn from industry experts.
The is the most well written article I have seen so far in this topic. I like that it gives general overview and then real examples.
Why are you spamming the comment section?
Do you even know what is the topic? Just sharing templates and calling it - 'what goes behind the secene??'