[Frontend System Design] - Notion

Подписаться 19 тыс.

Просмотров 19 тыс.

50% 1

Greetings, everyone! Welcome to the latest episode of Front-End System Design. Today, we're going to explore the design of a Notion-like editor. It's a bit challenging to fit-in all the concepts for such an app, but we'll make an effort to focus on designing a highly extendable Markdown-like editor. This episode will dive into the combination of Frontend and OOM Design.
Please consider subscribing to the channel! Thank you :)
Telegram: t.me/frontend_engineer_blog
Medium: / evgeniiray
LinkedIn: / evgenii-ray
00:00:00 1. Intro
00:01:07 2. Notion Overview
00:02:40 3. System Design Plan
00:05:08 4. General Requirements
00:06:47 5. Advanced features requirements
00:07:54 6.1 Mock-up
00:08:41 6.2 High-level system components diagram
00:16:04 6.3 Types of components
00:18:27 7. Lexer & Parser architecture
00:29:15 8. Notion Database Design
00:36:00 9. API Design
00:44:16 10. Performance Optimization
00:52:06 11. Accessibility (very briefly)
00:54:35 12. Summary
viewer.diagrams.net/?tags=%7B...
#systemdesign #frontend #frontenddev

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@urFavoriteEva 2 дня назад

thank you for sharing your mythology of breaking problems 3rd eye achieve :)

@tuku_mann 7 месяцев назад

Thank you a lot for the extremely useful content! I appreciate what you're doing ❤

@robertkameni5975 7 месяцев назад

You always give the best. Thank you so much

@lokeshkhati8413 7 месяцев назад

Thank you so much for this quality content, you are the best❤

@mohdmuneeb4851 Месяц назад

I think I am in love with this. thank you very much!

@ardaktileu4481 7 месяцев назад

Thanks for sharing, Ray!

@essam124x 7 месяцев назад

thanks so much for your efforts!

@zdargahi 6 месяцев назад

very insightful, there are so many few good content on FE system design, please keep up the great job

@IAfanasov 6 месяцев назад

I'm confused with the parser and lexer. The lexer takes the rules, the string and parse it into a ComponentToken. That information is fed to parser. The parser renders an HTMLElement from a component token. It does look like the job of lexer is to parse and the job of parser is to render. Why does the names convey a different idea?

@ArtemKuznetsovTV 7 месяцев назад

Nice, thanks!

@HEPEAJIbHOCTb 7 месяцев назад

Thank you!

@aryanrahman3212 3 месяца назад

Great work! Zooming into the parts of the design might help! But you shared the link to the diagram so its ok!

@aryanrahman3212 3 месяца назад

a bit confused about syncing server and client data

@ronaldomaia 7 дней назад

The content is good, but I don't know why is blurred.

@mingyueliu7779 7 месяцев назад

thanks for all your videos, i appreciate it, can you make it more like a "Drawling application (lucid chart)", "File-storage application(google drive, dropbox)", or "Rider-sharing app (Uber)" please?

@FrontEndEngineer 7 месяцев назад

Thanks for sharing great ideas! It's in my plan :)

@oleksandrkhivrych6349 Месяц назад

can you share your notion page, looks quite useful :)

@J1MKAKA1N 4 месяца назад

Thanks! I think you pay too much atterntion to the component API design. In the real 45 minutes intreview setting you won't have time for it. And would disagree about dumping websockets: 1) they're different from HTTP protocol, so version doesn't matter 2) with REST you'll have too much load on the backend, possible lost updates and junky experience 3) when in the future, collaboration part will be required, you will have to basically do a major rewrite of the app

@bevocodes 6 месяцев назад

"websockets are not supported in http2"- a bit confused by this. My understanding is they are supported, and have been for years?

@ucnguyenphanhuynh3134 5 месяцев назад

Hello, could you share your resume and talk about it, thanks.❤

@saisagarsharma 7 месяцев назад

first like the video and watch it 😀

@ib6435 6 месяцев назад

Helpful tutorial . But your filming should be better. I couldn't watch comfortably on my mobile device. You should zoom video into focused areas of the screen when explain. Everything looks so tiny.

@aryanrahman3212 3 месяца назад

Diagram link is shared in the description