Follow

I am implementing a drag and drop file input in React for work, and my instinct was to build my own using the HTML5 drag & drop API stuff. I was curious and looked at our old implementation, which uses a library called react-dropzone to handle the drop zone stuff. It's 683kb unpacked? And yes, it supports many configurations of drag & drop but our app only needs 1 configuration. Why introduce a huge blackbox dependency that wraps the browser API when you could just... use the browser API...

· · Web · 2 · 0 · 20

If my component was

1) very complicated, needing to handle lots of different state
2) central to the UX of our app

then I would absolutely use this well-tested, widely-used library. It would be worth the cost in both added external dependency and file size. But the library gets 1 million downloads a week and I bet most of those are use cases where this is sheer overkill.

@darius i wonder if it's for backwards compatibility with older browsers but more likely it's just bloat

@muffinista I checked it's not -- it's really about providing toggleable features for lots of different UX edge cases

@darius yeah that's a bummer. i had a similar issue lately with toast/notification libraries. they're all huge! i wrote one that's ~30 lines of css and js

@darius a lot of people i’ve worked with truly only see cost in one way: how long will it take to implement this feature

it is misery

i’m glad you’re considering this stuff! if only bc it heartens me to know all projects aren’t equally myopic

@mood haha yeah. I mean I am reimplementing old code from the ground up so the N hours of implementation time that this library saved the devs 2 years ago is turning into ~4N now. (And yeah I get that sometimes you need to ship something NOW and sometimes that means you download a thing that does the thing. But also this particular component could have been made in... idk ~3 hours?)

@darius Web standards change all the time and people still use ancient browsers that don't support them, so people build their own "standards" as libraries which try to account for all of this...which is cool in theory except these web dev libraries seem to rise and fall just as often as the standards they're trying to replace....IMO, in the end you often just trade one big, constantly shifting pile of bloat for another...

TL;DR:
https://xkcd.com/927/

@admin right, that's the thing! I used to be a "use a library, the library will update so I don't have to" and that is just... almost never true in practice. I've come back around to "at least my own code was written by me so I can fix it"

@darius Yup! On the one hand, computing is entirely built upon layers of abstraction, "use the library" is a very core concept of software engineering. On the other hand...some libraries ultimately aren't providing much abstraction in the end, and you've gotta balance that against the additional resource consumption, the loss of control, the effort of learning the library....a lot of libraries feel to me like they're merely a fraction of a true abstraction layer and therefore not worth it

Sign in to participate in the conversation
Friend Camp

Hometown is adapted from Mastodon, a decentralized social network with no ads, no corporate surveillance, and ethical design.

<svg xmlns="http://www.w3.org/2000/svg" id="hometownlogo" x="0px" y="0px" viewBox="25 40 50 20" width="100%" height="100%"><g><path d="M55.9,53.9H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,53.9,55.9,53.9z"/><path d="M55.9,58.2H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,58.2,55.9,58.2z"/><path d="M55.9,62.6H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,62.6,55.9,62.6z"/><path d="M64.8,53.9c-0.7,0-1.3,0.6-1.3,1.3v8.8c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-8.8C66,54.4,65.4,53.9,64.8,53.9z"/><path d="M60.4,53.9c-0.7,0-1.3,0.6-1.3,1.3v8.8c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-8.8C61.6,54.4,61.1,53.9,60.4,53.9z"/><path d="M63.7,48.3c1.3-0.7,2-2.5,2-5.6c0-3.6-0.9-7.8-3.3-7.8s-3.3,4.2-3.3,7.8c0,3.1,0.7,4.9,2,5.6v2.4c0,0.7,0.6,1.3,1.3,1.3 s1.3-0.6,1.3-1.3V48.3z M62.4,37.8c0.4,0.8,0.8,2.5,0.8,4.9c0,2.5-0.5,3.4-0.8,3.4s-0.8-0.9-0.8-3.4C61.7,40.3,62.1,38.6,62.4,37.8 z"/><path d="M57,42.7c0-0.1-0.1-0.1-0.1-0.2l-3.2-4.1c-0.2-0.3-0.6-0.5-1-0.5h-1.6v-1.9c0-0.7-0.6-1.3-1.3-1.3s-1.3,0.6-1.3,1.3V38 h-3.9h-1.1h-5.2c-0.4,0-0.7,0.2-1,0.5l-3.2,4.1c0,0.1-0.1,0.1-0.1,0.2c0,0-0.1,0.1-0.1,0.1C34,43,34,43.2,34,43.3v7.4 c0,0.7,0.6,1.3,1.3,1.3h5.2h7.4h8c0.7,0,1.3-0.6,1.3-1.3v-7.4c0-0.2,0-0.3-0.1-0.4C57,42.8,57,42.8,57,42.7z M41.7,49.5h-5.2v-4.9 h10.2v4.9H41.7z M48.5,42.1l-1.2-1.6h4.8l1.2,1.6H48.5z M44.1,40.5l1.2,1.6h-7.5l1.2-1.6H44.1z M49.2,44.6h5.5v4.9h-5.5V44.6z"/></g></svg>