Hi, I saw you on frontend masters upcoming workshops section and I got very excited when I saw the topic of the workshop. Really love the content posted here and hope you continue to share your knowledge. Really appreciate what you are doing and grateful for posting content for free here. There is not a lot of content like this and hope you tackle some topics like micro-frontends etc in the future.
Hi Ray, great videos! I've had frontend system design interviews before and I feel like the interviewer will be more interested in how to approach scalability i.e what happens if my user poll is huge (imagine Twitter poll), what happens if I vote yes? then undo it? if live data, how to show the correct state of the poll? how to display voters on each poll? . It can be as complicated as you want but once we have these scalability issues, we can talk about the performance budget for asset delivery, DOM, i.e ...
Hi, Nhat. Thank you for sharing. This is really helpful You are definitely right. I didn't think about such things during the video recording and things you're mentioned worth considering. Maybe, I'll upload V2 of this video in the near future 😊
Really love these videos! Very helpful for interview prep. I do have a hard time watching sometimes because the screen moves around abruptly and it triggers my motion sickness.
Did you use this exact strategy in your interviews, wherein you first mention the structure of your solution, and then explain each part just like you are explaining in this video?
Functional requirements - it is what component should do, for example, show header and provide single/multiple choice questions, user can unvote and etc. Non-functional requirements (Quality attributes) - supported mobile devices, configurable component and etc It is incorrect to call quality attributes by functional requirements
@@FrontEndEngineer Would you be able to share a video of your journey to do the prep as FE Engineer? Not many resources I can find on the internet relevant to pure FE interview prep. May be talk about game plan that you used to prepare for the game time! Salary negotiations while dealing with multiple offers, etc. Also as a followup what its actually like to work within one of these companies, now that you have taken the role and how similar or different it is from the interviews you face as entry point.
Hey Ray, Once the user provides the render function, an HTML element. I assume that user has to bind the Onclick function with the callback which will update the state of the component. Suppose, user has provided the HTMLElement on render function, if we don't pass callback function to onclick function of HTMLElement, then how can we maintain the selected options? Can someone clarify? Pls.
Hi! One more cool video! I have one small question. You have mentioned an NPM distribution as one of the general requirements. And one of the optimization points was distribution via CDN. It sounds like a mistake or am I wrong?
Hi Denis, thank you for your comment 😊 The widget can be distributed as an NPM package and also as a which you include on your page. So, both cases apply here :)
Hi, I've made quite a lot of interviews, in 2020, so the process is a bit different everywhere. I can't mention companies right now, because of the NDA. But, I'll make the video explaining the path of preparation for Front-End interviews. Thank you for the idea.
Hi Hima, when I say - user to provide the HTML elements, it actually means - the developer who is going to use our library, and it's a common approach for developers to provide a custom render function for data.
@@konghu7642 All my videos are framework agnostic. I use common notations like Props and State because they are well-known. Props - input config object which you pass inside widget during init State - internal widget state. It has nothing to do with React and any other frameworks 😊
For example, does this poll widget only supports single selection(radio)? What are the APIs and how the payload would look like for every call in every step?
![[Front-End System Design] - Google Sheets](http://i.ytimg.com/vi/fmIiDLbLc_s/mqdefault.jpg)
![[Front-End System Design] - Google Sheets](/img/tr.png)
![[Front-End System Design] - Typeahead component](http://i.ytimg.com/vi/9mjsRrJYOWE/mqdefault.jpg)
![[Front-End System Design] - Typeahead Widget](http://i.ytimg.com/vi/9aOXGE7wAZo/mqdefault.jpg)
![[Front-End Product Design] - Netflix](/img/n.gif)
The most underrated channel I've ever seen. Everyone who has learned from these videos must make this channel more popular by sharing about it.
This channel is a gold mine. There are lots of beginner level content on UA-cam. But high quality content like this is pretty rare now days.
Surprisingly few likes to this high quality content. Thank you for your effort!
Thank you 😊
Hi, I saw you on frontend masters upcoming workshops section and I got very excited when I saw the topic of the workshop. Really love the content posted here and hope you continue to share your knowledge. Really appreciate what you are doing and grateful for posting content for free here.
There is not a lot of content like this and hope you tackle some topics like micro-frontends etc in the future.
Please continue the playlist, it's been a long time since you uploaded new content. You are my one of the best teacher.
This was great, still the most relevan frontend architecture videos I could find!
this is the cool system design video for frontend. thank you
Hi Ray, great videos! I've had frontend system design interviews before and I feel like the interviewer will be more interested in how to approach scalability i.e what happens if my user poll is huge (imagine Twitter poll), what happens if I vote yes? then undo it? if live data, how to show the correct state of the poll? how to display voters on each poll? . It can be as complicated as you want but once we have these scalability issues, we can talk about the performance budget for asset delivery, DOM, i.e ...
Hi, Nhat. Thank you for sharing. This is really helpful
You are definitely right. I didn't think about such things during the video recording and things you're mentioned worth considering.
Maybe, I'll upload V2 of this video in the near future 😊
Thanks for this awesome content dude. I have placed in a top unicorn startup organisation preparing system Design from your videos.
I'm really happy that my videos helped you!
Really love these videos! Very helpful for interview prep. I do have a hard time watching sometimes because the screen moves around abruptly and it triggers my motion sickness.
Good stuff Ray !! Would be interested in more such videos
Thanks man ! You are awesome !!!
Where I can read more about the embeddable integration? I never heard about it before. Thanks in advance!
embed.ly/providers - this is a good start
Really great and insightful ✅✅💯✨.
what app is he using to draw
What diagramming software are you using in these videos?
Great content 💯 but missing one thing imo; the error state
Did you use this exact strategy in your interviews, wherein you first mention the structure of your solution, and then explain each part just like you are explaining in this video?
Thank you❤. Does "readonly: boolean" means allow the user to vote (if false) and allow user to only see results (if true). Am i correct?
correct!
can someone explain what renderEditItem and renderReadItem are?
Functional requirements - it is what component should do, for example, show header and provide single/multiple choice questions, user can unvote and etc. Non-functional requirements (Quality attributes) - supported mobile devices, configurable component and etc
It is incorrect to call quality attributes by functional requirements
I wonder whether you got a FAANG offer 😁 And thank you for the FE design video series!
Thank you, I've got multiple offers from FAANG, and decided to go with one of the letter 😀
@@FrontEndEngineer Would you be able to share a video of your journey to do the prep as FE Engineer? Not many resources I can find on the internet relevant to pure FE interview prep. May be talk about game plan that you used to prepare for the game time! Salary negotiations while dealing with multiple offers, etc. Also as a followup what its actually like to work within one of these companies, now that you have taken the role and how similar or different it is from the interviews you face as entry point.
Hey Ray,
Once the user provides the render function, an HTML element. I assume that user has to bind the Onclick function with the callback which will update the state of the component.
Suppose, user has provided the HTMLElement on render function, if we don't pass callback function to onclick function of HTMLElement, then how can we maintain the selected options?
Can someone clarify? Pls.
Event delegation will handle this situation
@@RashidAzar Thanks but If we want more information about the poll option then?
I can not understand onvote in min 12:22
Hi!
One more cool video!
I have one small question. You have mentioned an NPM distribution as one of the general requirements. And one of the optimization points was distribution via CDN. It sounds like a mistake or am I wrong?
Hi Denis, thank you for your comment 😊
The widget can be distributed as an NPM package and also as a which you include on your page. So, both cases apply here :)
Can you make a video postmath of interviews about the type of questions asked and the experience overall please
Hi, I've made quite a lot of interviews, in 2020, so the process is a bit different everywhere. I can't mention companies right now, because of the NDA.
But, I'll make the video explaining the path of preparation for Front-End interviews. Thank you for the idea.
@@FrontEndEngineer Yea please that would be awesome!
Hey, great video! One question, asking the user to provide HTML Element, wouldn't it compromise the security?
Hi Hima, when I say - user to provide the HTML elements, it actually means - the developer who is going to use our library, and it's a common approach for developers to provide a custom render function for data.
what is brottle?
Do you mean brotli?
Why are the states mostly the same thing as the props? It should be considered as an anti-pattern to derive states from props
It's not an anti-pattern here, because we're away from React and other frameworks. We keep in-state what we need during widget initialization 😊
@@FrontEndEngineer I don't get that. What do you mean away from React? If it's not designed for React, what did you mean by Props and States design?
@@konghu7642 All my videos are framework agnostic. I use common notations like Props and State because they are well-known.
Props - input config object which you pass inside widget during init
State - internal widget state.
It has nothing to do with React and any other frameworks 😊
@@FrontEndEngineer Gotcha! Thanks for the reply!
i think in poll view(view mode) we don't need vote button.
I think you mixed up the functional requirements with the non functional requirements. Great video non the less.
Anyone else cmd+tab over to Slack every time he got a message?
If I were to give this question, I don't think this answer has hitten the major points I want to know - component design.
For example, does this poll widget only supports single selection(radio)? What are the APIs and how the payload would look like for every call in every step?
Good content, voice is not clear at all, People just skip the video and move on
you can skip, its clear.
avoid his comment guys