contents: reorganize system design content
This commit is contained in:
Yangshun
parent
4c259ff02c
commit
d3763a56c9
|
|
@ -44,7 +44,7 @@ What even is Front End system design?! Learn more about them and how to ace thes
|
|||
|
||||
### 👩💻 Coding Questions
|
||||
|
||||
Coding questions are an entirely different ball game for Front End interviews. We tell you how to prepare for them (hint: not LeetCode).
|
||||
Coding questions are an entirely different ball game for Front End interviews. We tell you how to prepare for them (hint: not just LeetCode).
|
||||
|
||||
[**Learn more**](https://frontendinterviewhandbook.com/build-user-interfaces/)
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Front End Algorithms
|
|||
sidebar_label: Algorithms
|
||||
---
|
||||
|
||||
Front End engineers are also Software Engineers after all, and it's an expectation that Front End engineers have basic competency in algorithms and data structures. Is it possible and reasonable that you will be asked to solve algorithmic questions during your front end interviews and most likely you will be expected to use JavaScript.
|
||||
Front End engineers are also Software Engineers after all, and it's an expectation that Front End engineers have basic competency in algorithms and data structures. It is possible and reasonable that you will be asked to solve algorithmic questions during your front end interviews and most likely you will be expected to use JavaScript.
|
||||
|
||||
Trees are a very common data structures in Front End because the DOM is a tree, so if you have to prioritize, definitely focus on being good at tree data structures.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,19 +4,29 @@ title: Build User Interfaces
|
|||
|
||||
Many Front End engineers spend a lot of time building UI, and building a UI component is a good way to assess someone's familiarity in the three biggest aspects of front end - HTML, JS, CSS.
|
||||
|
||||
## Examples
|
||||
|
||||
- Tabs
|
||||
- Media Gallery
|
||||
- Accordion
|
||||
- Other possible components - [Bootstrap](https://getbootstrap.com/docs/4.0/components/)
|
||||
|
||||
Companies that ask UI components questions usually ask candidates to code in one of these three ways:
|
||||
Companies that ask such questions usually ask candidates to code in one of these three ways:
|
||||
|
||||
- [Codepen](https://codepen.io) (or some other online editor with preview) - You get to visualize the output and iterate on the solution
|
||||
- BYOE (Bring your Own Environment) - Candidates bring their own development environment/laptop and free to choose whether they want to do local development using their own editors or use online environments like codepen.io or codesandbox.io. This is the most ideal scenario that benefits candidates, but is usually only done during on-sites
|
||||
- BYOE (Bring your Own Environment) - Candidates bring their own development environment/laptop and free to choose whether they want to do local development using their own editors or use online environments like codepen.io or codesandbox.io. This is the most ideal scenario that benefits candidates, but is usually only done during on-sites. You can usually use a JavaScript framework/library and in that case you are recommended to use tools that help you scaffold a fresh app where you can start coding immediately (e.g. `create-react-app`, `vue-cli`). You don't want to be spending time during the interview doing unnecessary plumbing that doesn't give your interviewers additional useful signals
|
||||
- Whiteboard - Candidates have to write all the required HTML, JS, CSS on the whiteboard. There's no preview, no autocomplete, no online documentation to help you; you're totally on your own. So far Facebook and Google are the only companies that are known to do whiteboard-style for front end interviews
|
||||
|
||||
## Examples
|
||||
|
||||
- Components
|
||||
- Tabs
|
||||
- Accordion
|
||||
- Photo gallery
|
||||
- Other possible components - [Bootstrap](https://getbootstrap.com/docs/4.0/components/)
|
||||
- Apps
|
||||
- Sortable Data Table (with extensions for filtering)
|
||||
- TODO list
|
||||
- Kanban Board
|
||||
- Games
|
||||
- Tic-tac-toe Game
|
||||
- Whack-a-mole Game
|
||||
- Tetris Game (advanced)
|
||||
- Snake Game (advanced)
|
||||
|
||||
## Considerations
|
||||
|
||||
After you complete (or even before you start on) the question, think about these potential issues (where relevant). You may or may not have to handle them, so you can always clarify with the interviewer before starting on it so that you don't write too much/little code.
|
||||
|
|
|
|||
|
|
@ -3,27 +3,31 @@ title: Front End System Design
|
|||
sidebar_label: System Design
|
||||
---
|
||||
|
||||
"System" here typically refers to front end systems, which are different from the typical distributed system design questions for Software Engineering interviews. This format of question is quite similar to the ["Build User Interface" format](./build-user-interfaces.md) and there's a significant amount of overlap between that and this - you will likely need to do some design in that and also do some coding here to illustrate your ideas/app state format.
|
||||
"System" here typically refers to front end systems, which are different from the typical distributed system design questions for Software Engineering interviews. The question topic asked is quite similar to the ["Build User Interface" format](./build-user-interfaces.md) but with more focus on architecture and design. There's a significant amount of overlap between that and this - you will likely need to do some design in that and also do some coding here to illustrate your ideas/app state format.
|
||||
|
||||
The difference between this section and the ["Build User Interface" format](./build-user-interfaces.md) is that the questions here are usually larger. If the session is only half an hour, candidates are expected to talk about the design tradeoffs, possible implementations, instead of coding it out. Because this format of questions involve multiple components and knowledge across the web stack, candidates usually do not have to go very deep into the lower-level details and can keep the discussion at a higher level.
|
||||
|
||||
Many of the topics mentioned in the ["Build User Interface" format](./build-user-interfaces.md) are also relevant for front end system design - API design, scalability, performance, user experience, i18n, accessibility, security. Candidates should take the initiative and bring these topics up and lead the discussion with the interviewer. The more advanced topics such as performance, accessibility and i18n are what differentiates senior candidates from the more junior ones.
|
||||
Many of the topics mentioned in the ["Build User Interface" format](./build-user-interfaces.md) are also relevant for front end system design - API design, scalability, performance, user experience, i18n, accessibility, security. Candidates should take the initiative and bring these topics up and lead the discussion with the interviewer. The more advanced topics such as performance, accessibility and i18n are what differentiates senior candidates from the junior ones.
|
||||
|
||||
If you possess a laptop and are asked to code them out, you usually can use a JavaScript framework/library and in that case you are recommended to use tools that help you scaffold a fresh app where you can start coding immediately (e.g. `create-react-app`, `vue-cli`). You don't want to be spending time during the interview doing unnecessary plumbing that doesn't give your interviewers additional useful signals.
|
||||
## Structure
|
||||
|
||||
## Basic Examples
|
||||
1. Requirements clarifications/alignment
|
||||
1. Components Architecture
|
||||
1. API Design
|
||||
1. Data Model Design
|
||||
1. Extra Stuff
|
||||
- User Experience
|
||||
- Performance
|
||||
- Accessibility
|
||||
- i18n
|
||||
- Security
|
||||
|
||||
- Tic-tac-toe Game
|
||||
- Whack-a-mole Game
|
||||
- Sortable Data Table (with extensions for filtering)
|
||||
## Examples
|
||||
|
||||
## Advanced Examples
|
||||
|
||||
If you have to implement these, usually you are given more than half an hour
|
||||
|
||||
- WYSIWYG Editor
|
||||
- Tetris Game
|
||||
- Snake Game
|
||||
- Photo gallery
|
||||
- Chat application
|
||||
- News feed
|
||||
- Video watching application
|
||||
|
||||
## Helpful Articles
|
||||
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ function Home() {
|
|||
<p>
|
||||
Coding questions are an entirely different ball game for
|
||||
Front End interviews. We tell you how to prepare for them
|
||||
(hint: not LeetCode).
|
||||
(hint: not just LeetCode).
|
||||
</p>
|
||||
<a href={useBaseUrl('build-user-interfaces')}>
|
||||
<strong>Learn more</strong>
|
||||
|
|
|
|||
Loading…
Reference in New Issue