Frontend Devs Still Need Algorithms & Data Structures
Вставка
- Опубліковано 2 лип 2024
- Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
I hear a LOT of people annoyed about having to learn data structures and algorithms. Especially frontend developers.
I get it. A lot of it feels pointless. But I promise it isn't!
Today we'll walk through a basic example of how the intuition you'll build by learning the basics of algorithms & data structures can help you write more efficient code, even as a frontend engineer.
#javascript #coding #algorithms
📚 Video Links
Source code: www.hover.dev/components/text
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
0:00 - Introduction
0:44 - High level concept
5:30 - Code walkthrough - Наука та технологія
I think algorithms specifically for frontend would be an interesting series of videos to make.
If this does well I’ll certainly think about that 👀
@@tomisloading I think it'd be a great series as I haven't found anything like it so far. As many, I've done the CS route in college so I'm familiar with Algos and DS, but it's interesting to take a frontend specific look at them.
I remember my Calc 2 Professor in college came from an engineering background, so unlike many math professors, he didn't just teach us formulas and move on, he would present us with how he had personally used many of the things we learned to solve problems as an engineer. I look at this similarly, as even in a formal CS program, Frontend Development isn't even touched on unless you take a Web Dev elective, so I think it'd be a series many frontend devs would find useful.
This is very interesting. When working on larger projects, optimization is important and one such ways is to implement efficient algorithms. Will you turn this into a series?
I will absolutely consider it!! Already have a couple of other ideas 😀
Excellent video on using binary search for text fitting! It really highlights the power of algorithms in front-end development.
However, I was curious about your decision to use binary search instead of the clamp() function in CSS. Considering clamp() can define minimum and maximum values along with a dynamic "ideal" value using viewport units, wouldn't this be a more performant and less code-intensive approach?
this is a true high quality content, would love to see more.
Wouldn’t clamp do the same thing?
tom im being honest, this was very interesting. hope for more videos like this on algorithms regarding frontend.
Awesome, you're the 4th person to comment this, super surprising for me!! Will start putting together some more ideas :)
Ok, this is great example. But i would rather use css for that kind of stuff.
Since JS work in 1 thread, you can accidentally block it and text will not resize anymore.
Totally fair! In most cases I’d do the same thing, using this more as an exercise of “what IF you had to do it within these constraints” :)
Only 77k subscribers?! This content is gold, love it!
Can we get more videos like this?
Third person to ask, so the ABSOLUTELY! :)
You have motivated me to start my own tech channel on my native language ❤
THATS AWESOME!! I'm sure you'll do great!! Others could give you much deeper advice, but if I've learned anything so far, it's all just persistence 😀
How you create your website can your provide the tech stack or can you create a video on how to render this component on live preview and having code snippet parallel to it using frontend only framework like react js
Haha I’ve had making a video similar to this on my todo list for a while so I’ll definitely get to it eventually!
@@tomisloading thank 👍
There’s no doubt binary search scales better, but how much faster is it? What if you replaced it with an O(n) algorithm, would it cause noticeable slowdown?
Well I haven't tested much, but I'd bet with a large enough viewport & small enough string! If we're talking a couple hundred loops vs 10-12 loops though, most probably won't see much of a difference. Would be fun to test where that limit is!
Okay I got curious and timed it haha.
At 1440px container width & a goal font size of 117px, linear option was averaging ~7-10ms on my machine, log (technically O(1)) was 0-1ms.
With a goal font size of 352px, linear was taking ~18ms. Log remains the same.
18ms still pretty dang fast all thing considered, but you can see how this scales poorly as we get to larger viewports etc
@tomisloading I love that you benchmarked it! I'm definitely in favor of knowing some DSA generally, but I wouldn't say this use case specifically convinces me that you *need* it.
I think use cases like caching, sets, and maps are more convincing, but to be fair most map and set usage doesn't get me much beyond ergonomics when I have benchmarked.
Most of the slowdown I've dealt with on the front end has been back ends I can't control giving a lot of data. Then the data isn't cached or sorting happens before a filter.
Another niche case was showing most recently used items on the client (we used a Binary search tree there)
I think those could be a good continuation if you decide to make more of these videos :)
Post Script: Probably getting a bit in the weeds here, but I can think of lots of cases where libraries need to use DSA. One example coming to mind is angular using Bloom Filters to efficiently search the component tree
github.com/angular/angular/blob/c213a4e15a594ff141cf312ad301128e7ed4127c/packages/core/src/render3/di.ts#L103-L140
@tomisloading I love that you benchmarked it! I'm definitely in favor of knowing some DSA generally, but I wouldn't say this use case specifically convinces me that you *need* it.
I think use cases like caching, sets, and maps are more convincing, but to be fair most map and set usage doesn't get me much beyond ergonomics when I have benchmarked.
Most of the slowdown I've dealt with on the front end has been back ends I can't control giving a lot of data. Then the data isn't cached or sorting happens before a filter.
Another niche case was showing most recently used items on the client (we used a Binary search tree there)
I think those could be a good continuation if you decide to make more of these videos :)
Post Script: Probably getting a bit in the weeds here, but I can think of lots of cases where libraries need to use DSA. One example coming to mind is angular using Bloom Filters to efficiently search the component tree
github.com/angular/angular/blob/c213a4e15a594ff141cf312ad301128e7ed4127c/packages/core/src/render3/di.ts#L103-L140
Bluwulubu... XD
I appreciate your support on my stupid intros 😂
🤦 "Promo SM"