Typescript + Node.js on Stackblitz

A couple of years ago I drafted a blog post on my quest to learn Typescript, Node.js, React, and a whole bunch of other stuff. I finished my quest but never published that blog article. I was and remain annoyed by how much work it takes to configure Node.js and friends on top of a normal OS. It isn’t even Node.js per se, but everything around it to make it work right – IDEs, system packages, browsers, etc. We can debate whether or not I’m spoiled by Java or merely delusional (comments are welcome), but all my concerns were addressed by Stackblitz.com.

I don’t remember how I heard of Stackblitz, but I’m in love. Stackblitz is an online IDE for web languages that integrates with Github. (I hope one day they add compiled languages.) All of the code you write runs right in your web browser, including Node.js projects. This is especially impressive for Node.js because they are backend projects that execute through the Node.js server. Stackblitz accomplishes this using “webcontainers,” which are browser-based containers that run a minimal OS. That is, they run a tiny little OS in your browser that runs the Node.js server and related tools.

Stackblitz project dashboard

Node.js is configured to run Javascript by default. That’s not my cup of tea since I prefer strongly typed languages. I also like to start every project with testing enabled because I practice test-driven development religiously. So, I created a bare Node.js project in Stackblitz and installed typescript and jest for testing, then pushed it to a new Github repo using the built-in integration. Now I can just fork from this project for all my new Typescript projects, either in Stackblitz or Linux.

I’ve shared some screenshots below of this project running across devices, which is why I love web IDEs so much. Stackblitz is now my favorite though because of its simplicity, minimalism, and cost structure. It is especially nice how well it maintains its look and feel across devices and operating systems. That’s a hallmark of progressive web apps and one of the reasons that for many applications such an architecture is much better than going native.

What’s next for me? I want to write some computationally challenging code and see how Stackblitz’s webcontainers handle it. I also want to see if there is a significant performance difference across browsers and devices because support is only in Alpha in Firefox. I recently (and finally!) acquired a copy of Jean Meeus’ Astronomical Algorithms, and there are plenty of nice little bits of astronomy code in there that would make really great stress tests in Typescript. I’m also going to implement a little code for computing orbital parameters using Kepler’s Laws so that I can practice rendering neat things in React. I may try Vue as well since I hear from colleagues that it is a little better suited to data-driven problems than React. Of course, let me know if you have any ideas too!

37.138 seconds to fully install and run my template project on my cellphone.
Full view of Stackblitz.com on my tablet. 35.301 seconds start time.
73.641 seconds on my ancient Linux laptop in Firefox, versus 57.734 seconds natively on the same machine.
The startup times for comparison on my Ryzen 7 laptop @ 19.658 seconds in the browser versus 16.559 seconds natively on the same machine.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s