Npm Install is Easy

Npm install is easy, but the results may not be simple.

The claim of easy

I saw a Hackernews headling: "Make SVGs interactive in React with 1 line".

It caught my eye. It sounded cool. I still think it is. But what a funny let-down I got when I was linked off to the "Show HN" svggles homepage and saw the instructions. The line? Install a package, then:

import { RotateObject } from 'interactive-illustrations';

Lol! The "one line" is an import of a bunch of code.

What you get

The npm package homepage link is 404ing, but I think I found this library on Github independently.

So what does it take to make your illustration interactive? Once you decorate your svg markup with needed attributes, then you invoke a JS library that has several illustration options. The animation featured on the homepage is the eyes that follow the mouse. The module for this first-level library is 141 lines of code. What does it import? That's code that's integrated with the React framework, calling into its APIs. To do the animation, it is also importing a full animation library, gsap. The used gsap API surface area is small, using gsap.to in order to handle tweening. How does that work? I'm not entirely sure, but its codepath starts in gsap-core, then invokes a new Tween animation which is an extensive object in an inheritance tree of state and behavior. This object begins in its file on line 2344. I don't how many of those lines are used; I didn't follow the rabbit hole to its terminus. Surely not all of them, but enough.

Easy != simple

I'm not knocking the accomplishment of animating things. Animating svgs in a general implementation takes quite a bit. Gsap is respected and can be used to create beautiful work. Then there's the creative application of the interactive-illustrations library on top of it. I dig it.

The thing that alerts me is the claim of "in one line". It reiterates the trap that we often fall for and the blind spot that we often have.

The trap: we equate easy with simple.

The blind spot: we often don't count the cost of the code we acquire easily.

You're reliant on two frameworks now. Framework, in this case, essentially just means a lot of code needed to support your feature. You get their general use cases, their bugs, their updates and breaking changes, their setup and ceremony. One line turned into a hundred lines, which turned into hundreds of more lines. These are lines you don't fully understand or control.

This is surely not the worst offender for "gem install hairball", to quote Rich Hickey, the most eloquent on this subject. But that headline of "with 1 line" is so illustrative of this common challenge.