[Front-End System Design] - Google Sheets

Hi everyone. This is the new episode of Front-End System design. Today we're going to become google engineers and try to design a Google Sheet App. That's a quite complex application that has many interesting design decisions that we can make. I'm looking forward to your comments and suggestions 🍻

00:00 - 1. Start
03:14 - 2. General Requirements
04:34 - 3. Specific Requirements
05:57 - 4. Action Plan
07:01 - 5. Design Consideration
08:10 - 6.1 Rendering Engine: Canvas
09:21 - 6.2 Rendering Engine: DOM
10:43 - 6.3 Rendering Engine Decision
12:02 - 7. High-level components hierarchy
13:03 - 8. Virtualisation
24:02 - 8.1 Article recommendation
25:21 - 9. Dependecy Resolving
32:52 - 9.1 Great video about topological ordering
33:13 - 10. Formula Parsing
35:03 - 11. State Management
38:58 - 12. Optimisation
41:14 - 13. Accessibility

#systemdesign #frontend #frontenddev

[indrajeetnikam]

I've watched every video in your FE System Design playlist so far and I must say, 2nd the season is a huge bump in the quality of explanation and presentation. Thanks for your fantastic contribution to the community ❤

[algoseekee]

Oh boy, that "oh boy" melted my heart! Thanks for the new season, keep up the good work! ❤

[Oxxxyminogg]

Thank you so much for your videos. Thanks to you I passed my System Design interview! Keep going!!

[ardaktileu]

Thanks for sharing the video! Looking forward to the next one 😀

[weixing]

Great video! I learned so many things out of it. Thanks!

[evandroLG]

This is a gem! Thanks for sharing all this knowledge dude! :)
Looking forward to seeing the next video about Google Calendar! :D

[cherniaev]

Thank you for the awesome content. Keep going, we love it!

[mikhailvyuzhanin]

This is perfect. Add a little bit of front-end and back-end interaction, please

[eango]

i just got rekted by this question in a major way on an interview so this is helpful for sure 🤣

[DK-oxze]

At 18:19, I don't think that absolute positioning or using 3D transform will prevent a reflow. What it will do is create new layer. But any dom manipulation you do like changing width of cell will still be done on the main thread.

[comingfall]

Thanks a lot for this amazing playlist, i would really like if you would do a system design over Spotify

[gauravkesarwani]

I cannot find the link to the article recommendation you mentioned at 24:02 of the video

[djslimcodes]

@33:45 shunting yard yes but how would you use dijksra for parsing algorithm?

[КонстантинСуркин-ьч]

Great video!

Can you review how to develop and implement a text editor like CKEditor/tinyMCE/Google Docs/Notion with collaborative editing? I think it's very interesting and hard.

[skadermen]

hi. thx for the great video)
On 23:00 you are talking about keeping the height of the table after moving the elements - don't you think that you don't need any margins/paddings because your rows are positioned absolutely and what you need is only to update the height of the parent container?

[gauravkesarwani]

Do you also have code for the scrolling logic with intersection observer and how to re-use existing elements from DOM buffer ? I am wondering what would be the DOM api's to accomplish the re-use logic.

[guohaolay]

Using CSS to adjust position of the table cells will break accessibility entirely, ie tab order does not change

[rahatsaini]

Hey
Can you do a system design of Jira active sprint board.

[eolculnamo]

Thanks so much for these! Do you think Flutter Web (when it matures) will be a good tool for apps that benefit from working in canvas?

[ankithtv]

Great job.
How we recycle elements if new elements have different styles? example in google sheet we can resize height of cell