A hygiene intervention for NPM

This week we’ve got NPM getting help with its hygiene, React Native vs. Flutter, and one surefire way to not learn TypeScript. Welcome to #90.

---

Old-school hygiene interventions

A hygiene intervention for NPM

NPM turned 12 years old in January — and like most other tweens, its hygiene can be pretty questionable at times. (Take one look into your node_modules if you don’t believe me.)

So like any good friend, Feross Aboukhadijeh and his team staged an intervention for NPM last week when they launched Socket.dev — a new security tool that improves your node_modules hygiene in a few meaningful ways.

How it works: Socket monitors updates to your NPM packages and identifies malicious package updates. This type of vulnerability is called a supply chain attack (log4j made them famous), which typically happen for the following reasons:

• Name Confusion — noblox.js-proxied(good) vs noblox.js-proxy(bad) or mirroring internal package names on public NPM registry
• Hijacked Packages — packages stolen or sold to bad actors
• Install Scripts — running malicious code during installs
• Obfuscation — code published to NPM different than what’s shown on Github
• Political agendas — 🥲

(Check out Socket’s article for the full story.)

This stuff can get pretty scary, considering that ~90% of the code in your app comes from open source, so it’s nice to know there’s a modern solution for avoiding these issues. Fortunately, Socket is free for all open-source projects and can be installed as a GitHub app.

Bottom Line: I guess this makes Socket.dev the Axe Body Spray for all of NPM’s hygiene issues (except it actually works). Now they just need to name their new releases after scents like Phoenix and Essence to really drive the metaphor home.

---

Just ship it [sponsored]

We finally used Retool. And it’s better than we thought.

Story time: Two weeks ago, we decided it was time to start paying attention to a few stats — like how many new people subscribed to Bytes, how they found us, etc. (It only took us 88 issues lol.)

So like any good developers, we spent a few hours arguing about discussing what data we wanted, how to get that data, and how to display it. The whole process was taking forever. And when someone mentioned that we “might want to set up a SQL database for tracking analytics,” I knew we’d gone off the rails.

But then I remembered Retool.

So we signed up for a free trial — and it took me literally one afternoon to connect to all of our third-party data sources and to set up all the charts, tables, and graphs we could ever want.

It’s easily saved us 20+ hours of engineering time already. And since our free trial is about to run out, we’re actually going to (gulp) start paying for it. (Truly the highest praise I can give.)

Thankfully, startups can apply to receive one year for free — so I’ll try that out first 🙏

---

Might as well enjoy it

Battle Royale: React Native vs. Flutter

Let’s get ready to rumble… cross-platform style.

There’s been a lot of buzz about Flutter vs. React Native lately, so we wanted in on the drama too. *Ding ding*

In the red corner we’ve got React Native. It burst onto the scene back in 2015 to save our souls from hell PhoneGap, enabling web developers to use their JavaScript and React skills to build cross-platform mobile apps — and eventually, desktop apps, smart TV apps, and even web apps (full circle).

In the blue corner we’ve got Flutter. It emerged in 2017 and combines Google’s Dart programming language with a high-performance graphics engine that can compile to native machine code or JavaScript. It’s been used to build everything from the infotainment system in your mom’s Prius to the Wallace & Gromit AR mobile app (which I do not recommend playing while on edibles).

React Native started off with a big lead, but Flutter has flipped the script over the last couple years — catching up to RN and even surpassing it in popularity (depending on who you believe) for three main reasons:

• Better developer experience (AKA docs that aren’t terrible)

• Better performance, thanks to the way its C/C++ rendering engine compiles to native code

• Easier learning curve. It’s counterintuitive, but with Flutter you only need to learn how to use Dart and Flutter’s fairly straightforward widget system. React Native lets you use your React/JS knowledge — but it often requires you to learn a bunch of other native technologies in order to build what you want (even though that can often produce a more native-feeling UI).

React Native has addressed some of these issues in recent months by making substantial improvements to its docs and its core. And RN can still bank on its strong ecosystem and the all-powerful Atwood’s Law to drive it forward. There’s a reason that there are a lot more world-class React Native apps than Flutter apps today.

Bottom Line: It’s clear that both Google and Meta have strong financial incentives to continue investing in these projects, so there probably won’t be a definitive winner. The good news is we’ll probably all benefit as the “write once, run anywhere” revolution keeps moving forward.

---

Cool Bits

1. Nick Scialli wrote about how Solid.js feels like what he always wanted React to be. Well Nick, I always wanted React to be a suitable replacement for my father’s love and affection, but we can’t all get what we want.

2. MDN got a makeover, and -surprise!- everyone hates the UI changes (tale as old as time).

3. The Kendo UI team made a good tutorial on How to implement rich Angular notifications with Kendo UI. [sponsored]

4. ICYMI we created a video on the wonderful history of React and how it got to where it is today.

5. Lax.js is a lightweight vanilla JS library for creating cool animations when you scroll. The ReadMe states that (regardless of your gender) if you use this library, you have to affectionately refer to yourself as a “lax bro” at least once a month. I don’t make the rules.

6. Brandon Bayer (creator of Blitz.js) just released v1.0 of Flightcontrol — (another) new deployment platform that claims to be less limiting than Heroku and less complex than AWS.

7. Aaron Krajeski wrote a love letter to Canvas2D. It didn’t make me get quite as emotional as the first time I watched Kat Stratford pour her heart out to Patrick Verona — but it was still very touching.

8. Stefan Baumgartner wrote about How not to learn TypeScript, but he forgot one technique — learning how to play all 13 songs from The Legend of Zelda: Ocarina of Time on your recorder. I spent 6 months doing that during quarantine, and I can promise you that it did not help me learn TypeScript at all.